JavaScript ES5 - ES 11 提供 的 数组操作方法****
ES5 数组方法****
ES5 中提供了很多常用的数组方法，主要是数组的遍历、操作和排序等功能。
1. push()****
将一个或多个元素添加到数组的末尾，并返回新数组的长度。
javascript
var arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
console.log(arr); // 输出：[1, 2, 3, 4]
2. pop()****
删除数组的最后一个元素，并返回该元素。
javascript
var arr = [1, 2, 3];
var popped = arr.pop(); // 3
console.log(arr); // 输出：[1, 2]
console.log(popped); // 输出：3
3. shift()****
删除数组的第一个元素，并返回该元素。
javascript
var arr = [1, 2, 3];
var shifted = arr.shift(); // 1
console.log(arr); // 输出：[2, 3]
console.log(shifted); // 输出：1
4. unshift()****
将一个或多个元素添加到数组的开头，并返回新数组的长度。
javascript
var arr = [1, 2, 3];
arr.unshift(0); // [0, 1, 2, 3]
console.log(arr); // 输出：[0, 1, 2, 3]
5. concat()****
连接两个或更多的数组，并返回一个新数组。
javascript
var arr1 = [1, 2];
var arr2 = [3, 4];
var arr3 = arr1.concat(arr2); // [1, 2, 3, 4]
console.log(arr3); // 输出：[1, 2, 3, 4]
6. slice()****
返回数组的指定部分，原数组不变。
javascript
var arr = [1, 2, 3, 4];
var sliced = arr.slice(1, 3); // [2, 3]
console.log(sliced); // 输出：[2, 3]
console.log(arr); // 输出：[1, 2, 3, 4] (原数组未变)
7. splice()****
从数组中添加或删除元素。
javascript
var arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b'); // 从索引1开始删除2个元素，并插入 'a', 'b'
console.log(arr); // 输出：[1, 'a', 'b', 4]
8. forEach()****
对数组中的每个元素执行指定的函数。
javascript
var arr = [1, 2, 3];
arr.forEach(function(item, index) {
console.log(index, item); // 输出：0 1, 1 2, 2 3
});
9. map()****
返回一个新数组，数组中的每个元素都是调用回调函数处理后的结果。
javascript
var arr = [1, 2, 3];
var mapped = arr.map(function(item) {
return item * 2;
});
console.log(mapped); // 输出：[2, 4, 6]
10. filter()****
返回一个新数组，包含所有符合条件的元素。
javascript
var arr = [1, 2, 3, 4];
var filtered = arr.filter(function(item) {
return item % 2 === 0; // 筛选出偶数
});
console.log(filtered); // 输出：[2, 4]
11. reduce()****
从左到右地逐步应用一个回调函数，最终返回一个单一的结果。
javascript
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：10
12. indexOf()****
返回数组中第一个匹配项的索引，如果没有找到则返回 -1。
javascript
var arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 输出：1
console.log(arr.indexOf(4)); // 输出：-1
ES6 数组方法****
1. find()****
返回数组中第一个符合条件的元素。如果没有符合条件的元素，则返回 undefined。
javascript
var arr = [5, 12, 8, 130, 44];
var found = arr.find(function(element) {
return element > 10;
});
console.log(found); // 输出：12
2. findIndex()****
返回数组中第一个符合条件的元素的索引。如果没有符合条件的元素，则返回 -1。
javascript
var arr = [5, 12, 8, 130, 44];
var index = arr.findIndex(function(element) {
return element > 10;
});
console.log(index); // 输出：1
3. includes()****
判断数组是否包含某个元素，返回 true 或 false。
javascript
var arr = [1, 2, 3, 4];
console.log(arr.includes(2)); // 输出：true
console.log(arr.includes(5)); // 输出：false
4. copyWithin()****
浅拷贝数组的一部分到同一个数组内的另一个位置。
javascript
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 5); // 将索引3到索引5之间的元素复制到索引0到索引2的位置
console.log(arr); // 输出：[4, 5, 3, 4, 5]
5. from()****
将类数组对象或可迭代对象转换为数组。
javascript
var str = 'hello';
var arr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
console.log(arr);
6. keys()****
返回一个新的数组迭代器对象，该对象包含数组中每个索引的键。
javascript
var arr = ['a', 'b', 'c'];
var keys = arr.keys();
console.log([...keys]); // 输出：[0, 1, 2]
7. values()****
返回一个新的数组迭代器对象，该对象包含数组中每个索引对应的值。
javascript
var arr = ['a', 'b', 'c'];
var values = arr.values();
console.log([...values]); // 输出：['a', 'b', 'c']
8. entries()****
返回一个新的数组迭代器对象，该对象包含数组中每个索引和值的对。
javascript
var arr = ['a', 'b', 'c'];
var entries = arr.entries();
console.log([...entries]); // 输出：[[0, 'a'], [1, 'b'], [2, 'c']]
9. flat()****
将嵌套的数组“拉平”为一维数组。
javascript
var arr = [1, [2, 3], [4, [5, 6]]];
var flattened = arr.flat(2); // 拉平两层
console.log(flattened); // 输出：[1, 2, 3, 4, 5, 6]
10. flatMap()****
首先使用映射函数对数组元素进行映射，然后将结果“拉平”为一维数组。
javascript
var arr = [1, 2, 3];
var flattened = arr.flatMap(x => [x, x * 2]);
console.log(flattened); // 输出：[1, 2, 2, 4, 3, 6]
11. sort()****
对数组中的元素进行排序，默认是按字符编码顺序。
javascript
var arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
arr.sort(); // 字符排序
console.log(arr); // 输出：[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
ES7 (ECMAScript 2016) 新增数组方法****
1. includes()****
includes() 方法判断数组是否包含某个指定的元素，返回 true 或 false。它比 indexOf() 更直观，因为它直接返回布尔值，而不是索引。
javascript
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出：true
console.log(arr.includes(6)); // 输出：false
ES8 (ECMAScript 2017) 新增数组方法****
1. Object.values()****
Object.values() 方法返回给定对象的所有值，返回一个包含对象所有值的数组。这个方法对于处理非数组的对象非常有用。
javascript
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]
console.log(values);
虽然 Object.values() 主要是对对象的操作，但它也为数组或类数组对象提供了新的方法，尤其在处理对象数据时非常有用。
2. Object.entries()****
Object.entries() 返回给定对象自身所有的键值对数组（一个二维数组）。每个键值对都是一个数组，形式为 [key, value]。
javascript
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]
console.log(entries);
3. Array.prototype.flat()****
flat() 方法会将数组中的嵌套数组展开为一维数组。flat() 可以指定展开的层数，默认为 1 层。
javascript
const arr = [1, 2, [3, 4, [5, 6]]];
console.log(arr.flat()); // 输出：[1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2)); // 输出：[1, 2, 3, 4, 5, 6]
4. Array.prototype.flatMap()****
flatMap() 方法先对数组中的每个元素进行映射（通过回调函数），然后将结果“拉平”为一维数组。
javascript
const arr = [1, 2, 3];
const flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // 输出：[1, 2, 2, 4, 3, 6]
flatMap() 是 map() 和 flat() 的组合，先进行映射操作，然后再将结果进行拉平，十分高效。
5. String.prototype.padStart() 和 String.prototype.padEnd()（补齐方法）****
虽然这些方法属于字符串类型，但它们有时也会在数组处理时用到，尤其是需要按某种规则填充字符串数组的情况。
javascript
// 对数字进行字符串补齐
const numArr = [1, 23, 456];
const padded = numArr.map(num => String(num).padStart(5, '0'));
console.log(padded); // 输出：['00001', '00023', '00456']
ES9 (ECMAScript 2018) 新增数组方法****
1. Array.prototype.sort()（稳定排序）****
在 ES9 中，sort() 方法的行为发生了变化，增加了对排序稳定性的保证。之前，sort() 方法排序是“不稳定”的（即相同的元素可能排序后会交换位置），而从 ES9 开始，sort() 实现了稳定排序。这个特性并不直接体现在新的 API 上，但它改善了 sort() 的一致性。
javascript
const arr = [3, 1, 2, 3];
arr.sort((a, b) => a - b);
console.log(arr); // 输出：[1, 2, 3, 3]
2. Object.fromEntries()****
与 Object.entries() 配对使用，它将一个键值对数组转换为对象。这对于将 Map 转换为对象非常有用。
javascript
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // 输出：{a: 1, b: 2, c: 3}
ES10 (ECMAScript 2019) 新增数组方法****
ES10 中主要增加了 Array.prototype.flatMap() 和一些更常见的用法。
1. Array.prototype.flat()****
这在 ES8 中已经引入，但在 ES10 中做了进一步增强（例如它对深度更大的嵌套数组的展开效果）。
javascript
const nestedArray = [1, [2, [3, [4, [5]]]]];
const flattened = nestedArray.flat(3);
console.log(flattened); // 输出：[1, 2, 3, 4, 5]
ES11 (ECMAScript 2020) 新增数组方法****
1. Array.prototype.reduceRight()****
reduceRight() 是 reduce() 的逆操作，它是从右往左执行的版本。此方法对数组中的元素从右向左进行累加操作。
const arr = [1, 2, 3, 4];
const sum = arr.reduceRight((acc, curr) => acc + curr);
console.log(sum); // 输出：10
2. Array.prototype.at()****
at() 方法接受一个整数值作为参数，并返回该数组中对应的元素。正数值表示从数组开始的索引，负数表示从数组末尾的索引（-1 是最后一个元素）。
javascript
const arr = [10, 20, 30, 40];
console.log(arr.at(1)); // 输出：20
console.log(arr.at(-1)); // 输出：40
总结****
到目前为止，ES7、ES8、ES9、ES10 和 ES11 通过提供一些新方法和增强现有方法，使得数组的操作更加简便、灵活。例如，includes() 在 ES7 中的引入，flat() 和 flatMap() 在 ES8 中的出现，reduceRight() 和 at() 在后续版本中的增强，都为开发者提供了更多的工具来简化数组的处理和操作。
这些新增方法对于提高代码可读性、减少错误和增强性能都有很大的帮助。
