共计 10206 个字符，预计需要花费 26 分钟才能阅读完成。
从学习 javascript 来，一直觉得数组方法真是多，总是疑惑哪个会更好。索性将全部关于数组相关的方法整理出来。整理之前以为就是简单的汇总，然而慢慢整理的过程发现很多新奇的数组以及腻害的用法。这些数组方法看起来简单，实际用处确是很大。
-
改变原数组的方法
1.1 push功能：向数组的末尾添加一个或多个元素，并返回新的数组长度 语法：array.push(item1,item2, ..., itemN) 例子：``` var arr = [1]; arr.push(2,3);//arr 的值[1,2,3] 返回数组长度 3 var arr2 = [3,4,5]; arr.push(...arr2);//arr 的值[1,2,3,3,4,5] 返回数组长度 6 这里是利用 ES6 的扩展运算符 ```1.2 pop
功能：删除数组的最后一个元素并返回删除的元素 语法：array.pop() 例子：``` var arr = [1,2,3,4]; arr.pop();//arr 的值[1,2,3] 返回删除的元素 4 ```1.3 unshift()
功能：向数组开头添加一个或多个元素，并返回新的数组长度 语法：array.unshift(item1,item2, ..., itemN) 例子：``` var arr1 = [3]; // arr 的值[1,2,3] / / 注意: 在 unshift 后面连续加两个添加项，不会一个一个加，而是整体加开头 arr1.unshift(1,2); // 注意：只有一个个元素的用 unShift 插入，才会每次从开头开始插入 var arr2 = [3]; arr2.unshift(1);//arr2 的值[1,3] arr2.unshift(2);//arr2 的值[2,1,3] ```1.4 shift()
功能：删除数组开头的第一个元素，并返回该元素 语法：array.shift() 例子：``` var arr = [1,2,3,4]; arr.shift();//arr 的值变为[2,3,4] 返回 1 ```1.5 splice()
功能：添加或删除数组的元素, 返回被删除的项目(数组) 语法 array.splice(start[,len[,item1[,itemx]]]) 参数解释：start 删除 / 添加 元素开始的位置 len 要删除的元素的数量 item1,itemx 要添加的元素的值，从 start 位置开始添加 例子：``` var arr = [1,8,4,5,6,7]; // 返回被删除的项目 [8] 这个数组，arr 的值变为[1,2,3,4,5,6,7] arr.splice(1,1,2,3); ``` -
不改变原数组的方法
2.1 concat功能：连接两个或多个数组，返回一个新的数组，不改变原数组 语法：array.concat(value1[, ... [, valueX]) 参数解释：value1 可以是数组或非数组。** 非数组时作为元素项被一次添加到新数组中 ** 例子：``` var arr1 = [1,2]; var arr2 = [3,4]; var arr3 = [5,6]; var arr4 = arr1.concat(arr2,arr3);//arr4 的值[1,2,3,4,5,6] arr1,arr2,arr3 不变 // 用 ES6 var arr5 =[...arr1, ...arr2, ...arr3];// 结果与 arr4 一样 ``` 面试题：传递两个参数 m，n，返回长度为 m，所有元素都为 n 的数组。必须用递归和 cancat fn(m,n){return m?fn(m-1).concat(n):[];}2.2 join
功能：将数组的每一个元素，通过某个字符串拼接。并返回新的拼接完成的字符串 语法：array.join(separator) 例子：``` var arr = [1,2,3,4]; arr.join();// 返回值 1,2,3,4 arr.join('-');// 返回值 1-2-3-4 ```2.3 slice
功能：提取数组中某一部分的元素，返回被提取出的部分数组 语法：array.slice(start[,end]) 参数解释：start 提取的开始位置 end 提取的结束位置(不包含) 例子：``` var arr = [1,2,3,4]; var subArr = arr.slice(1,3);// subArr 的值[2,3] ```2.4 indexOf
功能：返回数组中某个指定元素下标的位置, 如果没找到返回 -1 语法：array.indexOf(item[,start]) 参数解释：item 要查找的元素 start 开始查找的位置，省略则从头开始查找 例子：``` var arr = ["black","orange","apple"]; arr.indexOf("orange");// 返回 orange 的下标 1 ``` 面试题：数组去重 ``` var arr1 = [1,2,3,4,4,5,5,7,1]; var arr = []; arr1.forEach((item, index)=>{if(arr.indexOf(item)<0){arr.push(item); } }) ```2.5 lastIndexOf
功能：返回数组中最后一次出现该元素的位置, 如果未找到返回 -1。查找方向从⬅️ 语法：array.lastIndexOf(item[,start]) 参数解释：item 要查找的元素 start 开始查找的位置，如省略则从最后开始向前查找。例子：``` var arr = [1,2,3,4,2,3]; arr.lastIndexOf(2);// 返回下标 4 arr.lastIndexOf(2,3);// 返回下标 1 ```2.6 includes
功能：判断一个数组是否包含一个指定的值，如果包含返回 true, 否返回 false 语法：array.includes(searchItem[,formIndex]) 参数解释：searchItem 要查找的元素值 formIndex 开始查找元素的位置 >= 0 有效,<0 则从数组开头查找 例子：``` var arr = [1,2,3,4]; arr.includes(1);//true arr.includes(1,1);//false arr.includes(1,-1);//true 相当于 arr.includes(1) ```2.7 find
功能：返回数组中检测函数的条件的第一个元素的值，否则返回 undefined 语法：array.find(callback(currentValue[,index[,arr]])[,thisArg]) 参数解释：callback 数组中每个元素执行的函数，接受三个参数 currentValue 数组中遍历的当前元素 index 数组中遍历的当前元素的下标 array 当前数组 thisArg 执行回调时用作 this 的对象 例子：``` var ages = [10,18,20,22]; var obj = {"name":"cherry"}; var result = arge.find(function(age){console.log(obj); //{"name":"cherry"} return age>=18; },obj); //result 的值为 18 ```2.8 findIndex
功能：返回数组中检测函数的条件的第一个元素的下标，否则返回 -1 语法：array.findIndex(callback(currentValue[,index[,array]])[,thisArg]) 参数解释：callback 数组中每个元素执行的函数，接受三个参数 currentValue 数组中遍历的当前元素 index 数组中遍历的当前元素的下标 array 当前数组 thisArg 回调函数中可用作 this 的对象 例子：``` function isOdd(currentValue){return currentValue%2;} var arr = [2,4,6,1,3]; arr.findIndex(isOdd);//3 返回第一个奇数 var arr1 = [2,4,6,8]; arr1.findIndex(isOdd);//-1 没有奇数则返回 -1 ```2.9 valueOf
功能：还是返回原数组 语法：array.valueOf() 例子：``` var arr = [1,2,3,4]; arr.valueOf();//[1,2,3,4] ```2.10 toString
功能：返回一个由数组中每个值组成的以逗号拼接的字符串 语法：array.toString() 描述：比如我们 alert(arr)时，接受一个字符串则会隐式调用 toString 在控制台输出字符串 例子：``` var arr = [1,2,3,4]; arr.toString();// 原数组不变，但输入值为 1,2,3,4 ```2.11 copyWithin
功能：浅复制数组的一部分到同一数组的另外一个位置，数组长度不变。返回改变后的数组 语法：array.copyWithin(target[,start[,end]]) 参数解释：target：被复制的一部分数组放置的起始位置 0 为基底的索引，如果是负数，将从末尾开始计算。**target>=array.length 不发生拷贝 ** start：拷贝起始的位置。如果是负数，则从末尾开始计算。如不填，默认从 0 开始 end：拷贝结束的位置。如果是负数，则从末尾开始计算。如不填，默认为数组长度 例子：``` var numbers = [1,2,3,4,5]; numbers.copyWithin(-2);// 新返回的数组 [1,2,3,1,2]; numbers.copyWithin(0,3,4);// 新返回的数组 [4,2,3,4,5]; [].numbers.call({length:5,3:1},0,3); // 新返回的数组 [0:1,3:1,legnth:5] // 这里解释一下 {length:5,3:1}等价于 //{0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5} // 所以用第 4 个元素开始 copy，copy 的数组放置在第 0 个位置。结果为 //{0:1,1:undefined,2:undefined,3:1,4:undefined,length:5} ```2.12 flat
功能：按照指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并到一个数组中，返回一个新数组 语法：array.flat(depth = 1) 例子：``` var arr1 = [1,2,[3,4]]; arr1.flat();// 返回新数组[1,2,3,4] var arr2 = [1,2,[3,4,[5,6]]]; arr2.flat();// 返回新数组[1,2,3,4,[5,6]] arr2.flat(2);// 返回新数组 [1,2,3,4,5,6] arr2.flat(Infinity);// 返回新数组 [1,2,3,4,5,6] var arr3 = [1,2,,4,5]; arr3.flat();// 返回新数组 [1,2,4,5] ** 可以去除空项 ** ``` 替代方案 ``` // 使用 reduce,concat 一层 var arr = [1,2,[3,4]]; arr.reduce((acc,value)=> acc.concat(value),[]); // 或使用... var flatSingle = arr => [].concat(...arr); ``` ``` // 无线反嵌套 var arr = [1,2,[3,4,[5,6]]]; function flatDeep(arr){return arr.reduce((acc,value)=> Array.isArray(value)?acc. concat(flatDeep(value)):acc. concat(value) ,[]) } flatDeep(arr);// 返回新数组 [1,2,3,4,5,6] ``` -
用于迭代的数组
3.1 sort (改变原数组)功能：对数组元素进行排序，默认按升序排序，即小的在前，大的在后。返回排序后的数组 语法：array.sort([compareFunction]) 参数含义：compareFunction 若无此函数，默认每项调用 toString()转为字符串再根据各字符的 unicode 进行排序。如有 此函数有两个参数 firstEl 第一个用于比较的元素 secondEl 第二个用户比较的元素 如果 compareFunction(firstEl,secondEl)小于 0，那么 firstEl 排在 secondEl 之前 如果 compareFunction(firstEl,secondEl)等于 0，那么位置不变 如果 compareFunction(firstEl,secondEl)大于 0，那么 firstEl 排在 secondEL 之后 例子：``` function compareFunction(a,b){return a - b;} var arr = [2,3,1,8,5,4]; arr.sort(compareFunction) console.log(arr);// 按升序排列 [1,2,3,4,5,8] // 也可以按照对象中某一个属性排序 function compare(a,b){return a.age - b.age;} var list = [{"name":"cherry","age":18}, {"name":"meimei","age":16}, {"name":"apple","age":20}, ]; list.sort(compare); console.log(list); //[{"name":"meimei","age":16},{"name":"cherry","age":18},{"name":"apple","age":20} ```3.2 reverse (改变原数组)
功能：将数组中元素的位置颠倒，并返回该数组 语法：array.reverse() 例子：``` var arr = [1,2,3,4,5]; arr.reverse(); // [5,4,3,2,1] ```3.3 forEach (不一定)
功能：为数组每个元素执行函数 语法：array.forEach(callback[,thisArg]) 参数解释：callback 数组中每个元素执行的函数，接受三个参数 currentValue 数组中遍历的当前元素 index 数组中遍历的当前元素的下标 array 当前数组 thisArg 执行回调是用作 this 的值(可选) 描述：forEach 本身是不会改变数组的，但如果回调函数中改变原数组就会改变 例子：``` var arr = [1,2,3,4,5]; arr.forEach(function(currentValue,index){arr[index] = currentValue + 10; }); console.log(arr);//[11,12,13,14,15] ```3.4 map (不改变)
功能：对数组中每个元素执行回调函数，返回新数组 语法：array.map(callback(currentValue[,index[,array]])[,thisArg]) 参数解释：callback 每一项都会调用的函数，有三个参数 currentValue 数组遍历的当前元素 index 数组遍历的当前元素的下标 array 当前遍历的数组 thisArg 回调函数使用的 this 对象 描述：该函数返回的是由每一项元素调用函数的返回值得结果 例子：``` // 例子 1 平方根 var arr = [1,4,9]; var roots = arr.map(function(currentValue){return Math.sqrt(currentValue); }) // arr 的值为 [1,4,9] roots 的值为[1,2,3] // 例子 2 string 如何使用 map var map = Array.prototype.map var charCodeList = map.call('hello cherry',function(x){return x.charCodeAt(0); }) //charCodeList 的值[99, 104, 101, 114, 114, 121] ```3.5 filter (不改变)
功能：过滤。返回包含所有满足函数的元素的数组。不改变原数组 语法：array.filter(callback(currentValue[,index[,array]])[,thisArg]) 参数解释：callback 自定义每个元素要执行的函数，有三个参数 currentValue 当前遍历的元素 index 当前遍历的元素的下标 array 当前数组 thisArg 用于函数中的 this 对象 例子：``` var name = ['cherry', 'qq', 'qian', 'apple']; var filterItems = (query) => {return name.filter((el)=> el.toLowerCase().indexOf(query.toLowerCase()) > -1 } ```3.6 fill(改变原数组)
功能：用一个固定值填充一个数组中从起始索引到终止索引的全部元素。不包括终止索引。语法：array.fill(value[,start[,end]]) 参数解释：value 要填充的值 start 开始填充的索引值 默认值为 0 end 终止填充的索引值 默认值为 this.length 例子：``` var arr = [1,2,3,4]; arr.fill(0,2,4); //arr 的值为 [1,2,0,0] ```3.7 reduce(不改变原数组)
功能：对每个数组项执行 callback 函数，每次函数执行有一个结果，最后返回迭代的最终结果 语法：array.reduce(callback(accumulator, currentValue[,index[,arr]])[,initValue]) 参数解释：callback 每个元素要执行的函数，有四个参数 accumulator 累计值，上一个元素调用函返回的累计值 currentValue 当前遍历的元素 index 当前遍历的元素的下标 arr 当前的数组 initValue 给 accumulator 的初始值，如果未提供 accumulate 默认为数组的第一个值 描述：如果一个数组有 4 个值。无 initValue 时函数会调用三次，有 initValue 时函数调用 4 次 例子：``` var arr = [1,2,3,4]; var total = arr.reduce((accumulator,currentValue) => {return accumulator + currentValue}) //total 的值为 1+2+3+4 = 10 ```3.8 reduceRight(不改变原数组)
功能：对每个数组项执行 callback 函数，每次函数执行有一个结果，最后返回迭代的最终结果(从右到左) 语法：array.reduceRight(callback(currentValue[,index[,array]])[,initValue]) 参数解释：callback 每个元素要执行的函数 有四个参数 previousValue 上次调用的返回值 currentValue 当前遍历的元素 index 当前遍历的元素的下标 array 当前遍历的数组 initValue 若有：则是给 previousValue 的初始值，若无 previousValue 的初始值就是数组的最后一个元素 例子：``` var arr = [[1,2],[3,4],[5,6]]; var newArr = arr.reduceRight(function(result,current,index){return result.concat(current); }); //newArr 的值 [5, 6, 3, 4, 1, 2] arr 的值不变 ```3.9 some(不改变原数组)
功能：检测数组中至少有一个元素满足该函数则返回 true，否则返回 false 语法：array.some(callback(currentValue[,index[,array]])[,thisArg]) 参数解释：callback 用来检测数组的回调函数 接受三个参数 currentValue 当前遍历到的元素 index 当前遍历的元素的下标 array 当前遍历的数组 thisArg 在回调函数中 this 的值 例子：``` var arr = [1,2,3,4,5]; var result = arr.some(function(currentValue){return currentValue%2;});//result 为 true ```3.10 every(不改变原数组)
功能：检测数组中是否每个元素都满足函数条件，都满足返回 true，否则返回 false 语法：array.every(callback(currentValue[,index[,array]])[,thisArg]) 参数解释：同上 例子：``` var arr = [1,2,3,4,5]; var result = arr.every(function(currentValue){return currentValue < 10;}); // result 为 true ```3.11 keys(不改变原数组)
功能：返回一个新的数组迭代器，包含每个元素的索引 语法：array.keys() 例子：``` var arr = ["cherry","qq","zhang"]; var iterator = arr.keys(); for(let key of iterator){console.log(key);// 打印出 0 1 2 } ```3.12 values(不改变原数组)
功能：返回一个新的数组迭代器，包含每个元素的值 语法：array.values() 例子：``` var arr = ["cherry","qq","zhang"]; var iterator = arr.values(); for(let value of iterator){console.log(value);// 打印出 cherry qq zhang } ```3.13 flatMap(不改变原数组)
功能：每个元素调用数组，然后将结果压缩成一个新数组。与 map 和 flat(1)几乎相同。但是效率高一些 语法：array.flatMap(callback(currentValue[,index[,array]])[,thisArg]) 参数解释：与 3.10 一样 例子：``` var arr1 = [1,2,3,4]; arr1.map(item=>[item * 2]);// 返回新数组 [[2],[4],[6],[8]] arr1.flatMap(item=>[item * 2]);// 返回新数组 [2,4,6,8] arr1.flatMap(item=>[[item * 2]]);// 返回新数组 [[2],[4],[6],[8]] 只会将新数组解开一层 var arr = ["hello","","world"]; arr.map(item=>item.split("")); // 返回新数组[["h","e","l","l","o"],[""],["w","o","r","l","d"]] arr.flatMap(item=>item.split("")); //["h","e","l","l","o","","w","o","r","l","d"] ``` 等价操作：``` // 与上面的第一个使用 flatMap 的例子等价 var arr1 = [1,2,3,4]; arr1.reduce((acc,current)=> acc.concat([current * 2]),[]); // 返回结果 [2,4,6,8] ``` -
其他
4.1 isArray功能：用于检测一个参数是否为数组 语法：Array.isArray(args) 例子：``` Array.isArray([1,2,3,4]);//true Array.isArray(Array.prototype);//true 其实 Array.prototype 也是一个数组 Array.isArray({});//flase ```4.2 from
功能：从一个 ** 类似数组或可迭代对象 ** 中创建一个新的，浅拷贝的数组实例。返回数组。语法：Array.from(arrayLike[,mapFn[,thisArg]]) 参数解释：arrayLike 类数组，可迭代的对象 mapFn 数组中每个元素都会执行的函数 thisArg 函数中的 this 对象 描述：如果说有 mapFn 的情况下，其实就相当于 Array.from(args).map(callback[,thisArg]) 例子：``` Array.from('foo');//["f","o","o"];// 会把字符串变成数组 Array.from(["foo",window]);//["foo",window] Array.from(new Map([[1,2],[3,4]]));//[[1,2],[3,4]] var obj = {"name":"cherry","sex":"女"}; Array.from(obj);//[] 并不是可迭代的类数组，所以返回[] Array.from(false);//[] Array.from(true);//[] ```
正文完