ES5 数组方法

最近总结了一些ES5和ES6数组的一些方法，希望能给大家带来一些帮助吧

1.Array.isArray()方法用来判断一个值是否为数组。它可以弥补typeof运算符的不足

var a = [1, 2, 3];

typeof a // "object"

Array.isArray(a) // true

2.valueOf()方法返回数组本身

var a = [1, 2, 3];

a.valueOf() // [1, 2, 3]

3.toString()方法返回数组的字符串形式

var a = [1, 2, 3];

a.toString() // "1,2,3"

var a = [1, 2, 3, [4, 5, 6]];

a.toString() // "1,2,3,4,5,6"

4.push() 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var a = [];

a.push(1) // 1

a.push('a') // 2

a.push(true, {}) // 4

a // [1, 'a', true, {}]

5.pop() 方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.pop() // 'c'

a // ['a', 'b']

对空数组使用pop方法，不会报错，而是返回undefined。

6.join() 方法以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'

a.join(' | ') // "1 | 2 | 3 | 4"

a.join() // "1,2,3,4"

7.concat()方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

[1, 2, 3].concat(4, 5, 6)

// [1, 2, 3, 4, 5, 6]

// 等同于

[1, 2, 3].concat(4, [5, 6])

[1, 2, 3].concat([4], [5, 6])

concat方法也可以用于将对象合并为数组。

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]
[].concat({a: 1}, [2])
// [{a: 1}, 2]
[2].concat({a: 1})
// [2, {a: 1}]

8.shift()方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.shift() // 'a'

a // ['b', 'c']

9.unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var arr = [ 'c', 'd' ];

arr.unshift('a', 'b') // 4

arr // [ 'a', 'b', 'c', 'd'

10.reverse() 方法用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]

a // ["c", "b", "a"]

11.slice()方法用于提取原数组的一部分，返回一个新数组，原数组不变。

// 格式

arr.slice(start_index, upto_index);

// 用法

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]

a.slice(1) // ["b", "c"]

a.slice(1, 2) // ["b"]

a.slice(2, 6) // ["c"]

a.slice() // ["a", "b", "c"] 相当于复制数组

如果slice方法的参数是负数，则表示倒数计算的位置。

var a = ['a', 'b', 'c'];

a.slice(-2) // ["b", "c"]

a.slice(-2, -1) // ["b"]

如果参数值大于数组成员的个数，或者第二个参数小于第一个参数，则返回空数组。

var a = ['a', 'b', 'c'];

a.slice(4) // []

a.slice(2, 1) // []

12.splice()方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

// 格式

arr.splice(index, count_to_remove, addElement1, addElement2, ...);

// 用法

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

a.splice(4, 2) // ["e", "f"]

a // ["a", "b", "c", "d"]

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

a.splice(-4, 2) // ["c", "d"]

上面代码表示，从倒数第四个位置c开始删除两个成员。

如果只是单纯地插入元素，splice方法的第二个参数可以设为0。

var a = [1, 1, 1];

a.splice(1, 0, 2) // []

a // [1, 2, 1, 1]

13.sort() 方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

[10111, 1101, 111].sort(function (a, b) {
      return a - b;
 })// [111, 1101, 10111]

[
{ name: "张三", age: 30 },
{ name: "李四", age: 24 },
{ name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//  { name: "李四", age: 24 },
//  { name: "王五", age: 28  },
//  { name: "张三", age: 30 }
// ]

14.map()方法对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。map方法接受一个函数作为参数。该函数调用时，map方法会将其传入三个参数，分别是当前成员、当前位置和数组本身。

var numbers = [1, 2, 3];

numbers.map(function (n) {

  return n + 1;

});

// [2, 3, 4]

numbers

// [1, 2, 3]

[1, 2, 3].map(function(elem, index, arr) {

  return elem * index;

});

// [0, 2, 6]

15.forEach() 方法与map方法很相似，也是遍历数组的所有成员，执行某种操作，但是forEach方法一般不返回值，只用来操作数据。如果需要有返回值，一般使用map方法。

forEach方法的参数与map方法一致，也是一个函数，数组的所有成员会依次执行该函数。它接受三个参数，分别是当前位置的值、当前位置的编号和整个数组。

function log(element, index, array) {

  console.log('[' + index + '] = ' + element);

}

[2, 5, 9].forEach(log);

// [0] = 2

// [1] = 5

// [2] = 9

forEach方法也可以接受第二个参数，用来绑定回调函数的this关键字。

var obj = {

  name: '张三',

  times: [1, 2, 3],

  print: function () {

    this.times.forEach(function (n) {

      console.log(this.name);

    }, this);

  }

};

obj.print()

// 张三

// 张三

// 张三

注意，forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {

  if (arr[i] === 2) break;

  console.log(arr[i]);

}

// 2

16.filter() 方法的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

[1, 2, 3, 4, 5].filter(function (elem) {

  return (elem > 3);

})

// [4, 5]

filter方法还可以接受第二个参数，指定测试函数所在的上下文对象（即this对象）。

var Obj = function () {

  this.MAX = 3;

};

var myFilter = function (item) {

  if (item > this.MAX) {

    return true;

  }

};

var arr = [2, 8, 3, 4, 1, 3, 2, 9];

arr.filter(myFilter, new Obj())

// [8, 4, 9]

17.some()，every()

这两个方法类似“断言”（assert），用来判断数组成员是否符合某种条件。

它们接受一个函数作为参数，所有数组成员依次执行该函数，返回一个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。

some方法是只要有一个数组成员的返回值是true，则整个some方法的返回值就是true，否则false。

var arr = [1, 2, 3, 4, 5];

arr.some(function (elem, index, arr) {

  return elem >= 3;

});

// true

every方法则是所有数组成员的返回值都是true，才返回true，否则false。

var arr = [1, 2, 3, 4, 5];

arr.every(function (elem, index, arr) {

  return elem >= 3;

});

// false

注意，对于空数组，some方法返回false，every方法返回true，回调函数都不会执行。

some和every方法还可以接受第二个参数，用来绑定函数中的this关键字。

18.reduce()，reduceRight()reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。

reduce：是从左到右处理（从第一个成员到最后一个成员）

reduceRight：则是从右到左（从最后一个成员到第一个成员），其他完全一样。

这两个方法的第一个参数都是一个函数。该函数接受以下四个参数：

累积变量，默认为数组的第一个成员

当前变量，默认为数组的第二个成员

当前位置（从0开始）

原数组

这四个参数之中，只有前两个是必须的，后两个则是可选的。

下面的例子求数组成员之和。

[1, 2, 3, 4, 5].reduce(function(x, y){

  console.log(x, y)

  return x + y;

});

// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

利用reduce方法，可以写一个数组求和的sum方法。

let arr = [234,234,34,34,12]

Array.prototype.sum = function () {

    return this.reduce(function (partial, value) {

        return partial + value

    })

}

console.log(arr.sum())  //584

如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。

[1, 2, 3, 4, 5].reduce(function(x, y){

  return x + y;

}, 10);

// 25

19.indexOf()，lastIndexOf()

indexOf 方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。

lastIndexOf 方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1

a.indexOf('y') // -1

indexOf方法还可以接受第二个参数，表示搜索的开始位置。

['a', 'b', 'c'].indexOf('a', 1) // -1

ES6 数组方法

1.扩展运算符，该运算符主要用于函数调用。

function push(array, ...items) {

  array.push(...items);

}

function add(x, y) {

  return x + y;

}

const numbers = [4, 38];

add(...numbers) // 42

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 的写法

function f(x, y, z) {

  // ...

}

var args = [0, 1, 2];

f.apply(null, args);

// ES6的写法

function f(x, y, z) {

  // ...

}

let args = [0, 1, 2];

f(...args);

下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。

// ES5 的写法

Math.max.apply(null, [14, 3, 77])

// ES6 的写法

Math.max(...[14, 3, 77])

// 等同于

Math.max(14, 3, 77);

另一个例子是通过push函数，将一个数组添加到另一个数组的尾部。

// ES5的 写法

var arr1 = [0, 1, 2];

var arr2 = [3, 4, 5];

Array.prototype.push.apply(arr1, arr2);

// ES6 的写法

let arr1 = [0, 1, 2];

let arr2 = [3, 4, 5];

arr1.push(...arr2);

扩展应用符的应用

a). 复制数组（克隆数组，修改a2，a1不会改变）

const a1 = [1, 2];

// 写法一

const a2 = [...a1];

// 写法二

const [...a2] = a1;

b). 合并数组

// ES5

[1, 2].concat(more)

// ES6

[1, 2, ...more]

var arr1 = ['a', 'b'];

var arr2 = ['c'];

var arr3 = ['d', 'e'];

// ES5的合并数组

arr1.concat(arr2, arr3);

// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组

[...arr1, ...arr2, ...arr3]

// [ 'a', 'b', 'c', 'd', 'e' ]

c). 与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];

first // 1

rest  // [2, 3, 4, 5]

const [first, ...rest] = [];

first // undefined

rest  // []

const [first, ...rest] = ["foo"];

first  // "foo"

rest  // []

// 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];

// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];

// 报错

d). 字符串,扩展运算符还可以将字符串转为真正的数组。

e).实现了 Iterator 接口的对象任何 Iterator 接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组。

let nodeList = document.querySelectorAll('div');

let array = [...nodeList];

对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。

let arrayLike = {

  '0': 'a',

  '1': 'b',

  '2': 'c',

  length: 3

};

// TypeError: Cannot spread non-iterable object.

let arr = [...arrayLike];

上面代码中，arrayLike是一个类似数组的对象，但是没有部署 Iterator 接口，扩展运算符就会报错。这时，可以改为使用Array.from方法将arrayLike转为真正的数组。

f). Map 和 Set 结构，Generator 函数

扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([

  [1, 'one'],

  [2, 'two'],

  [3, 'three'],

]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

const go = function*(){

  yield 1;

  yield 2;

  yield 3;

};

[...go()] // [1, 2, 3]

上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。

如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错。

const obj = {a: 1, b: 2};

let arr = [...obj]; // TypeError: Cannot spread non-iterable object

2.Array.from()类数组转换成数组

3.Array.of() 方法用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

Array.of(3).length // 1

Array() // []

Array(3) // [, , ,]

Array(3, 11, 8) // [3, 11, 8]

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []

Array.of(undefined) // [undefined]

Array.of(1) // [1]

Array.of(1, 2) // [1, 2]

4.copyWithin() 数组实例的 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

它接受三个参数。

a). target（必需）：从该位置开始替换数据。

b). start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

c). 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]

[].copyWithin.call({length: 5, 3: 1}, 0, 3)  // {0: 1, 3: 1, length: 5}  此处有疑惑

5. find() 数组实例的 用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

let arr = [1, 4, -5, 10]

console.log(arr.find((n) => n < 0)) // -5

[1, 5, 10, 15].find(function(value, index, arr) {

  return value > 9;

}) // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

6.findIndex()数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {

  return value > 9;

}) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

另外，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。

[NaN].indexOf(NaN)

// -1

[NaN].findIndex(y => Object.is(NaN, y))

// 0

7.fill()数组实例的方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)

// [7, 7, 7]

new Array(3).fill(7)

// [7, 7, 7]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)

// ['a', 7, 'c']

8.entries()，keys() 和 values() 数组实例的

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

let arr = ['a', 'b']

for (let index of arr.keys()) {

    console.log(index);

}

// 0

// 1

for (let elem of arr.values()) {

    console.log(elem);

}

// 'a'

// 'b'

for (let [index, elem] of arr.entries()) {

    console.log(index, elem);

}

// 0 "a"

// 1 "b"

如果不使用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']

9.includes() 数组实例的 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)    // true

[1, 2, 3].includes(4)    // false

[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false

[1, 2, 3].includes(3, -1); // true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {

  // ...

}

indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)

// -1

[NaN].includes(NaN)

// true

另外，Map 和 Set 数据结构有一个has方法，需要注意与includes区分。

Map 结构的has方法，是用来查找键名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set 结构的has方法，是用来查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

10.数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。