ES6数组的扩展----Array.from()和Array.of()

一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组

1.何为伪数组

如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为“类似数组的对象”(array-like object),即为伪数组。

var obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

上面代码中,对象obj就是一个类似数组的对象。但是“类似数组的对象”并不是数组,因为它们不具备数组特有的方法。对象obj没有数组的push方法,使用该方法就会报错。

2.有哪些是伪数组

典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串。

3.如何转化为真数组

①数组的slice方法可以将“类似数组的对象”变成真正的数组

function doSomething(){
    console.log(arguments)
    var args = Array.prototype.slice.call(arguments);
    args.push("hj")
    console.log(args)
    return args
}
doSomething(1,2,3)

image

或者你也可以写成:

function doSomething(){
    var args = [].slice.call(arguments);
    return args
}
doSomething(1,2,3)

尽管这种方法,也可以实现将类数组转变为数组的目的,但并不直观。ES6新增Array.from()方法来提供一种明确清晰的方式以解决这方面的需求,更推荐后者的办法。

②Array.from()

<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<script type="text/javascript">
let btns = document.getElementsByTagName("button")
console.log("btns",btns);//得到一个伪数组
//btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function
Array.from(btns).forEach(item=>console.log(item))将伪数组转换为数组
</script>

image

在ES6中,扩展运算符(...)也可以将某些数据结构转为数组。只不过它需要在背后调用遍历器接口Symbol.iterator。值得注意的是如果一个对象没有部署遍历器接口,使用扩展运算符是无法将类似数组对象转换成数组。

function doSomething (){ 
  return [...arguments] 
}
doSomething('a','b','c'); // ["a","b","c"]

4.Array.from()用法

Array.from接受三个参数,但只有input是必须的:

  • input: 你想要转换的类似数组对象和可遍历对象
  • map: 类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
  • context: 绑定map中用到的this

只要是部署了iterator接口的数据结构,Array.from都能将其转为数组:

let arr = Array.from('juejin'); 
console.log(arr); //["j", "u", "e", "j", "i", "n"]

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]
// 等同于
Array.from([1,2,3].map(x => x * x))

如果map函数里面用到了this关键字,还可以传入Array.from的第三个参数,用来绑定this。

Array.from()可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的数组方法。

Array.from({ length: 2 }, () => 'jack')// ['jack', 'jack']

二、Array.of(v1, v2, v3) : 将一系列值转换成数组

当调用 new Array( )构造器时,根据传入参数的类型与数量的不同,实际上会导致一些不同的结果, 例如:

let items = new Array(2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // undefined
console.log(items[1]) ;
let items = new Array(1, 2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // 1
console.log(items[1]) ; // 2

当使用单个数值参数来调用 Array 构造器时,数组的长度属性会被设置为该参数。 如果使用多个参数(无论是否为数值类型)来调用,这些参数也会成为目标数组的项。数组的这种行为既混乱又有风险,因为有时可能不会留意所传参数的类型。

ES6 引入了Array.of( )方法来解决这个问题。该方法的作用非常类似Array构造器,但在使用单个数值参数的时候并不会导致特殊结果。Array.of( )方法总会创建一个包含所有传入参数的数组,而不管参数的数量与类型

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2

Array.of基本上可以用来替代Array()或newArray(),并且不存在由于参数不同而导致的重载,而且他们的行为非常统一。

参考文章

深入理解ES6

Javascript教程

JavaScript学习笔记:ES6数组方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C语言及其他语言

C语言中的基本输入输出

1.字符输出函数putchar putchar函数是字符输出函数,其功能是在终端(显示器)输出单个字符。其一般调用形式为: putchar(字符变量); ...

4889
来自专栏CodingToDie

Python学习(二):基础

第2 章 基础 Table of Contents 输入和输出 输出 输入 数据类型 整数 浮点数 字符串 布尔值 空值 变量 常量 输入和输出 输出 prin...

4575
来自专栏猿人谷

C++中指针和引用的区别

指针和引用主要有以下区别: 引用必须被初始化,但是不分配存储空间。指针不声明时初始化,在初始化的时候需要分配存储空间。 引用初始化后不能被改变,指针可以改变所指...

2327
来自专栏海天一树

小朋友学C语言(3):整数、浮点数、字符

C语言的数据类型有整型、浮点型(就是小数)、字符、字符串、数组、结构体等。刚开始学的时候,不要一下子学太多。先学最基本的整型、浮点型和字符。 对于学习程序来说,...

3456
来自专栏Python研发

最全Python内置函数

判断真假,  True:真  ,  False:假,   把一个对象转换成bool值

2032
来自专栏Java爬坑系列

C\C++中声明与定义的区别

  声明和定义是完全同的概念,声明是告诉编译器“这个函数或者变量可以在哪找到,它的模样像什么”。而定义则是告诉编译器,“在这里建立变量或函数”,并且为它们分配内...

18810
来自专栏Golang语言社区

厚土Go学习笔记 | 26. 函数闭包

如果非必要,尽量不要在程序中使用闭包。 go函数可以是一个闭包。闭包是一个函数值,它引用了函数体之外的变量。这个函数可以对这个变量进行访问和赋值。 展示一个例子...

35813
来自专栏全沾开发(huā)

学习zepto.js(对象方法)[4]

学习zepto.js(对象方法)[4] 今天说说那一套获取元素集合的一些方法: ["children", "clone", "clos...

3426
来自专栏机器学习算法与Python学习

python基础-数据类型与变量

转载于:廖雪峰的官方网站-python教程 数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值。但是,计算机能处理的远...

3587
来自专栏老司机的技术博客

人人都能学会的python编程教程2:数据类型和变量

了解一门编程语言最开始就是了解它的数据类型了,python基本的数据类型分为如下几类:

3687

扫码关注云+社区

领取腾讯云代金券