JS Array对象的方法总结(ES5 与 ES6)

ES5 数组方法

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) // 1a.push('a') // 2a.push(true, {}) // 4a // [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') // 4arr // [ '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方法返回falseevery方法返回true,回调函数都不会执行。

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

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

  reduce:是从左到右处理(从第一个成员到最后一个成员)

  reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

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

  1. 累积变量,默认为数组的第一个成员

  2. 当前变量,默认为数组的第二个成员

  3. 当前位置(从0开始)

  4. 原数组

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

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


[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') // 1a.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 // 1rest  // [2, 3, 4, 5]const [first, ...rest] = [];
first // undefinedrest  // []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