【干货】js 数组详细操作方法及解析合集
前言
在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结，在这背景下，就有了本篇文章，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。
游泳、健身了解一下：博客、前端积累文档、公众号、GitHub
本文篇幅较长，建议点赞保存再看，也便于日后翻阅。
创建一个数组:
1.字面量方式和构造器
// 字面量方式: // 这个方法也是我们最常用的，在初始化数组的时候 相当方便 var a = [3, 11, 8]; // [3,11,8]; // 构造器: // 实际上 new Array === Array,加不加new 一点影响都没有。 var a = Array(); // [] var a = Array(3); // [,,] var a = Array(3,11,8); // [ 3,11,8 ]
注意当Array()的参数只有一个的时候，返回的是长度为三，内容为空的数组
2.ES6 Array.of() 返回由所有参数值组成的数组
定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。
目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。
let a = Array.of(3, 11, 8); // [3,11,8] let a = Array.of(3); // [3]
3.ES6 Arrary.from() 将两类对象转为真正的数组
定义：用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。
参数：
第一个参数(必需):要转化为真正数组的对象。
第二个参数(可选): 类似数组的map方法，对每个元素进行处理，将处理后的值放入返回的数组。
第三个参数(可选): 用来绑定this。
// 1. 对象拥有length属性 let obj = {0: 'a', 1: 'b', 2:'c', length: 3}; let arr = Array.from(obj); // ['a','b','c']; // 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象 let arr = Array.from('hello'); // ['h','e','l','l','o'] let arr = Array.from(new Set(['a','b'])); // ['a','b']
注意上面使用的let只是说明，现实中let不能重复声明，而var可重复声明。文章后面碰到这种情况也要注意。
补充：Array.from()和Array.of()
一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组
1.何为伪数组
如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，语法上称为“类似数组的对象”(array-like object),即为伪数组。
var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; obj[0] // 'a' obj[1] // 'b' obj.length // 3 obj.push('d') // TypeError: obj.push is not a function
上面代码中，对象obj就是一个类似数组的对象。但是“类似数组的对象”并不是数组，因为它们不具备数组特有的方法。对象obj没有数组的push方法，使用该方法就会报错。
2.有哪些是伪数组
典型的“类似数组的对象”是函数的arguments对象，以及大多数 DOM 元素集，还有字符串。
3.如何转化为真数组
①数组的slice方法可以将“类似数组的对象”变成真正的数组
function doSomething(){ console.log(arguments) var args = Array.prototype.slice.call(arguments); args.push("hj") console.log(args) return args } doSomething(1,2,3)
或者你也可以写成：
function doSomething(){ var args = [].slice.call(arguments); return args } doSomething(1,2,3)
尽管这种方法，也可以实现将类数组转变为数组的目的，但并不直观。ES6新增Array.from()方法来提供一种明确清晰的方式以解决这方面的需求，更推荐后者的办法。
②Array.from()
<button>测试1</button> <br> <button>测试2</button> <br> <button>测试3</button> <br> <script type="text/javascript"> let btns = document.getElementsByTagName("button") console.log("btns",btns);//得到一个伪数组 //btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function Array.from(btns).forEach(item=>console.log(item))将伪数组转换为数组 </script>
在ES6中，扩展运算符(...)也可以将某些数据结构转为数组。只不过它需要在背后调用遍历器接口Symbol.iterator。值得注意的是如果一个对象没有部署遍历器接口，使用扩展运算符是无法将类似数组对象转换成数组。
function doSomething (){
return [...arguments]
}
doSomething('a','b','c'); // ["a","b","c"]
4.Array.from()用法
Array.from接受三个参数，但只有input是必须的：
- input: 你想要转换的类似数组对象和可遍历对象
- map: 类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
- context: 绑定map中用到的this
只要是部署了iterator接口的数据结构，Array.from都能将其转为数组:
let arr = Array.from('juejin');
console.log(arr); //["j", "u", "e", "j", "i", "n"]
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，处理后的值放入返回的数组。
Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]
// 等同于
Array.from([1,2,3].map(x => x * x))
如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。
Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。
Array.from({ length: 2 }, () => 'jack')// ['jack', 'jack']
二、Array.of(v1, v2, v3) : 将一系列值转换成数组
当调用 new Array( )构造器时，根据传入参数的类型与数量的不同，实际上会导致一些不同的结果， 例如：
let items = new Array(2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // undefined
console.log(items[1]) ;
let items = new Array(1, 2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // 1
console.log(items[1]) ; // 2
当使用单个数值参数来调用 Array 构造器时，数组的长度属性会被设置为该参数。 如果使用多个参数(无论是否为数值类型)来调用，这些参数也会成为目标数组的项。数组的这种行为既混乱又有风险，因为有时可能不会留意所传参数的类型。
ES6 引入了Array.of( )方法来解决这个问题。该方法的作用非常类似Array构造器，但在使用单个数值参数的时候并不会导致特殊结果。Array.of( )方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型：
let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2
Array.of基本上可以用来替代Array()或newArray()，并且不存在由于参数不同而导致的重载，而且他们的行为非常统一。
方法:
数组原型提供了非常多的方法，这里分为三类来讲，一类会改变原数组的值，一类是不会改变原数组，以及数组的遍历方法。
改变原数组的方法(9个):
splice()
sort()
pop()
shift()
push()
unshift()
reverse()
copyWithin()
fill()
let a = [1,2,3]; ES5: a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse() ES6: a.copyWithin() / a.fill
对于这些能够改变原数组的方法，要注意避免在循环遍历中改变原数组的选项，比如: 改变数组的长度，导致遍历的长度出现问题。
1.splice() 添加/删除数组元素
定义： splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
语法： array.splice(index,howmany,item1,.....,itemX)
参数:
- index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
- howmany：可选。要删除的项目数量。如果设置为 0，则不会删除项目。
- item1, ..., itemX： 可选。向数组添加的新项目。
返回值: 如果有元素被删除,返回包含被删除项目的新数组。
eg1:删除元素
let a = [1, 2, 3, 4, 5, 6, 7]; var item = a.splice(0, 3); // [1,2,3] console.log(a); // [4,5,6,7] // 从数组下标0开始，删除3个元素 var item = a.splice(-1, 3); // [7] // 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7 console.log(a) // [4,5,6]
eg2: 删除并添加
let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,3,'添加'); // [1,2,3] console.log(a); // ['添加',4,5,6,7] // 从数组下标0开始，删除3个元素，并添加元素'添加' let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-2,3,'添加1','添加2'); // [6,7] console.log(b); // [1,2,3,4,5,'添加1','添加2'] // 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2'
eg3: 不删除只添加:
let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素，返回空数组 console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7] let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素，返回空数组 console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素
从上述三个栗子可以得出:
- 数组如果元素不够，会删除到最后一个元素为止
- 操作的元素，包括开始的那个元素
- 可以添加很多个元素
- 添加是在开始的元素前面添加的
2.sort() 数组排序
定义: sort()方法对数组元素进行排序，并返回这个数组。
参数可选: 规定排序顺序的比较函数。
默认情况下sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，会调用toString()方法将元素转化为字符串的Unicode(万国码)位点，然后再比较字符。
// 字符串排列 看起来很正常 var a = ["Banana", "Orange", "Apple", "Mango"]; a.sort(); // ["Apple","Banana","Mango","Orange"] // 数字排序的时候 因为转换成Unicode字符串之后，有些数字会比较大会排在后面 这显然不是我们想要的 var a = [10, 1, 3, 20,25,8]; console.log(a.sort()) // [1,10,20,25,3,8];
比较函数的两个参数：
sort的比较函数有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素：
- 若比较函数返回值<0，那么a将排到b的前面;
- 若比较函数返回值=0，那么a 和 b 相对位置不变；
- 若比较函数返回值>0，那么b 排在a 将的前面；
对于sort()方法更深层级的内部实现以及处理机制可以看一下这篇文章深入了解javascript的sort方法
sort排序常见用法：
-
数组元素为数字的升序、降序:
var array = [10, 1, 3, 4,20,4,25,8]; // 升序 a-b < 0 a将排到b的前面，按照a的大小来排序的 // 比如被减数a是10，减数是20 10-20 < 0 被减数a(10)在减数b(20)前面 array.sort(function(a,b){ return a-b; }); console.log(array); // [1,3,4,4,8,10,20,25]; // 降序 被减数和减数调换了 20-10>0 被减数b(20)在减数a(10)的前面 array.sort(function(a,b){ return b-a; }); console.log(array); // [25,20,10,8,4,4,3,1];
-
数组多条件排序
var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}]; array.sort(function(a,b){ if(a.id === b.id){// 如果id的值相等，按照age的值降序 return b.age - a.age }else{ // 如果id的值不相等，按照id的值升序 return a.id - b.id } }) // [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}]
-
自定义比较函数，天空才是你的极限
类似的：运用好返回值，我们可以写出任意符合自己需求的比较函数
var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}]; array.sort(function(a,b){ if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ，-1<0 a排在b的前面 return -1 }else{ // 如果不是的话，a排在b的后面 return 1 } }) // [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]
3.pop() 删除一个数组中的最后的一个元素
定义: pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。
参数: 无。
let a = [1,2,3]; let item = a.pop(); // 3 console.log(a); // [1,2]
4.shift() 删除数组的第一个元素
定义: shift()方法删除数组的第一个元素，并返回这个元素。
参数: 无。
let a = [1,2,3]; let item = a.shift(); // 1 console.log(a); // [2,3]
5.push() 向数组的末尾添加元素
定义：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
参数: item1, item2, ..., itemX ,要添加到数组末尾的元素
let a = [1,2,3]; let item = a.push('末尾'); // 4 console.log(a); // [1,2,3,'末尾']
6.unshift()
定义：unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
参数: item1, item2, ..., itemX ,要添加到数组开头的元素
let a = [1,2,3]; let item = a.unshift('开头'); // 4 console.log(a); // ['开头',1,2,3]
7.reverse() 颠倒数组中元素的顺序
定义: reverse() 方法用于颠倒数组中元素的顺序。
参数: 无
let a = [1,2,3]; a.reverse(); console.log(a); // [3,2,1]
8.ES6: copyWithin() 指定位置的成员复制到其他位置
定义: 在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组。
语法:
array.copyWithin(target, start = 0, end = this.length)
参数:
三个参数都是数值，如果不是，会自动转为数值.
- target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。
浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持
eg:
// -2是数字4，-1是数组5 （-2到-1）即从数字4开始到数字5位置停止 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5'] // 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换 a.copyWithin(2,3,5) // ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]
从上述栗子:
- 第一个参数是开始被替换的元素位置
- 要替换数据的位置范围:从第二个参数是开始读取的元素，在第三个参数前面一个元素停止读取
- 数组的长度不会改变
- 读了几个元素就从开始被替换的地方替换几个元素
9.ES6: fill() 填充数组
定义: 使用给定值，填充一个数组。
参数:
第一个元素(必须): 要填充数组的值
第二个元素(可选): 填充的开始位置,默认值为0
第三个元素(可选)：填充的结束位置，默认是为this.length
['a', 'b', 'c'].fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
不改变原数组的方法(8个):
slice()
join()
toLocateString()
toString()
concat()
indexOf()
lastIndexOf()
includes()
ES5：
slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf、
ES7：
includes
1.slice() 浅拷贝数组的元素
定义： 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。
注意：字符串也有一个slice() 方法是用来提取字符串的，不要弄混了。
语法:
array.slice(begin, end);
参数:
begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。
let a= ['hello','world']; let b=a.slice(0,1); // ['hello'] a[0]='改变原数组'; console.log(a,b); // ['改变原数组','world'] ['hello'] b[0]='改变拷贝的数组'; console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']
如上：新数组是浅拷贝的，元素是简单数据类型，改变之后不会互相干扰。
如果是复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变。
let a= [{name:'OBKoro1'}];
let b=a.slice();
console.log(b,a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}]
// a[0].name='改变原数组';
// console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
// b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';
// [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]
原因在定义上面说过了的：slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。
2.join() 数组转字符串
定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。
语法:
array.join(str)
参数:
str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。
let a= ['hello','world']; let str=a.join(); // 'hello,world' let str2=a.join('+'); // 'hello+world'
使用join方法或者下文说到的toString方法时，当数组中的元素也是数组或者是对象时会出现什么情况？
let a= [['OBKoro1','23'],'test']; let str1=a.join(); // OBKoro1,23,test let b= [{name:'OBKoro1',age:'23'},'test']; let str2 = b.join(); // [object Object],test // 对象转字符串推荐JSON.stringify(obj);
所以，join()/toString()方法在数组元素是数组的时候，会将里面的数组也调用join()/toString(),如果是对象的话，对象会被转为[object Object]字符串。
toLocaleString() 数组转字符串
定义: 返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。
语法:
array.toLocaleString()
复制代码参数：无。
let a=[{name:'OBKoro1'},23,'abcd',new Date()];
let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20
复制代码如上述栗子：调用数组的toLocaleString方法，数组中的每个元素都会调用自身的toLocaleString方法，对象调用对象的toLocaleString,Date调用Date的toLocaleString。
toString() 数组转字符串 不推荐
定义: toString() 方法可把数组转换为由逗号链接起来的字符串。
语法:
array.toString()
复制代码参数: 无。
该方法的效果和join方法一样，都是用于数组转字符串的，但是与join方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。
值得注意的是：当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串
let b= [ 'toString','演示'].toString(); // toString,演示
let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦
复制代码cancat
定义： 方法用于合并两个或多个数组，返回一个新数组。
语法：
var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)
复制代码参数：
arrayX（必须）：该参数可以是具体的值，也可以是数组对象。可以是任意多个。
eg1:
let a = [1, 2, 3];
let b = [4, 5, 6];
//连接两个数组
let newVal=a.concat(b); // [1,2,3,4,5,6]
// 连接三个数组
let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
// 添加元素
let newVal3 = a.concat('添加元素',b, c,'再加一个');
// [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
// 合并嵌套数组 会浅拷贝嵌套数组
let d = [1,2 ];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]
复制代码ES6扩展运算符...合并数组：
因为ES6的语法更简洁易懂，所以现在合并数组我大部分采用...来处理，...运算符可以实现cancat的每个栗子，且更简洁和具有高度自定义数组元素位置的效果。
let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]
复制代码更多关于扩展符的详细内容移步阮一峰大神的ECMAScript 6 入门
indexOf() 查找数组是否存在某个元素，返回下标
定义: 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
语法:
array.indexOf(searchElement,fromIndex)
复制代码参数:
searchElement(必须):被查找的元素
fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。
严格相等的搜索:
数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素，即数组元素要完全匹配才能搜索成功。
注意：indexOf()不能识别NaN
eg:
let a=['啦啦',2,4,24,NaN]
console.log(a.indexOf('啦')); // -1
console.log(a.indexOf('NaN')); // -1
console.log(a.indexOf('啦啦')); // 0
复制代码使用场景：
- 数组去重
- 根据获取的数组下标执行操作，改变数组中的值等。
- 判断是否存在，执行操作。
lastIndexOf() 查找指定元素在数组中的最后一个位置
定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）
语法:
arr.lastIndexOf(searchElement,fromIndex)
复制代码参数:
searchElement(必须): 被查找的元素
fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。
关于fromIndex有三个规则:
-
正值。如果该值大于或等于数组的长度，则整个数组会被查找。
-
负值。将其视为从数组末尾向前的偏移。(比如-2，从数组最后第二个元素开始往前查找)
-
负值。其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 数组长度为10 // let b=a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2 // let b=a.lastIndexOf('Koro1',100); // 大于或数组的长度 查找整个数组 返回9 // let b=a.lastIndexOf('Koro1',-11); // -1 数组不会被查找 let b=a.lastIndexOf('Koro1',-9); // 从第二个元素4往前查找，没有找到 返回-1 复制代码
ES7 includes() 查找数组是否包含某个元素 返回布尔
定义： 返回一个布尔值，表示某个数组是否包含给定的值
语法：
array.includes(searchElement,fromIndex=0)
复制代码参数：
searchElement(必须):被查找的元素
fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。
includes方法是为了弥补indexOf方法的缺陷而出现的:
- indexOf方法不能识别
NaN - indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于
-1，表达不够直观
eg:
let a=['OB','Koro1',1,NaN];
// let b=a.includes(NaN); // true 识别NaN
// let b=a.includes('Koro1',100); // false 超过数组长度 不搜索
// let b=a.includes('Koro1',-3); // true 从倒数第三个元素开始搜索
// let b=a.includes('Koro1',-100); // true 负值绝对值超过数组长度，搜索整个数组
复制代码兼容性(MDN): chrome47, Firefox 43,Edge 14,Opera 34, Safari 9,IE 未实现。
遍历方法(12个):
js中遍历数组并不会改变原始数组的方法总共有12个:
ES5：
forEach、every 、some、 filter、map、reduce、reduceRight、
ES6：
find、findIndex、keys、values、entries
复制代码关于遍历：
- 关于遍历的效率，可以看一下这篇详解JS遍历
- 尽量不要在遍历的时候，修改后面要遍历的值
- 尽量不要在遍历的时候修改数组的长度（删除/添加）
forEach
定义: 按升序为数组中含有效值的每一项执行一次回调函数。
语法：
array.forEach(function(currentValue, index, arr), thisValue)
复制代码参数:
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
复制代码thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
关于forEach()你要知道：
- 无法中途退出循环，只能用
return退出本次回调，进行下一次回调。 - 它总是返回 undefined值,即使你return了一个值。
下面类似语法同样适用这些规则
1. 对于空数组是不会执行回调函数的
2. 对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
3. 遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
4. 如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。
复制代码eg:
let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
let obj = { name: 'OBKoro1' };
let result = a.forEach(function (value, index, array) {
a[3] = '改变元素';
a.push('添加到尾端，不会被遍历')
console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
// break; // break会报错
return value; // return只能结束本次回调 会执行下次回调
console.log('不会执行，因为return 会执行下一次循环回调')
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
// 回调函数也接受接头函数写法
复制代码every 检测数组所有元素是否都符合判断条件
定义: 方法用于检测数组所有元素是否都符合函数定义的条件
语法：
array.every(function(currentValue, index, arr), thisValue)
复制代码参数:(这几个方法的参数，语法都类似)
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
复制代码thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
方法返回值规则:
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。=
eg:
function isBigEnough(element, index, array) {
return element >= 10; // 判断数组中的所有元素是否都大于10
}
let result = [12, 5, 8, 130, 44].every(isBigEnough); // false
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
// 接受箭头函数写法
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true
复制代码some 数组中的是否有满足判断条件的元素
定义：数组中的是否有满足判断条件的元素
语法：
array.some(function(currentValue, index, arr), thisValue)
复制代码参数:(这几个方法的参数，语法都类似)
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
复制代码thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
方法返回值规则：
-
如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
-
如果没有满足条件的元素，则返回false。
function isBigEnough(element, index, array) { return (element >= 10); //数组中是否有一个元素大于 10 } let result = [2, 5, 8, 1, 4].some(isBigEnough); // false let result = [12, 5, 8, 1, 4].some(isBigEnough); // true 复制代码
filter 过滤原始数组，返回新数组
定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法：
let new_array = arr.filter(function(currentValue, index, arr), thisArg)
复制代码参数:(这几个方法的参数，语法都类似)
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
复制代码thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
eg:
let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
return value >= 18; // 返回a数组中所有大于18的元素
});
console.log(result,a);// [32,33,40] [32,33,16,40]
复制代码map 对数组中的每个元素进行处理，返回新的数组
定义：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法：
let new_array = arr.map(function(currentValue, index, arr), thisArg)
复制代码参数:(这几个方法的参数，语法都类似)
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
复制代码thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
eg:
let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
return value + '新数组的新元素'
});
console.log(result, a);
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]
复制代码reduce 为数组提供累加器，合并为一个值
定义：reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。
语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
复制代码参数：
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. total(必须)，初始值, 或者上一次调用回调返回的值
2. currentValue(必须),数组当前元素的值
3. index(可选), 当前元素的索引值
4. arr(可选),数组对象本身
复制代码initialValue(可选): 指定第一次回调 的第一个参数。
回调第一次执行时:
- 如果 initialValue 在调用 reduce 时被提供，那么第一个 total 将等于 initialValue，此时 currentValue 等于数组中的第一个值；
- 如果 initialValue 未被提供，那么 total 等于数组中的第一个值，currentValue 等于数组中的第二个值。此时如果数组为空，那么将抛出 TypeError。
- 如果数组仅有一个元素，并且没有提供 initialValue，或提供了 initialValue 但数组为空，那么回调不会被执行，数组的唯一值将被返回。
eg:
// 数组求和
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// 6
// 将二维数组转化为一维 将数组元素展开
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
(a, b) => a.concat(b),
[]
);
// [0, 1, 2, 3, 4, 5]
复制代码reduceRight 从右至左累加
这个方法除了与reduce执行方向相反外，其他完全与其一致，请参考上述 reduce 方法介绍。
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
先看w3c语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
/*
total: 必需。初始值, 或者计算结束后的返回值。
currentValue： 必需。当前元素。
currentIndex： 可选。当前元素的索引；
arr： 可选。当前元素所属的数组对象。
initialValue: 可选。传递给函数的初始值，相当于total的初始值。
*/
复制代码常见用法
数组求和
const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num);
<!-- 设定初始值求和 -->
const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num, 10); // 以10为初始值求和
<!-- 对象数组求和 -->
var result = [
{ subject: 'math', score: 88 },
{ subject: 'chinese', score: 95 },
{ subject: 'english', score: 80 }
];
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0);
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10); // 总分扣除10分
复制代码数组最大值
const a = [23,123,342,12];
const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342
复制代码进阶用法
数组对象中的用法
<!-- 比如生成“老大、老二和老三” -->
const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];
const res = objArr.reduce((pre, cur, index, arr) => {
if (index === 0) {
return cur.name; } else if (index === (arr.length - 1)) { return pre + '和' + cur.name; } else { return pre + '、' + cur.name; } }, ''); 复制代码求字符串中字母出现的次数
const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});
复制代码数组转数组
<!-- 按照一定的规则转成数组 -->
var arr1 = [2, 3, 4, 5, 6]; // 每个值的平方
var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);
复制代码数组转对象
<!-- 按照id 取出stream -->
var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});
复制代码高级用法
多维的叠加执行操作
<!-- 各科成绩占比重不一样， 求结果 -->
var result = [
{ subject: 'math', score: 88 },
{ subject: 'chinese', score: 95 },
{ subject: 'english', score: 80 }
];
var dis = {
math: 0.5,
chinese: 0.3,
english: 0.2
};
var res = result.reduce((accumulator, cur) => dis[cur.subject] * cur.score + accumulator, 0);
<!-- 加大难度， 商品对应不同国家汇率不同，求总价格 -->
var prices = [{price: 23}, {price: 45}, {price: 56}];
var rates = {
us: '6.5',
eu: '7.5', }; var initialState = {usTotal:0, euTotal: 0}; var res = prices.reduce((accumulator, cur1) => Object.keys(rates).reduce((prev2, cur2) => { console.log(accumulator, cur1, prev2, cur2); accumulator[`${cur2}Total`] += cur1.price * rates[cur2]; return accumulator; }, {}), initialState); var manageReducers = function() { return function(state, item) { return Object.keys(rates).reduce((nextState, key) => { state[`${key}Total`] += item.price * rates[key]; return state; }, {}); } }; var res1= prices.reduce(manageReducers(), initialState); 复制代码扁平一个多维数组
var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);
复制代码对象数组去重
const hash = {};
chatlists = chatlists.reduce((obj, next: Object) => {
const hashId = `${next.topic}_${next.stream_id}`;
if (!hash[hashId]) { hash[`${next.topic}_${next.stream_id}`] = true; obj.push(next); } return obj; }, []);ES6：find()& findIndex() 根据条件找到数组成员
find()定义：用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined。
findIndex()定义：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
这两个方法
语法：
let new_array = arr.find(function(currentValue, index, arr), thisArg)
let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)
复制代码参数:(这几个方法的参数，语法都类似)
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
复制代码thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined
这两个方法都可以识别NaN,弥补了indexOf的不足.
eg:
// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4
复制代码浏览器兼容(MDN):Chrome 45,Firefox 25,Opera 32, Safari 8, Edge yes,
ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值
定义：三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。
语法：
array.keys()
array.values()
array.entries()
复制代码参数：无。
遍历栗子(摘自ECMAScript 6 入门)：
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
复制代码在for..of中如果遍历中途要退出，可以使用break退出循环。
如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历:
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
复制代码entries()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1
keys()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8,
注意:目前只有Safari 9支持,，其他浏览器未实现，babel转码器也还未实现
数组常用遍历的方法
前言
本文主要介绍数组常见遍历方法：forEach、map、filter、find、every、some、reduce，它们有个共同点：一般都不会改变原始数组。除非设置value，index，array中通过array[index]重新赋值，才能改变原数组
一、forEach：遍历数组
| 参数 | 描述 |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
var colors = ["red","blue","green"];
// ES5遍历数组方法
for(var i = 0; i < colors.length; i++){
console.log(colors[i]);//red blue green
}
// ES6 forEach
colors.forEach(function(color){
console.log(color);//red blue green
});
我们再来看个例子：遍历数组中的值,并计算总和
var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15
改变原数组 var array=[1,2,3];
array.forEach(function(value,index,array){
//传三个参数 第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身
array[index]=value*10;
});
console.log(array); //[10,20,30]
//没有返回值 var newarray=array.forEach(function(){}) console.log(newarray) undefined
注意: forEach() 对于空数组是不会执行回调函数的。
注意: 无法使用break等语句跳出遍历, 直到所有元素都传递给调用的函数, 但是可以使用抛出异常, 提前终止循环 。
二、map：将数组映射成另一个数组
map通过指定函数处理数组的每个元素，并返回处理后新的数组，map 不会改变原始数组。
forEach和map的区别在于，forEach没有返回值。
map需要返回值，如果不给return，默认返回undefined
使用场景1
假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
var numbers = [1,2,3];
var doubledNumbers = [];
// es5写法
for(var i = 0; i < numbers.length; i++){
doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers);//[2,4,6]
// es6 map方法
var doubled = numbers.map(function(number){
return number * 2;
})
console.log(doubled);//[2,4,6]
使用场景2 假定有一个对象数组(A),将A数中对象某个属性的值存储到B数组中
var cars = [
{model:"Buick",price:"CHEAP"},
{model:"BMW",price:"expensive"}
];
var prices = cars.map(function(car){
return car.price;
})
console.log(prices);//["CHEAP", "expensive"]
三、filter：从数组中找出所有符合指定条件的元素
filter() 检测数值元素，并返回符合条件所有元素的数组。 filter() 不会改变原始数组。
filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。
callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。
使用场景1：假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中
var porducts = [
{name:"cucumber",type:"vegetable"},
{name:"banana",type:"fruit"},
{name:"celery",type:"vegetable"},
{name:"orange",type:"fruit"}
];
// es5写法
var filteredProducts = [];
for(var i = 0; i < porducts.length; i++){
if(porducts[i].type === "vegetable"){
filteredProducts.push(porducts[i]);
}
}
console.log(filteredProducts);//[{name: "cucumber", type: "vegetable"},
{name: "celery", type: "vegetable"}]
// es6 filter
var filtered2 = porducts.filter(function(product){
return product.type === "vegetable";
})
console.log(filtered2);
使用场景2：假定有一个对象数组(A),过滤掉不满足以下条件的对象
条件: 蔬菜 数量大于0,价格小于10
var products = [
{name:"cucumber",type:"vegetable",quantity:0,price:1},
{name:"banana",type:"fruit",quantity:10,price:16},
{name:"celery",type:"vegetable",quantity:30,price:8},
{name:"orange",type:"fruit",quantity:3,price:6}
];
products = products.filter(function(product){
return product.type === "vegetable"
&& product.quantity > 0
&& product.price < 10
})
console.log(products);//[{name:"celery",type:"vegetable",quantity:30,price:8}]
使用场景3：假定有两个数组(A,B),根据A中id值,过滤掉B数组不符合的数据
var post = {id:4,title:"Javascript"};
var comments = [
{postId:4,content:"Angular4"},
{postId:2,content:"Vue.js"},
{postId:3,content:"Node.js"},
{postId:4,content:"React.js"},
];
function commentsForPost(post,comments){
return comments.filter(function(comment){
return comment.postId === post.id;
})
}
console.log(commentsForPost(post,comments));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]
四、find：返回通过测试（函数内判断）的数组的第一个元素的值
它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
find() 返回通过测试的数组的第一个元素的值 如果没有符合条件的则返回undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。
使用场景1
假定有一个对象数组(A),找到符合条件的对象
var users = [
{name:"Jill"},
{name:"Alex",id:2},
{name:"Bill"},
{name:"Alex"}
];
// es5方法
var user;
for(var i = 0; i < users.length; i++){
if(users[i].name === "Alex"){
user = users[i];
break;//找到后就终止循环
}
}
console.log(user);// {name:"Alex",id:2}
// es6 find
user = users.find(function(user){
return user.name === "Alex";
})
console.log(user);// {name:"Alex",id:2}找到后就终止循环
使用场景2：假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
var posts = [
{id:3,title:"Node.js"},
{id:1,title:"React.js"}
];
var comment = {postId:1,content:"Hello World!"};
function postForComment(posts,comment){
return posts.find(function(post){
return post.id === comment.postId;
})
}
console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}
五、every&some
every：数组中是否每个元素都满足指定的条件
some:数组中是否有元素满足指定的条件
使用场景1：计算对象数组中每个电脑操作系统是否可用，大于16位操作系统表示可用,否则不可用
//ES5方法
var computers = [
{name:"Apple",ram:16},
{name:"IBM",ram:4},
{name:"Acer",ram:32}
];
var everyComputersCanRunProgram = true;
var someComputersCanRunProgram = false;
for(var i = 0; i < computers.length; i++){
var computer = computers[i];
if(computer.ram < 16){
everyComputersCanRunProgram = false;
}else{
someComputersCanRunProgram = true;
}
}
console.log(everyComputersCanRunProgram);//false
console.log(someComputersCanRunProgram);//true
//ES6 some every
var every = computers.every(function(computer){
return computer.ram > 16;
})
console.log(every);//false
var some = computers.some(function(computer){
return computer.ram > 16;
})
console.log(some);//true
一言以蔽之：Some: 一真即真；Every: 一假即假
使用场景2：假定有一个注册页面,判断所有input内容的长度是否大于0
function Field(value){
this.value = value;
}
Field.prototype.validate = function(){
return this.value.length > 0;
}
//ES5方法
var username = new Field("henrywu");
var telephone = new Field("18888888888");
var password = new Field("my_password");
console.log(username.validate());//true
console.log(telephone.validate());//true
console.log(password.validate());//true
//ES6 some every
var fields = [username,telephone,password];
var formIsValid = fields.every(function(field){
return field.validate();
})
console.log(formIsValid);//true
if(formIsValid){
// 注册成功
}else{
// 给用户一个友善的错误提醒
}
六、reduce：将数组合成一个值
reduce() 方法接收一个方法作为累加器，数组中的每个值(从左至右) 开始合并，最终为一个值。
使用场景1： 计算数组中所有值的总和
var numbers = [10,20,30];
var sum = 0;
//es5 方法
for(var i = 0; i < numbers.length; i++){
sum += numbers[i];
}
console.log(sum);
// es6 reduce
var sumValue = numbers.reduce(function(sum2,number2){
console.log(sum2);//0 10 30 60
return sum2 + number2;
},0);//sum2初始值为0
console.log(sumValue);
使用场景2：
将数组中对象的某个属性抽离到另外一个数组中
var primaryColors = [
{color:"red"},
{color:"yellow"},
{color:"blue"}
];
var colors = primaryColors.reduce(function(previous,primaryColor){
previous.push(primaryColor.color);
return previous;
},[]);
console.log(colors);//["red", "yellow", "blue"]
使用场景3：判断字符串中括号是否对称
function balancedParens(string){
return !string.split("").reduce(function(previous,char){
if(previous < 0) { return previous;}
if(char == "("){ return ++previous;}
if(char == ")"){ return --previous;}
return previous;
},0);
}
console.log(balancedParens("((())))"));
for in "遍历的是数组的key(index)" "会改变原数组"
var array=[1,2,3];
array.name='zhujianxiong'
for(var index in array){
array[index]+=1;
}
console.log(array); //[2, 3, 4, name: "zhujianxiong1"]
for of " 遍历的是数组的value" "不改变原数组"
var array=[1,2,3];
var a=[3,65,4]
for(var value of array){
a.push(value);
}
console.log(array);
console.log(a);
结语
呼~终于写好了，断断续续，上班也偷偷划水的写了几天，虽说很辛苦，但是现在对数组操作方法，整体清晰了很多，各个API也理解的更好一点了，收获颇多，文章如有不正确的地方欢迎各位大佬鞭策！希望大家看完可以有所收获，喜欢的话，赶紧点波订阅关注/喜欢。
希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。
博客、前端积累文档、公众号、GitHub、wx:OBkoro1、邮箱：[email protected]
以上2018.5.30