Array.from()

最新推荐文章于 2025-07-07 17:23:24 发布

原创最新推荐文章于 2025-07-07 17:23:24 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了JavaScript中Array.from()方法的作用，如何将类似数组的对象和可遍历对象如Set和Map转换为真正的数组，并强调了指定键从0开始和使用第二个参数进行元素处理的重要性。

Array.from()

将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

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

注意,Array.from()需要指定对象的键从0开始,且要指定length长度

还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

也无晴也无风雨

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

让数组操作更优雅：深挖Array.from 让同事惊叹的实用场景

石小石Orz的博客

06-04

1055

Array.from是一个灵活且功能强大的工具，能轻松将类数组或可迭代对象转化为数组，还可以通过映射函数完成各种复杂的处理。在处理字符串、DOM 集合、范围生成和数据去重时，它能让代码更加优雅、简洁。希望通过本文的讲解，大家能更好地理解并应用Array.from。如果大家还有其他使用场景，欢迎留言分享！

Array.from 详解：语法、功能、应用场景示例

qq_43985303的博客

07-08

1091

曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

参与评论您还未登录，请先登录后发表或查看评论

对Aarry.from( )第二个函数参数和array.map()的疑惑和自己的理解【2021.11.24】

masierty的博客

11-24

737

我们先来看三个例子？ let arrayOne = [1,2,3].map(parseInt); console.log(arrayOne);//Array(3) [ 1, NaN, NaN ] let arrayTwo = [1, 2, 3]; let new_array = Array.from(arrayTwo,parseInt); console.log(new_array);//Array(3) [ 1, NaN, NaN ] let arrayThr

Array.from的使用

qq_45691752的博客

06-15

288

Array.from的使用作用将伪数组转为数组使用方法 Array.from(arrayLike,callFn,thisObj) 第一个参数，待转数组的伪数组 第二个参数，回调函数，可不传，会对数组中每一个元素都执行一次改回调函数第三个参数，回调函数的this指向，可不传 ------------------------------------------------------------------------------

ES6之Array.from()方法

weixin_30553837的博客

02-11

2486

　　Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。　　那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。　　1、将类数组对象转换为真正数组： let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','...

Array.from()小结

mhbsoft的博客

08-01

974

1.部署了Iterator接口的对象，比如：Set，Map，Array。 2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。转换map 将Map对象的键值对转换成一个一维数组。实际上转换出来的数组元素的序列是key1,value1,key2,value2,key3,value3….. const map1 = new Ma...

Array.from使用

hj3601947的专栏

08-04

341

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是。所谓类数组对象，最基本的要求就是具有length属性的对象。ps: 该类数组对象的属性名可以加引号，也可以不加引号。2、该类数组对象的属性名必须为数值型或字符串型的数字。

ES6入门教程之Array.from()方法

12-11

在ES6中，`Array.from()`方法是一个非常实用的工具，它允许我们将各种类型的数据转换成正规的数组。这个方法主要适用于两类对象：部署了Iterator接口的对象（如Set、Map和Array本身）以及类数组对象。类数组对象是指...

实例分析Array.from(arr)与[...arr]到底有何不同

10-17

在JavaScript中，`Array.from()` 和扩展运算符 `[...arr]` 都是将类数组对象转换成真正的数组。然而，它们之间存在一些差异和使用场景的区别。让我们深入探讨这两个方法。首先，类数组对象是一种拥有索引和长度，...

Array.from() 简直太好用啦

qq_43340606的博客

07-07

334

JavaScript数组创建的优雅方式：Array.from()方法解析摘要：Array.from()是JavaScript中创建和转换数组的利器，能以函数式编程风格替代传统的for循环。它能从类数组对象或可迭代对象生成数组，并支持映射函数进行复杂处理。主要应用场景包括：1) 创建数字序列（如[0,1,2,3,4]）；2) 生成特定规则的数组（偶数序列、平方数等）；3) 快速初始化对象数组；4) 复制并深度处理数组；5) 生成字母序列等。相比传统for循环和map方法，Array.from()代码更简洁，

JavaScript数组方法Array.from()的用法

tainulllw的博客

02-23

3146

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象目前这些就是个人常使用的，简单总结一下。

数组方法---Array from（）

明知迷途，从未折返

11-01

517

作用： Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。参数：一共有3个参数，第一个参数：毕传参数，是需要转化为数组的类数组本身 第二个参数：可选参数，是一个回调函数，如果指定了这个参数，新数组中的每个元素都会执行这个函数第三个参数，也是可选参数，指定回调函数中的this指向扩展： Array.from() 可以通过以下方式来创建数组对象伪数组对象：拥...

JavaScript Array.from 详解

最新发布

08-14

在 JavaScript 中，`Array.from()` 是一个非常实用的方法，用于将类数组对象（array-like objects）或可迭代对象（iterable objects）转换为真实的数组。这在处理如 `NodeList`、`arguments` 对象、字符串、`Map`、`Set` 等结构时特别有用。 ### 基本语法 ```javascript Array.from(arrayLike, mapFn?, thisArg?) ``` - `arrayLike`：需要转换为数组的类数组对象或可迭代对象。 - `mapFn`（可选）：类似于 `map()` 方法的回调函数，用于对每个元素进行处理。 - `thisArg`（可选）：执行 `mapFn` 时使用的 `this` 值。 ### 使用场景详解 1. **将类数组对象转换为数组** 类数组对象通常具有 `length` 属性和索引属性，但不具备数组的方法。例如，`arguments` 对象是一个典型的类数组对象。 ```javascript function example() { const args = Array.from(arguments); console.log(args); // [1, 2, 3] } example(1, 2, 3); ``` 该方法也适用于 DOM 操作中返回的 `NodeList`。 ```javascript const nodeList = document.querySelectorAll('div'); const array = Array.from(nodeList); console.log(array); // 包含所有 div 元素的数组 ``` 2. **字符串转换为字符数组** `Array.from()` 可以轻松将字符串按字符顺序转换为数组。 ```javascript const str = "hello"; const chars = Array.from(str); console.log(chars); // ["h", "e", "l", "l", "o"] ``` 3. **使用 `mapFn` 参数对元素进行映射** 可以通过 `mapFn` 参数在转换过程中对每个元素进行处理。 ```javascript const numbers = Array.from([1, 2, 3], x => x * 2); console.log(numbers); // [2, 4, 6] ``` 4. **浅拷贝数组** `Array.from()` 可以用于浅拷贝数组，返回的新数组与原数组引用不同。 ```javascript const original = [3, 6, 9]; const copy = Array.from(original); console.log(original === copy); // false ``` 5. **处理数字等非数组对象** 如果传入的是一个数字，`Array.from()` 会返回一个空数组，因为数字本身不具备可迭代性。 ```javascript const a = Array.from(123456789); console.log(a); // [] ``` ### 特性总结 - 支持将任意类数组或可迭代对象转换为真实数组。 - 可以配合 `map` 函数进行数据转换。 - 适用于 DOM 操作、字符串处理、集合类型转换等场景。 - 提供了简洁的语法，替代了传统的 `slice.call()` 等写法。 ---