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用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了js实现弹窗猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了移动端使用localResizeIMG4压缩图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了微信小程序订阅消息(java后端实现)开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
之前做项目的时候在实现表单中file类型input选择多图片时有很多种实现方法，今天小编给大家分享基于php实现一种多文件上传的方法，需要的朋友参考下吧2017-09-09
本篇文章主要是对js跳转页面方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JS实现给数组对象排序的方法,结合实例形式分析了javascript数组对象排序相关实现方法与操作注意事项,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了JS实现的图片选择顺序切换和循环切换功能,结合完整实例形式分析了JavaScript基于事件响应与样式动态操作实现图片切换相关操作技巧,需要的朋友可以参考下2018-12-12
JavaScript字符串的json的自定义加密解密函数示例
JavaScript自定义函数中使用String.fromCharCode函数将输入字符串中每个字符的Unicode编码加1,然后将加密后的字符拼接成一个新字符串返回,调用JSON.stringify函数转换json成一个普通字符串2023-12-12
当一个页面有多个a标签，实现当前点击a标签变色，其他a标签回复原色，具体实现如下，喜欢的朋友可以参考下2013-11-11
这篇文章主要为大家详细介绍了mock.js模拟数据实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论