JS Array.from()将伪数组转换成数组的方法示例

Array.from 方法用于将两类对象转换为真正的数组：

1、类似数组的对象，可以理解为“伪数组”

2、可遍历对象（比如字符串）

什么是伪数组？

伪数组都有一个基本的特点：必须有 length 属性。

let arrayLike = {
 "0": "a",
 "1": "b",
 "2": "c",
 "length": 3
}

像上面的 arrayLike 对象，有 length 属性，key 也是有序序列。

所以可以遍历，也可以查询长度。但却不能调用数组的方法。比如 push、pop 等方法。

在 ES6 之前，还有一个常见的伪数组：arguments。

arguments 看上去也很像一个数组，但它没有数组的方法。

比如 arguments.push(1) ，这样做一定会报错。

ES5 的做法

在 ES6 问世之前，开发者通常需要用以下的方法把伪数组转换成数组。

方法1：遍历
// 通过 makeArray 方法，把数组转成伪数组
function makeArray(arrayLike) {
 let result = [];
 for (let i = 0, len = arrayLike.length; i < len; i++) {
  result.push(arrayLike[i]);
 }
 return result;
}

function doSomething () {
 let args = makeArray(arguments);
 console.log(args);
}
doSomething(1, 2, 3);

// 输出: [1, 2, 3]

这个方法虽然有效，但要多写很多代码。

方法2：Array.prototype.slice.call

function doSomething () {
 let args = Array.prototype.slice.call(arguments);
 console.log(args);
}
doSomething(1, 2, 3);

// 输出: [1, 2, 3]

这个方法的功能和 方法1 是一样的，虽然代码量减少了，但不能很直观的让其他开发者觉得这是在转换。

ES6的做法

直到 ES6 提供了 Array.from 方法完美解决以上问题。

function doSomething () {
 let args = Array.from(arguments);
 console.log(args);
}

doSomething('一', '二', '三');

// 输出: ['一', '二', '三']

Array.from 的主要作用就是把伪数组和可遍历对象转换成数组的。

说“主要作用”的原因是因为 Array.from 还提供了2个参数可传。这样可以延伸很多种小玩法。

Array.from 的第二个参数是一个函数，类似 map遍历 方法。用来遍历的。

Array.from 的第三个参数接受一个 this 对象，用来改变 this 指向。

第三个参数的用法（不常用）

let helper = {
 diff: 1,
 add (value) {
  return value + this.diff; // 注意这里有个 this
 }
};

function translate () {
 return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);

console.log(numbers); // 2, 3, 4

其他玩法

创建长度为5的数组，且初始化数组每个元素都是1

let array = Array.from({length: 5}, () => 1)
console.log(array)

// 输出: [1, 1, 1, 1, 1]

第二个参数的作用和 map遍历 差不多的，所以 map遍历 有什么玩法，这里也可以做相同的功能。就不多赘述了。

把字符串转成数组

let msg = 'hello';
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]

最后一个问题：如果传一个真正的数组给 Array.from 会返回什么结果？

答案是：会返回一个一模一样的数组。

到此这篇关于JS Array.from()将伪数组转换成数组的方法示例的文章就介绍到这了,更多相关JS Array.from伪数组转换成数组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 伪数组实现方法

    这篇文章来回答javascript通用循环遍历方法forEach中最后提到的关于伪数组的问题. 什么是伪数组 能通过Array.prototype.slice转换为真正的数组的带有length属性的对象. 这种对象有很多,比较特别的是arguments对象,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组. 我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变

  • js中将HTMLCollection/NodeList/伪数组转换成数组的代码

    这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments . 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeLi

  • JavaScript伪数组用法实例分析

    JavaScript伪数组用法实例分析

    本文实例讲述了JavaScript伪数组用法.分享给大家供大家参考,具体如下: 在Javascript中什么是伪数组? 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们. 1.典型的是函数的 argument参数, 2.像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList对象都属于伪数组. 那么如何将伪数组转化为标准数组? 可以使用Array.prototype

  • JS Array.from()将伪数组转换成数组的方法示例

    Array.from 方法用于将两类对象转换为真正的数组: 1.类似数组的对象,可以理解为"伪数组" 2.可遍历对象(比如字符串) 什么是伪数组? 伪数组都有一个基本的特点:必须有 length 属性. let arrayLike = { "0": "a", "1": "b", "2": "c", "length": 3 } 像上面的 arrayL

  • JavaScript如何将伪数组转换成数组 

    目录 前言 什么是伪数组? 转换 ES5 的做法 方法1 方法2 ES6的做法 第三个参数的用法(不常用) Array.from 其他玩法 把字符串转换成数组 前言 在 JS 中,伪数组 是非常常见的,它也叫 类数组.伪数组可能会给 JS 初学者带来一点困扰. 本文将详细讲解 什么是伪数组,以及分别在 ES5 和 ES6 中将伪数组转换成真正的数组 . 什么是伪数组? 伪数组的主要特征:它是一个对象,并且该对象有 length 属性 比如: let arrayLike = { "0":

  • js 实现 list转换成tree的方法示例（数组到树）

    目标: JS 将有父子关系的平行数组转换成树形数据 方法:双重遍历,一次遍历parentId,一次遍历id == parendId; 该方法应该能很容易被想到,实现起来也一步一步可以摸索出来: const oldData = [ {id:1,name:'boss',parentId:0}, {id:2,name:'lily',parentId:1}, {id:3,name:'jack',parentId:1}, {id:4,name:'john',parentId:2}, {id:5,name:

  • php实现将二维关联数组转换成字符串的方法详解

    本文实例讲述了php实现将二维关联数组转换成字符串的方法.分享给大家供大家参考,具体如下: 需求 项目中遇到了二维关联数组转字符串的问题,查阅相关资料,写了如下程序,并且能过滤重复的关键字. 举例,php的二维数组如下: $name = array( "self" => "wangzhengyi", "student" => array( "chenshan", "xiaolingang" ),

  • C#将字节数组转换成数字的方法

    本文实例讲述了C#将字节数组转换成数字的方法.分享给大家供大家参考.具体实现方法如下: // Create a decimal from a byte array public static decimal ByteArrayToDecimal (byte[] src) { // Create a MemoryStream containing the byte array using (MemoryStream stream = new MemoryStream(src)) { // Crea

  • 将HTMLCollection/NodeList/伪数组转换成数组的实现方法

    这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments . 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeLi

  • JS自定义函数实现时间戳转换成date的方法示例

    本文实例讲述了JS自定义函数实现时间戳转换成date的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取当前年/月/日(www.jb51.net)</title> </head> <body> <script> function UnixToDate(unixTime

  • C#实现把图片转换成二进制以及把二进制转换成图片的方法示例

    本文实例讲述了C#实现把图片转换成二进制以及把二进制转换成图片的方法.分享给大家供大家参考,具体如下: private void button1_Click(object sender, EventArgs e) { string path = this.textBox1.Text; byte[] imgBytesIn = SaveImage(path); ShowImgByByte(imgBytesIn); //Parameters.Add("@Photo", SqlDbType.B

  • java实现将字符串中首字母转换成大写，其它全部转换成小写的方法示例

    java实现将字符串中首字母转换成大写，其它全部转换成小写的方法示例

    本文实例讲述了java实现将字符串中首字母转换成大写,其它全部转换成小写的方法.分享给大家供大家参考,具体如下: public class TestSubstring { public static void main(String[] args) { String s = getConvert("adsJKJ3K21AfaAD134F13241d134134s141faAAFDF"); System.out.println(s); } //将一个字符串中的首字母转换成大写,其它的全部

随机推荐