【js】Array.from方法介绍与用法示例

用js写算法题的时候遇到了,初始化二维数组可以用这个

在JavaScript中,Array.from 允许我们从类数组对象(array-like objects)或可迭代对象(iterable objects)创建一个新的数组实例。

Array.from简介

Array.from 是ES6(ECMAScript 2015)中引入的一个静态方法。该方法接受三个参数,并返回一个新的数组实例。

语法

javascript 复制代码
Array.from(arrayLike[, mapFn[, thisArg]])

参数

  • arrayLike: 必需,一个类数组对象或可迭代对象,它将被转换成一个数组。
  • mapFn (可选): 一个在数组元素被映射到新数组之前对它们进行操作的函数。
  • thisArg (可选): 执行 mapFn 时使用的 this 值。

返回值

一个新的数组实例,其元素从 arrayLike 中获取。

使用Array.from的示例

示例1:从类数组对象创建数组

类数组对象是那些具有 length 属性和(或)可索引元素的对象。

javascript 复制代码
// 定义一个类数组对象
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
// 使用Array.from将其转换为数组
var arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']

示例2:从字符串创建数组

字符串也是可迭代对象,因此我们可以使用 Array.from 将其转换为字符数组。

javascript 复制代码
var str = 'hello';
var arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

示例3:使用mapFn处理元素

Array.from 允许我们在创建数组时对每个元素执行一个函数。

javascript 复制代码
var arr = Array.from([1, 2, 3], function(x) {
  return x * x;
});
console.log(arr); // [1, 4, 9]

示例4:结合箭头函数

箭头函数提供了一种更简洁的方式来编写函数表达式。

javascript 复制代码
var arr = Array.from({length: 5}, (v, i) => i * i);
console.log(arr); // [0, 1, 4, 9, 16]

在上面的示例中,我们创建了一个长度为5的数组,并使用箭头函数为每个元素赋值为其索引的平方。

结论

Array.from 是一个强大的方法,它简化了从类数组对象和可迭代对象创建数组的操作。通过提供 mapFn 参数,我们可以在数组创建过程中对元素进行转换,这使得 Array.from 在处理数据时非常灵活和高效。

相关推荐
浪裡遊4 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge7 分钟前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
Aoda21 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
Sirens.21 分钟前
Java核心概念:抽象类、接口、Object类深度剖析
java·开发语言·github
幸运小圣22 分钟前
Set数据结构【ES6】
javascript·数据结构·es6
zxg_神说要有光31 分钟前
我好像找到了最适合我的生活状态
前端·javascript
程序员阿鹏1 小时前
49.字母异位词分组
java·开发语言·leetcode
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏
Yurko131 小时前
【C语言】基本语法结构(上篇)
c语言·开发语言·学习
草莓熊Lotso1 小时前
《C++ Stack 与 Queue 完全使用指南:基础操作 + 经典场景 + 实战习题》
开发语言·c++·算法