@Array数组常用方法

常见方法

1.concat():连接两个或更多的数组，并返回结果 用法：arr.concat(arr1,arr2)：结果：返回的数组元素顺序与连接的数组先后顺序一致

var a = [1,2,3]; var b = [4,5,6]; var c= [7,8,9] console.log(a.concat(b)) // [1,2,3,4,5,6] console.log(b.concat(c,a)) //[4,5,6,7,8,9,1,2,3] console.log(a.concat(4,5); //[1,2,3,4,5]

2.join() ： 将所有的元素放入一个字符串中，元素通过指定的分隔符进行分隔 3.pop()：删除并返回数组的最后一个元素 4.push()：向数组的末尾添加一个或更多的元素，并返回新的长度 5.shift()：删除并返回数组的第一元素 6.unshift()：向数组的开头添加一个或者更多的元素，并返回数组的长度 7.reverse()：颠倒数组中的元素

var b = [4,5,6]; console.log(b.reverse()) // [6,5,4] console.log(b) // [6,5,4]

8.slice()：从某个已有的数组返回选定的元素（不改变原数组） 9.splice()：删除元素，并向数组中添加新的元素（要改变原数组）

var b = [4,5,6,7,8]; var c= [9,10,11,12,13] console.log(b.slice(2,3)) // [6] console.log(b) // [4,5,6,7,8] console.log(c.splice(2,3)) // [11,12,13] console.log(c) // [9,10]

10.sort()：对数组的元素进行排序 11.toString() :将数组转换为字符串，并返回结果

es5新增方法

forEach() :遍历循环 用法：array.forEach(callback,thisObject) 1：callback：必填，回调函数支持三个参数：value:变量的数组值，index：索引，array：数组本身 2：thisObject：上下文参数，可选，改变函数里面的this指向，如果thisObject不指定，则使用全局对象代替（在浏览器是为window）,，严格模式下甚至是undefined. var arr =[1,2,3]; //forEach() arr.forEach(function(value,index,array){ //forEach方法中function回调支持三个参数：第一个：遍历的数组内容，第二个：索引，第三个：数组本身 }) //$.each(),$.each()的第一个和第二个参数与forEach()的参数正好相反 $.each(arr,function(index,value,array){ })

解决老浏览器兼容器问题

//解决forEach()兼容 IE6-IE8 function resolveForEach(){ if(typeof Array.prototype.forEach !="function"){ Array.prototype.forEach =function(fn,context){ //context改变回调函数中的this指向，若不传，则回调函数中的this指向全局（window） var context = context ||"window"; for(var k=0,length=this.length; k<length; k++){ fn.call(context,this[k],k,this); //或 fn.apply(context,[this[k],k,this]) } // call()、apply（）、bind()实质都是用来重定义this对象的 } } }

2：map():映射，原数组被映射为对应的新数组，基本用法与forEach()方法一致 用法：array.map(callback, thisObject) 1：callback：必填，回调函数支持三个参数：value:变量的数组值，index：索引，array：数组本身 2：thisObject：上下文参数，可选，改变函数里面的this指向，如果thisObject不指定，则使用全局对象代替（在浏览器是为window）,，严格模式下甚至是undefined.

var arr =[ {name: "张含韵", "email": "zhang@email.com"}, {name: "江一燕", "email": "jiang@email.com"}, {name: "李小璐", "email": "li@email.com"} ] var nameArr = arr.map(function(item){ return item.name//map的callBack需要return值，如果没有return值，则数组的所有项都被映射为undefined })

解决兼容

if(typeof Array.prototype.map !="undefined"){ Array.prototype.map = function (fn,context){ var context = context || "window"; var arr =[]; for(var k=0,length=this.length;k<length;k++){ arr[k] = fn.call(context,this.k,k,this) } return arr; } }

3：filter()：过滤筛选，指数组filter之后，返回新的数组，用法与map()极为相似 用法：array.filter(callback,thisObject) 1：callback：必填，回调函数支持三个参数：value:变量的数组值，index：索引，array：数组本身 2：thisObject：上下文参数，可选，改变函数里面的this指向，如果thisObject不指定，则使用全局对象代替（在浏览器是为window）,，严格模式下甚至是undefined. 3:callback函数需要返回Boolear值，如果为true，则表示通过 解决兼容

if(typeof Array.prototype.filter !="undefined"){ Array.prototype.filter =function (fn,context){ var arr =[]; for(var k=0,length=this.length;k<length;k++){ if(fn.call(context,this.k,k,this)){ arr.push(fn.call(context,this.k,k,this)) } } return arr } }

4：some()：意指某些，指是否某些项符合条件，返回值是Boolean值，some要求只要有一个值返回为true就可以了了，当some有一个返回值为true时，some即返回不再执行了。

var arr =[1,3,5,7,9] var curr =5; function bigThanCurr(num){ if(num>curr){ reutrn true; } } if( arr.some(bigThanCurr) ){ alert("hahah") }

解决兼容

if(typeof Array.prototype.filter !="undefined"){ Array.prototype.filter =function (fn,context){ var passed=[]; for(var k=0,length=this.length;k<length;k++){ if(fn.call(context,this.k,k,this)){ passed = true; break; } } return passed } }

5：every():全部符合条件，返回值是Boolean值，每一个值都要为true,当有一个值为false时，every即不再执行，返回false，用法同every一样。

6：indexOf()：从数组的开头开始查找，返回值的索引，如果没有匹配（严格匹配），返回-1

arr.indexOf（searchElement,fromIndex） //fromIndex:可选，表示从这个位置开始搜索，默认值为0

IE6等浏览器兼容如下

if(typeOf Array.prototype.indexOf !="function"){ Array.prototype.indexOf = function (searchElement,fromIndex){ var index = -1; var fromIndex = fromIndx*1 || 0; for(var k=0;length=this.length;k<length;k++){ if(k>fromIndex && this[k] == searchElement){ index = k; break; } } return index; } }

7：lastIndexOf()：与indexOf()相似，不同的是lastIndexOf（）从数组的末尾开始查找，fromIndex的默认值为array.length-1

8：reduce():迭代递归 使用方法：array.reduce(callback,initialValue) 1：callback接受四个参数，之前值，当前值，当前值的索引，数组本身 2：initialValue：可选，表示初始值，若指定则当作最初使用的之前值，若缺省，则使用数组的第一个元素作为初始值，相比有initailValue时，少迭代一次

var arr = [1,10,30,50,70]; arr.reduce(function(previous,current,index,array){ console.log(previous) return previous+current },100)

9：reduceRight:与reduce的作用完全相同，唯一的不同是，reduceRight是从右至左遍历数组的元素

es6新增方法

from()：用于将两类对象转换为真正的数组：类似数组对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map） 注：扩展运算符（…）也可以将某些数据格式转换为数组，展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换 a、使用Array.from将类似数组的对象转为真正的数组 (常见的类似数组对象：DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象) let list ={ '0': 'a', '1': 'b', '2': 'c', length: 3 } // es5的写法 var arr1 = [].slice.call(list ); // ['a', 'b', 'c'] // es6的写法 var arr2 = Array.from(list) // ['a', 'b', 'c']

b、Array.from还可以接受第二个参数，作用类似与数组的map()方法

rray.from(arrayLike, x => x * x); // 等同于 Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]

2.of()：用于将一组值，转换为数组，总是返回参数值组成的数组。如果没有参数，就返回一个空数组

Array.of(1,2,3) // [1,2,3] //使用下面的代码可以模拟Array.of Array.slice.call(arguments)

3.copyWithin()：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。 用法：Array.prototype.copyWithin(target, start = 0, end = this.length) 它接受三个参数。

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。 start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。 end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。 // 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相当于3号位，-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 将2号位到数组结束，复制到0号位 let i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // 对于没有部署 TypedArray 的 copyWithin 方法的平台 // 需要采用下面的写法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]

4.includes() 用来判断一个数组是否包含一个指定的值，包含则返回true,反之则返回false      用法：array.includes(searchElement,fromIndex)      1:searchElement：需要查找的元素      2:fromIndex：可选，从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0，如果fromIndex大于等于数组的长度，则返回false,该数组不会被搜索。      3：includes()有意设计为通用的方法，它不要求this值是数组对象，所有他可以被用于其他类型的对象（比如：类数组对象）

// demo var arr = [1,2,3]; console.log(arr.includes(2)) // true console.log(arr.includes(5)) // false // 在函数arguments对象上调用includes方法 (function(){ console.log([].includes.call(arguments,'a')) // true console.log([].includes.call(arguments,g')) // false })('a','b')

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

[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10

6.findIndex()：用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1 7.fill()：使用给定值，填充一个数组 8.keys() 、 values() 和 entries() 用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for…of循环进行遍历 a、keys()：是对键名的遍历 b、values()：是对键值的遍历 c、entries()：是对键值对的遍历

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"