美文网首页
数组的扩展

数组的扩展

作者: CandyTong_ | 来源:发表于2017-11-19 23:54 被阅读0次

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 语句声明的变量
使用数组推导需要注意的地方时:新数组会立即在内存中生成,这是,如果原数组很大,将非常消耗内存

相关文章

  • 3.数组扩展

    1)cat函数扩展结果=cat(1或2,数组1,数组2) 3)水平连接扩展结果=horzcat(数组1,数组2,。...

  • ES6扩展

    字符串的扩展正则的扩展数值的扩展数组的扩展函数的扩展对象的扩展

  • ES6数组扩展

    二、数组扩展

  • 数组的扩展

    扩展运算符 含义 扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗...

  • 数组的扩展

    Aaary类是一个函数,返回数组 Array.of() Array.form(数组/类数组),返回一个数组 在原型...

  • 数组的扩展

    数组的扩展 扩展运算符...Array类似 ...restrest参数的逆运算,所有实现iterator接口的类数...

  • 数组的扩展

    1、扩展运算符 扩展运算符为三个点(...),可以将数组中的值以逗号形式序列化。 2、数组的find()和find...

  • 数组的扩展

    ** 参考**书籍:ECMAScript 6 入门作者:阮一峰 Array.of()Array.of方法用于将一组...

  • 数组的扩展

    扩展运算符(...) 基本用法 该运算符作用正好与rest参数作用相反,用于展开数组为参数序列,用逗号分割。 应用...

  • 数组的扩展

    如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。 扩展运算符还可以将字符串转为真正的数组。 上面...

网友评论

      本文标题:数组的扩展

      本文链接:https://www.haomeiwen.com/subject/dcrmvxtx.html