让代码简洁而优雅——恰到好处的使用数组的各种方法

本以为今天的帖子会很简单，越写越觉得啃了块硬骨头。

判断是否是数组

没啥好说的推荐 Array.isArray，示例：

Array.isArray([1, 2, 3, 4]);  // --> true
 
Array.isArray({
    a: 1,
    b: 2
});  // --> false
 
Array.isArray(new Array);  // --> true
 
Array.isArray("Array");  // --> false

注意：Array.isArray是ES 5.1推出的，很早以前的浏览器可能不支持，所以在使用的时候也应注意兼容问题。处理方法如下：

if(typeof Array.isArray != "function") {
  Array.isArray = function(obj){
    return Object.prototype.toString.call(obj) == "[object Array]";
  }
}

定义数组

直接使用下面的方式，新建一个数组。不要使用new，这并不高级，相反使用new的效率不如下面的方式。

const array = [];

恰到好处的使用

添加
1、array.push(item1, item2, ..., itemX); 将新元素添加到数组的末尾，并返回新的长度。

2、array.unshift(item1, item2, ..., itemX); 将新元素添加到数组的开头，并返回新的长度。

3、array.splice(index, howmany, item1, ....., itemX); howmany传0时表示纯添加，多应用于从某个位置添加一个或多个元素。

4、array1.concat(array2, array3, ..., arrayX); 连接两个或多个数组，并返回已连接数组的副本。

删除
1、pop()；删除数组的最后一个元素，并返回该元素。

2、shift()；删除数组的第一个元素，并返回该元素。

3、array.splice(index, howmany, item1, ....., itemX); 从index开始删除howmany个元素，多应用于从某个位置删除一个或多个元素。

4、array.slice(start, end)；选择数组的一部分，并返回新数组。

5、array.filter(function(currentValue, index, arr), thisValue)；从数组中筛选出新数组，有条件删除元素可以用，如：array.filter(value => value > 10)

修改
1、array.splice(index, howmany, item1, ....., itemX); 这个应该理解为删除并添加，修改了数组的元素个数。

2、array.map(function(currentValue, index, arr), thisValue)；批量修改，函数里面return的值会替换原位置的元素。

3、array.copyWithin(target, start, end)；选一部分数据，覆盖另一部分。这个函数使用较少也比较不好理解，简单的说可以理解为复制后面start到end的元素，然后从target开始替换，有几个替换为几个。

4、array.fill(value, start, end)；用某个值替换部分数据。部分场景很有用，如初始化脏数组

查询
1、array.filter(function(currentValue, index, arr), thisValue)；筛选符合条件的元素，返回数组

2、array.find(function(currentValue, index, arr), thisValue)；查找数组中第一个符合条件的元素

3、array.findIndex(function(currentValue, index, arr), thisValue)；查找数组中第一个符合条件的元素的index

4、array.indexOf(item, start)；查找数组中第一个符合条件的元素的index。

5、array.lastIndexOf(item, start)；这个是从后往前找，可以用于查找最后一个某元素。

排序
1、array.sort(compareFunction)；使用sort能轻松的处理几乎所有你想要的排序。如：array.sort((a, b) => a-b)

2、array.reverse()；反转数组中元素的顺序。

校验
1、array.every(function(currentValue, index, arr), thisValue)；检查数组中的每个元素是否通过测试。如：array.every(age => age > 10);

2、array.some(function(currentValue, index, arr), thisValue)；检查数组中的任何元素是否通过测试。有一个符合条件就行

3、array.includes(element, start)；检查数组是否包含指定的元素。

遍历
符合上面场景的尽量去使用上面场景，不要随意使用遍历，这并不算太好阅读。

1、array.forEach(function(currentValue, index, arr), thisValue)；遍历所有元素，每个元素都会触发函数。这个函数是数组的函数所以先说了，个人并不太推荐无脑使用这个，因为这个函数没法在中间停止，除非抛出异常。

2、for (let i = 0; i < array.length; i++)；能实现几乎所有的需要遍历的场景。在不需要继续执行的时候请记得使用continue和break这些跳出循环函数。

3、类似于栈消费场景（先进后消费），推荐使用如下方式：

while (array.length) {
  let item = array.pop();
  console.log(item);
}

4、类似于队列消费场景（先进先消费），推荐使用如下方式：

while (array.length) {
  let item = array.pop();
  console.log(item);
}

数组与字符串
1、Array.from(object, mapFunction, thisValue)；从字符串创建数组，如：Array.from('123') // => ['1', '2', '3']

2、array.toString()；将数组转换为字符串，并返回结果，如：['1', '2', '3'].toString() // => '1,2,3'

3、stringObject.split(separator,howmany)；字符串分割为数组，如：'123'.split('') // => ['1', '2', '3']

4、array.join(separator)；将数组的所有元素连接成一个字符串，separator可选。要使用的分隔符。如果省略，元素用逗号分隔。如：['1', '2', '3'].join('') // => '123'

总结

一些简单的用法基本都在上面了，高阶用法后面再写一篇吧。
原创不易，尽量做到每天写一篇，欢迎关注收藏点赞，发现问题欢迎留言指正。

方法汇总