在 JavaScript 的广阔世界中，数组是你不可或缺的得力助手。无论你是初学者还是经验丰富的开发者，掌握数组方法都能让你的代码如行云流水般优雅和高效。今天，我们将带你飞跃数组的神秘世界，一步步揭开那些神奇方法的面纱，助你在面试中轻松脱颖而出！
一、数组创建 📦
-
使用数组字面量表示法
let arr1 = []; // 创建一个空数组 let arr2 = [20]; // 创建一个包含1项数据为20的数组 let arr3 = ["lily", "lucy", "Tom"]; // 创建一个包含3个字符串的数组 -
使用
Array构造函数-
无参数构造
let arr = new Array(); // 创建一个空数组 -
带参数构造
-
传入一个数值参数时，创建一个指定长度的空数组
let arr = new Array(20); // 创建一个包含20项的空数组 -
传入多个参数时，创建一个包含指定元素的数组
let arr = new Array("lily", "lucy", "Tom"); // 创建一个包含3个字符串的数组
-
-
-
Array.of方法（ES6）Array.of()创建一个包含所有传入参数的数组，不管参数的数量和类型。let arr = Array.of(1, 2); console.log(arr.length); // 2 let arr1 = Array.of(3); console.log(arr1.length); // 1 console.log(arr1[0]); // 3 let arr2 = Array.of('2'); console.log(arr2.length); // 1 console.log(arr2[0]); // '2' -
Array.from方法（ES6）将可迭代对象或类数组对象转换为数组。
function arga(...args) { let arg = Array.from(args); console.log(arg); } arga('arr1', 26, 'from'); // ['arr1', 26, 'from'] // 使用映射函数转换数组 function arga(...args) { return Array.from(args, value => value + 1); } let arr = arga('arr', 26, 'pop'); console.log(arr); // ['arr1', 27, 'pop1'] // 使用指定的 `this` 值 const helper = { diff: 1, add(value) { return value + this.diff; } } function translate() { return Array.from(arguments, helper.add, helper); } let arr = translate('liu', 26, 'man'); console.log(arr); // ["liu1", 27, "man1"]
二、数组方法 🔧
-
join()将数组的所有元素连接成一个字符串，元素间用指定的分隔符分隔。
let arr = [1, 2, 3]; console.log(arr.join()); // 1,2,3 console.log(arr.join("-")); // 1-2-3 -
push()和pop()-
push()：向数组末尾添加一个或多个元素。let arr = ["Lily", "lucy", "Tom"]; let count = arr.push("Jack", "Sean"); console.log(count); // 5 console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"] -
pop()：删除数组的最后一个元素并返回该元素。javascript Copy code let item = arr.pop(); console.log(item); // Sean console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]
-
-
shift()和unshift()-
shift()：删除数组的第一个元素并返回该元素。let item = arr.shift(); console.log(item); // Jack console.log(arr); // ["lucy", "Tom", "Jack"] -
unshift()：在数组开头添加一个或多个元素，并返回新数组的长度。let count = arr.unshift("Jack", "Sean"); console.log(count); // 5 console.log(arr); // ["Jack", "Sean", "lucy", "Tom"]
-
-
sort()对数组的元素进行排序，默认按字母升序。
let arr = ["a", "d", "c", "b"]; console.log(arr.sort()); // ["a", "b", "c", "d"] let arr2 = [13, 24, 51, 3]; console.log(arr2.sort((a, b) => a - b)); // [3, 13, 24, 51] -
reverse()颠倒数组中元素的顺序。
let arr = [13, 24, 51, 3]; console.log(arr.reverse()); // [3, 51, 24, 13] -
concat()连接两个或多个数组，返回新数组，不修改原数组。
let arr = [1, 3, 5, 7]; let arrCopy = arr.concat(9, [11, 13]); console.log(arrCopy); // [1, 3, 5, 7, 9, 11, 13] -
slice()返回数组的一部分，创建一个新数组，不修改原数组。
let arr = [1, 3, 5, 7, 9, 11]; console.log(arr.slice(1)); // [3, 5, 7, 9, 11] console.log(arr.slice(1, 4)); // [3, 5, 7] -
splice()用于删除、替换或插入数组中的元素。
let arr = [1, 3, 5, 7, 9, 11]; let removed = arr.splice(0, 2); console.log(arr); // [5, 7, 9, 11] console.log(removed); // [1, 3] arr.splice(2, 0, 4, 6); console.log(arr); // [5, 7, 4, 6, 9, 11] -
indexOf()和lastIndexOf()-
indexOf()：返回第一个匹配项的索引，从头开始查找。let arr = [1, 3, 5, 7, 7, 5, 3, 1]; console.log(arr.indexOf(5)); // 2 -
lastIndexOf()：返回最后一个匹配项的索引，从尾部开始查找。console.log(arr.lastIndexOf(5)); // 5
-
-
forEach()遍历数组中的每一项，执行给定的函数。
let arr = [11, 22, 33, 44, 55]; arr.forEach(function(x, index, a) { console.log(x + '|' + index + '|' + (a === arr)); }); -
map()返回一个新数组，数组中的元素为原数组元素调用函数处理后的值。
let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(item => item * item); console.log(arr2); // [1, 4, 9, 16, 25] -
filter()返回一个新数组，包含所有满足条件的元素。
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let arr2 = arr.filter(x => x % 3 === 0 || x >= 8); console.log(arr2); // [3, 6, 9, 8, 10] -
fill()使用指定值填充数组中的一个或多个元素。
let arr = [1, 2, 3, 'cc', 5]; arr.fill(1); console.log(arr); // [1, 1, 1, 1, 1] -
every()判断数组中每一项是否满足条件，只有所有项都满足条件才返回
true。let arr = [1, 2, 3, 4, 5]; console.log(arr.every(x => x < 6)); // true -
some()判断数组中是否有至少一个元素满足条件，满足则返回
true。let arr = [1, 2, 3, 4, 5]; console.log(arr.some(x => x > 4)); // true -
reduce()和reduceRight()-
reduce()：对数组中的每一项调用指定的函数，累加结果，返回最终的计算值。let arr = [1, 2, 3, 4]; let sum = arr.reduce((total, value) => total + value, 0); console.log(sum); // 10 -
reduceRight()：从数组的末尾开始进行累加计算。let arr = [1, 2, 3, 4]; let sum = arr.reduceRight((total, value) => total + value, 0); console.log(sum); // 10
-
-
find()和findIndex()-
find()：返回第一个满足测试条件的数组元素，找不到返回undefined。let arr = [1, 2, 3, 4, 5]; console.log(arr.find(x => x > 3)); // 4 -
findIndex()：返回第一个满足测试条件的元素的索引，找不到返回-1。console.log(arr.findIndex(x => x > 3)); // 3
-
-
flat()和flatMap()-
flat()：将嵌套的数组“拍平”，指定拍平的深度。let arr = [1, [2, [3, [4]]]]; console.log(arr.flat(2)); // [1, 2, 3, [4]] -
flatMap()：先调用map()，然后对结果使用flat()，默认深度为 1。let arr = [1, 2, 3, 4]; let result = arr.flatMap(x => [x, x * 2]); console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]
-
-
includes()判断数组中是否包含某个指定值，返回
true或false。let arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // true console.log(arr.includes(6)); // false -
copyWithin()将数组的部分元素复制到同一数组的另一位置，并返回该数组。
let arr = [1, 2, 3, 4, 5]; console.log(arr.copyWithin(0, 3, 5)); // [4, 5, 3, 4, 5] -
from()从类数组或可迭代对象创建一个新数组实例。
let arr = Array.from('hello'); console.log(arr); // ['h', 'e', 'l', 'l', 'o'] -
toString()和toLocaleString()-
toString()：将数组转换为字符串。let arr = [1, 2, 3]; console.log(arr.toString()); // "1,2,3" -
toLocaleString()：将数组转换为本地化的字符串。console.log(arr.toLocaleString()); // "1,2,3" (取决于环境)
-
-
keys(),values(),entries()-
keys()：返回数组的键值迭代器。let arr = ["a", "b", "c"]; for (let key of arr.keys()) { console.log(key); // 0, 1, 2 } -
values()：返回数组的值迭代器。for (let value of arr.values()) { console.log(value); // "a", "b", "c" } -
entries()：返回数组的键值对迭代器。for (let [index, value] of arr.entries()) { console.log(index, value); // 0 "a", 1 "b", 2 "c" }
-
数组方法的异同点比较 🆚
push()vsunshift():push()向数组末尾添加元素，而unshift()向数组开头添加元素。pop()vsshift():pop()从数组末尾删除元素，而shift()从数组开头删除元素。slice()vssplice():slice()返回数组的一部分，原数组不变；splice()修改原数组并返回删除的元素。map()vsforEach():map()返回一个新数组，forEach()不返回任何东西。find()vsfilter():find()返回第一个匹配的元素，filter()返回所有匹配的元素组成的新数组。reduce()vsreduceRight():reduce()从数组的左边开始处理，reduceRight()从右边开始处理。
希望这些信息能帮助你更好地理解和使用 JavaScript 数组的创建与操作方法！ 🌟
