JavaScript 常用数组方法及使用技巧「数组的力量隐藏在数组方法中，必收藏」

2024-04-17 用户投稿学习笔记 9阅读

JavaScript 数组的力量隐藏在数组方法中。没错！如果你只知道用数组，但是不知道数组的这些方法怎么用，那么你就不是真正的懂他。

正餐开始，来看看 JavaScript 中有哪些常用的数组方法！

数组方法总结 1. 数组转换为字符串toString()join() 2. 数组元素添加/删除push()unshift()pop()shift()小 Tips 3. 数组元素更改4. 数组选取splice()【重要api】5. 数组裁剪截取 slice()6. 合并（连接）数组 concat()7. 数组元素复制 copyWithin()8. 数组排序 sort()【重要api】9. 数组反转 reverse()10. 数组迭代【11个重要api】forEach()map()filter()reduce()reduceRight()every()some()indexOf()lastIndexOf()find()findIndex() 11. 其他处理数组的apientries()fill()includes()isArray() OVER！

1. 数组转换为字符串

toString() 和 join() 方法可以将数组的元素转换为字符串。

toString()

toString() 方法返回一个包含所有数组值的字符串，以逗号分隔。

const arr = ["Banana", "Orange", "Apple", "Mango"];arr.toString()// 'Banana,Orange,Apple,Mango' join()

join() 方法也可以将数组作为字符串返回，但是它可以自定义分隔符。

const arr = ["Banana", "Orange", "Apple", "Mango"];// 1. 如果不添加分隔符，默认逗号,分割arr.join()// 'Banana,Orange,Apple,Mango'// 2. 如果添加分隔符，则已自定义的分隔符进行分割arr.join(' and ')// 'Banana and Orange and Apple and Mango' 2. 数组元素添加/删除

在处理数组时，删除元素和添加新元素是很简单的。

新增数组元素：push() 方法将新项添加到数组的末尾，并返回新长度。unshift() 方法将新项添加到数组的开头并返回新长度。删除数组元素：pop() 方法删除数组的最后一个元素，并返回该元素。shift() 方法删除数组的第一项。 push()

push()：将新项添加到数组的末尾，并返回新长度。可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。【后增】

语法：push(ele[,ele[,ele]]) 可以传递 1 ~ n 个参数

var arr = [4,3,2];// 在数组后面添加数据var res = arr.push("hello world", "你好", "好不好");// 返回值res: 插入数据之后数组的长度lengthconsole.log(arr, res); // 结果：[4, 3, 2, "hello", "ni", "好"] 6 unshift()

unshift()：将新项添加到数组的开头并返回新长度。能够在数组前面添加任意个项并返回新数组的长度，使用方法同 push。【前增】

var arr = [4,3,2];// 在数组前面新增一条数据var res = arr.unshift("hello"); console.log(arr, res); // 结果：['hello', 4, 3, 2] 4 pop()

pop()：删除数组的最后一个元素，并返回该元素。从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。【后删】

var arr = [4,3,2];// 删除数组的最后一个元素var res = arr.pop();console.log(arr, res); // 结果：[4, 3] 2 shift()

shift()：删除数组的第一项。能够移除数组中的第一个项并返回该项，同时将数组长度减 1。【前删】

var arr = [4,3,2];// 删除数组的第一项var res = arr.shift();console.log(arr, res); // 结果：[3, 2] 4 小 Tips pop() 和 shift() 没有参数，调用一次按照规则删除一个返回值：删除了什么数据，返回结果就是什么 3. 数组元素更改

通过使用它们的索引号来访问更改数组元素。

数组索引（下标）以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …，以此类推

const arr = ["Banana", "Orange", "Apple", "Mango"];arr[0] = "Kiwi";// 把 arr 的第一个元素改为 "Kiwi"

小技巧：如果想要使用原始方法添加数组之中的数据的话，那么直接使用 arr[arr.length] 添加即可。

length 比下标最大值大1：下标是从 0 开始计数的，length 是从 1 开始计数的。

const arr = ["Banana", "Orange", "Apple", "Mango"];// 向数组的最后方进行添加arr[arr.length] = "Kiwi";// 此时arr数组的值为：['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi'] 4. 数组选取splice()【重要api】

splice() 可以对数组进行插入、删除、替换等批量操作，是最强大的数组方法，返回值是数组，会改变原数组。

语法：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])// 该方法有三个参数：// start：必须。指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。// deleteCount：可选。整数，表示要移除的数组元素的个数。分为三种情况：// 1. 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。// 2. 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。// 3. 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。// item1, item2, ...：可选。要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

示例用法：

splice(startIndex) 至少需要一个参数，该参数是 splice 操作开始的起始位置的索引。如果只传递一个参数，不传递第二个参数，会直接截取到数组结尾，也就是实现删除操作。从索引 startIndex 开始删除元素。

var arr = [1,2,3,4,5,6];// 从第3个下标开始，截取到结尾（删除后面的元素） var res = arr.splice(3);console.log(res, arr); // 结果：(res被删除的元素) [4, 5, 6] (arr原数组内容) [1, 2, 3]

splice( startIndex, deleteCount) 常规用法：会删除掉对应索引 startIndex 对应数量 deleteCount 的元素，并返回删除的结果。

var arr = [1,2,3,4,5,6];// 从 1 开始，截取 2 个数字 var res = arr.splice(1, 2);console.log(res, arr); // 结果：(res) [2, 3] (arr原数组改变) [1, 4, 5, 6]

省略 deleteCount 参数时，splice() 将删除从起始索引到数组结尾的所有元素。

splice( startIndex , deleteCount , replaceItem(替换的项item),...) 将删掉的数据替换成指定内容。

var arr = [1,2,3,4,5,6,7];// 从索引3处删除2个元素，并添加新元素var res = arr.splice(3, 2, "hello world"); console.log(res, arr);// 结果：(res) [4, 5] (arr原数组改变) [1, 2, 3, "hello world", 6, 7]

splice( startIndex , 0 , replaceItem(替换的项item),...) 在不删除元素的情况下，向数组的某个位置插入一条数据。

可以通过将数字 0 传递给 removeCount 参数来添加新元素而不删除任何元素。如果没有删除任何元素，则 splice() 方法将返回一个空数组。你可以选择是否将返回的空数组存储到变量。

var arr = [1,2,3,4,5,6,7];// 在下标为2的位置开始插入数据var res = arr.splice(2, 0, "hello world"); console.log(res, arr);// 结果：(res) [] (arr原数组改变) [1, 2, "hello world", 3, 4, 5, 6, 7]

关于 splice 的用法是超多的，而且他的应用场景也是很多的，大家一定要熟练使用，这样才能更加得心应手哦！

5. 数组裁剪截取 slice()

slice() 能够基于当前数组中的一个或多个项创建一个新数组。可以接受一个或两个参数。它将数组中的选定元素作为新的数组对象返回。不会改变原数组。

语法：

arr.slice([begin[, end]])// begin：可选。提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。有三种情况：// 1. 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。// 2. 如果省略 begin，则 slice 从索引 0 开始。// 3. 如果 begin 超出原数组的索引范围，则会返回空数组。// end：可选。提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。// 比如：slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素（索引为 1, 2, 3的元素）。// 1. 如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。// 2. 如果 end 被省略，则 slice 会一直提取到原数组末尾。// 3. 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

示例用法：

slice( satartIndex )：如果只传递一个参数，代表从这个参数及之后所有项都会被截取，并且返回到一个新数组之中。

var arr = [1,2,3,4,5,6];// 从数组的中索引为2的位置切出一个新数组var res = arr.slice(2);console.log(res); // 结果：[3, 4, 5, 6] => 截取后的新数组

slice( satartIndex, endIndex )：可接受两个参数，大于等于起始点satartIndex下标，小于endIndex下标之间的内容。

var arr = [1,2,3,4,5,6];var res = arr.slice(1, 5);console.log(res); // 结果：[2, 3, 4, 5] => 截取从下标1开始，到下标5之间的内容

特殊值：endIndex = 负数：截止到倒数第几个。

var arr = [1,2,3,4,5,6];var res = arr.slice(1, -3); console.log(res); // 结果：[2, 3] => 截取从下标1开始，到倒数第三个

特殊值：endIndex = 0：返回一个空数组

var arr = [1,2,3,4,5,6];var res = arr.slice(1, 0);console.log(res); // 结果：[] => 空数组 6. 合并（连接）数组 concat()

concat() 方法用于连接两个或多个数组。此方法不会更改现有数组，而是返回一个新数组，其中，包含连接数组的值。

合并两个数组

const arr1 = ['a', 'b', 'c'];const arr2 = ['d', 'e', 'f'];const arr3 = arr1.concat(arr2);console.log(arr3);// ['a', 'b', 'c', 'd', 'e', 'f']

合并多个数组

虽然 concat() 方法不会更改现有数组。但它总是会返回一个新数组。 concat() 方法可以使用任意数量的数组参数

const arr1 = ['a', 'b', 'c'];const arr2 = ['d', 'e', 'f'];const arr3 = ['q', 'w', 'e'];// 将arr1、arr2 与 arr3 连接在一起const arr = arr1.concat(arr2, arr3);console.log(arr);// ['a', 'b', 'c', 'd', 'e', 'f', 'q', 'w', 'e']

将数组与值合并

虽然 concat() 方法不会更改现有数组。但它总是会返回一个新数组。 concat() 方法可以使用任意数量的数组参数

const arr1 = ['a', 'b', 'c'];const arr = arr1.concat([1, 2, 3]);console.log(arr);// ['a', 'b', 'c', 1, 2, 3] 7. 数组元素复制 copyWithin()

copyWithin() 将数组元素浅复制到数组中的另一个位置，覆盖现有值，然后返回当前数组。

此方法永远不会向数组添加更多项。

注意：此方法会覆盖原始数组。

语法：

arr.copyWithin(target[, start[, end]])// 该方法有三个参数：// target：必须。0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。// 如果 target 大于等于 arr.length，将会不发生拷贝。// 如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。// start：可选。0 为基底的索引，开始复制元素的起始位置。// 如果是负数，start 将从末尾开始计算。// 如果 start 被忽略，copyWithin 将会从0开始复制。// end：可选。0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。// 如果是负数， end 将从末尾开始计算。// 如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。// 返回值：改变后的数组。

示例用法：

const array1 = ['a', 'b', 'c', 'd', 'e'];// 1. target为负数: 从头复制两个到数组末尾array1.copyWithin(-2); // ['a', 'b', 'c', 'a', 'b']// 2. 将索引3到末尾的所有元素复制到索引0array1.copyWithin(0, 3); // ['d', 'e', 'c', 'd', 'e']// 3. 三个参数齐全：将索引3的元素复制到索引0array1.copyWithin(0, 3, 4); // ['d', 'b', 'c', 'd', 'e']// 4. 三个参数都为负数：-2相当于复制到倒数第二个位置上，-3相当于3号位，-1相当于4号位array1.copyWithin(-2, -3, -1); // ['a', 'b', 'c', 'c', 'd']

扩展用法：

// 1. 将3号位复制到0号位[].copyWithin.call({length: 5, 3: 1}, 0, 3)// 结果：{0: 1, 3: 1, length: 5}// 2. 从2号位到数组结束，复制到0号位let i32a = new Int32Array([1, 2, 3, 4, 5]);i32a.copyWithin(0, 2);// 结果：Int32Array [3, 4, 5, 4, 5]// 3. 对于没有部署 TypedArray 的 copyWithin 方法的平台，需要采用下面的写法：[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);// 结果：Int32Array [4, 2, 3, 4, 5] 8. 数组排序 sort()【重要api】

sort() 方法是最强大的数组方法之一。

语法：

arr.sort([compareFunction])// 参数：// compareFunction 可选// 用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。// firstEl: 第一个用于比较的元素。// secondEl: 第二个用于比较的元素。// 返回值：// 排序后的数组。注意，数组已原地排序，并且不进行复制。

如果指明了 [compareFunction] ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

示例用法：

数组排序： sort() 方法以字母顺序对数组进行排序：

const arr = ["Banana", "Orange", "Apple", "Mango"];// 对 arr 中的元素进行排序：arr.sort(); // ['Apple', 'Banana', 'Mango', 'Orange']

数字排序：默认地，sort() 函数按照字符串顺序对值进行排序。但是，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。所以，sort() 方法在对数值排序时会产生不正确的结果。我们通过一个比值函数来修正此问题：

比值函数的目的是定义另一种排序顺序。比值函数应该返回一个负，零或正值，这取决于参数： function(a, b){return a-b} 当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b) { return a - b;});// 也可以写成：arr.sort((a, b) => a - b);// 结果：[1, 5, 10, 25, 40, 100]

使用相同的技巧对数组进行降序排序：

const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b) { return b - a;});// 结果：[100, 40, 25, 10, 5, 1]

以随机顺序排序数组：

const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b) { return 0.5 - Math.random();});

查找最高（或最低）的数组值：

const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b) { return 0.5 - Math.random();});

对象可以按照某个属性排序：

reverse() 方法反转数组中元素的顺序。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

可以使用它以降序对数组进行排序

const arr = ["Banana", "Orange", "Apple", "Mango"];// 反转元素顺序arr.reverse(); // ['Mango', 'Apple', 'Orange', 'Banana'] 10. 数组迭代【11个重要api】

数组迭代方法对每个数组项进行操作。

forEach() 方法按顺序为数组中的每个元素调用一次函数。map() 方法使用为每个数组元素调用函数的结果创建一个新数组。filter() 方法创建一个数组，其中填充了所有通过测试的数组元素（作为函数提供）。reduce() 方法为数组的每个值（从左到右）执行提供的函数，并将数组缩减为单个值。reduceRight() 方法为数组的每个值（从右到左）执行提供的函数，并将数组缩减为单个值。every() 方法检查数组中的所有元素是否都通过了测试（作为函数提供）。some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。它为数组中存在的每个元素执行一次函数。indexOf() 方法在数组中搜索指定项，并返回其位置。lastIndexOf() 方法在数组中搜索指定项，并返回其位置。find() 方法返回数组中通过测试的第一个元素的值（作为函数提供）。findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。 forEach()

forEach()：方法按顺序为每个数组元素调用一次函数（回调函数）。

语法：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])// callback 为数组中每个元素执行的函数，该函数接收一至三个参数：// currentValue：数组当前项的值// index：可选。数组当前项的索引// array：可选。数组对象本身// thisArg 可选。当执行回调函数 callback 时，用作 this 的值。

示例：

function myFun(element, index, array) { console.log('a[' + index + '] = ' + element);}// 注意索引 2 被跳过了，因为在数组的这个位置没有项[2, 5, , 9].forEach(myFun);// logs:// a[0] = 2// a[1] = 5// a[3] = 9

注意：

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。 map()

map()：方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])// 参数同 forEach()// 返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。

示例：

// 将每个数组值乘以2var arr1 = [45, 4, 9, 16, 25];var arr2 = arr1.map(myFun);// 当回调函数仅使用 value 参数时，可以省略索引 index 和数组参数 arrayfunction myFun(value, index, array) { return value * 2;}// arr2 => [90, 8, 18, 32, 50]

注意：

map() 方法通过对每个数组元素执行函数来创建新数组。map() 方法不会对没有值的数组元素执行函数。map() 方法不会更改原始数组。 filter()

filter()：方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])// 参数同 forEach()// 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。示例：// 使用值大于 18 的元素创建一个新数组var arr = [45, 4, 9, 16, 25];var over18 = arr.filter(myFun);function myFun(value) { return value > 18;}// over18 => [45, 25] reduce()

reduce()：方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])// callback 为数组中每个元素执行的函数，该函数接收一至三个参数：// accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。// currentValue：数组当前项的值// index：可选。数组当前项的索引// array：可选。数组对象本身// initialValue 可选。作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。// 返回值：函数累计处理的结果

示例：

// 求数组里所有值的和var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue;}, 0);// 也可以写成箭头函数的形式：var total = [ 0, 1, 2, 3 ].reduce( ( acc, cur ) => acc + cur, 0);// 6

其他更多用法可以参见：MDN — Array.prototype.reduce()

注意：

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。reduce() 方法在数组中从左到右工作。reduce() 方法不会减少原始数组。 reduceRight()

reduceRight()：方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

语法：

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])// 参数同 reduce()// 返回值：执行之后的返回值。

示例：

// 求数组里所有值的和var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduceRight(myFun);function myFun(total, value, index, array) { return total + value;}

注意：

reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。reduceRight() 方法在数组中从右到左工作。reduceRight() 方法不会减少原始数组。 every()

every()：方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

语法：

arr.every(callback(element[, index[, array]])[, thisArg])// 参数同 forEach()// 返回值：如果回调函数的每一次返回都为真值，返回 true ，否则返回 false。

示例：

// 检查所有数组值是否大于 18：var numbers = [45, 4, 9, 16, 25];var allOver18 = numbers.every(myFun);function myFun(value, index, array) { return value > 18;}// allOver18 => false

注意：

若收到一个空数组，此方法在一切情况下都会返回 true。 some()

some()：方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

语法：

arr.some(callback(element[, index[, array]])[, thisArg])// 参数同 forEach()// 返回值：数组中有至少一个元素通过回调函数的测试就会返回true；所有元素都没有通过回调函数的测试返回值才会为false。

示例：

// 检查所有数组值是否大于 18：var numbers = [45, 4, 9, 16, 25];var allOver18 = numbers.some(myFun);function myFun(value, index, array) { return value > 18;}// allOver18 => true

注意：

如果用一个空数组进行测试，在任何情况下它返回的都是false。 indexOf()

indexOf()：方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

语法：

arr.indexOf(searchElement[, fromIndex])// searchElement：要查找的元素// fromIndex：可选。开始查找的位置。// 如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1// 如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。// 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.// 返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

示例：

var array = [2, 5, 9];array.indexOf(2); // 0array.indexOf(7); // -1array.indexOf(9, 2); // 2array.indexOf(2, -1); // -1array.indexOf(2, -3); // 0

注意：

如果未找到项目，Array.indexOf() 返回 -1。如果项目多次出现，则返回第一次出现的位置。 lastIndexOf()

lastIndexOf()：方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

语法：arr.lastIndexOf(searchElement[, fromIndex])// 参数同 indexOf// 返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1 示例：const arr = ["Apple", "Orange", "Apple", "Mango"];arr.lastIndexOf("Apple"); // 2 find()

find()：方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

语法：arr.find(callback[, thisArg])// callback：在数组每一项上执行的函数，接收 3 个参数：// element：当前遍历到的元素。// index：可选。当前遍历到的索引。// array：可选。数组本身。// thisArg：可选。执行回调时用作this 的对象。// 返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。示例：var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5}];function findCherries(fruit) { return fruit.name === 'cherries';}console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 } findIndex()

findIndex()：方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

语法：arr.findIndex(callback[, thisArg])// 参数同 find()// 返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1 示例：// 查找数组中素数的元素的索引（如果不存在素数，则返回-1）function isPrime(element, index, array) { var start = 2; while (start <= Math.sqrt(element)) { if (element % start++ < 1) { return false; } } return element > 1;}console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not foundconsole.log([4, 6, 7, 12].findIndex(isPrime)); // 2 11. 其他处理数组的api entries() 方法返回一个带有键/值对的数组迭代器对象。fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。includes() 方法确定数组是否包含指定的元素。isArray() 方法确定对象是否是数组。 entries()

entries()：方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

const arr = ['a', 'b', 'c'];const iterator = arr.entries();console.log(iterator.next().value);// expected output: Array [0, "a"]console.log(iterator.next().value);// expected output: Array [1, "b"]console.log(iterator.next().value);// expected output: Array [2, "c"] fill()

fill()：方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const arr = [1, 2, 3, 4];// 从位置2到位置4填充0arr.fill(0, 2, 4) // [1, 2, 0, 0]// 从位置1开始填充5arr.fill(5, 1) // [1, 5, 5, 5]// 全部填充6arr.fill(6) // [6, 6, 6, 6] includes()

includes()：方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const pets = ['cat', 'dog', 'bat'];pets.includes('cat') // truepets.includes('at') // false isArray()

isArray()：用于确定传递的值是否是一个 Array。如果对象是数组，Thinction 返回 true，否则返回 false。

Array.isArray([1, 2, 3]);// trueArray.isArray({foo: 123});// falseArray.isArray("foobar");// falseArray.isArray(undefined);// false OVER！

JavaScript 中常用的数组的方法基本上也就这些了，大概整理了有27个。如果我们能够充分掌握，那么，在我们的项目开发过程中可能会大大提高我们的开发效率。

各位，加油！

最后，大家不要忘记一键三连哦～

参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray w3school：https://www.w3school.com.cn/js/js_array_methods.asp

标签：