js数组方法(包含es5和es6新增)

共性：都可以操作数据，截取一段数组；
异性：splice()是变异方法，会改变调用都原始数组；slice()是非变异方法，不会改变调用都数组，但总会返回一个新数组。

变异方法：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
非变异方法
filter()、concat()、slice

数组的原型方法主要有以下这些：
join()
push()和pop()
shift()和unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf() / lastIndexOf() (ES5新增)
forEach() (ES5新增)
map() (ES5新增)
filter() (ES5新增)
every() (ES5新增)
some() (ES5新增)
reduce() / reduceRight() (ES5新增)
from() (ES6新增)
of() (ES6新增)
copyWithin() (ES6新增)
find() / findIndex() (ES6新增)
fill() (ES6新增)
entries() / keys() / values() (ES6新增)
includes() (ES6新增)
1. slice(start, end)

• 从start开始截取到end但是不包括end
• 如果只有一个参数，则截取从参数指定位置开始到当前数组末尾的所有项
• 返回值为截取出来都元素的集合
• 原始的数组不会发生变化
• start和end的值均可以为负数

var arr1 = [1,2,3,4,5,6,7,8];
var arr2 = arr1.slice(2,4);
console.log(arr2);    // [3,4]
console.log(arr1);    // [1,2,3,4,5,6,7,8]原始数组没有被改变

var arr3 = arr1.slice(1,-2);
console.log(arr3);    // [2,3,4,5,6]
var arr4 = arr1.slice(-4, -1);
console.log(arr4);    // [5,6,7]

2. splice(start, deleteCount, item1, item2…)

• start: 开始的位置
• deleteCount: 要截取的个数
• 后面的items为要添加的元素
• 如果deleteCount为0，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组里面
• 返回值为由被删除的元素组成一个数组。如果只删除了一个元素，则只返回包含一个元素的数组。如果没有删除元素，则返回空数组。
• 这个方法会改变原始数组，数组的长度会发生变化

var arr3 = [1,2,3,4,5,6,7,"f1","f2"];
var arr4 = arr3.splice(2,3)  // 删除第3个元素以后的三个数组元素(包含第三个元素)
console.log(arr4);           // [3,4,5]
console.log(arr3);           // [1,2,6,7,"f1","f2"], 原始数组被改变

var arr5 = arr3.splice(2,0,"wu","leon"); 
// 从第二位开始删除0个元素，插入“wu”，“leon”
console.log(arr5);           // [], 返回空数组
console.log(arr3);           // [1,2,"wu","leon",6,7,"f1","f2"], 原始数组改变

var arr6 = arr3.splice(2,3,"yang","fei");
// 从第二位开始删除3个元素，插入“yang”，“fei”
console.log(arr6);           // ["wu","leon",6]
console.log(arr3);           // [1,2,"yang","fei",7,"f1","f2"]

var arr7 = arr3.splice(2);   // 从第二位开始删除所有的元素
console.log(arr7);           // ["yang","fei",7,"f1","f2"]
console.log(arr3);           // [1,2]

数组操作的方法扩展

• push/pop: 在数组末尾增/删元素；
• unshift/shift: 在数组首部增/删元素；
• concat: 把一个(或多个)数组和(值)与原数组拼接，返回拼接后的数组
• join: 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
• reverse: 颠倒数组中元素的顺序

注意事项
  由于javascript的限制，vue不能检测一下变动的数组：
  1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如：vm.items.length = newLength
example:

var vm = new Vue({
   data: {
      items: ['a','b','c']
   }
})
vm.items[1] = 'x'   // 不是响应性的
vm.items.length = 2 // 不是响应性的

vue中可以采用以下方法来解决上述问题：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// 也可以使用vm.$set实例方法，该方法是全局方法Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// 可以使用splice()方法来改变数组长度
vm.items.splice(newLength)

3. join()
  join(参数)：将数组的元素组起一个字符串，以参数为分隔符，默认分隔符是都好，该方法只接收一个参数。

var arr = [1,2,3];
console.log(arr.join());        // 1,2,3
console.log(arr.join("-"));     // 1-2-3
console.log(arr);               // 原数组不变

4. push()和pop()
  push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度。
  pop(): 数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

var arr = ["one", "two", "three"];
var arr1 = arr.push("four", "five");
console.log(arr1);       // 5
console.log(arr);        // ["one", "two", "three", "four", "five"]
var arr2 = arr.pop();
console.log(arr2);       // five
console.log(arr);        // ["one", "two", "three", "four"]

5. shift()和unshift()
  shift(): 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined；
  unshift(): 将元素添加到原数组开头，并返回数组的长度。

var arr = ["one", "two", "three"];
var arr1 = arr.unshift("four", "five");
console.log(arr1);       // 5
console.log(arr);        // ["four", "five", "one", "two", "three"]
var arr2 = arr.shift();
console.log(arr2);       // four
console.log(arr);        // ["five", "one", "two", "three"]

6. sort()
  按升序排列数组项。
  sort()方法会调用每个数组项的toString()方法，然后比较得到的字符串，所以即使数组中的每一项都是数值，该方法比较的也是字符串，因此会出现以下情况：

var arr = ["a", "b", "c", "d"];
console.log(arr.sort());     // ["a", "b", "c", "d"]
var arr1 = [13, 24, 51, 3];
console.log(arr1.sort());    // [13, 24, 3, 51]

7. reverse()
  反转数组,会改变原数组。

var arr = [1, 2, 3, 4];
console.log(arr.reverse());   // [4, 3, 2, 1]
console.log(arr);             // [4, 3, 2, 1], 原数组改变

8. concat()
  将参数添加到原数组中，不会改变原数组，返回的值是一个新数组。

var arr = [1, 2, 3, 4];
var arr1 = arr.concat(5, [6, 7]);
console.log(arr1);   //[1,2,3,4,5,6,7]
console.log(arr);    // [1,2,3,4](原数组未改变)

9. indexOf()和lastIndexOf()
  indexOf(): 接收两个参数，要查找的项 和 开始查找的位置(第二个参数可省略)，若省略，则从头开始向后查找。
  lastIndexOf(): 接收两个参数，要查找的项 和 开始查找的位置(第二个参数可省略)，若省略，则从尾开始向前查找。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));        //2
console.log(arr.lastIndexOf(5));    //5
console.log(arr.indexOf(5,2));      //2
console.log(arr.lastIndexOf(5,4));  //2
console.log(arr.indexOf("5"));      //-1

10. forEach()
  对数组进行遍历循环，对数组中的每一项运行给定函数。

var arr = [1,2,3];
arr.forEach(function(x, index, a) {
    console.log(x + '|' + index + (a === arr));
})
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true

11. map()
  指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2);    //[1, 4, 9, 16, 25]

12. filter()
  “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

13. every()
  判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
    return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
    return x < 3;
}); 
console.log(arr3); // false

14. some()
  判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
    return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
    return x < 1;
}); 
console.log(arr3); // false

15. reduce()和reduceRight()
  这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。
  reduce()方法从数组的第一项开始，逐个遍历到最后;
  reduceRight()则从数组的最后一项开始，向前遍历到第一项。
  这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
  下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
},10);
console.log(sum); //25

16. from()

• 把一些集合或者长得像数组的伪数组转换成真数组
• 类似map()，对数组进行一些操作

var obj = {
    '0': 1
    length: 1
}
Array.from(obj);   //[1]

Array.from( [1,2,3], item => item * 2 );   // [2,4,6]

17. of()

Array.of(1,2,3,4);  // 把参数合并成一个数组返回，如果参数为空，则返回一个空数组

18. copyWithin()
  有三个参数：1） 被替换的起始位置； 2）选取替换值的起始位置； 3）选取替换值的结束位置。

let arr = [1, 'c', 'd', 'a', 'b'];
arr.copyWithin(0,3,5);  // 把a,b替换到1的位置， ['a', 'b', 'd', 'a', 'b']

19. find() / findIndex()
  返回数组中第一个符合条件的元素, findIndex返回索引。

let arr = [1,2,3,4,5];
arr.find(function(item) { return item >3} );  // 4
arr.findIndex(function(item) { return item >3} );  // 3
console.log(arr[3]);   // 4

20. fill()

• 把数组中的每一个元素替换成指定值;
• 指定范围替换.

let arr = [1, 2, 3, 4]
arr.fill(5);         //arr全变成了5, [5, 5, 5, 5]
arr.fill(6, 1, 3);   
// 使用6替换数组中下标为1-3范围的值(包含1的元素，不包含3的元素)，[5, 6, 6, 5]

21. entries() / keys() / values()

var arr = [5,6,7,8];
for(let key of arr.keys()) {
    console.log(key);
}
// 取键，输出为 0，1，2，3
for(let value of arr.values()) {
    console.log(value);
}
// 取值；不能直接使用，存在兼容性问题；输出为 5，6，7，8
for(let [key, value] of arr.entries()) {
    console.log([key, value]);
}
// 取键和取值；输出为[0, 5], [1, 6], [2, 7], [3, 8]

22. includes()
  判断是否包含。

var a = function(){}
[1, 2, 3, 4, a].includes(a)    //true
[1, 2, 3, 4, NaN].includes(NaN)    //true

参考
js数组方法大全
es6中新增数组的方法