ES5与ES6中数组实用的数据结构之Array.from

提问,如果ES5要将伪数组转化为数组怎么做呢?

那什么是伪数组呢?它具有说明特性?

伪数组的回答:

数组是开发中经常用到的数据结构,它非常好用。在 JavaScript 的世界里有些对象被理解为数组,然而缺不能使用数组的原生 API,比如函数中的 arguments、DOM中的 NodeList等。当然,还有一些可遍历的对象,看上去都像数组却不能直接使用数组的 API,因为它们是伪数组(Array-Like)。

1、不能直接调用数组的方法

2、拥有数组的长度和可遍历

3、不定参、nodelist。

伪数组的特性的回答:

1、按照索引方式储存数据

2、具备length属性

如下面代码就是他的特性:

let arrLike = {
0: ‘a’,
1: ‘b’,
2: ‘c’,
length: 3
}

一、ES5将伪数组转化成数组的做法(通过数组原型链的方式去调用数组的方法指向arguments上去)

var args=[].slice.call(arguments);
// 等同于下面写法
var Array.protttype.slice.call(arguments)

就等于,把数组的slice方法,搬到arguments上,并调用,使伪数组拥有了数组的方法,传入参数为1 

同理:

let imgs = [].slice.call(document.querySelectorAll('img'));// nodelist
//等同于下面写法
let imgs = Array.prototype.slice.call(document.querySelectorAll('img'));// nodelist

就等于,把数组的slice方法,搬到nodelist上,并调用,使nodelist拥有了数组的方法。

说明:Array 本身是没有 slice 方法,它的方法在 Array.prototype中,而我们在调用 slice 方法的时候,如果在 Array 本身没有找到 slice 方法的话,会通过它的原型链往上查找,类似的做法可以适用到Array所有中去,如作用到forEach上去

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
    console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"

等等。

二、ES6的转化方法(采用Array.from() 方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组)。

语法:

Array.from(arrayLike, mapFn, thisArg)

arrayLike

想要转换成数组的伪数组对象或可迭代对象

mapFn 可选

如果指定了该参数,新数组中的每个元素会执行该回调函数。

thisArg 可选

可选参数,执行回调函数 mapFn 时 this 对象。

返回值

一个新的数组实例。

用法:

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

 代码1:

//array.from
let arrayLike = {
  0: 'Hansen', 
  1: '25',
  2: '男',
  3: ['wenzhou','hangzhou','ningbo'],
  'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['Hansen','25','男',['wenzhou','hangzhou','ningbo']]

题目:比如我们想初始化一个长度为 5 的数组,每个数组元素默认为 1

代码1: ES5的做法

let arr = Array(6).join(' ').split('').map(item=>1)
// item=>1 相当于 item=1
// [1,1,1,1,1]

代码2: ES6的做法

let arr1 = Array.from({ length: 5 }, function () { return 1 })
console.log(arr1)// [1,1,1,1,1]

说明:

1.生成长度为 5 ,为何用的是 Array(6),因为有一个是length:5,所以一共是6个

2.{length:5}代表长度为5的伪数组对象,它只写了最后一项,其他都是空,相当于Array(6)

发布了62 篇原创文章 · 获赞 11 · 访问量 8632

猜你喜欢

转载自blog.csdn.net/qq_38588845/article/details/103371612
今日推荐