ES6 Array.from()方法

最新推荐文章于 2024-02-01 10:26:54 发布

原创最新推荐文章于 2024-02-01 10:26:54 发布 · 295 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #Array.from() #Array.form

js 专栏收录该内容

41 篇文章

订阅专栏

本文深入解析了Array.from()方法的功能，包括将类数组对象转换为真实数组、字符串转数组、处理数组及Set结构数据，展示了如何利用此方法进行数据转换，并通过实例说明了其在不同场景下的应用。

Array.from()该方法是将一个类数组对象或者可遍历对象转换成一个真正的数组。

一、类数组对象转换为真正数组：

该类数组需满足以下两条件：

1.必须具有length属性，用于指定数组的长度。若无length属性，那么转换后的数组是一个空数组。

2.属性名必须为数值型或字符串型的数字。若非数字，那么转换后的数组每一项的值都为undefined。

let arrayLike = {
	0:'你',
	1:'我',
	2:'他',
	3:['闻官军','收','河南','河北'],
	4:{'name':'国之不国','solgen':'家之何存'},
	'length':5
}
console.log(Array.from(arrayLike));

结果：

二、将字符串转换为数组

let arrString = 'good game!'
console.log(Array.from(arrString));// ["g", "o", "o", "d", " ", "g", "a", "m", "e", "!"]

三、若参数为数组则返回的仍是数组，该方法可接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理

console.log(Array.from([12,12,34,34]));//[12, 12, 34, 34]
console.log(Array.from([12,12,34,34],item=>item+1));//[13, 13, 35, 35]

四、将Set结构的数据装换为真正的数组

let arr = [12,34,56,78,56];
let arrSet = new Set(arr);
console.log(arrSet);//Set(4) {12, 34, 56, 78}
console.log(Array.from(arrSet));//[12, 34, 56, 78]
console.log(Array.from(arrSet,item => item*2));//[24, 68, 112, 156]