JS 将伪数组转换成数组 ?

javascript 文章 2022-07-25 10:20 3033 0 全屏看文

AI助手支持GPT4.0

本文简介

点赞 + 关注 + 收藏 = 学会了


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 ES5也可以创建常量?》

👍《Object.defineProperty也能监听数组变化?》

👍《『Three.js』起飞!》

👍《Fabric.js 从入门到膨胀》

点赞 + 关注 + 收藏 = 学会了

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
基于cornerstone.js的dicom医学影像查看浏览功能
破解sojson、jsjiami加密网站
Object.defineProperty方法
从零开始制作【立体键盘】,画UI免写CSS,【盲打练习】的交互逻辑只用了10来行表达式!
三叔博客双十一推服务器的弹出脚本
随便看看
阿里云com、cn域名续费优惠码(2020年11月可用) 1271
Google Adsense、Admob、Youtube 收款超过5万美金的收款结汇攻略 2048
微信公众号(订阅号、服务号)接广告要注意的一些坑 1459
新来昆山打工者须知(住宿、交通、打工、防骗) 2991
阿里云com、cn域名续费优惠码(2020年12月可用) 1059
仙剑传奇土城天魔菲尼斯任务(生命宝石) 1329
仙剑装备展示 1640
传奇仙剑情缘基本介绍 1967
仙剑传奇炼狱任务转生介绍 1141
仙剑传奇NPC的坐标 1300