数组是编程中很重要的数据结构。它允许我们以有序的方式存储和访问多个值（元素），从而实现更方便和高效的数据存储和读取操作。因而数组操作方法在任何语言中都尤为重要。这里总结 JavaScript 中数组的一些常用操作方法。

JavaScript 在 ES5 或者更早的版本中数组的方法相对较少，ES6后逐渐完善，操作方法可选的增多。

ES5 及以下版本

1. concat(): 将两个或多个数组合并成一个新数组。
2. join(): 将数组中所有元素组合成一个字符串。
3. indexOf(): 返回数组中指定元素的第一个索引（如果存在），如果不存在，则返回-1。
4. lastIndexOf(): 返回数组中指定元素的最后一个索引（如果存在），如果不存在，则返回-1。
5. push(): 将一个元素添加到数组末尾。
6. pop(): 删除数组中的最后一个元素。
7. shift(): 删除数组中的第一个元素。
8. unshift(): 将一个元素添加到数组的开头。
9. slice(): 返回一个包含数组中指定部分的新数组。
10. splice(): 用新元素替换数组中的元素或者移除元素。
11. reverse(): 反转数组中的元素的顺序。
12. sort(): 对数组进行排序。
13. filter(): 返回一个新数组，包含执行指定函数后返回值为 true 的元素。
14. map(): 返回一个新数组，包含对原数组中每个元素执行指定函数后的返回值。
15. forEach(): 对数组中的每个元素执行指定函数，没有返回值。
16. reduce(): 通过指定函数，从左到右依次执行并将数组简化为单一的值.
17. every() - 判断是否所有元素都符合指定的条件
18. some() - 判断是否至少有一个元素符合指定的条件

这里列举都是非常常见，使用频率较高的数组操作方法，它们可以方便地实现数组的增删改查、排序、过滤、遍历、映射等操作，非常有用。

ES6 后增加方法

ES6 中新增了一系列的数组操作方法，下面列举其中一些比较常用的：

1. Array.from(): 可以将一个类数组对象或者可迭代对象转换成真正的数组。
2. Array.of(): 用于创建一个包含任意数量元素的数组，不管元素的类型和数量。
3. Array.prototype.copyWithin(): 在数组内部，将一段元素序列拷贝到另一段位置，覆盖原有的值。
4. Array.prototype.fill(): 用一个固定值填充数组中从起始索引到终止索引内的全部元素。
5. Array.prototype.find(): 返回数组中满足提供的测试函数的第一个元素的值。如果没有满足条件的元素，则返回 undefined。
6. Array.prototype.findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引。如果没有满足条件的元素，则返回 -1。
7. Array.prototype.includes(): 判断数组中是否包含某个元素，返回一个 Boolean 值。
8. Array.prototype.flat(): 将嵌套的数组“扁平化”，变为一维数组。
9. Array.prototype.flatMap(): 类似于 map + flat，可以对数组中的每个元素执行一个回调函数，并将回调函数返回的结果转换成一维数组。
10. Array.prototype.entries(): 返回一个包含数组中每个索引（以及相应的元素）的迭代器对象。
11. Array.prototype.keys(): 返回一个包含数组中每个索引的迭代器对象。
12. Array.prototype.values(): 返回一个包含数组中每个值的迭代器对象。

用法和概念辨析

includes、some、every区别

这三个方法都是用来判断数组是否符合指定条件的方法，它们的不同在于返回的结果和判断条件的方式。

Include 方法用来判断数组中是否包含指定元素，如果包含则返回 true，否则返回 false。它的使用方式如下：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

some 方法用来判断数组中是否至少有一个元素符合指定的条件，如果符合则返回 true，否则返回 false。它的使用方式如下：

const arr = [1, 2, 3, 4, 5];
const result = arr.some(item => item > 3);
console.log(result); // true

every 方法用来判断数组中是否所有的元素都符合指定的条件，如果都符合则返回 true，否则返回 false。它的使用方式如下：

const arr = [1, 2, 3, 4, 5];
const result = arr.every(item => item > 0);
console.log(result); // true

再来一个例子：

注意：some() 和 every() 方法的参数是一个判断条件的函数，该函数会被传入每个数组元素，返回值为布尔值。some() 和 every() 的区别在于判断条件的方式，some() 符合任意一个就返回 true，every() 必须符合每一个才返回 true。

find 和 filter

Array.prototype.find() 和 Array.prototype.filter() 它们都是基于一个返回值为布尔类型的回调函数来进行处理。

• find(callback [, thisArg]): 返回数组中满足指定条件的第一个元素，如果没有找到，则返回 undefined。该方法通过调用指定的回调函数对数组中的每个元素进行测试，回调函数会接收三个参数：当前元素的值、当前元素的索引和数组本身，回调函数中可以定义任何需要满足的条件来判断是否需要返回当前元素。
• filter(callback [, thisArg]): 返回一个新的数组，其中包含原始数组中通过指定回调函数测试的所有元素。该方法通过调用指定的回调函数对数组中的每个元素进行测试，回调函数会接收三个参数：当前元素的值、当前元素的索引和数组本身，回调函数中可以定义任何需要满足的条件来过滤元素。

find() 和 filter() 方法的区别在于，find() 方法返回数组中满足条件的第一个元素及其相关信息，而 filter() 方法返回数组中所有满足条件的元素的集合。例如：

const arr = [1, 2, 3, 4, 5];
const found = arr.find(item => item > 2); //返回 3
const filtered = arr.filter(item => item > 2); //返回 [3, 4, 5]

在上述例子中，find() 方法返回第一个满足条件 item > 2 的元素 3，而 filter() 方法返回值为一个数组，其中包含所有满足条件 item > 2 的元素，即 [3, 4, 5]。

这两个方法都非常实用，在实际开发中应用广泛，可以通过一个简单的回调函数处理数组并对其进行搜索、过滤和选择等操作。

map

map 用于对数组中的每个元素执行指定的操作并返回一个新数组。map() 方法接受一个函数作为参数，该函数会被传入数组中的每个元素作为第一个参数，当前元素在数组中的索引作为第二个参数（可选），它返回的值会成为新数组中对应位置的值。

下面是一个简单的使用 map() 方法的例子，它将数组中的每个元素都乘以 2：

const arr = [1, 2, 3, 4];
const result = arr.map(item => item * 2);
console.log(result); // [2, 4, 6, 8]

在这个例子中，我们将数组 [1, 2, 3, 4] 作为 map() 的方法调用者，传入一个箭头函数作为参数，箭头函数的作用是将数组中的每个元素都乘以 2。然后， map() 方法会返回一个新数组 [2, 4, 6, 8]。

map() 方法常用于从一组数据中选择需要的字段或将一组数据转换为另一种数据结构。

来一个例子：

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

const objArr = numArr.map(num => {
  return {
    value: num,
    isEven: num % 2 === 0
  };
});

console.log(objArr);

在这个例子中，我们将包含一些数字的数组 numArr 作为 map() 方法调用者，传入一个返回对象的箭头函数。通过使用 map() 方法和箭头函数，我们将数字数组转换为对象数组，并且添加了一个 isEven 属性，该属性用于判断数字是否为偶数。最终输出的结果如下：

在这个例子中，我们将数字数组转换为对象数组，我们可以使用 map() 和箭头函数对任何数据进行转换，例如字符串数组、日期对象等，只需要根据实际情况编写对应的转换逻辑，很好用。请记住这个方法。

entries 、keys 、values

这三个方法都可以用于遍历数组，它们返回的都是迭代器对象。通过结合使用这三种方法，我们可以很方便地遍历获取数组的键和值，以及相应的索引。

下面是一个使用 entries(), keys() 和 values() 遍历打印数组的例子：

const arr = ["apple", "banana", "cherry"];
const entries = arr.entries();
const keys = arr.keys();
const values = arr.values();

console.log('entries方法');
for (const [index, value] of entries) {
  console.log(`[${index}]: ${value}`);
}

 console.log('keys方法');
for (const index of keys) {
 
  console.log(`Index: ${index}`);
}

  console.log('values方法');
for (const value of values) {
  console.log(`Value: ${value}`);
}

在这个例子中，我们使用 entries(), keys() 和 values() 方法获取数组的迭代器对象，并分别使用 for...of 循环遍历每个键值对或键或值，并将索引和值打印出来。最终输出如下：

通过结合使用 entries(), keys() 和 values()，我们可以很方便地遍历获取数组的索引、键和值，并进行相应的操作。在实际开发中，我们可以根据具体的需求，选择合适的方法和操作方案。

form 和 of

这两个都是 ECMAScript 6 新增的数组方法。

• Array.from(arrayLike [, mapFn [, thisArg]]): 该方法通过构建一个新数组来从类似数组或可迭代对象中创建数组。第一个参数接收一个类数组对象或可迭代对象，用来生成新的数组。可选参数mapFn表示对每个数组元素进行的映射操作的回调函数，thisArg用于指定回调函数中 this 关键字的取值。如果没有指定第二个参数，则以原样复制每个元素。
• Array.of(element0[, element1[, ...[, elementN]]]): 该方法通过将传入的参数创建并返回一个新的数组。传入的参数将成为新数组的元素，参数个数可以任意。如果没有参数，则返回一个空数组。

示例如下：

// Array.from() 例子
const str = "Hello world";
const chars = Array.from(str);
// chars = ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

const nums = Array.from([1, 2, 3], num => num * 2);
// nums = [2, 4, 6]

// Array.of() 例子
const arr1 = Array.of();        // []
const arr2 = Array.of(1, 2, 3); // [1, 2, 3]
const arr3 = Array.of("a", 2);  // ['a', 2]

在上面的例子中，我们使用 Array.from() 将字符串中的单个字符存储到一个新数组中，同时以不同的方式使用了映射函数。此外，我们使用 Array.of() 创建了三个新数组，并分别使用了零个、三个和两个参数。

运行效果如下：

总结

JavaScript 数组还支持其他一些操作方法，这里仅仅分享日常应该比较多的。