Array数组常用方法、ES5扩展方法、ES6新增方法

@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"