在 Javascript 中什么是伪数组?如何将伪数组转化为标准数组?
1、前言
今天博主JavaScript高级进阶学完了,于是在度娘上找了几套面试题,发现这个题不知道怎么答,并且感觉这道面试图也挺经典的,所以拿出来跟大家一起学习一下,如果这真是面试题估计我就凉凉了,所以还请各位博友认真对待,那么我们开始喽!
2、什么是伪数组(NodeList)?
伪数组(NodeList),又称类数组,指无法直接调用数组的方法,或期望length
属性有什么特殊的行为,但仍可以使用对标准数组遍历的方法来遍历它们,比如for循环
。典型的是函数arguments
参数,还有像调用getElementByTagName()
、document.childNodes()
之类的方法,它们都返回NodeList
对象,都属于伪数组。那么我们可以将伪数组的特征总结为以下几点。
伪数组的特征:
1. 具有`length`属性
2. 按索引方式存储数据
3. 不具有数组的方法
3、伪数组转换为标准数组
通过上面的讲解,相信大家也已经知道了伪数组,以及伪数组的特征,那么在开发中,我们需要将伪数组转换为数组来直接使用,那该怎么办呢?这里给大家介绍两套方案,如下:
方案1:
window.onload = function() {
function nodeList() {
return Array.prototype.slice.call(arguments);
}
let arr = nodeList(1, 2, 3, 4, 5, 6, 7);
arr.push(20);
console.log(arr);
}
分析:
1. 从这行code`Array.prototype.slice.call(arguments)`我们发现使用到了`call()`方法,`call()`方法是任何函数都具备的非继承而来的方法,其作用是修改函数内的this指向
2. `Array.prototype.slice`这行code是通过`Array`构造函数调用其原型对象中的`slice()`方法
3. `slice(start,end)`方法可以从已有的数组中返回选定的元素数组
4. `start`参数:必须,规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
5. `end`参数:可选,规定从何处结束选取。该参数是数组片段结束处的下标索引如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
6. 那么`Array.prototype.slice.call(arguments)`的意思就是:通过`Array`数组构造函数调用原型对象中的`slice()`方法,并通过`call()`方法改变其`slice()`方法的内部this指向,修改为`arguments`,即伪数组对象。
7. 通过这样的方法,我们就可以返回一个数组对象,这样就将伪数组转换为标准数组了
方案2:
通过上面的方法将伪数组转换为标准数组,对于还没有学过原型对象的博友可能会有一点不知所云。不管没关系,在 JavaScript ES6 中,Array
构造函数为大家提供了一个方法,专门用于将伪数组(类数组)转换为真正的数组。
from()
方法用于通过拥有length
属性的对象或可迭代的对象来返回一个数组。可能有一点绕,简单来说就是,from()
方法是将一个伪数组对象或者可迭代对象转换成一个正真的数组。
浏览器支持:
语法格式:
Array.from(object,mapFunction,thisValue);
参数说明:
1. `object`:必须,要转换为数组的对象。
2. `mapFunction`:可选,数组中每个元素要调用的函数。
3. `thisValue`:可选,映射函数(mapFunction)中的this对象
window.onload = function() {
function nodeList() {
return Array.from(arguments);
}
let arr = nodeList(1, 2, 3, 4, 5, 6, 7);
arr.push(20);
console.log(arr);
}
当然,除了这两种方法肯定还有其他的方法,但是博主今天只学会了这两种,所以非常抱歉。后期如果发现新的方法,将第一时间给大家分享。感谢您的捧场,祝您事业有成,工作顺利!