js数组方法总结

ES3数组方法

join()

Array.join()方法将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串。

var a = [1, 2, 3];
a.join(); // => "1,2,3"
a.join(' '); // => "1 2 3"
var b = new Array(10);
b.join('-') //=> '---------':9个连字号组成的字符串

Array.join()方法是String.split()方法的逆向操作，后者是将字符串分割成若干块来创建一个数组

reverse()

Array.reverse()方法将数组中的元素颠倒顺序，并返回该数组的引用，即原数组元素顺序被颠倒。

var a = [1, 2, 3];
a.reverse(); //现在a为[3, 2, 1]

sort()

Array.sort()方法将数组中的元素排序并返回排序后的数组。

var a = ['b', 'a', 'c'];
a.sort(); //现在a为['a', 'b', 'c']

数组元素以字母表顺序排列，如果数组包含undefined元素，它们会被排到数组的尾部。

var a = [2, 10, undefined, 3]
a.sort(); //现在a为[10, 2, 3, undefined]

也可以指定按某种顺序排列的函数：

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) { 
  return a - b;
});
console.log(numbers);// [1, 2, 3, 4, 5]

concat()

Array.concat()方法创建并返回一个新数组。

var a = [1, 2 ,3];
a.concat(4,5); //返回[1, 2, 3, 4, 5]
a.concat([4,5]); //返回[1, 2, 3, 4, 5]

slice()

Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始和结束位置。返回的数组包含第一个参数指定的位置和所有到但不包括第二个参数指定位置的所有数组元素，如只指定一个参数则返回第一个参数指定位置到数组结尾的所有元素。如参数中出现负数，它表示相对于数组中最后一个元素的位置。例如参数-1表示倒数第一个元素。

var a = [1, 2 , 3, 4, 5];
a.slice(0,3); //返回[1, 2, 3]
a.slice(3); //返回[4, 5]
a.slice(1, -1); //返回[2, 3, 4]

splice()

Array.splice()方法是在数组中插入或删除元素的通用方法。splice()会改变数组本身。
splice()方法能够从数组中删除元素，插入元素到数组中或同时完成这两种操作。在插入或删除点之后的数组元素会根据需要增加或减小它们的索引值，因此数组的其他部分仍然保持连续的。
splice()的第一个参数指定了插入或删除的起始位置。第二个参数指定了应该从数组中删除的元素的个数。如果省略第二个参数，从起始点开始到数组结尾的所有元素都将被删除。splice()返回一个由删除元素组成的数组，或者如果没有删除元素就返回一个空数组。

var a = [1, 2 , 3, 4, 5, 6, 7, 8];
a.splice(4); //返回[5, 6, 7, 8]，a是[1, 2, 3, 4]
a.splice(1, 2); //返回[2, 3]，a是[1, 4]
a.splice(1, 1); //返回[4]，a是[1]

splice()的前两个参数指定了需要删除的数组元素，紧随其后的任意个数的参数指定了需要插入到数组中的元素，从第一个参数指定的位置开始插入。

var a = [1, 2 , 3, 4, 5];
a.splice(2, 0, 'a', 'b'); //返回[]，a是[1, 2, 'a', 'b' , 3, 4, 5]
a.splice(2, 2, [1, 2], 3); //返回[ 'a', 'b']，a是[1, 2, [1, 2], 3 , 3, 4, 5]

push()和pop()方法

push()和pop()方法允许将数组当做栈来使用。push()方法在数组的尾部添加一个或多个元素，并返回数组新的长度。pop()方法则相反：它删除数组的最后一个元素，减小数组长度并返回它删除的值。

var stack = []; //stack:[]
stack.push(1,2); //statck:[1,2];返回2
stack.pop(); //stack:[1];返回2

unshift()和shift()

unshift()和shift()方法的行为非常类似push()和pop()。unshift()在头部添加一个或多个元素，并移动其他元素获取空间，最后返回数组新长度。shift()删除数组的第一个元素并将其返回，然后把其他元素前移。

var a = []; //a:[]
a.unshift(1); //a:[1]; 返回1
a.unshift(2); //a:[2,1]; 返回2
a.shift(); //a:[1]; 返回2

toString()和toLocaleString()

toString()将数组所有元素转化为字符串并且输出用逗号分隔的字符串列表，和不使用任何参数调用join()方法返回的字符串一致
[1, 2, 3].toString() //生成'1,2,3'
[1,[2, 'c']].toString() //生成'1,2,c'
toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 输出 "1337,2015/2/27 下午8:29:04,foo" 
// 假定运行在中文（zh-CN）环境，北京时区

---

ES5数组方法

forEach()

forEach方法遍历数组，为每个元素调用指定的函数。传递的函数为forEach的第一个参数，该函数有三个参数，依次为：数组元素、数组索引和数组本身。

var keys = [1,2,3];
keys.forEach(function(value, index, array){
  console.log(value);
})

使用forEach遍历数组十分简洁但是存在一些缺陷，在forEach方法中不能使用break中断遍历，也不能使用return返回值到外层函数。

map()

map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含改数组的返回值。

a = [1, 2, 3];
b= a.map(function(value){
  return value*value;
})
console.log(b); //b是[1, 4, 9]

filter()

filter()方法返回的数组元素是调用的数组的一个子集。传递的函数是用逻辑来判定的：该函数返回true或false。如果返回的值是true或能够转化为true的值，则将元素加入返回子集。

a = [1, 2, 3, 4, 5];
b = a.filter(function(value){
  return value > 3;
})
//b:[4, 5]

every()和some()

every()和some()方法是数组的逻辑判定：他们对数组元素应用指定的函数进行判定，返回true或false。
every()方法：当且仅当针对数组中的所有元素调用判定函数都返回true，它才返回true：

var a = [1, 2, 3, 4, 5]
a.every(function(x) {return x<10;})  // =>true:所有值小于10
a.every(function(x) {return x%2 === 0;}) // =>false:不是所有值都为偶数

some()方法：存在元素调用判定数组返回true，则返回true：

var a = [1, 2, 3, 4, 5]
a.some(function(x) {return x%2 === 0;}) // =>true:存在偶数
a.some(isNaN) // =>false:不包含非数值元素

reduce()和reduceRight()

reduce()和reduceRight()方法使用指定的函数将数组元素进行组合，生成单个值。reduce()需要两个参数。第一个是执行化简操作的函数：化简函数中第一个参数为上次化简函数的返回值，第一次执行时，为reduce()设置的第二个参数；化简函数第二个参数为数组元素、第三个参数为元素的索引、第四个参数为数组本身。

var a = [1, 2, 3, 4, 5]
var sum = a.reduce(function(x, y) {return x+y}, 0); //数组求和

reduceRgith()与reduce()方法功能一样，不过它是按数组索引从右到左处理数组。

indexOf()和lastIndexOf()

indexOf()和lastIndexOf()搜索整个数组中具有给定值得元素，返回找到的第一个元素的索引或没有找到返回-1，indexOf()从头到尾搜索，lastIndexOf()从末尾开始。

a = [0, 1, 2, 1, 0]
a.indexOf(1); // => 1:a[1]是1
a.lastIndexOf(1); // =>3:a[3]是1

---

ES6数组方法

Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of()

Array.of方法用于将一组值，转换为数组。

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

数组实例的copyWithin()

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

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

• target（必需）：从该位置开始替换数据。
• start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

这三个参数都应该是数值，如果不是，会自动转为数值。

[1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。

数组实例的find()和findIndex()

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

[1, 4, -5, 10].find((n) => n < 0)// -5

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

[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9;}) // 2

数组实例的fill()

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]

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

ES6提供三个新的方法entries()，keys()和values()用于遍历数组。

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"

---

参考资料

《ECMAScript 6 入门》数组的扩展
《Javascript权威指南》