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

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

判断是否是数组

没啥好说的推荐 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() 返回数组的原始值。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容

  • 方法描述unshift()[https://www.w3school.com.cn/jsref/jsref_uns...
    ynwshy阅读 165评论 0 0
  • 一.Array对象方法 Array 对象方法 .concat()[https://segmentfault.com...
    Angel_6c4e阅读 601评论 0 0
  • 数组的基础 Array的对象属性 constructor[https://www.w3school.com.cn/...
    樱桃小白菜阅读 201评论 0 1
  • 数组 知识汇总 前置知识: 数组是一个有序的数据集合,可使用数组名称和索引进行访问。 在JavaScript中数组...
    Daeeman阅读 652评论 1 7
  • 本文整理灵感来源掘金大佬的:数据结构 - 数组[https://juejin.im/post/6844903917...
    橙色流年阅读 516评论 0 1