js数组的方法小结

js中数组是一种很是经常使用数据结构，并且很容易模拟其余的一些数据结构，好比栈和队列。数组的原型Array.prototype内置了不少方法，下面就来小小总结一下这些方法。
检测数组就不用多说了，使用ECMAScript5新增的Array.isArray()便可

转换方法

toLocaleString() toString() join() 和 valueOf()

全部对象都有toLocaleString() toString() 和 valueOf() 方法，其中调用数组的toString()方法会返回数组每一个值得字符串形式拼接而成的一个以逗号分隔的字符串。而valueOf()返回的仍是数组。

var arr = [1,2,4];
console.log(arr.toString())  // 1,2,4
console.log(arr.toLocaleString())  // 1,2,4
console.log(arr.valueOf())  // [1,2,4]

join()可使用不一样分隔符构建字符串，只接受一个参数，即用作分割符的字符串，返回包含数组因此项的字符串

var say = ['h','e','l','l','o'];
say.join('-');  //"h-e-l-l-o"

栈方法

push() 和 pop()

栈是一种后进先出（LIFO）的数据结构,栈中项的插入和移除都发生在一个位置——栈顶。ECMAScript为数组专门提供了push() 和 pop()方法，实现相似栈的行为。

• push() 方法接受任意数量的参数，把他们逐个添加在数组末尾，返回修改后的数组长度。
• pop() 方法从数组末尾移除最后一项，减小数组length值，返回移除的项

var stack = [];
console.log(stack.push(3,5,6)) // 3
console.log(stack.push(8))  // 4
console.log(stack.pop())  // 8

队列方法

push() 和 shift()

队列是一种先进先出（FIFO）的数据结构，因为push()是向数组末尾添加项，所以要模拟队列只须要一个从数组前端取得项的方法。实现这一操做的数组方法是shift()，他能够移除数组中的第一项并返回该项。

var queue = [];
console.log(queue.push(3,5,6)) // 3
console.log(queue.push(8))  // 4
console.log(queue.shift())  // 3

*tips: ECMAScript为数组还提供了一个unshift()方法，其用途与shift()相反，他能在数组前端添加任意个项并返回新数组的长度。同时使用 unshift()和 pop()方法，能够从反方向模拟队列。

重排序方法

reverse() 和 sort()

reverse() 会反转数组的顺序，返回反转后的数组。可是不够灵活，因此有了sort()方法。默认状况下，sort()按升序排列数组。最小值在最前面，为了实现排序，sort()方法会调用每一个数组项的toString()转型方法，而后比较获得的字符串肯定如何排序。这种排序方法一般不是最佳方案，所以sort()方法能够接受一个比较函数，以便咱们指定哪一个值位于哪一个值的前面。好比从小到大排序，能够以下操做：

var nums = [1,3,15,9,6,10,2];
nums.sort(function(before,next){
    return before-next;
}); // [1, 2, 3, 6, 9, 10, 15]

操做方法

concat() slice() 和 splice()

concat()能够拼接数组，没有参数状况下，复制当前数组返回副本，若是参数是一个或多个数组，该方法会将数组的每一项都添加到结果数组中。若是参数不是数组，这些值会被简单的添加到结果数组的末尾。
slice()方法能够基于当前数组中的一个或多个项建立新的数组（前闭后开区间），若是不传参数，也会复制当前数组返回副本。 concat() 和 slice() 均不改变原数组。
splice()就比较厉害了，是很强大的数组处理方法，能够用来删除、插入、和替换。第一个参数指定开始删除的位置，第二个参数删除的项数，第三个及之后的参数是要插入的项。

var nums = [1,2,4,5,6];
nums.splice(2,0,3);
console.log(nums) // [1, 2, 3, 4, 5, 6]

位置方法

indexOf() 和 lastIndexOf()

这两方法都接收两个参数，要查找的项和开始查找的位置（可选）。indexOf()从数组开头位置查找，lastIndexOf() 从数组末尾查找。查找时和数组每一项严格相等比较（===），若是查到,就返回查找项在数组中的位置，查不到就返回-1.

var nums = [1,2,4,5,6];
nums.indexOf(5);  // 3
nums.indexOf(9);  // -1

迭代方法

every() filter() forEach() map() some()

ECMAScript5 提供了5个迭代方法，每一个方法都接收两个参数：要在每一项上运行的函数和运行该函数的做用域对象——影响this的值。传入的函数会接收三个参数：数组项的值，该项在数组的位置，数组对象自己。这5个方法有各自不一样的做用：

• every()： 数组每一项运行给定函数，若是该函数每一项都返回true，则返回true
• some()： 数组每一项运行给定函数，若是该函数任意一项都返回true，则返回true
• filter()： 数组每一项运行给定函数，返回该函数会返回true的项组成的数组
• forEach()： 数组每一项运行给定函数，该方法无返回值
• map()： 数组每一项运行给定函数，返回该函数每次调用的结果组成的数组
  以上方法不会改变原数组的值

var arr = [1,2,3,4,5,6,7]
var plus10=arr.map(function(item){
   return item+10;
});
console.log(plus10) // [11, 12, 13, 14, 15, 16, 17]

归并方法

reduce() 和 reduceRight()

这两个方法都迭代全部项，而后构建一个最终返回值。reduce()从数组开头迭代，reduceRight() 从数组末尾迭代。接收两个参数，在每一项上调用的函数和（可选）做为归并基础的初始值。调用函数接收4个参数：前一个值，当前值，项的索引和数组对象。这个函数返回的任何值都做为第一个参数自动传给下一项。好比累加操做：

var arr = [1,2,3,4,5,6,7,8,9,10]
var sum=arr.reduce(function(pre,cur){
   return pre+cur;
});
console.log(sum) // 55

ES6+ 新增方法

entries() fill() findIndex() includes()

entries()方法返回一个新的Array Iterator对象，该对象包含数组中每一个索引的键/值对。

var array = ['a', 'b', 'c'];
var iterator = array.entries();
console.log(iterator.next().value);
// [0, "a"]
console.log(iterator.next().value);
// [1, "b"]
for (let e of iterator) {
    console.log(e);
}
// [0, "a"] 
// [1, "b"] 
// [2, "c"]

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的所有元素。不包括终止索引。(前闭后开)
fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的, 其默认值分别为 0 和 this 对象的 length属性值; fill 方法是个可变方法, 它会改变调用它的 this 对象自己, 而后返回它, 而并非返回一个副本。

var array = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill('fill', 2, 4)); // [1, 2, "fill", "fill"]
console.log(array); // [1, 2, "fill", "fill"]

find() 方法返回数组中知足提供的测试函数的第一个元素的值。不然返回 undefined。find 方法对数组中的每一项元素执行一次 callback 函数,callback 函数带有3个参数：当前元素的值、当前元素的索引，以及数组自己。
findIndex()用法和他同样，不一样的是findIndex()返回数组中找到的元素的索引，而不是其值。若是找不到，则返回-1。

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
function findCherries(fruit) { 
    return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries));  // { name: 'cherries', quantity: 5 }

includes() 方法用来判断一个数组是否包含一个指定的值，根据状况，若是包含则返回 true，不然返回false。

var array1 = [1, 2, 3];
console.log(array1.includes(2));
//  true
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
//  true

includes() 方法有意设计为通用方法。它不要求this值是数组对象，因此它能够被用于其余类型的对象 (好比类数组对象)。下面的例子展现了 在函数的arguments对象上调用的includes() 方法。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

实验中的功能

flat()

flat() 方法会递归到指定深度将全部子数组链接，并返回一个新数组。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

参考

• JavaScript高级程序设计（第三版） Nicholas C.Zakas
• Array.prototype.entries() | MDN
• Array.prototype.fill() | MDN
• Array.prototype.find() | MDN
• Array.prototype.flat() | MDN
• Array.prototype.includes() | MDN