广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript如何将伪数组转换成数组
  • 721
分享到

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

2024-04-02 19:04:59 721人浏览 薄情痞子
摘要

目录前言什么是伪数组?转换ES5 的做法方法1方法2es6的做法第三个参数的用法(不常用)Array.from 其他玩法把字符串转换成数组前言 在 js 

前言

在 js 中,伪数组 是非常常见的,它也叫 类数组。伪数组可能会给 JS 初学者带来一点困扰。

本文将详细讲解 什么是伪数组,以及分别在 ES5 和 ES6 中将伪数组转换成真正的数组 。

什么是伪数组?

伪数组的主要特征:它是一个对象,并且该对象有 length 属性

比如:

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

像上面的 arrayLike 对象,有 length 属性,key 也是有序序列。可以遍历,也可以查询长度。但却不能调用数组的方法。比如 push、pop 等方法。

在 ES6 之前,还有一个常见的伪数组:arguments

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

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

除了 arguments 之外,nodeList 对象表示节点的集合也是伪数组,比如通过 document.querySelectorAll 获取的节点集合等。

转换

将伪数组转换成真正的数组的方法不止一个,我们先从 ES5 讲起。

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

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

Array.from 其他玩法

创建长度为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 会返回一个一模一样的数组。

到此这篇关于javascript如何将伪数组转换成数组 的文章就介绍到这了,更多相关JS 数组 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript如何将伪数组转换成数组

本文链接: https://www.lsjlt.com/news/153314.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript如何将伪数组转换成数组
    目录前言什么是伪数组?转换ES5 的做法方法1方法2ES6的做法第三个参数的用法(不常用)Array.from 其他玩法把字符串转换成数组前言 在 JS ...
    99+
    2022-11-13
  • JavaScript怎么将伪数组转换成数组 
    今天小编给大家分享一下JavaScript怎么将伪数组转换成数组 的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。什...
    99+
    2023-07-02
  • ES6如何将伪数组转换成数组
    今天小编给大家分享一下ES6如何将伪数组转换成数组的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2022-10-19
  • JS将伪数组转换成数组的实现示例
    目录什么是伪数组?转换ES5 的做法方法1方法2ES6的做法第三个参数的用法(不常用)Array.from 其他玩法把字符串转换成数组在 JS 中,伪数组 是非常常见的,它也叫 类数...
    99+
    2022-11-13
  • JavaScript如何将NodeList转换成数组
    小编给大家分享一下JavaScript如何将NodeList转换成数组,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!将NodeList转换成数组如果你运行docu...
    99+
    2023-06-27
  • 将string转换成对象数组 javascript
    在JavaScript中,字符串(string)和对象(object)是两种不同的类型,它们存储的数据也有很大的区别。在Web开发中,我们经常会遇到需要将字符串转换成对象数组的情况,例如从服务器获取到的JSON数据。本文将介绍几种将字符串转...
    99+
    2023-05-14
  • javascript中怎么将string转换成数组
    javascript中怎么将string转换成数组?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。在javascript中,可以使用split方法将string转...
    99+
    2023-06-15
  • php如何将json转换成数组
    小编给大家分享一下php如何将json转换成数组,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在php中可以通过json_decode函数将json转换成数组,该...
    99+
    2023-06-14
  • php如何将xml转换成数组
    这篇文章给大家分享的是有关php如何将xml转换成数组的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。php将xml转换成数组的方法:首先将xml数据转成object(对象)格式的数据;然后使用json_encod...
    99+
    2023-06-08
  • 将php数组转换成json
    在PHP中,我们经常需要将数据从一个格式转换为另一个格式以进行处理或传输。其中一种常见的转换方式是将PHP数组转换为JSON(JavaScript Object Notation)格式。本文将介绍如何将PHP数组转换为JSON,以及如何处理...
    99+
    2023-05-19
  • JavaScript如何将set转换为数组
    这篇文章主要介绍JavaScript如何将set转换为数组,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!将 set 转换为数组const set = new Set([1,&n...
    99+
    2023-06-27
  • JavaScript如何将arguments对象转换成一个数组
    这篇文章将为大家详细讲解有关JavaScript如何将arguments对象转换成一个数组,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。将arguments对象转换成一个...
    99+
    2022-10-19
  • php如何将关联数组转换成二维数组
    本篇内容介绍了“php如何将关联数组转换成二维数组”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先,假设我们有两个关联数组:$array1...
    99+
    2023-07-06
  • php如何将数组转换成对象
    这篇文章主要为大家展示了php如何将数组转换成对象,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“php如何将数组转换成对象”这篇文章吧。php有什么用php是一个嵌套的缩写名称,指的是英文超级文本...
    99+
    2023-06-06
  • php如何将object转换成数组中
    今天小编给大家分享一下php如何将object转换成数组中的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在PHP中,可以使用...
    99+
    2023-07-06
  • Javascript如何将数组转换为对象
    这篇文章主要为大家展示了“Javascript如何将数组转换为对象”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Javascript如何将数组转换为对象”这篇文章吧。将数组转换为对象如果要将数组...
    99+
    2023-06-17
  • php如何将数组转换成字符串
    在php中使用implode函数将数组转换成字符串:implode函数是用于返回一个由数组元素组合成的字符串,语法:implode(separator,array);在php中使用implode函数将数组转换成字符串,具体方法如下:impl...
    99+
    2022-10-09
  • 如何将文件流转换成byte[]数组
    目录将文件流转换成byte[]数组将文件转为byte[],通过ByteArrayOutputStream实现通过文件路径转换byte[]将bitmap对象将文件流转换成byte[]数...
    99+
    2022-11-12
  • php如何将string转换成数组类型
    这篇文章主要介绍“php如何将string转换成数组类型”,在日常操作中,相信很多人在php如何将string转换成数组类型问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何将string转换成数组类型...
    99+
    2023-07-04
  • php如何将数组转换成string类型
    这篇文章主要介绍了php如何将数组转换成string类型,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在php中,可以使用implode()函数来将数组转换成string类型...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作