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

本以为今天的帖子会很简单,越写越觉得啃了块硬骨头。
判断是否是数组 没啥好说的推荐 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'
总结 一些简单的用法基本都在上面了,高阶用法后面再写一篇吧。
原创不易,尽量做到每天写一篇,欢迎关注收藏点赞,发现问题欢迎留言指正。
方法汇总
方法 描述
concat() 连接两个或多个数组,并返回已连接数组的副本。
copyWithin() 将数组中的数组元素复制到指定位置或从指定位置复制。
entries() 返回键/值对数组迭代对象。
every() 检查数组中的每个元素是否通过测试。
fill() 用静态值填充数组中的元素。
filter() 使用数组中通过测试的每个元素创建新数组。
find() 返回数组中第一个通过测试的元素的值。
findIndex() 返回数组中通过测试的第一个元素的索引。
forEach() 为每个数组元素调用函数。
from() 从对象创建数组。
includes() 检查数组是否包含指定的元素。
indexOf() 在数组中搜索元素并返回其位置。
isArray() 检查对象是否为数组。
join() 将数组的所有元素连接成一个字符串。
keys() 返回 Array Iteration 对象,包含原始数组的键.
lastIndexOf() 在数组中搜索元素,从末尾开始,并返回其位置。
map() 使用为每个数组元素调用函数的结果创建新数组。
pop() 删除数组的最后一个元素,并返回该元素。
push() 将新元素添加到数组的末尾,并返回新的长度。
reduce() 将数组的值减为单个值(从左到右)。
reduceRight() 将数组的值减为单个值(从右到左)。
reverse() 反转数组中元素的顺序。
shift() 删除数组的第一个元素,并返回该元素。
slice() 选择数组的一部分,并返回新数组。
some() 检查数组中的任何元素是否通过测试。
sort() 对数组的元素进行排序。
splice() 从数组中添加/删除元素。返回删除结果
toString() 将数组转换为字符串,并返回结果。
unshift() 将新元素添加到数组的开头,并返回新的长度。
valueOf() 返回数组的原始值。

    推荐阅读