JavaScript數(shù)組的特殊用法有哪些

本篇內(nèi)容主要講解“JavaScript數(shù)組的特殊用法有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript數(shù)組的特殊用法有哪些”吧!

基本介紹

首先，作為開(kāi)始，我們還是需要簡(jiǎn)單介紹下JavaScript中的數(shù)組，基本如下：

• 有序的數(shù)據(jù)集合，索引值從0開(kāi)始遞增

• 擁有l(wèi)ength長(zhǎng)度屬性

• 數(shù)組元素值可以是JavaScript中的任何類(lèi)型

• 是動(dòng)態(tài)的，可以增減元素

• 可以循環(huán)數(shù)組元素，擁有一系列可操作的實(shí)例方法

• 支持元素為數(shù)組的多維數(shù)組

• 讀取元素以數(shù)組名[索引值]的方式表示

以上就是對(duì)數(shù)組的基礎(chǔ)介紹，大部分都很熟悉，接下來(lái)，我們就來(lái)看看數(shù)組的一些特殊之處，

數(shù)組類(lèi)型和判斷

在JavaScript中，是沒(méi)有數(shù)組這種數(shù)據(jù)類(lèi)型的，所以數(shù)組本質(zhì)上是一種特殊的對(duì)象，它的類(lèi)型值會(huì)返回 object，如下所示：

typeof [] // 'object'

由于返回的是 object 類(lèi)型，就無(wú)法通過(guò) typeof 語(yǔ)法判斷一個(gè)值或?qū)ο笫欠袷菙?shù)組，得使用其他方式，才能正確的判斷數(shù)組對(duì)象。

typeof的詳細(xì)知識(shí)，可見(jiàn)博文typeof詳解。

判斷為數(shù)組的方式

判斷一個(gè)對(duì)象是否為數(shù)組，有不少種方式，但我們一般使用較多也就兩三種，而其中最正確有效的方式就兩種。

正確判斷方式

這兩種正確有效判斷數(shù)組類(lèi)型的方式如下：

• Array.isArray() ES6推出的語(yǔ)法，專(zhuān)門(mén)用于判斷對(duì)象類(lèi)型是否為數(shù)組，是則返回true，否則返回false，簡(jiǎn)單好用。

• Object.prototype.toString.call() 在ES6推出之前的JS語(yǔ)法中，一般使用這種方式來(lái)判斷數(shù)組，除了數(shù)組，它可以準(zhǔn)確判斷出其他幾乎所有的JS數(shù)據(jù)類(lèi)型。

Array.isArray([1, 2, 3]) // true
Object.prototype.toString.call([]) // '[object Array]'
Object.prototype.toString.call({}) // '[object Object]'

以上代碼，就是這兩種有效方式的示例，都能準(zhǔn)確有效的判斷。

當(dāng)前的前端開(kāi)發(fā)種，ES6語(yǔ)法基本普及的情況下，使用 Array.isArray() 將更方便。

其他方式介紹

除以上兩種以外，還有其他幾種基于原型鏈上的判斷方式，可用于判斷數(shù)組，但這些方式都不夠準(zhǔn)確：

• [] instanceof Array 這里使用instanceof運(yùn)算符表示給定值是否是數(shù)組的實(shí)例。

• [].constructor === Array 給定值的實(shí)例構(gòu)造函數(shù)是否是數(shù)組。

• Array.prototype.isPrototypeOf([]) 給定值的原型鏈上是否存在數(shù)組。

• Object.getPrototypeOf([]) === Array.prototype 給定值的原型對(duì)象是否等于數(shù)組的原型對(duì)象。

這幾種方式本質(zhì)上都比較類(lèi)似，只不過(guò)由于原型鏈能夠被修改，所以這幾種方式并不推薦使用。
如使用 instanceof 判斷的方式：

[] instanceof Array // true
[] instanceof Object // true

以上代碼，使用 instanceof 運(yùn)算符時(shí)，一個(gè)數(shù)組實(shí)例屬于 Array 和 Object，都是成立的，因?yàn)镺bject在Array的原型鏈上。

數(shù)組索引值和長(zhǎng)度

數(shù)組通過(guò)下標(biāo)索引值進(jìn)行元素值的讀取，必須要使用方括號(hào)才可以，否則無(wú)法讀取元素值。

const arr = [1, 2, 3]
arr[1] // 2
arr.1 // Uncaught SyntaxError: Unexpected number

以上代碼，使用 arr.1 的寫(xiě)法，就報(bào)了語(yǔ)法錯(cuò)誤，因?yàn)镴avaScript中單獨(dú)數(shù)字作為標(biāo)識(shí)符是不合法的。關(guān)于錯(cuò)誤類(lèi)型，可見(jiàn)博文js中的Error錯(cuò)誤類(lèi)型。

前面提到，數(shù)組是一種特殊的對(duì)象，而object對(duì)象，是可以通過(guò)鍵名來(lái)讀取元素的，只不過(guò)數(shù)組的鍵名只能是數(shù)字，所以當(dāng)做標(biāo)識(shí)符讀取時(shí)報(bào)錯(cuò)。而object對(duì)象如果使用數(shù)字作鍵名時(shí)，也無(wú)法通過(guò)標(biāo)識(shí)符來(lái)讀?。?/p>

const obj = { 1: 'hello' }
obj.1 // Uncaught SyntaxError: Unexpected number

如上代碼所示，對(duì)象使用 obj.1 的方式讀取屬性，也是報(bào)同樣的錯(cuò)誤。

索引值是字符串

數(shù)組使用方括號(hào)讀取元素值，而Object對(duì)象也能通過(guò)這樣的方法讀取屬性值，這樣就算對(duì)象的鍵名是數(shù)字也能正常讀取了：

const obj = { 1: 'hello', key: 'world' }
obj[1] // 'hello'
obj['key'] // 'world'

事實(shí)上，JavaScript中Object對(duì)象的鍵名均為字符串類(lèi)型，而數(shù)組的類(lèi)型又是object，所以它的索引值(鍵名)也可以使用字符串。

const arr = [1, 2, 3]
arr['1'] // 2
arr['2'] // 3

以上代碼，當(dāng)使用 '1'、'2' 等字符串時(shí)，也能正確讀取數(shù)組的元素。

但需要注意的是，數(shù)組的索引值，必須是能自動(dòng)轉(zhuǎn)成正整數(shù)數(shù)字的值。如果是其他數(shù)值的時(shí)候，則需要注意。

索引值為小數(shù)、負(fù)數(shù)

如果數(shù)組使用小數(shù)或者負(fù)數(shù)讀寫(xiě)操作時(shí)，數(shù)組是什么一種表現(xiàn)呢，可以看下面的代碼：

const arr = [1,2]
arr[-1] = 0
arr[2.0] = 5
arr[3.6] = 8
Array.isArray(arr) // true
arr // [1, 2, 5, -1: 0, 3.6: 8]
arr.length // 3
arr[-1] // 0
arr[3.6] // 0

以上代碼所示：

• 使用小數(shù) 2.0，能自動(dòng)轉(zhuǎn)換成正整數(shù)，所以可以作為數(shù)組的第三個(gè)元素；

• 使用負(fù)數(shù) -1 和無(wú)法自動(dòng)轉(zhuǎn)換成正整數(shù)的小數(shù) 3.6，這兩種情況都作為了數(shù)組的鍵值對(duì)的方式成為了數(shù)組的屬性，但并不被包含在數(shù)組元素中，因?yàn)閿?shù)組的length屬性為3，并不包含這兩個(gè)值。

• 負(fù)數(shù) -1 和小數(shù) 3.6，都被當(dāng)作字符串在使用，同理，也可以使用 arr[true] = 50，這里的bool值 true，也被當(dāng)做了字符串 'true'。

所以，負(fù)數(shù)或小數(shù)不能作為數(shù)組的索引值，但可以被當(dāng)做鍵值對(duì)的方式，作為數(shù)組的屬性被讀寫(xiě)。

索引值是字符串等其他類(lèi)型時(shí)

如果我們給數(shù)組使用字符串、布爾值等其他類(lèi)型的值作為下標(biāo)索引時(shí)，這個(gè)時(shí)候和小數(shù)負(fù)數(shù)的表現(xiàn)類(lèi)似。
就是把數(shù)組用作了對(duì)象，這些類(lèi)型的下標(biāo)索引則都被當(dāng)做了數(shù)組對(duì)象的屬性在操作，可以正常讀寫(xiě)，但不是數(shù)組的元素，不計(jì)入數(shù)組的length長(zhǎng)度中。

const arr = [1]
arr['key'] = 0
arr['value'] = '是的'
arr.length // 1
arr // [1, key: 0, value: '是的']

以上代碼，就體現(xiàn)了數(shù)組屬于對(duì)象類(lèi)型的特點(diǎn)，可以增加鍵值對(duì)的屬性。

索引與屬性

前文已經(jīng)多次提到，數(shù)組是一種特殊類(lèi)型的對(duì)象，而數(shù)組的這些特別之處很多都與對(duì)象有關(guān)。

另外，我們還需要知道的是，數(shù)組的索引雖然可以像對(duì)象一樣，當(dāng)做鍵名字符串使用，但它們還是有所區(qū)別的。

數(shù)組是按照數(shù)字的順序進(jìn)行排列的集合，而對(duì)象的屬性名則是無(wú)序的。所以我們使用特殊鍵名(如字符串、負(fù)數(shù)等)給數(shù)組賦值時(shí)，這些值都不是數(shù)組的元素，而是當(dāng)做了對(duì)象的屬性。

length屬性

length是數(shù)組的長(zhǎng)度屬性，表示數(shù)組元素的個(gè)數(shù)，但請(qǐng)注意，它不是只讀，而是可寫(xiě)的，即我們可以給數(shù)組的length屬性賦值：

[].length = 3
// 數(shù)組的長(zhǎng)度被賦予為3

但有幾點(diǎn)要注意：

• 如果設(shè)置數(shù)組的length值小于元素個(gè)數(shù)，則數(shù)組會(huì)自動(dòng)刪除所有大于length值的元素

• 如果設(shè)置數(shù)組的length值大于元素個(gè)數(shù)，則數(shù)組元素個(gè)數(shù)會(huì)自動(dòng)增加到length值，并且新增的元素都是空位(返回undefined)

• 如果將數(shù)組的length屬性設(shè)置為0，則會(huì)清空整個(gè)數(shù)組，變?yōu)榭諗?shù)組

• 數(shù)組的length值必須為正整數(shù)(或可以自動(dòng)轉(zhuǎn)換成正整數(shù)的值)，其他值都是不合法的，設(shè)置不合法值時(shí)會(huì)報(bào)錯(cuò)。

能自動(dòng)轉(zhuǎn)換成正整數(shù)的值包含 2.0、''、true、false、'10' 等等這類(lèi)

const arr = [1, 2]
arr.length = true
console.log(arr) // [1]

arr.length = -1 // VM307:1 Uncaught RangeError: Invalid array length

以上代碼示例，

修改了數(shù)組的length值為true，true可以轉(zhuǎn)換成1，數(shù)組的長(zhǎng)度就變?yōu)榱?，元素被刪除了一個(gè)；

當(dāng)設(shè)置數(shù)組長(zhǎng)度為負(fù)數(shù)的時(shí)候，報(bào)錯(cuò)，無(wú)效的數(shù)組長(zhǎng)度。

另外，除了以上幾種情況，還有我們需要知道的一點(diǎn)就是，數(shù)組有最大長(zhǎng)度。

數(shù)組的最大長(zhǎng)度

JavaScript中的數(shù)組能賦予的最大長(zhǎng)度是32位的正整數(shù)，即 2**32 - 1 = 4294967295，從0計(jì)算，長(zhǎng)度減1。
當(dāng)我們給數(shù)組設(shè)置的長(zhǎng)度超過(guò)最大長(zhǎng)度的值時(shí)，也會(huì)報(bào)無(wú)效長(zhǎng)度的錯(cuò)誤：

[].length = 4294967296 // Uncaught RangeError: Invalid array length

但如果我們使用超過(guò)最大長(zhǎng)度的數(shù)字作為鍵名給數(shù)組賦值的話，則仍然可以使用，如下代碼所示：

const arr = []
arr[4294967296] = 1
arr // [4294967296: 1]

前面也有介紹過(guò)，這是由于數(shù)組本質(zhì)上是個(gè)對(duì)象，當(dāng)使用超出最大長(zhǎng)度范圍的數(shù)字時(shí)，這個(gè)數(shù)字會(huì)被當(dāng)做數(shù)組一個(gè)屬性的鍵名，并且可以自動(dòng)轉(zhuǎn)成字符串，這個(gè)時(shí)候它并不數(shù)組的元素，也不計(jì)算在數(shù)組的length屬性里，和前文介紹索引值時(shí)一樣。

創(chuàng)建數(shù)組的三種方式

當(dāng)前JS中，創(chuàng)建數(shù)組大致有三種方式：數(shù)組字面量語(yǔ)法、Array構(gòu)造函數(shù)、Array.of()。

數(shù)組字面量語(yǔ)法

字面量語(yǔ)法創(chuàng)建數(shù)組，是JavaScript中最常用的一種方式，由于方便簡(jiǎn)單，大部分代碼都會(huì)使用它。

const arr1 = [] // 創(chuàng)建一個(gè)空數(shù)組
const arr2 = [1, 2, true, null, 'hello'] // 給定數(shù)組的元素
console.log(arr2) // [1, 2, true, null, 'hello']

以上代碼，就是使用了字面量語(yǔ)法創(chuàng)建數(shù)組，如果不給元素值就會(huì)創(chuàng)建一個(gè)空數(shù)組。
需要了解的是，數(shù)組字面量語(yǔ)法其實(shí)也是基于對(duì)Array構(gòu)造函數(shù)的一種簡(jiǎn)化使用。

Array構(gòu)造函數(shù)

Array對(duì)象本身是JavaScript的一個(gè)內(nèi)置對(duì)象，它是 function 類(lèi)型，能當(dāng)做構(gòu)造函數(shù)使用，這與大多數(shù)內(nèi)置對(duì)象一樣，是否使用 new 操作符都可以。
因此，我們通過(guò)調(diào)用 Array() 或 new Array()，就能創(chuàng)建數(shù)組對(duì)象。數(shù)組構(gòu)造函數(shù)可以使用多種形式的可選參數(shù)，只不過(guò)依據(jù)參數(shù)不同，結(jié)果會(huì)有一定差異。

不傳參數(shù)時(shí)，返回一個(gè)空數(shù)組

Array() // []

只傳入一個(gè)參數(shù)時(shí)，表現(xiàn)不太一致

當(dāng)參數(shù)為0時(shí)，創(chuàng)建一個(gè)空數(shù)組

Array(0) // []

當(dāng)參數(shù)是單個(gè)正整數(shù)時(shí)，將創(chuàng)建一個(gè)length長(zhǎng)度為該參數(shù)數(shù)值的數(shù)組，并且所有數(shù)組元素都是空位(返回undefined)

const arr = new Array(10)
arr.length // 10
arr[2] // undefined

當(dāng)參數(shù)是非正整數(shù)，如負(fù)數(shù)、小數(shù)等等，則會(huì)報(bào)錯(cuò)，無(wú)法創(chuàng)建數(shù)組

Array(10.6) // Uncaught RangeError: Invalid array length
Array(-6) // Uncaught RangeError: Invalid array length

以上代碼，小數(shù)和負(fù)數(shù)，都報(bào)無(wú)效數(shù)組長(zhǎng)度的錯(cuò)誤。

但是，對(duì)于能自動(dòng)轉(zhuǎn)換成整數(shù)的數(shù)字(小數(shù)位為0)，則可以正常創(chuàng)建數(shù)組，如下代碼所示：

const arr = new Array(10.0)
arr.length // 10
arr[2] // undefined

當(dāng)參數(shù)是非數(shù)字的其他類(lèi)型，如字符串值、布爾值、對(duì)象、數(shù)組、函數(shù)、null、undefined等等，則該參數(shù)將會(huì)成為新數(shù)組的第一個(gè)元素，數(shù)組的length長(zhǎng)度自然就是1。

Array('hello') // ['hello']
Array(true) //[true]
Array([30]) // [Array(1)]
Array(null) // [null]

只有一個(gè)參數(shù)的情況下，如果參數(shù)里多了尾逗號(hào)，則會(huì)忽略，仍能正常創(chuàng)建數(shù)組：

Array(0,) // []
Array(true,) // [true]

傳入多個(gè)參數(shù)時(shí)

所有參數(shù)都會(huì)成為新數(shù)組的元素，不論參數(shù)是什么類(lèi)型的值。

Array(1, 2) // [1, 2]
Array(1, 2, true, null, 'hello')  // [1, 2, true, null, 'hello']
Array(-1, 2.2, 3) // [-1, 2.2, 3]
Array(1, 2, 3,) // [1, 2, 3]

以上代碼，

第三行，加了負(fù)數(shù)和小數(shù)，也能正常創(chuàng)建數(shù)組；

第四行，參數(shù)里多了一個(gè)尾逗號(hào)，但會(huì)被忽略。

Array.of()

Array.of(item…) 是ES6提供的一個(gè)數(shù)組靜態(tài)方法，使用它同樣可以創(chuàng)建數(shù)組。

該方法也提供了可選參數(shù)，但與Array構(gòu)造函數(shù)的區(qū)別在于：Array.of() 的行為更一致，不論它的參數(shù)有幾個(gè)、是什么類(lèi)型，都會(huì)被當(dāng)做新數(shù)組的元素成員，當(dāng)然如果不傳入?yún)?shù)，則會(huì)生成空數(shù)組。包括負(fù)數(shù)和小數(shù)，也都會(huì)被當(dāng)成元素，不會(huì)報(bào)錯(cuò)。

比如，Array.of(5) 會(huì)創(chuàng)建只有一個(gè)成員(5)且長(zhǎng)度為1的數(shù)組，而 Array(5) 則是創(chuàng)建一個(gè)長(zhǎng)度為5且元素皆是空位的數(shù)組。

所以，Array.of方法彌補(bǔ)了Array構(gòu)造函數(shù)參數(shù)差異導(dǎo)致的不足，除了字面量語(yǔ)法外，我們應(yīng)該盡量用于替代Array構(gòu)造函數(shù)。

Array.of() // []
Array.of(5) // [5]
Array.of(1, 2, true, null, 'hello') // [1, 2, true, null, 'hello']
Array.of(-1) // [-1]
Array.of(2.2, 0) // [2.2, 0]

從以上代碼可以看出，當(dāng)我們使用Array.of方法時(shí)，所有參數(shù)都作為了數(shù)組的元素，這可以完全解決Array構(gòu)造函數(shù)帶來(lái)的不一致問(wèn)題。

空位(空元素)

空位是指數(shù)組中某個(gè)逗號(hào)前面，沒(méi)有任何值，是空的，這樣的元素就是空元素，又叫空位。

空位在JavaScript的數(shù)組中是允許存在的，并不會(huì)報(bào)語(yǔ)法錯(cuò)誤或其他異常，數(shù)組能正常使用，所以我們需要了解它的一些特性。

逗號(hào)后面沒(méi)有值，不產(chǎn)生空位，也不影響數(shù)組。

我們先看一個(gè)空位的示例：

const arr1 = [,]
const arr2 = [1, , , 4]

以上代碼，就是空位在數(shù)組中的表現(xiàn)，其中arr1有1個(gè)空位，arr2在首尾兩個(gè)元素中間有2個(gè)空位。

空位作為數(shù)組的一種特殊存在，它的一些基本表現(xiàn)如下：

• 空位是數(shù)組的一個(gè)正常元素

• 空位會(huì)被計(jì)算進(jìn)數(shù)組的長(zhǎng)度里，即length屬性會(huì)包含空位

• 空位可以通過(guò)索引讀取，返回undefined。

const arr = [1, , , 4]
arr.length // 4
arr[2] // undefined

以上代碼，定義了有2個(gè)空位的數(shù)組，數(shù)組長(zhǎng)度不受影響，是4，讀取空位值時(shí)返回undefined。

除了以上這些特點(diǎn)以外，空位還有其他一些需要注意的地方。

delete

delete運(yùn)算符能夠刪除對(duì)象的屬性，那么同樣可在數(shù)組中使用它。

使用delete操作符刪除數(shù)組元素的時(shí)候，就會(huì)產(chǎn)生空位，元素表現(xiàn)也符合空位的特點(diǎn)。

const arr = ['a', 'b', 'c']
delete arr[1]
console.log(arr) // ['a', , 'c']

以上代碼，使用delete刪除了數(shù)組的第二個(gè)元素，就在這個(gè)位置形成了一個(gè)空位。

循環(huán)遍歷空位

空位是被當(dāng)做一個(gè)正常的數(shù)組元素，并被計(jì)算在length屬性里的，所以當(dāng)我們遍歷有空位的數(shù)組的時(shí)候，需要小心，不然會(huì)產(chǎn)生一些不必要的問(wèn)題。

針對(duì)空位遍歷時(shí)主要的一些注意點(diǎn)，總結(jié)如下：

for、while、for-of三個(gè)循環(huán)語(yǔ)句，都會(huì)正常遍歷到空位，并輸出空位的值為undefined。

for-in循環(huán)語(yǔ)句，則會(huì)直接跳過(guò)空位，不會(huì)遍歷空位。

數(shù)組的實(shí)例方法里面：

• forEach、map、every、some、filter、reduce、flat，也都會(huì)直接跳過(guò)空位；

• find、findIndex，則會(huì)讀取到空位，返回undefined。

• indexOf、lastIndexOf、includes，無(wú)法讀取空位，因?yàn)榭瘴簧兑矝](méi)有。

當(dāng)使用Object對(duì)象的keys、values、entries方法的時(shí)候，也是直接跳過(guò)空位。

const arr = [1, , , 4]
for (let i in arr) {
  console.log(i)
} // 跳過(guò)空位，輸出為 '0' 和 '3'
for (let i of arr) {
  console.log(i)
} // 讀取空位，輸出為 1 undefined undefined 4

arr.forEach((vl) => {
  console.log(vl)
}) // 跳過(guò)空位，輸出為 5 2

Object.keys(arr) // 也是跳過(guò)空位，輸出為 ['0', '3']

以上代碼，就是遍歷時(shí)的部分示例，與上面總結(jié)的表現(xiàn)一致，for-of 能讀取空位，其他如 for-in、forEache、Object.keys 則直接跳過(guò)空位，不會(huì)遍歷輸出。

需要注意的是，空位在索引讀取、或者部分語(yǔ)法訪問(wèn)的時(shí)候返回的undefined，但它并不等于undefined，空位所有的這些特點(diǎn)，undefined并沒(méi)有。如果遍歷的時(shí)候，undefined是數(shù)組元素的話，那它在任何情況下都能讀取到。

數(shù)組空位的字符串輸出

另外，當(dāng)數(shù)組被當(dāng)做字符串輸出的時(shí)候，空位也有自己特有的輸出。

使用join() 和 toString() 方法的時(shí)候，空位元素輸出只有一個(gè)逗號(hào)。

[1, , , 4].join() // '1,,,4'
[1, , , 4].toString() // '1,,,4'

使用JSON.stringify() 方法的時(shí)候，空位輸出為 null 字符串。

JSON.stringify([1, , , 4]) // '[1,null,null,4]'

in運(yùn)算符

in運(yùn)算符用于檢查對(duì)象的某個(gè)屬性鍵名是否存在，返回布爾值，數(shù)組屬于對(duì)象，所以也能適用。

數(shù)組的鍵名就是索引值，我們使用數(shù)組索引值判斷即可。

const arr = [1, 2, 3]
0 in arr // true
'2' in arr // true
3 in arr // false

以上代碼，數(shù)組有三個(gè)元素，索引值0-2，而3并不屬于、返回了false。

之前已有介紹對(duì)象鍵名是字符串，數(shù)組的索引值使用數(shù)字和字符串都沒(méi)問(wèn)題。

另外，就是對(duì)于數(shù)組中的空位，in運(yùn)算符返回的是false：

const arr = [1, ,2]
0 in arr //true
1 in arr // false

以上代碼，數(shù)組的第二個(gè)元素是空元素，那它使用 in 判斷時(shí)，返回了false。

到此，相信大家對(duì)“JavaScript數(shù)組的特殊用法有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！