数组的扩展

Array.from()

Array.from 方法用于将两类对象转换成真正的数组

  • 类似数组的对象(array-like object)
  • 可遍历(iterable)对象

类似数组的对象(array-like object)

任何有length 属性的对象,都可以通过Array.from 转为数组

let arrayLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}
Array.from(arrayLike)   // ["a", "b", "c"]

可遍历(iterable)对象

只要部署了Iterator接口的数据结构,Array.form 都能将其转成数组

Array.from('hello') 
// ["h", "e", "l", "l", "o"]

这种用法跟扩展运算法(...)用法一样,扩展运算法不支持转化类似数组对象

第二个参数

Array.from 第二个参数,类似数组 map 的用法,用来对每个元素进行处理,将处理后的值放入返回的数组

Array.from(arrayLike, x => x * x)
// 等同于
Array.from(arrayLike).map(x => x * x)

第三个参数

如果 map 函数里用到了 this 关键字,还可以传入第三个参数绑定 this

其他

Array.from 可以识别各种 Unicode字符,可以避免大于 \uFFFF 的Unicode字符算作两个字符的错误

Array.of()

Array.of 用于将一组值转换为数组
目的:你不构造函数Array()的不足
Array() 的行为会随参数的不同而不同,'Array.of' 基本上可以替代 Array()new Array() ,并且不存在由于参数不同而导致重载

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

数组示例的find() 和 findIndex()

find() 方法用于找出第一个符合条件的数组成员,他的第一个参数是一个回调函数,所有数组成员一次执行该回调函数,知道找出第一个返回值为 true 的成员,没有则返回 undefined
find() 方法的回调函数可以接受3个参数 当前的值,当前的位置,原数组(value,key,array)
find() 可以接受第二个参数,用于绑定回调函数的 this对象
findIndex()find() 类似,返回的是数组成员的位置

[1, 2, 3, 4, 5].find(value => value === 4)          // 4
[1, 2, 3, 4, 5].findIndex(value => value === 4)     // 3

find()findIndex()可以用来弥补 indexOf() 的不足,因为 indexOf() 方法不能识别 NaN,而 find()findIndex()可以在回调函数中借助 Object.is 方法

[1, 2, NaN, 4, 5].findIndex(value => value == NaN)  // 2

数组示例的fill()

fill 方法给数组填充定值,第一个参数为要填充的值,第二个和第三个参数分别为填充起始位置和结束位置

[1, 2, 3].fill(0)   // [0, 0, 0]

[1, 2, 3].fill(0, 1, 2)     // [1, 0, 3]

数组示例的 entries(),keys(),values()

entries()keys()values() 用于遍历数组,它们都返回一个可遍历对象,可用 for ... of 循环遍历
entries() 是键值对的遍历
keys() 是键名的遍历,数组中为位置
values() 是对键值的遍历

for (let index of[1, 2, 3].keys()) {
    console.log(index)
}
// 0
// 1
// 2

数组示例的includes()

includes() 返回一个布尔值,表示数组是否包含给定的值,与字符串的 includes() 方法类似

[1, 2, 3].includes(2)   // true

indexOf 也可实现类似功能

if(arr.indexOf(el)!==-1){
    // ...
}

但indexOf方法有以下缺点:

  • 不够语义化
  • 内部使用严格相当运算符(===)进行判断,导致对 NaN 的误判

数组的空位

数组的空位值数组的某一个位置没有任何值,如 Array 构造函数返回的数组都是空位

  • 空位不是 undefined, 一个位置等于 undefined 依然是有值的,空位没有任何值
  • ES5 对空位的处理很不一致,大多数情况会忽略空位
  • ES6 明确规定将空位转为 undefined
// Array.from 会将数组空位转成 undefined
Array.from([1, , 3]);   // [1, undefined, 3]

// 扩展运算符(...)也会将空位转成 undefined
[...[4, , 6]];          // [4, undefined, 6]

数组推导

数组推导提供简洁写法,允许直接通过现有数组生成新数组
数组推导中,for ... of 结构总是写在最前面,返回表达式写在最后面,类似与 Python 的写法
该方法为ES7方法
for ... of 后面可以附加 if 语句,用于设定循环的条件
在一个数组推导中,还可以使用多个 for ... of 结构,构成多重循环

let a1 = [1, 2, 3];
let a2 = [ for (i of a1) i * 2 ];
a2  // [2, 4, 6]

数组推导的方括号构成一个单独的作用域,其中声明的对象类似于使用 let 语句声明的变量
使用数组推导需要注意的地方时:新数组会立即在内存中生成,这是,如果原数组很大,将非常消耗内存

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

推荐阅读更多精彩内容

  • 数组的扩展 1.Array.from() 用于将两类对象转换为真正的数组:类似数组的对象和可遍历的对象(包括es6...
    ningluo阅读 398评论 0 1
  • 扩展运算符 扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔...
    yujiawei007阅读 167评论 0 0
  • 1. Array.from() 用于将两类对象转为真正的数组。 类似数组的对象(array-like object...
    ForeverYoung20阅读 269评论 0 1
  • 扩展运算符(...) 基本用法 该运算符作用正好与rest参数作用相反,用于展开数组为参数序列,用逗号分割。 应用...
    秋枫残红阅读 200评论 0 0
  • 岁月 总在伤人之后 悄然离去 回忆 却在离人心中 难以忘怀 我们总在苍茫世间,渴望留住仅存的一丝空虚 却总是发现 ...
    风萧虎啸人难笑阅读 785评论 0 1