当前位置： 首页 > article >正文

python测试开发---js基础

article 2024/11/13 10:59:15

JavaScript (JS) 是一种广泛用于前端开发的编程语言，其主要用于实现网页的动态交互功能。要掌握 JavaScript 的基础知识，主要需要理解以下几个核心概念：

1. 变量与数据类型

JavaScript 提供了不同的数据类型，并允许通过 var、let 和 const 来声明变量。

  • 数据类型：
    • 基本类型：number（数字），string（字符串），boolean（布尔值），null，undefined，symbol，bigint。
    • 引用类型：object（对象），array（数组），function（函数）。
let age = 25;         // number
const name = "John";   // string
let isStudent = true;  // boolean
let empty = null;      // null
let unknown;           // undefined

2. 操作符

  • 算术运算符：+, -, *, /, %（取模），**（幂运算）。
  • 赋值运算符：=, +=, -=, *=, /=, %=。
  • 比较运算符：==，===，!=，!==，>，<，>=，<=。
  • 逻辑运算符：&&（与），||（或），!（非）。
let a = 10;
let b = 5;
let result = a + b;  // 15
let isEqual = (a === b);  // false
let logicResult = (a > b && b < 10);  // true

3. 条件语句

条件语句用于根据不同的条件执行不同的代码。

let age = 18;
if (age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are a minor");
}
  • switch 语句：用于在多个条件下选择执行某个代码块。
let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  default:
    console.log("Another day");
}

4. 循环

循环允许重复执行某段代码，直到满足某个条件。

  • for 循环：

    for (let i = 0; i < 5; i++) {
  console.log(i);
}

  • while 循环：

    let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

  • do…while 循环：

    let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

5. 函数

函数是一段可重复使用的代码块，可以接受输入参数并返回结果。

  • 声明函数：

    function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice"));

  • 箭头函数（ES6 引入的简写）：

    const greet = (name) => "Hello, " + name;
console.log(greet("Alice"));

6. 对象与数组

  • 对象：JavaScript 中的对象是一组键值对的集合，键是字符串，值可以是任何类型。

    let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
person.greet();  // 输出: Hello, Alice

  • 数组：数组是一种特殊的对象，用于存储一组有序的值。

    let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]);  // 1
numbers.push(6);  // 添加元素到数组末尾
console.log(numbers.length);  // 6

7. 作用域与闭包

  • 作用域：作用域定义了变量的可访问范围。

    • 全局作用域：在代码的任何地方都可以访问全局变量。
    • 局部作用域：在函数内部声明的变量，只能在函数内部访问。

  • 闭包：闭包是指函数可以记住并访问它的词法作用域，即使函数是在词法作用域之外执行的。

    function outer() {
  let name = "Alice";
  return function inner() {
    console.log(name);  // 访问外部函数的变量
  }
}
let closureFunc = outer();
closureFunc();  // 输出: Alice

8. 事件与回调函数

  • 事件：JavaScript 用于捕捉用户与网页的交互，比如点击按钮、输入文本等。

    <button onclick="alert('Button clicked!')">Click Me</button>

  • 回调函数：函数作为参数传递并在特定时刻被调用。

    function greet(name, callback) {
  console.log("Hello, " + name);
  callback();
}

function sayBye() {
  console.log("Goodbye!");
}

greet("Alice", sayBye);

9. ES6 新特性

  • let 和 const：let 用于声明局部变量，const 用于声明常量。
  • 模板字符串：使用反引号 ````和 ${} 插入变量。
    let name = "Alice";
console.log(`Hello, ${name}!`);
  • 解构赋值：快速从对象或数组中提取值。
    let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age);  // 输出: Alice 25
  • 箭头函数：简化函数表达式的语法。

10. 异步操作

JavaScript 是单线程语言，但可以通过异步操作来避免阻塞程序执行。

  • Promise：用于处理异步操作。

    let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Success!");
  } else {
    reject("Error!");
  }
});

promise.then((message) => {
  console.log(message);
}).catch((error) => {
  console.error(error);
});

  • async/await：简化了异步操作的处理。

    async function fetchData() {
  let result = await fetch('https://api.example.com/data');
  let data = await result.json();
  console.log(data);
}

11. 面向对象编程 (OOP)

JavaScript 是一种基于原型的面向对象语言，可以通过对象和类来组织代码。

1) 类和对象
  • 类 (Class)：ES6 引入了类的语法，尽管类在本质上是基于 JavaScript 的原型系统构建的。
  • 对象：可以通过类来创建对象，或使用对象字面量的方式。
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let person1 = new Person("Alice", 25);
person1.greet();  // 输出: Hello, my name is Alice
2) 继承
  • 类可以继承另一个类的属性和方法，这使得代码复用更加容易。
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Rex");
dog.speak();  // 输出: Rex barks.

12. 模块化

模块化是将代码拆分为多个文件和模块，以便于管理和复用。JavaScript 提供了两种常见的模块化方式：ES6 模块 和 CommonJS 模块。

1) ES6 模块
  • 使用 export 和 import 关键字来定义和导入模块。
// utils.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './utils.js';
console.log(add(2, 3));  // 输出: 5
2) CommonJS 模块
  • 在 Node.js 中常用的模块系统，使用 module.exports 和 require。
// utils.js
function add(a, b) {
  return a + b;
}
module.exports = { add };

// main.js
const { add } = require('./utils');
console.log(add(2, 3));  // 输出: 5

13. 异步编程与事件循环

JavaScript 是单线程的，但它通过事件循环机制来处理异步任务，从而实现非阻塞的执行模式。

1) 事件循环 (Event Loop)
  • JavaScript 的事件循环负责将异步操作（如网络请求、定时器等）放入消息队列，待主线程空闲时再执行。
  • 回调队列 (Callback Queue) 和 微任务队列 (Microtask Queue)：微任务队列的优先级高于回调队列，Promise.then 属于微任务，而 setTimeout 属于回调任务。
console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

输出顺序：

Start
End
Promise
Timeout
2) Promise 链式调用
  • Promise 是异步操作的强大工具，可以通过链式调用来处理多个异步操作。
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
3) async/await
  • async/await 是 Promise 的语法糖，使得异步代码更易读和维护。
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}
fetchData();

14. 错误处理

JavaScript 提供了多种方式来捕捉和处理错误，确保程序的鲁棒性。

1) try…catch
  • 用于捕获在程序运行时出现的错误并进行处理。
try {
  let result = someUndefinedFunction();
} catch (error) {
  console.error('An error occurred:', error);
} finally {
  console.log('This will run regardless of success or failure');
}
2) Promise 错误处理
  • 在使用 Promise 时，catch 可以用来捕获异步操作中的错误。
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error('Error:', error));
3) async/await 错误处理
  • 在 async/await 中，推荐使用 try...catch 进行错误处理。
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

15. DOM 操作

DOM（文档对象模型）是用于操作网页元素的接口，JavaScript 可以通过 DOM API 动态修改页面内容。

1) 获取元素
  • document.getElementById(id)：通过元素的 ID 获取元素。
  • document.querySelector(selector)：通过 CSS 选择器获取元素。
let element = document.getElementById('myElement');
let button = document.querySelector('.myButton');
2) 修改元素
  • 修改内容：element.textContent 或 element.innerHTML。
  • 修改属性：element.setAttribute(name, value) 或 element.classList.add('className')。
let heading = document.getElementById('heading');
heading.textContent = "New Heading";

let image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
3) 添加事件监听器

JavaScript 允许通过 addEventListener 方法为元素绑定事件。

let button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

16. 本地存储

JavaScript 提供了 Web Storage API 来在浏览器中存储数据。

1) localStorage
  • localStorage 是持久化的存储，除非手动清除或用户清除浏览器数据，否则数据不会过期。
localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');
console.log(value);  // 输出: 'value'
localStorage.removeItem('key');
2) sessionStorage
  • sessionStorage 只在当前会话期间有效，浏览器关闭后数据就会被清除。
sessionStorage.setItem('key', 'value');
let value = sessionStorage.getItem('key');
console.log(value);  // 输出: 'value'
sessionStorage.removeItem('key');

17. Ajax 和 Fetch API

AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载的情况下与服务器通信。Fetch API 是现代浏览器提供的用于替代传统 AJAX 请求的工具。

1) XMLHttpRequest
  • 传统的 AJAX 请求方法。
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
2) Fetch API
  • Fetch API 更现代化，返回的是 Promise，简化了异步请求的处理。
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

http://www.kler.cn/a/311958.html

相关文章：

  • 什么是 Real-Time Factor (RTF)
  • 现代Web开发：Vue 3 组件化开发实战
  • Leetcode 找出字符串中第一个匹配项的下标
  • Linux如何将文件或目录打成rpm包？-- rpmbuild打包详解
  • 全球碳循环数据集（2000-2023）包括总初级生产力、生态系统净碳交换和生态系统呼吸变量
  • 【大数据学习 | HBASE】hbase的读数据流程与hbase读取数据
  • 网工请注意！华为认证笔试考试系统升级公告！
  • Matlab Delany-Bazley和Miki模型预测多孔材料吸声性能
  • pprof简单使用
  • 五、I/O与网络编程-5.2、网络编程
  • 全国各省山峰分布SHP数据
  • 【深度学习】（3）--损失函数
  • git使用“保姆级”教程1——简介及配置项设置
  • Kafka基础概念
  • Vivado FIR IP 详解 （一）
  • yolo车位数据集
  • MATLAB 图像处理入门详解
  • 油烟机制造5G智能工厂物联数字孪生平台，推进制造业数字化转型
  • 2.计算机网络基础
  • C# 比较对象新思路，利用反射技术打造更灵活的比较工具
  • 基于 jenkins 的持续集成、持续部署方案
  • 自然语言处理入门：从基础概念到实战项目
  • 计算机毕业设计 教师科研信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • Redis性能测试redis-benchmark
  • ORACLE SAVEPOINT保存点
  • Vue 中常用的基础指令