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]
2. Array.from()
Array.from(arrayLike, mapFunction, thisArg)：从类数组或可迭代对象创建一个新数组。var arrayLike = 'hello'; var arr = Array.from(arrayLike); // ['h', 'e', 'l', 'l', 'o']
3. Array.of()
Array.of(element0, element1, ...)：创建一个新数组实例，用于将一组元素转换为数组。var arr = Array.of(1, 2, 3); // [1, 2, 3]
4. Array.prototype.includes()
includes(value, fromIndex)：判断数组是否包含某个值，返回true或false。var hasBanana = fruits.includes('banana'); // true
5. Array.prototype.find()
find(callback)：返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。var found = fruits.find(function(fruit) { return fruit.length > 5; // 找到并返回第一个长度大于 5 的元素 }); // 'banana'
6. Array.prototype.findIndex()
findIndex(callback)：返回满足提供的测试函数的第一个元素的索引，未找到则返回 -1。var index = fruits.findIndex(function(fruit) { return fruit.length > 5; }); // 1
7. Array.prototype.entries()
entries()：返回一个新的数组遍历器对象，包含数组中每个索引的键/值对。var iterator = fruits.entries(); for (let [index, value] of iterator) { console.log(index, value); }
8. Array.prototype.keys()
keys()：返回一个新的数组遍历器对象，包含数组中每个索引的键。var keys = fruits.keys(); for (let key of keys) { console.log(key); // 0, 1, 2 }
9. Array.prototype.values()
values()：返回一个新的数组遍历器对象，包含数组中每个索引的值。var values = fruits.values(); for (let value of values) { console.log(value); }
10. Array.prototype.flat()
flat(depth)：返回一个新数组，递归地将子数组中的所有元素提取出来，默认深度为 1。var nestedArray = [1, [2, [3, 4]]]; var flatArray = nestedArray.flat(2); // [1, 2, 3, 4]
11. Array.prototype.flatMap()
flatMap(callback)：首先映射每个元素，然后将结果压缩成一个新数组。var nums = [1, 2, 3]; var doubled = nums.flatMap(n => [n, n * 2]); // [1, 2, 2, 4, 3, 6]
总结
JavaScript 中的数组方法包括了 ES5 和 ES6 的丰富数组操作功能，使得数组的操作更加灵活和高效。掌握这些方法可以帮助开发者更轻松地处理数据和开发功能复杂的应用程序。如果你有具体的方法或使用场景问题，欢迎随时询问！