前言

數(shù)組是幾乎所有編程語言的基礎(chǔ)語法，JavaScript因為語法特性，之前缺少一些集合類對象，對數(shù)組的使用就會更多一些，因此我們更需要理解數(shù)組知識。
然而大部分人對數(shù)組都已經(jīng)非常熟悉了，所以本文將不會介紹數(shù)組的基礎(chǔ)語法和用法，而是從JavaScript中數(shù)組的一些特殊之處入手，通過這些少有特性的詳細介紹，加深我們對數(shù)組的理解。

基本介紹

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

• 有序的數(shù)據(jù)集合，索引值從0開始遞增
• 擁有l(wèi)ength長度屬性
• 數(shù)組元素值可以是JavaScript中的任何類型
• 是動態(tài)的，可以增減元素
• 可以循環(huán)數(shù)組元素，擁有一系列可操作的實例方法
• 支持元素為數(shù)組的多維數(shù)組
• 讀取元素以數(shù)組名[索引值]的方式表示

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

數(shù)組類型和判斷

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

typeof [] // 'object'

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

typeof的詳細知識，可見博文 typeof詳解。

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

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

正確判斷方式

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

• Array.isArray()
  ES6推出的語法，專門用于判斷對象類型是否為數(shù)組，是則返回true，否則返回false，簡單好用。
• Object.prototype.toString.call()
  在ES6推出之前的JS語法中，一般使用這種方式來判斷數(shù)組，除了數(shù)組，它可以準(zhǔn)確判斷出其他幾乎所有的JS數(shù)據(jù)類型。

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

以上代碼，就是這兩種有效方式的示例，都能準(zhǔn)確有效的判斷。
當(dāng)前的前端開發(fā)種，ES6語法基本普及的情況下，使用 Array.isArray() 將更方便。

其他方式介紹

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

• [] instanceof Array
  這里使用instanceof運算符表示給定值是否是數(shù)組的實例。
• [].constructor === Array
  給定值的實例構(gòu)造函數(shù)是否是數(shù)組。
• Array.prototype.isPrototypeOf([])
  給定值的原型鏈上是否存在數(shù)組。
• Object.getPrototypeOf([]) === Array.prototype
  給定值的原型對象是否等于數(shù)組的原型對象。

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

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

以上代碼，使用 instanceof 運算符時，一個數(shù)組實例屬于 Array 和 Object，都是成立的，因為Object在Array的原型鏈上。

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

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

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

以上代碼，使用 arr.1 的寫法，就報了語法錯誤，因為JavaScript中單獨數(shù)字作為標(biāo)識符是不合法的。關(guān)于錯誤類型，可見博文js中的Error錯誤類型。

前面提到，數(shù)組是一種特殊的對象，而object對象，是可以通過鍵名來讀取元素的，只不過數(shù)組的鍵名只能是數(shù)字，所以當(dāng)做標(biāo)識符讀取時報錯。而object對象如果使用數(shù)字作鍵名時，也無法通過標(biāo)識符來讀取：

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

如上代碼所示，對象使用 obj.1 的方式讀取屬性，也是報同樣的錯誤。

索引值是字符串

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

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

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

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

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

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

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

如果數(shù)組使用小數(shù)或者負數(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，能自動轉(zhuǎn)換成正整數(shù)，所以可以作為數(shù)組的第三個元素；
• 使用負數(shù) -1 和無法自動轉(zhuǎn)換成正整數(shù)的小數(shù) 3.6，這兩種情況都作為了數(shù)組的鍵值對的方式成為了數(shù)組的屬性，但并不被包含在數(shù)組元素中，因為數(shù)組的length屬性為3，并不包含這兩個值。
• 負數(shù) -1 和小數(shù) 3.6，都被當(dāng)作字符串在使用，同理，也可以使用 arr[true] = 50，這里的bool值 true，也被當(dāng)做了字符串 'true'。

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

索引值是字符串等其他類型時

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

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

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

索引與屬性

前文已經(jīng)多次提到，數(shù)組是一種特殊類型的對象，而數(shù)組的這些特別之處很多都與對象有關(guān)。
另外，我們還需要知道的是，數(shù)組的索引雖然可以像對象一樣，當(dāng)做鍵名字符串使用，但它們還是有所區(qū)別的。
數(shù)組是按照數(shù)字的順序進行排列的集合，而對象的屬性名則是無序的。所以我們使用特殊鍵名(如字符串、負數(shù)等)給數(shù)組賦值時，這些值都不是數(shù)組的元素，而是當(dāng)做了對象的屬性。

length屬性

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

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

但有幾點要注意：

• 如果設(shè)置數(shù)組的length值小于元素個數(shù)，則數(shù)組會自動刪除所有大于length值的元素
• 如果設(shè)置數(shù)組的length值大于元素個數(shù)，則數(shù)組元素個數(shù)會自動增加到length值，并且新增的元素都是空位(返回undefined)
• 如果將數(shù)組的length屬性設(shè)置為0，則會清空整個數(shù)組，變?yōu)榭諗?shù)組
• 數(shù)組的length值必須為正整數(shù)(或可以自動轉(zhuǎn)換成正整數(shù)的值)，其他值都是不合法的，設(shè)置不合法值時會報錯。
  • 能自動轉(zhuǎn)換成正整數(shù)的值包含 2.0、''、true、false、'10' 等等這類

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ù)組的長度就變?yōu)榱?，元素被刪除了一個；
當(dāng)設(shè)置數(shù)組長度為負數(shù)的時候，報錯，無效的數(shù)組長度。

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

數(shù)組的最大長度

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

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

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

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

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

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

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

數(shù)組字面量語法

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

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

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

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

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

1. 不傳參數(shù)時，返回一個空數(shù)組

Array() // []

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

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

Array(0) // []

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

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

• 當(dāng)參數(shù)是非正整數(shù)，如負數(shù)、小數(shù)等等，則會報錯，無法創(chuàng)建數(shù)組

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

以上代碼，小數(shù)和負數(shù)，都報無效數(shù)組長度的錯誤。

但是，對于能自動轉(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ù)字的其他類型，如字符串值、布爾值、對象、數(shù)組、函數(shù)、null、undefined等等，則該參數(shù)將會成為新數(shù)組的第一個元素，數(shù)組的length長度自然就是1。

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

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

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

3. 傳入多個參數(shù)時

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

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]

以上代碼，
第三行，加了負數(shù)和小數(shù)，也能正常創(chuàng)建數(shù)組；
第四行，參數(shù)里多了一個尾逗號，但會被忽略。

Array.of()

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

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

所以，Array.of方法彌補了Array構(gòu)造函數(shù)參數(shù)差異導(dǎo)致的不足，除了字面量語法外，我們應(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ù)組的元素，這可以完全解決Array構(gòu)造函數(shù)帶來的不一致問題。

空位(空元素)

空位是指數(shù)組中某個逗號前面，沒有任何值，是空的，這樣的元素就是空元素，又叫空位。
空位在JavaScript的數(shù)組中是允許存在的，并不會報語法錯誤或其他異常，數(shù)組能正常使用，所以我們需要了解它的一些特性。

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

我們先看一個空位的示例：

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

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

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

• 空位是數(shù)組的一個正常元素
• 空位會被計算進數(shù)組的長度里，即length屬性會包含空位
• 空位可以通過索引讀取，返回undefined。

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

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

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

delete

delete運算符能夠刪除對象的屬性，那么同樣可在數(shù)組中使用它。
使用delete操作符刪除數(shù)組元素的時候，就會產(chǎn)生空位，元素表現(xiàn)也符合空位的特點。

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

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

循環(huán)遍歷空位

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

針對空位遍歷時主要的一些注意點，總結(jié)如下：

• for、while、for-of三個循環(huán)語句，都會正常遍歷到空位，并輸出空位的值為undefined。
• for-in循環(huán)語句，則會直接跳過空位，不會遍歷空位。
• 數(shù)組的實例方法里面：
  • forEach、map、every、some、filter、reduce、flat，也都會直接跳過空位；
  • find、findIndex，則會讀取到空位，返回undefined。
  • indexOf、lastIndexOf、includes，無法讀取空位，因為空位啥也沒有。
• 當(dāng)使用Object對象的keys、values、entries方法的時候，也是直接跳過空位。

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

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

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

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

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

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

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

• 使用join() 和 toString() 方法的時候，空位元素輸出只有一個逗號。

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

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

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

in運算符

in運算符用于檢查對象的某個屬性鍵名是否存在，返回布爾值，數(shù)組屬于對象，所以也能適用。
數(shù)組的鍵名就是索引值，我們使用數(shù)組索引值判斷即可。

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

以上代碼，數(shù)組有三個元素，索引值0-2，而3并不屬于、返回了false。
之前已有介紹對象鍵名是字符串，數(shù)組的索引值使用數(shù)字和字符串都沒問題。

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

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

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

總結(jié)

本文我們主要講述的是數(shù)組的特性，從類型、數(shù)組判斷、索引值、length屬性、創(chuàng)建數(shù)組的方式、構(gòu)造函數(shù)、空位、in運算符等幾個方面對數(shù)組做了詳細的介紹，著重于數(shù)組的特別之處。
通過這些內(nèi)容知識，相信能夠讓我們更加深入的理解JavaScript中的數(shù)組，為我們寫出更好的代碼添磚加瓦。文章來源地址http://www.zghlxwxcb.cn/news/detail-422274.html

到了這里，關(guān)于一文搞懂JavaScript數(shù)組的特性的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！