ES6之Array.from()方法

最新推荐文章于 2025-06-09 14:22:26 发布

爱写日记的仙女

最新推荐文章于 2025-06-09 14:22:26 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/weixin_38912024/article/details/100679932

js 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨ES6中Array.from()方法的应用，包括将类数组对象和可遍历对象转换为数组，处理Set和字符串，复制数组，以及实现类似map的功能。通过多个示例，展示了如何利用这一方法提升代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6之Array.from()方法

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

a.类数组对象

常见的：dom操作返回的Nodelist集合
和函数内部的arguments对象

b.可遍历对象（iterable)

原生具有iterator接口的数据结构

Array,map,set,string,typedarray,函数的arguments对象，nodelist对象

Array.from(arrayLike[, mapFn[, thisArg]])

参数解释

1）arrayLike：想要转换成数组的伪数组对象或可迭代对象；

2）mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数；

3）thisArg：可选参数，执行回调函数 mapFn 时 this 对象。

⚠️该方法的返回值是一个新的数组实例（真正的数组）。

使用：

将类数组对象转换为真正数组：

let a= {
  0: "tom",
  1: "65",
  2: "男",
  3: ["a", "b", "c"],
  length: 4
};

console.log(Array.from(a))
//["tom", "65", "男", Array(3)]

类数组要求：

（1）该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

（2）该类数组对象的属性名必须为数值型或字符串型的数字

2.将Set解构的数据转换为数组

let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set))  // [1,2,3,4,5,6,7,8,9]

3.将字符串转换为数组

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

相当于str.split(’’)

4.复制数组

let arr = [1,2,3,4,5];
let arr2 = Array.from(arr);
//相当于let arr2 = [...arr]
console.log(arr)        // [1,2,3,4,5]
console.log(arr2)        // [1,2,3,4,5]

5.类似于数组的map方法

用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

let arr = [1,2,3,4,5]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [2,3,4,5,6]

6.返回数组的真正长度

function countSymbols(string) {
  return Array.from(string).length;
}

7.控制函数执行的次数

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