梳理一下常见的 JavaScript 数组操作

const numbers = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4]  尾部插入
numbers.unshift(0); // [0, 1, 2, 3, 4]  头部插入
numbers.splice(2, 0, 5, 6); // [0, 1, 5, 6, 2, 3, 4] 在下标为2的位置，删除0个元素，插入5,6

2.删除元素

pop()：删除并返回数组末尾的元素。
shift()：删除并返回数组开头的元素。
splice()：删除指定位置的一个或多个元素。

示例代码：

const numbers = [1, 2, 3, 4, 5];
numbers.pop(); // [1, 2, 3, 4]  删除数组中最后一个元素，会改变原数组
numbers.shift(); // [2, 3, 4]   删除数组中第一个元素，会改变原数组
numbers.splice(2, 1); // [1,2,4,5] 在下标为2的位置，删除1个元素，会改变原数组

3.合并数组

扩展操作符 ...：将多个数组合并为一个新数组。
concat()：将一个或多个数组连接起来。

示例代码：

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5];
const mergedNumbers = [...numbers1, ...numbers2]; // [1, 2, 3, 4, 5]
const combinedNumbers = numbers1.concat(numbers2); // [1, 2, 3, 4, 5]

4.数组遍历

`4.1 forEach()`

对数组中的每个元素执行指定的操作。

示例代码：

const numbers = [1, 2, 3];
numbers.forEach((number) => {
  console.log(number); // 输出每个元素
});

4.2 数组过滤与映射

filter()：返回符合指定条件的元素组成的新数组。
map()：对数组中的每个元素执行指定的操作，并返回结果组成的新数组。

示例代码：

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter((number) => {
  return number > 2; // 返回大于 2 的元素
});
console.log(filteredNumbers); // 输出: [3, 4, 5]

const mappedNumbers = numbers.map((number) => {
  return number * 2; // 将每个元素乘以 2
});
console.log(mappedNumbers); // 输出: [2, 4, 6, 8, 10]

5.数组查找和排序

find()：返回符合指定条件的第一个元素。
sort()：对数组元素进行排序，默认按字母顺序排序。可以传入一个排序规则的函数。

示例代码：

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((number) => {
  return number > 3; // 查找第一个大于 3 的元素
});
console.log(foundNumber); // 输出: 4

numbers.sort(); // 默认按字母顺序排序 [1, 2, 3, 4, 5]

const sortedNumbers = numbers.sort((a, b) => {
  return a - b; // 根据元素大小进行排序
});
console.log(sortedNumbers); // 输出: [1, 2, 3, 4, 5]

6.数组累加计算 reduce

reduce()方法是数组的一个高阶函数，用于对数组的所有元素进行累加计算，最终返回一个结果。reduce()方法接受一个回调函数作为参数，并且可以接受一个初始值作为累加的起始值。

reduce()方法的语法如下：

arr.reduce(callback, initialValue)

参数说明：

callback：一个回调函数，用于对数组的每个元素执行操作。回调函数接受四个参数：
- accumulator（累加器）：累加的结果，也可以简单理解为上一次回调函数的返回值。如果没有提供初始值（initialValue），则第一次 accumulator 将取数组中的第一个元素的值，然后从数组的第二个元素开始。
- currentValue（当前值）：数组中当前被处理的元素。
- currentIndex（当前索引）：当前元素在数组中的索引。
- array：原始数组。
initialValue：可选参数，作为累加的初始值，如果不提供，将使用数组的第一个元素作为初始值。

使用reduce()方法的一些示例：

6.1 对数组中的所有元素进行求和

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

6.2 对数组中的所有元素进行乘积运算

const numbers = [1, 2, 3, 4, 5];

const product = numbers.reduce((accumulator, currentValue) => {
  return accumulator * currentValue;
}, 1);

console.log(product); // 120

6.3 将数组中的字符串连接成一个句子

const words = ["Hello", "World", "JavaScript"];

const sentence = words.reduce((accumulator, currentValue) => {
  return accumulator + " " + currentValue;
}, "");

console.log(sentence); // "Hello World JavaScript"

需要注意的是，reduce()方法会遍历数组的所有元素，并在每个元素上调用回调函数，进行累加或其他操作。回调函数的返回值将作为累加器的值传递给下次迭代。最后，reduce()方法将返回最终累加的结果。如果数组为空，并且没有提供初始值，reduce()方法将抛出 TypeError。因此，在使用reduce()方法时，需要确保数组不为空或者提供初始值。

以上即为js 数组的常见操作，仅此梳理记录一下，如有帮助，记得点赞三连哦~

梳理一下常见的 JavaScript 数组操作

1.添加元素

2.删除元素

3.合并数组

4.数组遍历

4.1 forEach()

4.2 数组过滤与映射

5.数组查找和排序

6.数组累加计算 reduce

6.1 对数组中的所有元素进行求和

6.2 对数组中的所有元素进行乘积运算

6.3 将数组中的字符串连接成一个句子

猜你喜欢

`4.1 forEach()`