欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文帶你搞懂JavaScript中數(shù)組的特性

 更新時間:2023年04月23日 10:34:41   作者:jimojianghu  
數(shù)組是幾乎所有編程語言的基礎語法,JavaScript因為語法特性,我們更需要理解數(shù)組知識。本文從JavaScript中數(shù)組的一些特殊之處入手,通過這些少有特性的詳細介紹,加深我們對數(shù)組的理解

前言

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

基本介紹

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

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

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

數(shù)組類型和判斷

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

typeof [] // 'object'

由于返回的是 object 類型,就無法通過 typeof 語法判斷一個值或對象是否是數(shù)組,得使用其他方式,才能正確的判斷數(shù)組對象。

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

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

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

正確判斷方式

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

Array.isArray()

ES6推出的語法,專門用于判斷對象類型是否為數(shù)組,是則返回true,否則返回false,簡單好用。

Object.prototype.toString.call()

在ES6推出之前的JS語法中,一般使用這種方式來判斷數(shù)組,除了數(shù)組,它可以準確判斷出其他幾乎所有的JS數(shù)據(jù)類型。

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

以上代碼,就是這兩種有效方式的示例,都能準確有效的判斷。

當前的前端開發(fā)種,ES6語法基本普及的情況下,使用 Array.isArray() 將更方便。

其他方式介紹

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

[] instanceof Array

這里使用instanceof運算符表示給定值是否是數(shù)組的實例。

[].constructor === Array

給定值的實例構造函數(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ù)組通過下標索引值進行元素值的讀取,必須要使用方括號才可以,否則無法讀取元素值。

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

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

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

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

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

但需要注意的是,數(shù)組的索引值,必須是能自動轉成正整數(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,能自動轉換成正整數(shù),所以可以作為數(shù)組的第三個元素;
  • 使用負數(shù) -1 和無法自動轉換成正整數(shù)的小數(shù) 3.6,這兩種情況都作為了數(shù)組的鍵值對的方式成為了數(shù)組的屬性,但并不被包含在數(shù)組元素中,因為數(shù)組的length屬性為3,并不包含這兩個值。
  • 負數(shù) -1 和小數(shù) 3.6,都被當作字符串在使用,同理,也可以使用 arr[true] = 50,這里的bool值 true,也被當做了字符串 'true'。

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

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

如果我們給數(shù)組使用字符串、布爾值等其他類型的值作為下標索引時,這個時候和小數(shù)負數(shù)的表現(xiàn)類似。

就是把數(shù)組用作了對象,這些類型的下標索引則都被當做了數(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ù)組的這些特別之處很多都與對象有關。

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

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

length屬性

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

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

但有幾點要注意:

1.如果設置數(shù)組的length值小于元素個數(shù),則數(shù)組會自動刪除所有大于length值的元素

2.如果設置數(shù)組的length值大于元素個數(shù),則數(shù)組元素個數(shù)會自動增加到length值,并且新增的元素都是空位(返回undefined)

3.如果將數(shù)組的length屬性設置為0,則會清空整個數(shù)組,變?yōu)榭諗?shù)組

4.數(shù)組的length值必須為正整數(shù)(或可以自動轉換成正整數(shù)的值),其他值都是不合法的,設置不合法值時會報錯。

能自動轉換成正整數(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可以轉換成1,數(shù)組的長度就變?yōu)榱?,元素被刪除了一個;

當設置數(shù)組長度為負數(shù)的時候,報錯,無效的數(shù)組長度。

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

數(shù)組的最大長度

JavaScript中的數(shù)組能賦予的最大長度是32位的正整數(shù),即 2**32 - 1 = 4294967295,從0計算,長度減1。

當我們給數(shù)組設置的長度超過最大長度的值時,也會報無效長度的錯誤:

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

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

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

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

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

當前JS中,創(chuàng)建數(shù)組大致有三種方式:數(shù)組字面量語法、Array構造函數(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構造函數(shù)的一種簡化使用。

Array構造函數(shù)

Array對象本身是JavaScript的一個內(nèi)置對象,它是 function 類型,能當做構造函數(shù)使用,這與大多數(shù)內(nèi)置對象一樣,是否使用 new 操作符都可以。

因此,我們通過調(diào)用 Array() 或 new Array(),就能創(chuàng)建數(shù)組對象。數(shù)組構造函數(shù)可以使用多種形式的可選參數(shù),只不過依據(jù)參數(shù)不同,結果會有一定差異。

不傳參數(shù)時,返回一個空數(shù)組

Array() // []

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

1.當參數(shù)為0時,創(chuàng)建一個空數(shù)組

Array(0) // []

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

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

3.當參數(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ù)組長度的錯誤。

但是,對于能自動轉換成整數(shù)的數(shù)字(小數(shù)位為0),則可以正常創(chuàng)建數(shù)組,如下代碼所示:

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

4.當參數(shù)是非數(shù)字的其他類型,如字符串值、布爾值、對象、數(shù)組、函數(shù)、null、undefined等等,則該參數(shù)將會成為新數(shù)組的第一個元素,數(shù)組的length長度自然就是1。

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

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

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

傳入多個參數(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構造函數(shù)的區(qū)別在于:Array.of() 的行為更一致,不論它的參數(shù)有幾個、是什么類型,都會被當做新數(shù)組的元素成員,當然如果不傳入?yún)?shù),則會生成空數(shù)組。包括負數(shù)和小數(shù),也都會被當成元素,不會報錯。

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

所以,Array.of方法彌補了Array構造函數(shù)參數(shù)差異導致的不足,除了字面量語法外,我們應該盡量用于替代Array構造函數(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]

從以上代碼可以看出,當我們使用Array.of方法時,所有參數(shù)都作為了數(shù)組的元素,這可以完全解決Array構造函數(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)遍歷空位

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

針對空位遍歷時主要的一些注意點,總結如下:

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,無法讀取空位,因為空位啥也沒有。

當使用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']

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

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

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

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

使用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。

總結

本文我們主要講述的是數(shù)組的特性,從類型、數(shù)組判斷、索引值、length屬性、創(chuàng)建數(shù)組的方式、構造函數(shù)、空位、in運算符等幾個方面對數(shù)組做了詳細的介紹,著重于數(shù)組的特別之處。

通過這些內(nèi)容知識,相信能夠讓我們更加深入的理解JavaScript中的數(shù)組,為我們寫出更好的代碼添磚加瓦。

到此這篇關于一文帶你搞懂JavaScript中數(shù)組的特性 的文章就介紹到這了,更多相關JavaScript數(shù)組特性 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • DOM_window對象屬性之--clipboardData對象操作代碼

    DOM_window對象屬性之--clipboardData對象操作代碼

    clipboardData 對象提供了對于預定義的剪貼板格式的訪問,以便在編輯操作中使用。
    2011-02-02
  • 使用webpack打包ts代碼的實現(xiàn)

    使用webpack打包ts代碼的實現(xiàn)

    本文主要介紹了使用webpack打包ts代碼的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • js如何實現(xiàn)設計模式中的模板方法

    js如何實現(xiàn)設計模式中的模板方法

    都知道在js中如果定義兩個相同名稱的方法,前一個方法就會被后一個方法覆蓋掉,使用此特點就可以實現(xiàn)模板方法,感興趣的朋友可以了解下本文哈
    2013-07-07
  • 支付寶小程序tabbar底部導航

    支付寶小程序tabbar底部導航

    這篇文章主要為大家詳細介紹了支付寶小程序重寫tabbar底部導航,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • js常用系統(tǒng)函數(shù)用法實例分析

    js常用系統(tǒng)函數(shù)用法實例分析

    這篇文章主要介紹了js常用系統(tǒng)函數(shù)用法,實例分析了escape、parseInt、parseFloat、isNaN、isFinite等函數(shù)的用法,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • JavaScript作用域鏈實例詳解

    JavaScript作用域鏈實例詳解

    這篇文章主要介紹了JavaScript作用域鏈,結合實例形式較為詳細的分析了作用域鏈的原理、功能與相關操作注意事項,需要的朋友可以參考下
    2019-01-01
  • JavaScript 原型繼承之構造函數(shù)繼承

    JavaScript 原型繼承之構造函數(shù)繼承

    JavaScript 是基于原型的面向對象語言。也就是說,每個實例對象都具有一個原型。對象從該原型中繼承屬性和方法。這一篇將具體說說構造函數(shù)的繼承。
    2011-08-08
  • 微信小程序實現(xiàn)日歷簽到

    微信小程序實現(xiàn)日歷簽到

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日歷簽到功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • js實現(xiàn)星星打分效果

    js實現(xiàn)星星打分效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)星星打分效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • js數(shù)值計算時使用parseInt進行數(shù)據(jù)類型轉換(jquery)

    js數(shù)值計算時使用parseInt進行數(shù)據(jù)類型轉換(jquery)

    這篇文章主要介紹了js數(shù)值計算時使用parseInt進行數(shù)據(jù)類型轉換(jquery),需要的朋友可以參考下
    2014-10-10

最新評論