前端知识速记—JS篇：JS数组方法

前端知识速记—JS篇：JS数组方法

1. push() 和 unshift()

• push()方法用于向数组末尾添加一个或多个元素
• unshift()方法用于在数组开头添加一个或多个元素。

实例：

let arr = [1, 2, 3];
arr.push(4); // arr = [1, 2, 3, 4]
arr.push(4, 5, 6); // 增加多个元素
arr.unshift(0); // arr = [0, 1, 2, 3, 4]
arr.unshift(-2, -1, 0); // 增加多个元素到开头  

2. concat()

concat()方法用于合并两个或多个数组，返回新数组。

实例：

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // newArr = [1, 2, 3, 4]
const newArray = arr.concat(arr1, [6, 7]); // 合并多个数组

3. splice()

splice 方法的语法如下：

array.splice(start, deleteCount, item1, item2, ...)

参数说明：

1. start: 从数组中开始操作的位置（索引）。从 0 开始计数。如果 start 为负数，则表示从数组末尾开始的偏移量。
2. deleteCount: 要删除的元素个数。如果不指定这个参数或设置为 0，表示不删除元素。
3. item1, item2, ...: 要添加到数组中的元素，这些元素从 start 索引位置开始插入。

示例：arr.splice(1, 1, "a", "b")

我们来具体分析这行代码：

arr.splice(1, 1, "a", "b");

假设当前的 arr 数组如下：

let arr = [1, 2, 3];

操作过程：

1. 起始位置: start 设置为 1，表示我们从数组的索引 1 开始操作。也就是数值 2 的位置。
2. 删除元素: deleteCount 设置为 1，意味着我们将从索引 1 开始删除 1 个元素。在这个例子中，元素 2 会被删除。
3. 添加元素: 然后我们添加 "a" 和 "b" 两个元素到数组中，它们会在删除的位置（索引 1）插入。

最终结果

执行完这行代码后，数组 arr 会变成：

arr = [1, "a", "b", 3];

其他用法示例

1. 仅删除元素:

如果只想删除而不添加任何元素，可以这样做：

arr.splice(1, 1);  // 从索引 1 开始删除 1 个元素
// 结果: arr = [1, 3]

2. 仅添加元素:

如果只想在某处插入元素而不删除任何元素，可以这样做：

arr.splice(1, 0, "x", "y"); // 从索引 1 开始，删除 0 个元素，并插入 "x" 和 "y"
// 结果: arr = [1, "x", "y", 2, 3]

3. 替换多个元素:

arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b"); // 删除从索引 1 开始的 2 个元素，并插入 "a" 和 "b"
// 结果: arr = [1, "a", "b", 4, 5]

4. reverse() 和 sort()

reverse()方法用于反转数组中的元素顺序

而 sort()方法用于对数组进行排序。

实例：

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

sort 方法的详细说明

基本用法

sort 方法用于对数组的元素进行排序。其基本语法如下：

array.sort(compareFunction);

• 不带参数: 如果不提供比较函数，sort 默认会将数组元素转换为字符串，并按照 Unicode 编码进行排序。这在处理数字时可能导致意想不到的结果。
• 带参数的比较函数: 当提供 compareFunction 时，它会被用来决定两个元素的排序顺序。

比较函数

在这段代码中，我们使用了一个简单的比较函数 (a, b) => a - b。这个函数的逻辑如下：

• 返回值:
  • 如果返回值为负数（a - b < 0），表示 a 应该排在 b 前面。
  • 如果返回值为正数（a - b > 0），表示 b 应该排在 a 前面。
  • 如果返回值为 0，表示 a 和 b 的相对顺序不需要改变。

这种比较逻辑对于数字排序尤其重要，因为 JavaScript 会根据数值的大小进行排序。

示例说明

假设 arr 的初始值为：

let arr = [3, 1, 4, 5, 2];

调用 sortArray() 后，执行 arr.sort((a, b) => a - b); 的步骤如下：

1. 比较:

   • 首先比较第一个元素 3 和第二个元素 1: 返回 2（因为 3 - 1 = 2），所以 1 会排在 3 前面。
   • 接下来比较 3 和 4: 返回 -1，保持顺序。
   • 然后比较 4 和 5: 返回 -1，保持顺序。
   • 最后比较 4 和 2: 返回 2，所以 2 会被放到 4 前面。

2. 最终数组:
   经过重复比较，最终 arr 会变为：

arr = [1, 2, 3, 4, 5];

5. indexOf(), lastIndexOf(), includes()

这些方法用于查找数组中的元素，indexOf()返回元素的第一个索引，lastIndexOf()返回最后一

个索引，而 includes()用于判断数组是否包含某个元素。

实例：

let arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 输出 1
console.log(arr.lastIndexOf(2)); // 输出 3
console.log(arr.includes(3)); // 输出 true

6. find()

find()方法返回数组中满足测试条件的第一个元素。

实例：

let arr = [1, 2, 3, 4, 5];
let result = arr.find(item => item > 3); // result = 4

7. join()

join()方法用于将数组中的所有元素连接成一个字符串。

实例：

let arr = ['Hello', 'World'];
let str = arr.join(', '); // str = 'Hello, World'

8. forEach(), map(), filter(), some(), every()

这些方法用于迭代数组，forEach()对每个元素执行指定函数，map()返回新数组，filter()返回符合条件的元素，some()检查是否至少有一个元素符合条件，every()检查是否所有元素都符合条件。

实例：

let arr = [1, 2, 3];

// forEach
arr.forEach(item => console.log(item * 2)); // 输出 2, 4, 6

// map
let newArr = arr.map(item => item * 2); // newArr = [2, 4, 6]

// filter
let filteredArr = arr.filter(item => item > 1); // filteredArr = [2, 3]

// some
let hasEven = arr.some(item => item % 2 === 0); // hasEven = true

// every
let allEven = arr.every(item => item % 2 === 0); // allEven = false

9. Array.from()

Array.from()方法用于将类数组对象或可迭代对象转换为数组。

实例：

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

方法分类