ES5 和 ES6 数组的操作方法

数组是 JavaScript 中非常重要的数据结构之一，能够帮助开发者存储和管理多个数据。随着 ES5 和 ES6 的发展，JavaScript 对数组的操作方法也得到了丰富和增强。本篇文章将介绍 ES5 和 ES6 中的数组操作方法，并举出相关的案例和实际场景。

目录

1. 数组的基本操作 1.1. 创建数组 1.2. 访问数组元素 1.3. 修改数组元素 1.4. 数组长度

2. ES5 中数组的常用方法 2.1. push() 2.2. pop() 2.3. shift() 2.4. unshift() 2.5. concat() 2.6. join() 2.7. slice() 2.8. splice() 2.9. forEach() 2.10. map() 2.11. filter() 2.12. reduce() 2.13. some() 2.14. every()

3. ES6 新增的数组方法 3.1. find() 3.2. findIndex() 3.3. includes() 3.4. from() 3.5. of() 3.6. copyWithin() 3.7. fill() 3.8. keys(), values() 和 entries()

4. ES5 和 ES6 数组方法对比

5. 总结

---

1. 数组的基本操作

数组是存储多个值的容器，每个值都可以通过索引来访问。JavaScript 中的数组是动态的，可以随时扩展或缩减。下面我们来看看数组的基本操作。

1.1. 创建数组

ES5 创建数组的方法很简单，可以使用 [] 或者 new Array() 来创建。

javascriptCopy Code
// 使用字面量创建数组
var arr1 = [1, 2, 3, 4, 5];

// 使用构造函数创建数组
var arr2 = new Array(1, 2, 3, 4, 5);

1.2. 访问数组元素

可以通过数组的索引来访问数组中的元素，索引从 0 开始。

javascriptCopy Code
var arr = [10, 20, 30, 40];

// 访问数组元素
console.log(arr[0]); // 输出 10
console.log(arr[2]); // 输出 30

1.3. 修改数组元素

可以直接通过索引来修改数组中的元素。

javascriptCopy Code
var arr = [10, 20, 30, 40];

// 修改数组元素
arr[1] = 25;

console.log(arr); // 输出 [10, 25, 30, 40]

1.4. 数组长度

length 属性返回数组的元素个数，注意：它是一个可变的属性，如果修改数组的长度，数组内容也会发生变化。

javascriptCopy Code
var arr = [1, 2, 3, 4];

console.log(arr.length); // 输出 4

// 修改数组长度
arr.length = 2;

console.log(arr); // 输出 [1, 2]

---

2. ES5 中数组的常用方法

2.1. push()

push() 方法向数组的末尾添加一个或多个元素，并返回新数组的长度。

javascriptCopy Code
var arr = [1, 2, 3];
arr.push(4, 5);

console.log(arr); // 输出 [1, 2, 3, 4, 5]

2.2. pop()

pop() 方法删除数组的最后一个元素，并返回该元素。

javascriptCopy Code
var arr = [1, 2, 3];
var lastElement = arr.pop();

console.log(lastElement); // 输出 3
console.log(arr); // 输出 [1, 2]

2.3. shift()

shift() 方法删除数组的第一个元素，并返回该元素。

javascriptCopy Code
var arr = [1, 2, 3];
var firstElement = arr.shift();

console.log(firstElement); // 输出 1
console.log(arr); // 输出 [2, 3]

2.4. unshift()

unshift() 方法向数组的开头添加一个或多个元素，并返回新数组的长度。

javascriptCopy Code
var arr = [2, 3];
arr.unshift(1);

console.log(arr); // 输出 [1, 2, 3]

2.5. concat()

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

javascriptCopy Code
var arr1 = [1, 2];
var arr2 = [3, 4];
var result = arr1.concat(arr2);

console.log(result); // 输出 [1, 2, 3, 4]

2.6. join()

join() 方法将数组的所有元素转换为一个字符串，并返回该字符串。可以传入一个分隔符。

javascriptCopy Code
var arr = ['a', 'b', 'c'];
var result = arr.join('-');

console.log(result); // 输出 'a-b-c'

2.7. slice()

slice() 方法返回数组的一个浅拷贝，可以指定起始和结束索引。

javascriptCopy Code
var arr = [1, 2, 3, 4, 5];
var result = arr.slice(1, 4);

console.log(result); // 输出 [2, 3, 4]

2.8. splice()

splice() 方法用于删除、替换或添加数组元素。

javascriptCopy Code
var arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b');

console.log(arr); // 输出 [1, 'a', 'b', 4]

2.9. forEach()

forEach() 方法对数组的每一项执行给定的函数。

javascriptCopy Code
var arr = [1, 2, 3, 4];
arr.forEach(function(item) {
  console.log(item);
});

2.10. map()

map() 方法返回一个新数组，数组中的每一项是原数组调用函数处理后的结果。

javascriptCopy Code
var arr = [1, 2, 3];
var result = arr.map(function(item) {
  return item * 2;
});

console.log(result); // 输出 [2, 4, 6]

2.11. filter()

filter() 方法创建一个新数组，包含所有通过测试的元素。

javascriptCopy Code
var arr = [1, 2, 3, 4, 5];
var result = arr.filter(function(item) {
  return item > 3;
});

console.log(result); // 输出 [4, 5]

2.12. reduce()

reduce() 方法对数组中的每一项执行一个函数，最终返回一个值。

javascriptCopy Code
var arr = [1, 2, 3, 4];
var result = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(result); // 输出 10

2.13. some()

some() 方法测试数组中的某些元素是否通过测试，返回一个布尔值。

javascriptCopy Code
var arr = [1, 2, 3, 4];
var result = arr.some(function(item) {
  return item > 3;
});

console.log(result); // 输出 true

2.14. every()

every() 方法测试数组中的所有元素是否都通过测试，返回一个布尔值。

javascriptCopy Code
var arr = [1, 2, 3, 4];
var result = arr.every(function(item) {
  return item < 5;
});

console.log(result); // 输出 true

---

3. ES6 新增的数组方法

ES6 引入了许多新的数组操作方法，这些方法进一步增强了 JavaScript 的数组处理能力。

3.1. find()

`find