@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新增方法

1. 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新增方法

1. 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"