快捷導(dǎo)航

JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法實(shí)例分析

更新時(shí)間：2018年07月24日 14:26:17 作者：筱葭

這篇文章主要介紹了JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法,結(jié)合實(shí)例形式分析了javascript類數(shù)組對(duì)象的功能,以及類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的相關(guān)方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例分析了JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法。分享給大家供大家參考，具體如下：

1、類數(shù)組對(duì)象：

擁有length屬性，可以通過(guò)下標(biāo)訪問(wèn)；

不具有數(shù)組所具有的方法。

2、為什么要將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象？

數(shù)組對(duì)象Array有很多方法：shift、unshift、splice、slice、concat、reverse、sort，ES6又新增了一些方法：forEach、isArray、indexOf、lastIndexOf、every、some、map、filter、reduce等。由于類數(shù)組不具有數(shù)組所具有的操作數(shù)組的方法，將類數(shù)組轉(zhuǎn)換為數(shù)組之后就能調(diào)用這些強(qiáng)大的方法，方便快捷。更多JavaScript數(shù)組的方法請(qǐng)見：http://www.dbjr.com.cn/article/144359.htm

3、類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法：

1) Array.prototype.slice.call(arrayLike) 或 Array.prototype.slice.call(arrayLike, 0) 或 [].slice.call (arrayLike) 或 [].slice.call (arrayLike, 0)

var div1 = Array.prototype.slice.call(document.querySelectorAll('div'), 0);
var div2 = Array.prototype.slice.call(document.querySelectorAll('div'));
var div3 = [].prototype.slice.call(document.querySelectorAll('div'), 0);
var div4 = [].prototype.slice.call(document.querySelectorAll('div'));

2) Array.from(arrayLike)

var divs = Array.from(document.querySelectorAll('div'));

3) 原生JavaScript轉(zhuǎn)換

var length = arrayLike.length;
var arr = [];
for (var i = 0; i < length; i++) {
  arr.push(arrayLike[i]);
  return arr;
}

4、JavaScript如何判斷一個(gè)對(duì)象是否為數(shù)組？

使用typeof運(yùn)算符不能判斷一個(gè)對(duì)象是否為數(shù)組，因?yàn)?code>typeof arr返回的是object而不是array。

1) arr instanceof Array返回true

2) arr.constructor == Array返回true

說(shuō)明：使用instanceof和constructor判斷數(shù)組類型的問(wèn)題在于，它假定只有一個(gè)運(yùn)行環(huán)境，如果網(wǎng)頁(yè)中包含多個(gè)框架，那么實(shí)際上存在兩個(gè)以上不同的全局執(zhí)行環(huán)境，進(jìn)而存在兩個(gè)不同版本的Array構(gòu)造函數(shù)，如果從一個(gè)框架向另一個(gè)框架傳入一個(gè)數(shù)組，那么傳入的數(shù)組與第二個(gè)框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)，也就是說(shuō)，object.constructor == Array 會(huì)返回false。

原因：Array屬于引用型數(shù)據(jù)，傳遞過(guò)程僅僅是引用地址的傳遞，每個(gè)頁(yè)面的Array原生對(duì)象所引用的地址是不一樣的，在子頁(yè)面聲明的Array所對(duì)應(yīng)的構(gòu)造函數(shù)，是子頁(yè)面的Array對(duì)象，父頁(yè)面進(jìn)行判斷時(shí)使用的Array并不等于子頁(yè)面的Array。

3) Array.isArray(arr)方法返回true

ES5新增了Array.isArray()方法，這個(gè)方法的目的是：最終確定一個(gè)值是否是數(shù)組，不管它是在哪個(gè)全局環(huán)境創(chuàng)建的。

4) Object.prototype.toString.call(arr) === "[object Array]"返回true

這是最簡(jiǎn)單的判斷一個(gè)對(duì)象是否為數(shù)組的方法。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》及《JavaScript字符與字符串操作技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: