提问,如果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)