ES5 和 ES6 数组的操作方法

在 JavaScript 中，数组的操作方法非常丰富，包括 ES5 和 ES6 中引入的各种方法。以下是对这些数组方法的详细介绍，分为 ES5 和 ES6。

一、ES5 数组方法

1. 创建数组

2. 数组增加元素

3. 数组删除元素

4. 查找元素

5. 遍历数组

6. 筛选数组

7. 数组排序和反转

8. 合并和分割

9. 其他方法

二、ES6 数组方法

1. 扩展运算符

2. Array.from()

3. Array.of()

4. Array.prototype.includes()

5. Array.prototype.find()

6. Array.prototype.findIndex()

7. Array.prototype.entries()

8. Array.prototype.keys()

9. Array.prototype.values()

10. Array.prototype.flat()

11. Array.prototype.flatMap()

一、ES5 数组方法

1. 创建数组

Array()：使用构造函数创建数组。

var array1 = new Array(); // 创建空数组
var array2 = new Array(1, 2, 3); // 创建包含 1, 2, 3 的数组

[]：使用数组字面量创建数组。
```
var array3 = [1, 2, 3];
```

2. 数组增加元素

push(element1, element2, ...)：向数组末尾添加一个或多个元素，返回新的长度。
```
var fruits = ['apple', 'banana'];
fruits.push('orange'); // ['apple', 'banana', 'orange']
```
unshift(element1, element2, ...)：向数组开头添加一个或多个元素，返回新的长度。
```
fruits.unshift('mango'); // ['mango', 'apple', 'banana', 'orange']
```

3. 数组删除元素

pop()：移除数组末尾的元素，并返回该元素。
```
var last = fruits.pop(); // 'orange'
```
shift()：移除数组开头的元素，并返回该元素。
```
var first = fruits.shift(); // 'mango'
```

4. 查找元素

indexOf(searchElement, fromIndex)：返回数组中第一个匹配元素的索引，如果不存在则返回 -1。
```
var index = fruits.indexOf('banana'); // 1
```
lastIndexOf(searchElement, fromIndex)：返回数组中最后一个匹配元素的索引。
```
var lastIndex = fruits.lastIndexOf('banana'); // 1
```
every(callback)：测试数组的所有元素是否都通过指定函数的测试。
```
var allLong = fruits.every(function(fruit) {return fruit.length > 5;
});
```
some(callback)：测试数组是否至少有一个元素通过指定函数的测试。
```
var hasShort = fruits.some(function(fruit) {return fruit.length < 5;
}); // true
```

5. 遍历数组

forEach(callback)：对数组中的每个元素执行一次提供的回调函数。
```
fruits.forEach(function(fruit) {console.log(fruit);
});
```
map(callback)：创建一个新数组，所有元素为回调函数的返回值。
```
var lengths = fruits.map(function(fruit) {return fruit.length;
}); // [5, 6, 6]
```

6. 筛选数组

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

var longFruits = fruits.filter(function(fruit) {return fruit.length > 5;
}); // ['banana']

7. 数组排序和反转

sort(compareFunction)：对数组元素进行排序。

var numbers = [3, 1, 4, 2];
numbers.sort(function(a, b) {return a - b; // 升序排列
}); // [1, 2, 3, 4]

reverse()：反转数组中的元素顺序。
```
numbers.reverse(); // [4, 3, 2, 1]
```

8. 合并和分割

concat(array1, array2, ...)：合并两个或多个数组，返回新数组。

var moreFruits = ['grapes', 'kiwi'];
var allFruits = fruits.concat(moreFruits); // ['banana', 'apple', 'grapes', 'kiwi']

slice(start, end)：返回数组的指定部分，不修改原数组。
```
var citrus = fruits.slice(1, 3); // ['apple', 'banana']
```
splice(start, deleteCount, item1, item2, ...)：添加或删除元素，同时返回被删除的元素。
```
var removed = fruits.splice(1, 1, 'lemon'); // 删除 'apple', 添加 'lemon'
```

9. 其他方法

join(separator)：将数组的所有元素连接成一个字符串。
```
var fruitString = fruits.join(', '); // 'banana, lemon'
```
reduce(callback, initialValue)：对数组中的每个元素执行给定的 reducer 函数，并将其结果汇总为单个值。
```
var total = [1, 2, 3, 4].reduce(function(acc, curr) {return acc + curr; // 10
}, 0);
```

二、ES6 数组方法

ES6 引入了一些新的数组方法，增强了操作数组的能力。

1. 扩展运算符

...：用于将一个数组展开为多个元素。

var arr1 = [1, 2, 3];
var arr2 = [4, 5, ...arr1]; // [4, 5, 1, 2, 3]