JavaScript Array.from及其相关用法详解(示例演示)
JavaScript 中的
Array.from方法是一个强大的工具，可以轻松地将类数组对象或可迭代对象转换为数组，并通过可选的回调函数对每个元素进行自定义处理。本文将详细介绍Array.from的基本用法、实际场景中的应用，以及它如何与其他 JavaScript 特性相结合提升代码的简洁性和可读性。
一、Array.from 方法概述
1. 方法介绍
Array.from 是 ES6 引入的一个静态方法，用于从类数组对象（具有 length 属性的对象）或可迭代对象（如字符串、Set、Map）创建一个新的数组实例。
语法：
Array.from(arrayLike, mapFunction, thisArg)
arrayLike：要转换为数组的类数组对象或可迭代对象。mapFunction（可选）：一个函数，对每个元素执行转换。thisArg（可选）：执行mapFunction时的this值。
返回值：
一个新的数组。
2. 示例演示
基本用法：
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const result = Array.from(arrayLike);
console.log(result); // ['a', 'b']
const str = 'hello';
console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o']带 mapFunction 的用法：
const nums = [1, 2, 3]; const doubled = Array.from(nums, x => x * 2); console.log(doubled); // [2, 4, 6]
二、结合实际场景的使用
1. 初始化二维数组
在一些算法题中，我们可能需要初始化一个二维数组。利用 Array.from 可以轻松实现：
const numRows = 3;
const rows = Array.from({ length: numRows }, () => []);
console.log(rows); // [[], [], []]这个例子中：
{ length: numRows }定义了一个长度为numRows的类数组对象。() => []是一个回调函数，用于为每一行生成一个新的空数组。
实际应用： 在模拟二维矩阵时，rows 数组可以用于存储每一行的数据，例如在处理 Z 字形转换的算法中。
Z 字形转换示例：
const numRows = 3;
const rows = Array.from({ length: numRows }, () => []);
const input = 'PAYPALISHIRING';
let direction = 1, row = 0;
for (const char of input) {
rows[row].push(char);
if (row === 0 || row === numRows - 1) direction *= -1;
row += direction;
}
console.log(rows.map(r => r.join('')).join('')); // PAHNAPLSIIGYIR2. 从可迭代对象创建数组
对于字符串、Set 或 Map，Array.from 提供了一种简单的方法将它们转换为数组。
字符串转数组：
const str = 'JavaScript'; console.log(Array.from(str)); // ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
从 Set 转数组（去重）：
const set = new Set([1, 2, 2, 3]); console.log(Array.from(set)); // [1, 2, 3]
从 Map 转数组：
const map = new Map([[1, 'a'], [2, 'b']]); console.log(Array.from(map)); // [[1, 'a'], [2, 'b']]
3. 构造特定范围的数组
可以通过 Array.from 快速生成特定范围的数组。
生成从 0 到 9 的数字数组：
const range = Array.from({ length: 10 }, (_, i) => i);
console.log(range); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]生成平方数数组：
const squares = Array.from({ length: 5 }, (_, i) => i ** 2);
console.log(squares); // [0, 1, 4, 9, 16]三、注意事项
1. 类数组对象必须有 length 属性
Array.from 的第一个参数必须是类数组对象或可迭代对象。类数组对象需要显式地定义 length 属性。
无效示例：
const obj = { 0: 'a', 1: 'b' };
console.log(Array.from(obj)); // []修正：
const obj = { 0: 'a', 1: 'b', length: 2 };
console.log(Array.from(obj)); // ['a', 'b']2. 回调函数中的索引
在 Array.from 的回调函数中，除了当前元素，还可以访问其索引。
示例：
const arr = Array.from({ length: 5 }, (val, index) => index * 2);
console.log(arr); // [0, 2, 4, 6, 8]3. 性能注意
Array.from 的回调函数可能会对性能产生一定的影响，特别是在处理大规模数据时，建议在性能要求较高的场景中谨慎使用。
推荐：
到此这篇关于JavaScript Array.from及其相关用法详解的文章就介绍到这了,更多相关js Array.from用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript一种由Netscape的LiveScript发展而来的脚本语言，它提高与Java的兼容性。JavaScript采用HTML页作为其接口。很多朋友问js是什么意思？下面小编通过分享本教程给大家解答下，感兴趣的朋友参考下2016-09-09
vue组件中watch props根据v-if动态判断并挂载DOM的问题
这篇文章主要介绍了vue组件中watch props根据v-if动态判断并挂载DOM的问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要是对html与javascript在浏览器中的加载顺序问题进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了微信小程序实现animation动画的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了js实现全选反选不选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本文主要介绍了js实现旋转木马效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
时间函数应用加、减、比较、格式转换等等，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要为大家详细介绍了原生JS实现拖拽照片墙，实现照片互换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化，实现方法非常简单，感兴趣的朋友一起看看吧2017-05-05
皓月当空,月圆中秋,在这个传统节日里,除了赏月、猜灯谜、赏花灯等习俗外,还有就是品尝美味的月饼,本文就来使用canvas绘制一个精美的月饼吧2023-09-09
最新评论