JS基础之ES6 数组的改进

数组是一种基础的JavaScript对象。ES6标准继续改进数组,添加了很多功能。

一、 创建数组

在es6以前,创建数组的方式主要有两种。
第一种是调用Array构造函数,另一种是用数组字面量语法。这两种方法均需要列举数组中的元素。
为了进一步简化JavaScript组的创建过程,es6增加了Array.of()和Array.from()两个方法。

1、Array.of()方法

用这个方法创建数组,只需要传入你希望在数组中包含的值。返回参数值组成的数组

Array.of(1, 2) // [1, 2]
2、Array.from()方法。

由于js不支持直接将非数组对象转化为真实数组Arguments就是一种类数组对象。如果要把它当做数组使用,则必须先转换该对象的类型
数组的原生slice()方法可以将非数组对象转换为数组

function makeArray(arrayLike){
  return Array. prototype.slice.call(arrayLike)
}
var arr = makeArray(arguments)

Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数,最终返回一个数组;第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
3、与以前创建数组的方法比较
//参数只有一个时
Array.of(3) // [3]
Array(3) // [, , ,]
//参数多余1个时
Array.of(1,2,3) // [1,2,3]
Array(1,2,3) // [1,2,3]

只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度
Array.of方法用于将一组值,转换为数组。

二、所有数组添加的新方法:

1、find()和findIndex() 用于数组中查找特定的值

接受两个参数:回调函数(回调函数的参数为item,index,array);可选参数(用于指定回调函数中的this的值)

区别:

  • find()返回查找到的值
  • findIndex()返回查找到值的索引

使用场景:

  • 根据某个条件查找匹配的元素,用find()和findIndex()
  • 指向查找某个值匹配的元素,indexOf()和lastIndexOf()
2、fill()方法

fill()方法用指定的值填充一直多个数组元素。当传入一个值时,fill()方法会用这个值重写数组中的所有值。第二个和第三个参数,用于指定填充的起始位置和结束位置

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
3、copyWithin()

copyWithin()与fill()方法类似,同时改变数组中多个元素。
区别:fill()方法是将数组元素赋值为一个指定的值,而copyWithin()方法是从数组中复制元素的值。
使用这个方法,会修改当前数组。
它接受三个参数。
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

copyWithin()与fill()方法的用途在定型数组中常用

三、定型数组

定型数组

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