ES6&数组扩展

ES6数组扩展

1.Array.from()

定义:Array.from()用于将两类对象转换成真正的数组:类数组对象和可遍历的对象(具有Iterator接口)

1.类似数组对象

示例
var some = {
"0" : "hello",
"1" : "world",
"2" : "lijaha",
"length" : "3"
}
使用Array.from()方法转换成数组
var array = Array.from(some);

应用中常见的类似数组对象有:DOM操作返回的NodeList集合以及函数内部的arguments

示例
1.NodeList集合
var list = Array.from(document.querySelectorAll('p'));
list.forEach((element) => console.log(element)); //只有数组才能使用forEach方法进行遍历
2.函数内部的arguments
function count() {
var arg = Array.from(arguments);
}

2.可遍历对象

示例
var sring = 'hello';
var array = Array.from(string); //Array.from('hello')

ES6新增数据结构Map和Set
//Set数据结构
var someSet = new Set(['a', 'b', 'c']);
var array = Array.from(someSet);
//Map数据结构
var someMap = new Map([['name', 'lijaha'],['age', '20']);
var array = Array.from(someMap) //会转化成二维数组

此外,扩展运算符(...)也可以将具有遍历器接口(Iterator)的数据结构转换成数组

示例
function count() {
var arg = [...arguments];
}

var liat = [...document.querySelectorAll('p')];

所谓类数组的对象,本质都是拥有length属性,任何拥有length属性的对象都可以通过Array.from()转换成数组
Array.from()的第二参数类似于数组中的map方法,用来对数组中的每个元素进行操作,并返回操作结果后的新数组。

示例
var array = [1,2,3];
array.map((x) => x2); //ES5数组map方法,map拥有三个参数,element、index、array
Array.from(array,(x) => x
2);

2.Array.of()

定义:将一组值转化成数组

//Array.of主要是用来弥补new Array()构造函数传参的不足
var array = new Array(); //new一个空组[]
var array = new Array(2); //new一个length为2的数组[ , ]
var array = new Array(1,2,3); //new一个[1,2,3]数组
由上面可以看出new Array()根据传参个数的不同而导致不同的重载

Array.of()示例
var array = Array.of(); //new一个空数组
var array = Array.of(2); //[2]
var array = Array.of(1,2,3); //[1,2,3]

3.数组实例find()和findIndex()

定义:find方法用来找出数组中第一个符合条件的数组成员,findIndex方法用来找出数组中第一个符合条件的数组成员的下标

示例
var array = Array.of(1,2,3,4);
array.find((element) => element > 1); //2
array.findIndex((element) => element == 2); //1
可借助Object.is方法来识别NaN,用来弥补indexOf()方法的不足,indexOf内部使用‘===’来判断,因为NaN是一个不确定的数,NaN === NaN(false)
[NaN].indexOf(NaN); //-1
[NaN].findIndex((element) => Object.is(NaN,element)); //

4.数组实例entries()、keys()和values()

定义:用来遍历数组,entries()是对键值的遍历、keys()是对键的遍历、values()是对值得遍历

示例
var array = Array.of(2,3,4);
//使用entries()方法
for (let [index,element] of array.entries()){
console.log(index,element);
}
//使用keys()方法
for (let key of array.keys()){
console.log(key);
}
//使用values()方法
for (ler value of array.values()){
console.log(value);
}

5.数组实例Array.includes()

ES7方法,Array.includes()方法返回一个布尔值,表示数组是否含有给定的值

示例
var array = [2,3,4];
array.includes(3); //true
array.includes(5); //false
使用includes()可避免对indexOf()方法对NaN的误判
[NaN].includes(NaN); //true

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

推荐阅读更多精彩内容

  • [JavaScript数组]一篇中介绍了ES6之前的数组方法。本篇介绍一下ES6里新增的数组方法。 keys,va...
    sponing阅读 294评论 0 0
  • 1. Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-...
    前端小华子阅读 289评论 0 1
  • //Array.of 可以生成一个简单数组, { let arr = Array.of(3,4,7,9,1...
    super静_jingjing阅读 292评论 0 1
  • 1.Array.of() Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型...
    bjhu电net阅读 230评论 0 0
  • 我觉得这个问题是想问,做一件事如何让自己获得内在驱动力和外在驱动力? 原因有四个,第一,没有正确的认知。第二,没有...
    厌生平阅读 607评论 2 1