什么是偽數(shù)組?
1.具有l(wèi)ength屬性,可以獲取長(zhǎng)度左医。
2.具有索引狐胎,可以通過遍歷獲取所有元素。
3.不可以使用數(shù)組的內(nèi)置方法和屬性巷查。
我們可以看到偽數(shù)組的__proto__指向的是一個(gè)Object對(duì)象,當(dāng)然不能使用數(shù)組的內(nèi)置方法和屬性了岛请。
可以看到旭寿,真數(shù)組的__proto__指向的是一個(gè)Array數(shù)組。
常見的偽數(shù)組
1.函數(shù)的內(nèi)置對(duì)象arguments崇败,它是所有實(shí)參組成的偽數(shù)組盅称。
2.DOM對(duì)象組成的偽數(shù)組,通過document.querySelectorAll等獲得的dom對(duì)象列表后室。
3.jQuery對(duì)象組成的偽數(shù)組缩膝,通過$('選擇器')獲取到的包含dom對(duì)象列表和jQuery方法的jQuery對(duì)象。
將偽數(shù)組轉(zhuǎn)化為真數(shù)組的幾種方法
方法一:最簡(jiǎn)單的岸霹,先準(zhǔn)備一個(gè)新的空數(shù)組疾层,然后遍歷偽數(shù)組,將偽數(shù)組中的值通過索引逐個(gè)添加到新數(shù)組當(dāng)中贡避。
let newArr = [];
for(let i = 0; i < arguments.length; i++){
newArr[i] = arguments[i];
}
方法二:利用擴(kuò)展運(yùn)算符(...)將偽數(shù)組轉(zhuǎn)化為真數(shù)組 - ES6語法
let divs = document.querySelectorAll('div');
let arr = [...divs];
方法三:利用Array的原型對(duì)象的slice方法痛黎,配合call()方法修改slice中this指向
let arr = [].slice.call(divs);
方法四:利用Array.from方法 - ES6
let arr = Array.from(divs);
注意:Array.from方法是從一個(gè)類似數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的,淺拷貝的數(shù)組實(shí)例刮吧。(MDN)
這里簡(jiǎn)單的說一下淺拷貝和深拷貝:
淺拷貝只會(huì)復(fù)制對(duì)象的第一層數(shù)據(jù)湖饱,如果是其他層,復(fù)制的是地址杀捻。
深拷貝會(huì)將整個(gè)對(duì)象的數(shù)據(jù)復(fù)制給新對(duì)象琉历。
也就是說,用Array.from方法返回的新數(shù)組是一個(gè)淺拷貝數(shù)組水醋,如果改變了新數(shù)組當(dāng)中深層次對(duì)象的數(shù)據(jù)旗笔,那么原來的對(duì)象當(dāng)中的數(shù)據(jù)也會(huì)跟著被修改。
舉個(gè)例子:
let arrayLike = {
'0': '1',
'1': '2',
'2': {
name: 'pink',
sex: {
nan: '男',
nv: '女'
}
},
'length': 3
}
let ary = Array.from(arrayLike);
console.log(ary);
//修改第一層的數(shù)據(jù)
ary[0] = '10';
//我們修改一下新數(shù)組深層的數(shù)據(jù)
ary[2].name = 'green';
ary[2].sex.nan = 'nan';
//再打印一下arrayLike拄踪,看里面深層數(shù)據(jù)是否發(fā)生了改變
console.log(arrayLike);
打印結(jié)果如圖:可見當(dāng)我們修改了ary數(shù)組的第一層數(shù)據(jù)時(shí)蝇恶,arrayLike沒有改變,但是當(dāng)我們修改ary數(shù)組深層數(shù)據(jù)的時(shí)候惶桐,arrayLike里深層的數(shù)據(jù)也相應(yīng)的改變了撮弧,這是因?yàn)闇\拷貝時(shí)深層數(shù)據(jù)是拷貝的地址潘懊,所以新數(shù)組和原來的偽數(shù)組深層的數(shù)據(jù),在內(nèi)存當(dāng)中的地址是一樣的贿衍,修改新數(shù)組的深層數(shù)據(jù)授舟,當(dāng)然也會(huì)修改原偽數(shù)組的深層數(shù)據(jù)。
偽數(shù)組轉(zhuǎn)化為新數(shù)組的方法贸辈,暫時(shí)就想到這么多了释树,文章中的錯(cuò)誤之處歡迎大家指正。
當(dāng)然擎淤,有關(guān)深拷貝與淺拷貝奢啥,后續(xù)會(huì)繼續(xù)總結(jié)更新。嘴拢。桩盲。