第八章 数组的扩展

8.1扩展运算符

8.1.1含义

扩展运算符是三个点(...),它如同rest参数的逆运算,讲一个数组转化为用逗号分隔的参数序列。

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

该运算符主要用于函数调用。

扩展运算符后面还可以放置表达式,
如果扩展运算符后面上第一个空数组,则不产生任何效果。

8.1.2

扩展运算符可以展开数组,所以就不需要使用apply方法将数组转化为函数的参数。

es5的写法。

function f(x,y,z){

}
var   arge=[0,1,2,3]
f.apply(null,arge)
Es6写法:
function f(x,y,z){
...
}

var  arge =[0,1,2,3];
f(...arge);


push方法的参数不可以是数组,只好通过apply方法变通使用push方法,,可以直接将数组传入push方法。

8.1.3扩展运算符的运用

合并数组

es5
[1,2].concat(more);


es6
[1,2,...more]


es5 数组合并

var a=[1,2]
var b=[3,4]


a.concat(b);
es6
[...a,...b]

与解构赋值结合
扩展运算符可以与解构赋值结合起来,用于生成数组。

如果将扩展运算符用于数组赋值,则只能将其放在参数的最后一位,否则会报错。

函数的返回值

js的函数只哼返回一个值,如果需要多个返回值,只能返回数组和 对象,扩展运算符提供了解决这中的一种变通方法。

扩展运算符还可以将字符串转为真正的数组。

[...'hello'];
//['h','e','l','l','o']

8.2Array.from()

此方法可以将两类对象转为真正的数组,类似数组的对象和可遍历的对象,包括es6新增的set和map

下面是一个类数组
let  a ={
'0':'a',
'1':'b',
'2':'c',
length:3
}

es5写法:
var arr.slice.call(a);//['a','b','c'];
es6写法:
var arr=Array.from(a);//['a','b','c']

常见的类似数组的对象时DOM操作返回的NodeLIst集合,以及函数内部的arguments对象,Array.from
都可以将他们转为真正的数组、。
只有转化为正真的数组,才能使用forEach方法。
如果参数是一个真正的数组,Array.from()返回的是一个一模一样的新数组。
值得提醒的是。扩展运算符(...)也可以将某些数据结构转化为数组。
扩展运算符背后调用的是遍历器接口(symbol.iterator),如果一个对象没有部署改接口,Array.from方法就无法支持列斯数组的对象,
对于没有支持该方法的浏览器,可以使用Array.protortype.slice代替。、

Array.from 还可以传入第二个参数 ,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
如果map函数里面用到了this 这个关键字,还可以传入Array.from第三个参数,用来绑定this。
Array.from()还可以将各种值转为真正的数组,,并且提供map的功能,这意味着,只要有一个原始数据结构,就可以先对他的值进行处理,然后转成规范的数组结构。
Array.from ()的另一个应用是,将字符串转为数组,返回字符串的长度,因为它能处理各种Unicode字符,可以避免js将大于\uFFFF的Unicode子字符作为2个字符的bug。

8.3Array.of()

用于将一组值转换为数组。

Array.of(1,2,3)//[1.2.3]
Array.of(1)//[1]
Array.of(3).length//1

这个方法主要用来弥补数组构造函数Array()的不足之处,因为参数的不同会导致Array()的行为有差异。

Array()//[]
Array(3)//[ , , ,]
Array(1,2,3)//[1,2,3]
只有当参数不少于2个的时候,Array()才会返回由数组组成的新数组,参数只有1个的时候,实际上指的是数组的长度。
Array.of基本上可以取代Array()和new Array(),并且不存在由于参数不同而导致的重载,行为非常统一。
Array.of总是返回的是数值组成的数组,如果没有参数,就返回一个空的数组。
Array.of的方法可以用下面的方法实现
function   ArrayOf(){
return  [].slice .call(argumnets)
}

8.4数组实例的copyWithin()

会在当前数组内将指定的位置的成员复制到其他的位置,(会覆盖原有成员),然后返回当前的数组,就是说,这个方法会修改当前数组。
Array.prototype.copyWithin(target,start=0,end=this.length);
接受3个 参数
target:必选。从该位置开始替换数据
start:可选:从该位置读取数据,默认是0,如果为负数,表示倒数。
end:可选:到该位置前停止读取书库,默认等于数组长度,如果为负值,表示倒数。这3 个参数都应该是数值,如果不是的话,会自动转为数值。

[1,2,3,4,5].copyWithin(0,3)//[4,5,3,4,5]
上面的意思是将从3号位置直到数组结束的成员(4,5)复制到从0号位置开始的位置,结果覆盖了原来的1和2.

8.5数组实例的find()和finindex()

find方法适用于找出处第一个复合条件的数组成员,他的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找到各一个返回值为true的成员,然后返回该成员,如果没有复合条件的成员,返回的则是undefined。
find回调函数可以接受3个参数,依次为当前的值,当前的位置和原数组。
数组findindex方法的与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1.
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。另外,这两方法艘可以发现NaN,弥补了数组的indexOf的不足之处。

8.6数组实例的fill()

此方法用于空数组的初始化时非常好用。数组中的所有元素都会被前部抹去。
用于给定值填充一个数组。

['a','b','c'].fill(7)//[7,7,7]

fill方法还可以接受第二个参数和第三个参数,用于指定填充的起始位置和结束位置。 结束位置不包括自己

8.7数组实例的entries()/keys()和values();

es6新增的3个方法,用于遍历数组,他们都返回一个遍历器的对象,for...of循环,keys()是对键命的遍历,values()是对键值的遍历,entries()是对键值对的遍历。
如果不使用for...of循环,可以使用遍历器对象的next方法进行遍历。

8.8数组实例的includes()

Array.prototype.includes返回的是一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似,es6将其引入进来,
该方法的第二个参数表示搜索的起始位置,默认是0,如果第二个参数为负数,表示倒数的位置,如果他大于数组长度,则会重置从0开始。
没有此方法之前,我们用indexof方法检查是否包含某个值,
indexOf的缺点是不够语义,其含义找到参数某个值得时候的第一个位置,要比较是否等于-1,二是内部使用严格相等进行判断,会导致对NaN的误判、
[NaN].indexOf(NaN)//-1.

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

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,102评论 0 13
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 终于找到一个可以宣泄情绪的私密空间,好开心
    残雪傲梅阅读 225评论 2 1
  • 今天是回到家的第一天,感觉很轻松,没有了学习上压力。但也有感到些许的浮躁了,可能是外面的大雨阻断了出去的机会,对于...
    查拉图斯特拉如是说阅读 331评论 0 0
  • 4.15今天周末,常青藤去养老院陪伴老人的日子。一早上,孩子们已经习惯每周末去养老院了。他们很欢喜的要去养老院。 ...
    热瓦昆空阅读 349评论 2 12