js 数组方法汇总

1.concat

说明： 用于合并两个或多个数组。此方法不会更改现有数组，返回值是一个新数组。

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
//  ["a", "b", "c", "d", "e", "f"]

语法：var new_array = old_array.concat(value1[, value2[, …[, valueN]]]);
参数：valueN（可选）
返回值： 新的Array实例。
concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝，它包含与原始数组相结合的相同元素的副本。 原始数组的元素将复制到新数组中。

①.数据类型如字符串，数字和布尔（不是String，Number 和 Boolean 对象）：concat将字符串和数字的值复制到新数组中。

var array1 = [1, 2, 3];
var array2 = array1.concat(); // [1, 2, 3]
// 无参数时，可以利用该方法进行拷贝数组（前提是数组里不包含对象）

②. 对象引用（而不是实际对象）：concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说，如果引用的对象被修改，则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。

var array1 = [1, 2, 3];
var array2 = [{name: 'zxx'}];
var array3 = array1.concat(array2);
array3[3].age = 18;
console.log(array3); // [1, 2, 3 , {name: 'zxx', age: 18}]
console.log(array2); // [{name: 'zxx', age: 18}]

2.join

说明： 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

var elements = ['Fire', 'Wind', 'Rain'];
console.log(elements.join());
// expected output: "Fire,Wind,Rain"
console.log(elements.join(''));
// expected output: "FireWindRain"
console.log(elements.join('-'));
// expected output: "Fire-Wind-Rain"

语法： arr.join([separator])
参数： separator(可选)。 指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略，数组元素用逗号分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。
返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

3.pop

说明： 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
语法： arr.pop()；
返回值： 从数组中删除的元素(当数组为空时返回undefined)
pop方法根据 length属性来确定最后一个元素的位置。如果不包含length属性或length属性不能被转成一个数值，会将length置为0，并返回undefined。

如果你在一个空数组上调用 pop()，它返回 undefined。

var myFish = ["angel", "clown", "mandarin", "surgeon"];
var popped = myFish.pop();
console.log(myFish); 
// ["angel", "clown", "mandarin"]
console.log(popped); 
// surgeon

4.push

说明： 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
语法： arr.push(element1, …, elementN)；
参数： elementN 被添加到数组末尾的元素；
返回值: 当调用该方法时，新的 length 属性值将被返回。
push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值，则插入的元素索引为 0，包括 length 不存在时。当 length 不存在时，将会创建它。
①.添加元素到数组：

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");
console.log(sports); 
// ["soccer", "baseball", "football", "swimming"]
console.log(total);  
// 4

②. 合并两个数组：
注意当第二个数组(如示例中的moreVegs)太大时不要使用这个方法来合并数组，因为事实上一个函数能够接受的参数个数是有限制的。

var arr1 = ['parsnip', 'potato'];
var arr2 = ['celery', 'beetroot'];

// 将第二个数组融合进第一个数组
// 相当于 arr1.push('celery', 'beetroot');
Array.prototype.push.apply(arr1, arr2);

console.log(arr1); 
// ['parsnip', 'potato', 'celery', 'beetroot']

③.像数组一样使用对象：
Array.prototype.push 可以在一个对象上工作。 注意，我们没有创建一个数组来存储对象的集合。 相反，我们将该集合存储在对象本身上，并使用在 Array.prototype.push 上使用的 call 来调用该方法，使其认为我们正在处理数组，而它只是像平常一样运作，这要感谢 JavaScript 允许我们建立任意的执行上下文。

var obj = {
    length: 0,
    addElem: function addElem (elem) {
        [].push.call(this, elem);
    }
};
obj.addElem({});
obj.addElem({});
console.log(obj.length);
//  2

注意，尽管 obj 不是数组，但是 push 方法成功地使 obj 的 length 属性增长了，就像我们处理一个实际的数组一样。

5.shift

说明： 从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
语法： arr.shift()
返回值： 从数组中删除的元素; 如果数组为空则返回undefined 。
shift 方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0)，则返回 undefined。

shift 方法并不局限于数组：这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。但是对于没有 length 属性（从0开始的一系列连续的数字属性的最后一个）的对象，调用该方法可能没有任何意义。

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"
var shifted = myFish.shift(); 
console.log('调用 shift 之后: ' + myFish); 
// "调用 shift 之后: clown,mandarin,surgeon" 
console.log('被删除的元素: ' + shifted); 
// "被删除的元素: angel"

6. unshift

说明： 将一个或多个元素添加到数组的开头，并返回该数组的新长度。
语法： arr.unshift(element1, …, elementN)
参数： elementN 要添加到数组开头的元素；
返回值： 当一个对象调用该方法时，返回其length属性值；

var arr = [1, 2];
arr.unshift(0); //result of call is 3, the new array length
//arr is [0, 1, 2]
arr.unshift(-2, -1); //  5
//此时数组为 [-2, -1, 0, 1, 2]
arr.unshift( [-3] );
//此时数组为 [[-3], -2, -1, 0, 1, 2]

7. slice

说明：返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。
语法： arr.slice(begin, end);
参数说明：

• begin（可选）

从该索引处开始提取原数组中的元素（从0开始）。
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
如果省略 begin，则 slice 从索引 0 开始。

• end（可选）

在该索引处结束提取原数组元素（从0开始）。slice会提取原数组中索引从 begin 到 end 的所有元素（包含begin，但不包含end）。

slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则slice 会一直提取到原数组末尾。
如果 end 大于数组长度，slice 也会一直提取到原数组末尾。
返回值： 一个截取之后的新数组
①. 返回现有数组的一部分：

var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.slice(); // 可实现数组的浅拷贝；
var arr3 = arr1.slice(0,2); // [1, 2]

②. 将类数组对象转换成一个新数组：

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

也可以利用bind

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

以下主要是ES5 数组新增的方法：

1. every

语法： arr.every(callback[, thisArg]);

参数：

• callback

用来测试每个元素的函数，被调用时传入三个参数： 元素值， 元素的索引， 原数组；

• thisArg（可选）

执行callback时使用的this值，如省略，则在非严格模式下为全局对象，在严格模式下为undefined。

说明： every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

实例：

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// true

兼容老版本IE（Polyfill）

if (typeof Array.prototype.every != "function") {
	Array.prototype.every = function(fn){
	 if (this === void 0 || this === null || typeof fn !== 'function')
       throw new TypeError();

     var t = Object(this), context = arguments.length >= 2 ? arguments[1] : void 0;
     var len = t.length, bool = true;
     for(var i = 0;i < len; i++){
     	if(!bool) break;
     	bool = !!fn.call(context, t[i], i, t);
     }
     return bool;
	}
}

2. filter

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数：

• callback

用来测试数组中每个元素的函数。此函数接受三个参数，element表示数组中当前正在处理的元素， index（可选）表示正在处理的元素在数组中的索引。

• array（可选）

数组本身；

• thisArg（可选）

执行 callback 时，用于 this 的值。
实例：

下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filter);
// [12, 130, 44]

兼容老版本IE（Polyfill）

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

3. forEach

说明：用于数组遍历，循环。那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。
参数跟filter方法一样。

var array = [1, 2, 3];

delete array[1]; // 移除 2
alert(array); // "1,,3"

alert(array.length); // but the length is still 3

array.forEach(alert); // 弹出的仅仅是1和3

注意：如果使用箭头函数表达式来传入函数参数，thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。

兼容老版本IE（Polyfill）

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function (fn, context) {
   if (typeof fn === "function"){
	   for (var i = 0, length = this.length; i < length; i++) {
	     if(Object.prototype.hasOwnProperty.call(this, i)) {
	        fn.call(context, this[i], i, this);
	      }
	    }
   }
  };
}

4. indexOf

语法：arr.indexOf(searchElement[, fromIndex = 0])
参数：

• searchElement

被查找的元素；

• fromIndex（可选）

开始查找的位置。默认值为0。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。为负值，则从searchElement.length + fromIndex位置开始查找。如值仍小于0， 则整个searchElement都会被查询。

实例：

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

兼容老版本IE（Polyfill）

if (typeof Array.prototype.every != "function") {
	Array.prototype.indexOf = function(searchElement, fromIndex) {
		var k;
		if (this == null) {
	      throw new TypeError('"this" is null or not defined');
	    }
	    var O = Object(this);
	    var len = O.length >>> 0;
	    if (len === 0) {
	      return -1;
	    }
	    var n = +fromIndex || 0;

	    if (Math.abs(n) === Infinity) {
	      n = 0;
	    }
	    if (n >= len) { // fromIndex值大于数组长度则返回-1；
	      return -1;
	    }
	    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); // 为负数判断
	    while (k < len) {
	    	if (k in O && O[k] === searchElement) { // 利用===来判断
		        return k;
		      }
		      k++;
	    }
	    return -1;
	}
}

5. lastIndexOf

语法：arr.lastIndexOf(searchElement[, fromIndex])
参数：

• searchElement

被查找的元素；

• fromIndex（可选）

从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
实例：

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

兼容老版本IE（Polyfill）

if (typeof Array.prototype.lastIndexOf != "function") {
  Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
    var index = -1, length = this.length;
    fromIndex = fromIndex * 1 || length - 1;

    for (var k = length - 1; k > -1; k-=1) {
        if (k <= fromIndex && this[k] === searchElement) {
            index = k;
            break;
        }
    }
    return index;
  };
}

6. map

语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
参数：

• callback

生成新数组元素的函数，使用三个参数；
currentValue, callback 数组中正在处理的当前元素
index可选, callback 数组中正在处理的当前元素的索引。
array可选, map 方法调用的数组

• thisArg（可选）

执行 callback 函数时值被用作this
实例：

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

var kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) {
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}],

// kvArray 数组未被修改:
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]

兼容老版本IE（Polyfill）

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

7. reduce

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数：

• callback

执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
accumulator,累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue;
currentValue, 数组中正在处理的元素。
index 可选, 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始
array 可选, 调用reduce()的数组

简单来说：callback函数接受4个参数：之前值、当前值、索引值以及数组本身

• initialValue（可选）

作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错
实例：

var arr = [0, 1, 2, 3, 4];
var sum = arr.reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
console.log(sum); // 10

// 二维数组的扁平化
var matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];

// 二维数组扁平化
var flatten = matrix.reduce(function (previous, current) {
  return previous.concat(current);
});

console.log(flatten); // [1, 2, 3, 4, 5, 6]

兼容老版本IE（Polyfill）

if (typeof Array.prototype.reduce != "function") {
  Array.prototype.reduce = function (callback, initialValue ) {
     var previous = initialValue, k = 0, length = this.length;
     if (typeof initialValue === "undefined") {
        previous = this[0];
        k = 1;
     }
     
    if (typeof callback === "function") {
      for (k; k < length; k++) {
         this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
      }
    }
    return previous;
  };
}

8. reduceRight

跟reduce相比，用法类似，差异在于reduceRight是从数组的末尾开始实现
实例：

var arr= [1, 2, 3, 4];
var specialDiff = arr.reduceRight(function (previous, current, index) {
  if (index == 0) {
    return previous + current;
  }
  return previous - current;
});

console.log(specialDiff); // 0


// 定义可组合函数
const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)

// 加1
const inc = (n) => n + 1

// 乘2
const double = (n) => n * 2

// 组合
console.log(compose(double, inc)(2)); // 6

// 组合
console.log(compose(inc, double)(2)); // 5

兼容老版本IE

（Polyfill）

if (typeof Array.prototype.reduceRight != "function") {
  Array.prototype.reduceRight = function (callback, initialValue ) {
    var length = this.length, k = length - 1, previous = initialValue;
    if (typeof initialValue === "undefined") {
        previous = this[length - 1];
        k--;
    }
    if (typeof callback === "function") {
       for (k; k > -1; k-=1) {          
          this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
       }
    }
    return previous;
  };
}

9. some

some 方法为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true。否则，some() 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。
参数跟every方法一样。

兼容老版本IE（Polyfill）

if (typeof Array.prototype.some != "function") {
	Array.prototype.some = function(fn){
	 if (this === void 0 || this === null || typeof fun !== 'function')
       throw new TypeError();

     var t = Object(this), context = arguments.length >= 2 ? arguments[1] : void 0;
     var len = t.length, bool = false;
     for(var i = 0;i < len; i++){
     	if(bool) break;
     	bool = !!fn.call(context, t[i], i, t);
     }
     return bool;
	}
}

参考资料：
MDN Array
ES5中新增的Array方法详细说明