Skip to main content

JavaScript 常用语法

JavaScript 是一种轻量级的解释型或 JIT 编译型编程语言，具有函数优先的特性。它是一种多范式语言，支持事件驱动、函数式和命令式（包括面向对象和原型继承）编程风格。

1. 变量和常量​

1.1 var、let 和 const​

// 使用 var 声明变量，函数作用域
var name = "Alice";

// 使用 let 声明变量，块级作用域
let age = 30;

// 使用 const 声明常量，不可重新赋值
const PI = 3.14;

2.数据类型​

2.1 原始数据类型​

// 字符串
let str = "Hello, World!";

// 数字
let num = 42;

// 布尔值
let isTrue = true;

// 未定义
let undefinedVar;

// 空值
let nullVar = null;

// Symbol
let symbol = Symbol("symbol");

3. 操作符​

3.1 算术操作符​

let a = 10;
let b = 5;

let sum = a + b;  // 加法
let diff = a - b; // 减法
let product = a * b; // 乘法
let quotient = a / b; // 除法
let remainder = a % b; // 取余

3.2 比较操作符​

let x = 10;
let y = "10";

console.log(x == y); // true, 相等操作符
console.log(x === y); // false, 全等操作符
console.log(x != y); // false, 不等操作符
console.log(x !== y); // true, 全不等操作符
console.log(x > 5); // true, 大于
console.log(x < 5); // false, 小于

4. 条件语句​

let score = 85;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C");
}

5. 循环​

5.1 for 循环​

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

5.2 while 循环

let count = 0;

while (count < 5) {
    console.log(count);
    count++;
}

5.3 do-while 循环

let number = 0;

do {
    console.log(number);
    number++;
} while (number < 5);

6. 函数​

6.1 函数声明​

function greet(name) {
    return "Hello, " + name;
}

6.2 函数表达式​

const square = function(x) {
    return x * x;
};

6.3 箭头函数​

const add = (a, b) => a + b;

7. 数组操作​

7.1 数组遍历​

let fruits = ["Apple", "Banana", "Cherry"];

// 使用 for 循环遍历
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// 使用 for...of 循环遍历
for (let fruit of fruits) {
    console.log(fruit);
}

// 使用 forEach 方法遍历
fruits.forEach(fruit => console.log(fruit));

7.2 数组方法​

JavaScript 提供了一系列强大的数组方法，用于操作和处理数组。以下是常用的数组方法及其用法示例。

7.2.1. 数组创建方法​

7.2.1.1 Array.from()​

从类数组对象或可迭代对象创建一个新的数组实例。

let str = 'hello';
let arr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
7.2.1.2 Array.isArray()​

判断某个值是否为数组。

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
7.2.1.3 Array.of()​

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

let arr = Array.of(1, 2, 3); // [1, 2, 3]

7.2.2. 修改数组的方法​

7.2.2.1 push()​

在数组末尾添加一个或多个元素，并返回数组的新长度。

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
7.2.2.2 pop()​

移除数组的最后一个元素，并返回该元素。

let arr = [1, 2, 3];
let last = arr.pop(); // 3, arr becomes [1, 2]
7.2.2.3 shift()​

移除数组的第一个元素，并返回该元素。

let arr = [1, 2, 3];
let first = arr.shift(); // 1, arr becomes [2, 3]
7.2.2.4 unshift()​

在数组的开头添加一个或多个元素，并返回数组的新长度。

let arr = [1, 2, 3];
arr.unshift(0); // [0, 1, 2, 3]
7.2.2.5 splice()​

通过删除或替换现有元素或添加新的元素来修改数组的内容。

let arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b'); // [1, 'a', 'b', 4]
7.2.2.6 reverse()​

颠倒数组中元素的顺序。

let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]
7.2.2.7 sort()​

对数组元素进行排序，并返回该数组。

let arr = [3, 1, 2];
arr.sort(); // [1, 2, 3]

7.2.3. 数组迭代方法​

7.2.3.1 forEach()​

对数组的每个元素执行一次提供的函数。

let arr = [1, 2, 3];
arr.forEach((item, index) => {
    console.log(item); // 1, 2, 3
});
7.2.3.2 map()​

创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果。

let arr = [1, 2, 3];
let squared = arr.map(x => x * x); // [1, 4, 9]
7.2.3.3 filter()​

创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

let arr = [1, 2, 3, 4];
let evens = arr.filter(x => x % 2 === 0); // [2, 4]
7.2.3.4 reduce()​

对数组中的每个元素执行一个提供的函数（从左到右），最终计算出一个值。

let arr = [1, 2, 3];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 6
7.2.3.5 reduceRight()​

对数组中的每个元素执行一个提供的函数（从右到左），最终计算出一个值。

let arr = [1, 2, 3];
let sum = arr.reduceRight((acc, curr) => acc + curr, 0); // 6
7.2.3.6 find()​

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let arr = [1, 2, 3, 4];
let found = arr.find(x => x > 2); // 3
7.2.3.7 findIndex()​

返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

let arr = [1, 2, 3, 4];
let index = arr.findIndex(x => x > 2); // 2
7.2.3.8 some()​

测试数组中的某些元素是否通过由提供的函数实现的测试。

let arr = [1, 2, 3, 4];
let hasEven = arr.some(x => x % 2 === 0); // true
7.2.3.9 every()​

测试数组中的所有元素是否都通过了由提供的函数实现的测试。

let arr = [1, 2, 3, 4];
let allEven = arr.every(x => x % 2 === 0); // false

7.2.4. 数组操作方法​

7.2.4.1 concat()​

合并两个或多个数组，并返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2); // [1, 2, 3, 4]
7.2.4.2 slice()​

返回一个新数组，这个数组是一个从原始数组中选定的元素的浅拷贝，从开始索引到结束索引（不包括结束索引）。

let arr = [1, 2, 3, 4];
let part = arr.slice(1, 3); // [2, 3]
7.2.4.3 join()​

将数组的所有元素连接成一个字符串。

let arr = [1, 2, 3];
let str = arr.join('-'); // '1-2-3'
7.2.4.4 flat()​

按照指定深度递归地将数组展开成一维数组。

let arr = [1, [2, [3, [4]], 5]];
let flatArr = arr.flat(2); // [1, 2, 3, [4], 5]
7.2.4.5 flatMap()​

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

let arr = [1, 2, 3];
let result = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
7.2.4.6 fill()​

用一个固定值填充数组。

let arr = [1, 2, 3, 4];
arr.fill(0, 2, 4); // [1, 2, 0, 0]
7.2.4.7 includes()​

判断一个数组是否包含一个指定的值，根据情况返回 true 或 false。

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
7.2.4.8 indexOf()​

返回数组中第一次出现指定元素的索引，如果不存在则返回 -1。

let arr = [1, 2, 3];
let index = arr.indexOf(2); // 1
7.2.4.9 lastIndexOf()​

返回指定元素在数组中最后一次出现的索引，如果不存在则返回 -1。

let arr = [1, 2, 3, 2];
let index = arr.lastIndexOf(2); // 3
7.2.4.10 copyWithin()​

从数组的一个位置浅复制到同一数组中的另一个位置，并返回它，不会改变其大小。

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 5); // [4, 5, 3, 4, 5]
7.2.4.11 sort()​

对数组元素进行排序，并返回该数组。默认排序顺序是根据字符串Unicode码点。

let arr = [3, 1, 4, 1, 5];
arr.sort(); // [1, 1, 3, 4, 5]

// 如果需要按数字大小排序，需提供比较函数
arr.sort((a, b) => a - b); // [1, 1, 3, 4, 5]
7.2.4.12 toString()​

返回一个字符串，表示指定的数组及其元素。

let arr = [1, 2, 3];
let str = arr.toString(); // '1,2,3'
7.2.4.13 toLocaleString()​

返回一个字符串，表示数组中的元素。该字符串在元素上调用各自的 toLocaleString 方法，并使用地区特定的分隔符进行分隔。

let arr = [1, 'a', new Date()];
let str = arr.toLocaleString(); // '1,a,2024/6/17, 16:59:00'
7.2.4.14 values()​

返回一个新的数组迭代器对象，该对象包含数组每个索引的值。

let arr = [1, 2, 3];
let iterator = arr.values();
for (let value of iterator) {
    console.log(value); // 1, 2, 3
}
7.2.4.15 keys()​

返回一个新的数组迭代器对象，该对象包含数组每个索引的键。

let arr = [1, 2, 3];
let iterator = arr.keys();
for (let key of iterator) {
    console.log(key); // 0, 1, 2
}
7.2.4.16 entries()​

返回一个新的数组迭代器对象，该对象包含数组中每个索引的键值对。

let arr = [1, 2, 3];
let iterator = arr.entries();
for (let [index, value] of iterator) {
    console.log(index, value); // 0 1, 1 2, 2 3
}
7.2.4.17 findLast()​

返回数组中满足提供的测试函数的最后一个元素的值。否则返回 undefined。这是一个较新的方法。

let arr = [1, 2, 3, 4, 5];
let found = arr.findLast(x => x % 2 === 0); // 4
7.2.4.18 findLastIndex()​

返回数组中满足提供的测试函数的最后一个元素的索引。否则返回 -1。这是一个较新的方法。

let arr = [1, 2, 3, 4, 5];
let index = arr.findLastIndex(x => x % 2 === 0); // 3
7.2.4.19 with()​

用于创建一个新的数组，其中指定的元素被替换为新值。也是一个较新的方法。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.with(2, 99); // [1, 2, 99, 4, 5]

8. 对象操作​

8.1 对象遍历​

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

// 使用 for...in 循环遍历
for (let key in person) {
    console.log(key + ": " + person[key]);
}

8.2 对象方法​

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

person.greet();

9. 异步编程​

9.1 回调函数​

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched");
    }, 1000);
}

fetchData(data => {
    console.log(data);
});

9.2 Promise​

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data);
});

9.3 async/await​

async function fetchData() {
    let data = await new Promise(resolve => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 1000);
    });
    console.log(data);
}

fetchData();

10. DOM 操作​

10.1 选择元素​

let element = document.getElementById("myElement");
let elements = document.getElementsByClassName("myClass");
let selectedElement = document.querySelector("#myElement");

10.2 修改元素​

let element = document.getElementById("myElement");
element.innerHTML = "Hello, World!";
element.style.color = "blue";

10.3 事件监听​

let button = document.getElementById("myButton");
button.addEventListener("click", () => {
    alert("Button clicked!");
});