广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS将伪数组转换成数组的实现示例
  • 763
分享到

JS将伪数组转换成数组的实现示例

2024-04-02 19:04:59 763人浏览 独家记忆
摘要

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

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

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

什么是伪数组?

伪数组的主要特征:它是一个对象,并且该对象有 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 会返回一个一模一样的数组。

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

--结束END--

本文标题: JS将伪数组转换成数组的实现示例

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

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

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

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

下载Word文档
猜你喜欢
  • JS将伪数组转换成数组的实现示例
    目录什么是伪数组?转换ES5 的做法方法1方法2ES6的做法第三个参数的用法(不常用)Array.from 其他玩法把字符串转换成数组在 JS 中,伪数组 是非常常见的,它也叫 类数...
    99+
    2022-11-13
  • ES6如何将伪数组转换成数组
    今天小编给大家分享一下ES6如何将伪数组转换成数组的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2022-10-19
  • JavaScript如何将伪数组转换成数组
    目录前言什么是伪数组?转换ES5 的做法方法1方法2ES6的做法第三个参数的用法(不常用)Array.from 其他玩法把字符串转换成数组前言 在 JS ...
    99+
    2022-11-13
  • JavaScript怎么将伪数组转换成数组 
    今天小编给大家分享一下JavaScript怎么将伪数组转换成数组 的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。什...
    99+
    2023-07-02
  • js实现数组转树示例
    目录原生 封装工具函数 getTree结构图:原生 封装工具函数 getTree 1.1 定义 -映射对象 map 数组 treeList=[] 1.2 遍历后端返回的数组 list...
    99+
    2022-11-13
  • Java如何将数组转换成List?(代码示例)
    有时候我们需要将数组类型转换成为集合类型,因为后者是一个更为强大的数据结构,java.util.List 有许多普通数组不支持的功能。比如:我们可以通过List的内置方法轻易地检测list是否包含某一个特定的值。下面是一些怎么将数组转换为l...
    99+
    2019-10-30
    java教程 java 数组 List
  • Python实现将wav转amr,并转换成hex数组
    目录将wav转amr,并转换成hex数组直接上代码执行generate_audio_file.py已经生成对应的.h文件总结将wav转amr,并转换成hex数组 将wav文件快速转为...
    99+
    2023-05-19
    Python wav Python amr Python转换hex数组 Python wav转amr
  • JS一维数组转化为三维数组的实现示例
    今天在CSDN上问答区看到一个提问的小伙伴,是想要将一维数组转化为三位数组的需求,正好不是很忙,乐于助人的我立马给这位同学安排上,当然也没有顾及那么多去看资料什么的,就直接按照自己的...
    99+
    2022-11-12
  • php将数组转换为json格式的示例
    小编给大家分享一下php将数组转换为json格式的示例,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在PHP中,可以使用json_encode()函数来将数组转换为json格式的数据,语法为“json_encode(数组变...
    99+
    2023-06-06
  • 将java中的 string 类型转成数组案例
    下面是一个将字符串转换为字符数组的Java案例:```javapublic class StringToArrayExample {...
    99+
    2023-08-14
    Java
  • lodash里to系列之将数据转换成数字类型实现示例
    目录正文toNumbertoFinittoIntegertoSafeInteger小结正文 在lodash里的to系列里,将目标数据转换为数字类型的数据的方法,包括了toNumber...
    99+
    2022-11-13
  • python 利用 PIL 将数组值转成图片的实现
    python PIL 将数组值转成图片 安装 PIL 包 pip install pillow 将二维数据转换成单通道图片 from PIL import Image ar...
    99+
    2022-11-12
  • 如何将PHP中的二维数组转换成字符串
    随着Web开发领域的不断发展,PHP逐渐成为了Web开发中最受欢迎的语言之一。其中,2维数组是PHP编程中经常使用的一种数据类型。在开发过程中,我们有时候需要将2维数组转换成字符串,以方便在不同的程序之间进行数据传递和存储。本文将介绍如何将...
    99+
    2023-05-14
  • java将XML文档转换成json格式数据的示例
    本文介绍了java将XML文档转换成json格式数据的示例,分享给大家,具体如下:功能将xml文档转换成json格式数据说明依赖包: jdom-2.0.2.jar : xml解析工具包; fastjson-1.1.36.jar : 阿里...
    99+
    2023-05-30
    java xml json
  • js怎么实现将json数组显示前台table中
    这篇文章主要介绍了js怎么实现将json数组显示前台table中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在最近的学习中遇到一个小问题,...
    99+
    2022-10-19
  • arrify转数组实现示例源码解析
    目录学习目标拉取源码分析源码Symbol.iterator 的使用场景具有默认的迭代器函数的对象总结学习目标 分析 arrify 函数的源码通过测试用例调试源码学习 Symbol.i...
    99+
    2022-12-25
    arrify 转数组 arrify 转数
  • java泛型数组转换类型的示例分析
    小编给大家分享一下java泛型数组转换类型的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!java基本数据类型有哪些Java的基本数据类型分为:1、整数类型,用来表示整数的数据类型。2、浮点类型,用来表示小数的数据...
    99+
    2023-06-14
  • Java编程实现数组转成list及list转数组的方法
    本文实例讲述了Java编程实现数组转成list及list转数组的方法。分享给大家供大家参考,具体如下:数组转成list:方法一:String[] userid = {"aa","bb","cc"};List<String> us...
    99+
    2023-05-31
    java 数组 list
  • java实现二维数组转置的方法示例
    本文实例讲述了java实现二维数组转置的方法。分享给大家供大家参考,具体如下:这里在文件中创建Test2、Exchange、Out三个类在Exchange类中编写exchange()方法,在方法中创建两个数组arraryA、arraryB,...
    99+
    2023-05-31
    java 二维数组 ava
  • Java实现二维数组和稀疏数组之间的转换
    目录前言 1. 需求和思路分析 2.代码实现和展示 3. 总结 参考视频前言 用Java实现二维数据和稀疏数组之间的转换 1. 需求和思路分析 1.1 以二维数组的格式模拟棋盘、...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作