让代码简洁而优雅——恰到好处的使用数组的各种方法
本以为今天的帖子会很简单,越写越觉得啃了块硬骨头。
判断是否是数组
没啥好说的推荐 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() | 返回数组的原始值。 |
推荐阅读
- CVE-2020-16898|CVE-2020-16898 TCP/IP远程代码执行漏洞
- 诗歌:|诗歌: 《让我们举起世界杯,干了!》
- 微习惯复盘
- 研学让生活更美好
- 不废话,代码实践带你掌握|不废话,代码实践带你掌握 强缓存、协商缓存!
- 让爱永驻心中
- 让眼泪滑落,成为骄傲(三十九)
- 不让记忆、感觉、情绪成为孩子的负累|不让记忆、感觉、情绪成为孩子的负累|《全脑教养法》(四)
- 工具|后天就是七夕节,你准备好了吗(送上几个七夕代码,展示你技能的时候到了!)
- 句子分享