ES6中常用的数组方法总结

1.创建数组

1.1 ES5的方式

回忆下ES5中创建数组的方式：

调用Array的构造函数，即

new Array()

new Array(size)

new Array(element0, element1, ..., elementn);

用数组字面量语法，例如：

var arr1 = [1,2,3];

其中，调用Array的构造函数时，要注意下面这三点：

(1)如果传入了一个数组型的值，则数组的长度length属性会被设为该值，而数组的元素都是undefined;

(2)如果传入了一个非数值型的值，则该值会被设为数组中的唯一项；

(3)如果传入了多个值，则都被设为数组元素；

验证(1)

传入了一个数组型的值：

var arr = new Array(3);

console.log(arr); // [empty × 3]

console.log(arr.length); // 3

console.log(arr[0]); // undefined

console.log(arr[1]); // undefined

console.log(arr[2]); // undefined

验证(2)

传入了一个非数值型的值：

var arr = new Array("3");

console.log(arr); // ["3"]

console.log(arr.length); // 1

console.log(arr[0]); // 3

验证(3)

传入了多个值：

var arr = new Array(3,"3");

console.log(arr); // [3,"3"]

console.log(arr.length); // 2

console.log(arr[0]); // 3

console.log(arr[1]); // 3

可以看出，使用new Array()创建数组时，要特别注意传入一个值时，这个值的类型。而如果想就传入一个数值，且这个值就是数组中的唯一一个元素时，只能用数组字面量语法了。

Luckily，ES6中创建数组的方法就不需要考虑这么多，下面介绍Array.of()和Array.from()

1.2 ES6的方式

1.2.1Array.of()

针对上述问题，Array.of()就可以解决。不论传几个参数、是什么类型的参数，使用Array.of()会把所有传入的参数都被设为数组元素

验证(1)

传入了一个数组型的值：

letarr = Array.of(3);

console.log(arr); // [3]

console.log(arr.length); // 1

console.log(arr[0]); // 3

验证(2)

传入了一个非数值型的值：

letarr = Array.of("3");

console.log(arr); // ["3"]

console.log(arr.length); // 1

console.log(arr[0]); // 3

验证(3)

传入了多个值：

letarr = Array.of(3,"3");

console.log(arr); // [3,"3"]

console.log(arr.length); // 2

console.log(arr[0]); // 3

console.log(arr[1]); // 3

可以看出，使用Array.of()创建数组时，会把所有传入的参数都被设为数组元素。

1.2.2 Array.from()

用途：可将类似数组的对象、可遍历的对象转为真正的数组。

要想把类似数组的对象转为数组，在ES5中的实现方法：

Array.prototype.slice.call(arrayLike);

letarrayLike = {

'0':'element0',

'1':'element1',

'2':'element2',

length: 3

};

letarr = Array.prototype.slice.call(arrayLike);

console.log(arr); // ["element0","element1","element2"]

可以说ES5的这种方法语义上不够清晰，在ES6中可以使用Array.from()方法实现：

验证：

letarrayLike = {

0:'element0',

1:'element1',

2:'element2',

length: 3

};

letarr = Array.from(arrayLike);

console.log(arr); // ["element0","element1","element2"]

Array.from()支持三个参数：

第一个参数是类数组对象或可遍历的对象；

第二个参数(可选)是一个函数，可以对一个参数中的对象中的每一个的值进行转换；

第三个参数(可选)是函数的this值。

其中，常见的类数组的对象是 ：DOM 操作返回的NodeList集合，以及函数内部的arguments对象。

所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组。

可遍历的对象：含有Symbol.iterator属性的对象，如Set和Map

验证(1)

函数内的arguments对象，转换为数组：

functiontest(){

letarr = Array.from(arguments);

returnarr;

}

letarr1 =test(1,2,3,4);

console.log(arr1); // [1, 2, 3, 4]

验证(2)

传入函数作为第二个参数，转换对象中的每个值

functiontest() {

letarr = Array.from(arguments, val => val * 2);

returnarr;

}

letarr1 =test(1, 2, 3, 4);

console.log(arr1); // [2, 4, 6, 8]

验证(3)

可遍历对象转换为数组

letset= new Set(['a','b'])

console.log(Array.from(set)) // ['a','b']

2.查找元素

ES5中可以用indexOf、lastIndexOf()查找某个值是否出现在字符串中。

ES6中可以用find()、findIndex()在数组中查找匹配的元素。

其中，find()方法是返回查找到的第一个值，而findIndex()是返回查找到的第一个值的index，即索引位置。这两个方法都接受两个参数：

第一个参数是回调函数；

第二个参数(可选)是用于指定回调函数中的this值。

验证：

find()返回的是满足条件的第一个值，findIndex()返回的是满足条件的第一个值的索引。

letarr = [1, 2, 3, 4, 5]

console.log(arr.find(item => item > 3)) // 4

console.log(arr.findIndex(item => item > 3)) // 3

3.填充数组

3.1 fill()

fill()：用指定的值填充一个到多个数组元素。

其中，当只传入一个值时，会用这个值重写数组中的所有值。

该方法接受三个参数：

第一个参数是要填充的值；

第二个参数(可选) 表示填充的开始索引；

第三个参数(可选) 表示结束索引的前一个索引。

验证(1)

只传入一个值

letarr = [1, 2, 3, 4, 5];

console.log(arr.fill(6)); // [6, 6, 6, 6, 6]

验证(2)

如果第二个参数或第三个参数为负值，可将值+数组.length来计算位置

letarr = [1, 2, 3, 4, 5];

console.log(arr.fill(6, -4, -1)); // [1,6,6,6,5]

上面第二个参数和第三个参数为负值，实际计算后的值分别为：-4+5，-1+5，即1,4。那么相当于arr.fill(6,1,4);从索引1到索引4前一个位置，即从索引1到索引3，用数值6填充，结果为：[1,6,6,6,5]

类似的方法还有copyWithin()方法

3.2 copyWithin()

该方法也可接受三个参数：

第一个参数是开始粘贴值的索引位置

第二个参数(可选)是开始复制值的索引位置

第三个参数(可选)是停止复制值的位置（不包含当前位置）

注意：所有参数都可以是负值，处理方法和fill()一样，需加上arr.length来计算

验证(1)：

copyWithin()传入一个参数：

letarr = [1, 2, 3, 4, 5];

// 从索引位置2开始粘贴

// 1,2,3,4,5填充

console.log(arr.copyWithin(2)); // [1, 2, 1, 2, 3]

传入两个参数：

letarr = [1, 2, 3, 4, 5];

// 从索引位置2开始粘贴

// 从索引位置1开始复制

// 2，3，4，5填充

// console.log(arr.copyWithin(2, 1)) // [1, 2, 2, 3, 4]

传入三个参数：

letarr = [1, 2, 3, 4, 5];

// 从索引位置2开始粘贴

// 从索引位置1开始复制

// 到索引位置2之前结束复制，即到位置1

// 2填充

// console.log(arr.copyWithin(2, 1, 2)) // [1,2,2,4,5]

验证(2)：

参数传入负值

// 从索引位置-3+5 =2开始复制

// 从索引位置 -1+5=4之前结束复制，即到位置3

// 3,4填充

// 从索引位置2开始粘贴

console.log(arr.copyWithin(2,-3,-1)) // [1,2,3,4,5]

4.小结

本文主要总结了ES6中数组部分的扩展。包括两个创建数组的新方法：Array.of()、Array.from()。两个在数组中根据条件来查找匹配的元素的方法：find()、findIndex()。还有两个填充数组的方法：fill()、copyWithin()

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345