JS数组的方法-总结

JS中数组的方法

前言：有一说一，前端渲染页面用到最多的还是数组的操作了，今天总结一下。 ES5中数组的方法：

Array

let arr = ['hello', 3, 4, 5, 'world' ] 以下操作全以该数组为基础 方法：push() 功能：在数组末尾新增元素（可传多个参数） 返回值：新增元素后数组的长度 是否修改原数组： 是

var res = arr.push("aaa", "bbb"); console.log(res, arr); // 7 ["hello", 3, 4, 5, "world", "aaa", "bbb"]

方法：unshift() 功能：在数组开始的位置新增元素（可传多个参数） 返回值：新增元素后数组的长度 是否修改原数组： 是

var res = arr.unshift("aaa", "bbb"); console.log(res, arr); // 7 ["aaa", "bbb", "hello", 3, 4, 5, "world"]

方法：shift() 功能：删除第一位（无参数） 返回值：删除的元素 是否修改原数组： 是

var res = arr.shift(); console.log(res, arr); //hello [3, 4, 5, "world"]

方法：pop() 功能：删除最后一位元素（无参数） 返回值：删除的元素 是否修改原数组： 是

var res = arr.pop(); console.log(res, arr); // world ["hello", 3, 4, 5]

方法：join() 功能：将数组转化为字符（无参数默认使用,隔开） 返回值：转化的结果 是否修改原数组： 否

var res = arr.join(); // hello,3,4,5,world var res = arr.join(""); // hello345world var res = arr.join(" "); // hello 3 4 5 world

方法：splice() 功能：删除并替换指定位置的数据 参数： 一个：从该索引开始之后的元素（包括该索引） 两个：1起始索引，2个数，不插入数据，只删除 两个以上：1起始索引，2个数，删除，并，后面都是要插入的数据 返回值：删除了的元素（为一个数组类型） 是否修改原数组： 是

var res = arr.splice(2); // 截取从第二位开始之后的元素（包括第二位） console.log(res, arr); // [4, 5, "world"] ["hello", 3] var res = arr.splice(2, 1); // 从第2个位置开始删除1个 console.log(res, arr); // [4] ["hello", 3, 5, "world"] var res = arr.splice(2, 1, "aaa", "bb", "ccc"); // 从第2个位置开始删除1个后，插入后面的数据 console.log(res, arr); // [4] ["hello", 3, "aaa", "bb", "ccc", 5, "world"]

方法：slice() 功能：截取得到子数组 参数： 一个：表示从指定位置开始截取，到结束 两个：表示从指定位置到结束位置的前一个 返回值：截取的结果 是否修改原数组： 否

var res = arr.slice(); // 默认得到原数组 console.log(res); // ["hello", 3, 4, 5, "world"] var res = arr.slice(1); //索引1开始到结束的数据 console.log(res); // [3, 4, 5, "world"] var res = arr.slice(1, 4); console.log(res); // [3, 4, 5]

方法：concat() 功能：合并数组 参数：要合并的数据（如果是数组，会默认展开再进行合并） 返回值：合并的结果（新数组） 是否修改原数组： 否

var res = arr.concat("c", "d"); console.log(res); // ["hello", 3, 4, 5, "world", "c", "d"] ar res = arr.concat([4, 5, 6]); // 参数为数组时 console.log(res); // ["hello", 3, 4, 5, "world", 4, 5, 6]

方法：reverse() 功能：翻转数组 参数：无 返回值：翻转的结果 是否修改原数组： 是

var res = arr.reverse(); console.log(res); // ["world", 5, 4, 3, "hello"] console.log(res == arr); // true

方法：sort() 功能：数组排序：默认排序规则是字符的比较规则进行升序 参数：为一个函数：这里我们写成箭头函数的形式 (m, n)=> m-n // 表示升序 (m, n)=> n-m // 表示降序 返回值：排序的结果 是否修改原数组： 是

arr.sort(); // 默认按照字符排序规则（unicode编码） console.log(arr); // [3, 4, 5, "hello", "world"] arr.sort(function (m, n) { return n - m; }); console.log(arr); // ["hello", 5, 4, 3, "world"]

ES5新增的 方法：indexOf() 功能：查询元素所在索引（有则返回索引，无则返回-1 ） 扩展： 字符也可以使用IndexOf() 方法 不同的是 对应数组 indexOf() 是严格比较 而字符时，indexOf()会将参数转化为字符后在进行查询索引 详情请见：JS中的indexOf() 参数：要查询的元素 返回值：索引 或 -1（表示未查到） 是否修改原数组： 否 var res1 = arr.indexOf(5); // 3 var res2 = arr.indexOf(3, 2); // -1 因为是从索引3开始查询 var res3 = arr.indexOf(“4”); // -1 对于数组来说indexOf()为严格匹配

方法：forEach() 功能：遍历数组 参数：为一个函数：这里我们写成箭头函数的形式 参数分别表示当前值、当前值对应的索引以及当前数组本身 返回值：undefined 是否修改原数组： 否

var res = arr.forEach(function (val, idx, self) { console.log(val, idx, self); }); console.log(res);

结果： 方法：map() 功能：遍历数组 参数：为一个函数：这里我们写成箭头函数的形式 参数分别表示当前值、当前值对应的索引以及当前数组本身 返回值：新的数组，中的元素是：每次遍历到数组中数据时的返回值 是否修改原数组： 否

var res = arr.map(function (val, idx, self) { console.log(val, idx, self); return (val *= 2); // map遍历得到新数组 新数组的值为每次return的值 });

结果： 方法：filter() 功能：遍历数组 - 筛选数据 参数：为一个函数：这里我们写成箭头函数的形式 参数分别表示当前值、当前值对应的索引以及当前数组本身 返回值：筛选得到的数组，中的元素是满足retrun 中条件为true的元素 是否修改原数组： 否

var res = arr.filter(function (val, idx, self) { console.log(val, idx, self); return typeof val === "number"; // 这里得到数组中类型为number的元素 });

结果： 得到 [3,4,5] 方法：some() 功能：遍历数组 - 检测数据（有一个满足条件即返回true 否则 返回false） 参数：为一个函数：这里我们写成箭头函数的形式 参数分别表示当前值、当前值对应的索引以及当前数组本身 返回值：布尔值 遍历数组中数据时，只要有一个返回true，就是true，得到结果则立即停止遍历 – return 是否修改原数组： 否

var res = arr.some(function(val,idx,self){ console.log(val,idx,self); return val === 4; })

结果： 得到 true 注意： some()得到结果后会立即结束遍历 方法：every() 功能：遍历数组 - 检测数据（每个元素都满足条件才返回true 否则 返回false） 参数：为一个函数：这里我们写成箭头函数的形式 参数分别表示当前值、当前值对应的索引以及当前数组本身 返回值：布尔值 ，得到结果则立即停止遍历 – return 是否修改原数组： 否

var res = arr.some(function(val,idx,self){ console.log(val,idx,self); return val === 4; // 可以理解为arr中的每个元素都是4吗 如果遍历到不是4的 则返回false })

结果： 得到 true 注意： every()得到结果后会立即结束遍历 方法：reduce() 功能：遍历数组 - 归并 参数：为一个函数：这里我们写成箭头函数的形式 四个参数分别表示 上次的值、当前值、当前值对应的索引以及当前数组本身 注：pre表示上次的返回值 在reduce()的第二个参数赋值 ， 如果没有则默认为数组第一个元素 返回值：布尔值 ，得到结果则立即停止遍历 – return 是否修改原数组： 否

这里我们单独定义了一个纯数字的数组方便操作 也是常见的reduce实现累加的操作

var arr = [2, 3, 4, 5, 6, 7]; var res = arr.reduce(function (prev, val, idx, self) { console.log(prev, val, idx, self); return prev + val; // }); console.log(res);

除此之外关于数组查询方式，除了indexOf()外，还有很多种，比如

find() 返回数组中第一个满足条件的数据findIndex() 返回数组中第一个满足条件的索引(从0开始), 不满足返回-1lastIndexOf() 返回数组中最后一个满足条件的索引(从0开始), 不满足返回-1includes() 判断数组宏是否包含某值，返回 true 或 false （includes不支持引用类型数据查询） 详情见： JS数组的5中查询方式