聲明

本系列文章內(nèi)容全部梳理自以下幾個(gè)來(lái)源：

• 《JavaScript權(quán)威指南》
• MDN web docs
• Github:smyhvae/web
• Github:goddyZhao/Translation/JavaScript

作為一個(gè)前端小白，入門(mén)跟著這幾個(gè)來(lái)源學(xué)習(xí)，感謝作者的分享，在其基礎(chǔ)上，通過(guò)自己的理解，梳理出的知識(shí)點(diǎn)，或許有遺漏，或許有些理解是錯(cuò)誤的，如有發(fā)現(xiàn)，歡迎指點(diǎn)下。

PS：梳理的內(nèi)容以《JavaScript權(quán)威指南》這本書(shū)中的內(nèi)容為主，因此接下去跟 JavaScript 語(yǔ)法相關(guān)的系列文章基本只介紹 ES5 標(biāo)準(zhǔn)規(guī)范的內(nèi)容、ES6 等這系列梳理完再單獨(dú)來(lái)講講。

正文-數(shù)組

數(shù)據(jù)的有序集合稱為數(shù)組。

其實(shí)也就是個(gè)容器，但與 Java 中的數(shù)組不同的是，JavaScript 里的數(shù)組不限制元素類型、本身就是個(gè)對(duì)象，因此不管在使用方面、語(yǔ)法方面、概念上都會(huì)一些區(qū)別。

那么本章其實(shí)也就是學(xué)習(xí) JavaScript 中數(shù)組的用法：

相關(guān)術(shù)語(yǔ)

稀疏數(shù)組

稀疏數(shù)組就是指不連續(xù)索引的數(shù)組，數(shù)組容器中某些索引是空的、無(wú)值。相反，正常的連續(xù)索引的數(shù)組就是非稀疏數(shù)組，容器中各元素緊密堆放，如：

稀疏數(shù)組：

非稀疏數(shù)組：

數(shù)組內(nèi)每個(gè)元素緊密排列。

多維數(shù)組

JavaScript 不支持真正的多維數(shù)組，但可以用數(shù)組的數(shù)組來(lái)近似。

以二維數(shù)組舉例，在 Java 中可直接聲明：

int[][] a = new int[][]{};

但在 JavaScript 中無(wú)法定義二維數(shù)據(jù)，會(huì)報(bào)語(yǔ)法錯(cuò)誤：

但由于數(shù)組在 JavaScript 中也是對(duì)象，數(shù)組中的元素也可以是數(shù)組，因此可以用數(shù)組的數(shù)組來(lái)實(shí)現(xiàn)多維數(shù)組：

類數(shù)組對(duì)象

理解類數(shù)組對(duì)象概念可以將這個(gè)詞補(bǔ)充解釋完整，即：類似數(shù)組的對(duì)象。

所以，這個(gè)概念的主語(yǔ)是對(duì)象，而對(duì)象如果是通過(guò) [] 來(lái)操作它的屬性時(shí)，屬性值可以很靈活，不是必須滿足標(biāo)識(shí)符規(guī)定，只要最后能計(jì)算出一個(gè)字符串值即可。因此，當(dāng)如果定義了某個(gè)對(duì)象，其屬性值是非負(fù)整數(shù)：0,1,2,3…，此外再給這個(gè)對(duì)象定義了一個(gè) length 屬性，那么此時(shí)就可稱這個(gè)對(duì)象為類數(shù)組對(duì)象。

因?yàn)閷?duì)這種對(duì)象的操作，跟數(shù)組很類似，而且 Array.prototype 中提供的很多操作數(shù)組的方法都可以直接用來(lái)操作這些類數(shù)組對(duì)象。

數(shù)組屬性-length

每個(gè)數(shù)組都有一個(gè) length 屬性，這個(gè)屬性是使數(shù)組區(qū)別于常規(guī)的 JavaScript 對(duì)象的關(guān)鍵。

需要注意，length 并不是表示數(shù)組的元素個(gè)數(shù)。

length 表示的是數(shù)組里最大索引 + 1，因?yàn)?JavaScript 分稀疏數(shù)組和非稀疏數(shù)組。

如果是非稀疏數(shù)組，各元素都緊密堆放，那么此時(shí) length = 最大索引 + 1，能夠表示數(shù)組元素的個(gè)數(shù)。

但如果是稀疏數(shù)組，由于中間有些索引位置其實(shí)是空的，并沒(méi)有元素，索引 length = 最大索引 + 1，此時(shí)并不表示數(shù)組元素個(gè)數(shù)。

而且，數(shù)組索引是基于 32 位數(shù)值的，所以 length 的取值范圍：

0 ~ 2^32 - 1? => 0 ~ 4294967295

另外，由于 length 屬性默認(rèn)是可讀可寫(xiě)的，所以它有一些特殊功能：

• 當(dāng)添加或刪除數(shù)組元素時(shí)，length 會(huì)自動(dòng)更新。
• 并不是所有刪除數(shù)組元素的操作都會(huì)讓 length 更新，有些刪除操作只是移除索引里保存數(shù)據(jù)，并不移除數(shù)組這個(gè)索引所占的坑位。
• length 可寫(xiě)性，當(dāng)設(shè)置 length 比當(dāng)前數(shù)組長(zhǎng)度小的值時(shí)，會(huì)自動(dòng)刪除那些索引值大于等于 length 的元素。
• 反過(guò)來(lái)將 length 設(shè)置比當(dāng)前數(shù)組長(zhǎng)度大，會(huì)讓數(shù)組變成稀疏數(shù)組，并不會(huì)實(shí)際添加一些元素進(jìn)去。

數(shù)組特性

雖然數(shù)組也是對(duì)象，但它有一些特性是其他對(duì)象所沒(méi)有的：

• 當(dāng)有新元素添加到數(shù)組中時(shí)，自動(dòng)更新 length 屬性
• 設(shè)置 length 為一個(gè)較小值將截?cái)鄶?shù)組
• 繼承了 Array.prototype 一些操作數(shù)組的便捷方法
• 類屬性為 "Array"
• 不限制元素類型，一個(gè)數(shù)組中可以同時(shí)存儲(chǔ)各種類型的數(shù)據(jù)

創(chuàng)建數(shù)組

數(shù)組的創(chuàng)建，或者說(shuō)定義數(shù)組，初始化數(shù)組一共有兩種方式：

數(shù)組直接量

var a = []; //空數(shù)組 var b = [1, "2", true, [1+2, {}]]; //不同類型的數(shù)組元素，數(shù)組直接量中甚至可以是表達(dá)式 var c = [,,,3]; //省略的索引，讀取時(shí)為 undefined

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

var a = new Array(); //通過(guò)構(gòu)造函數(shù)創(chuàng)建數(shù)組 a[0] = 1;

數(shù)組元素的讀寫(xiě)

跟 Java 語(yǔ)言的數(shù)組讀寫(xiě)一樣，同是通過(guò) [] 中括號(hào)來(lái)操作。

但 JavaScript 更靈活，[] 里可以是任何表達(dá)式，不限制于非負(fù)整數(shù)，如：

a[2] = 0; //常規(guī)操作 a["23"] = 0; //自動(dòng)將 "23" 字符串轉(zhuǎn)成數(shù)值類型 23，等效于 a[23]=0 a[-23] = 0; //當(dāng)[]中不是非負(fù)整數(shù)時(shí)，此操作變成對(duì)象的屬性讀寫(xiě)，因?yàn)閿?shù)組也是對(duì)象 a[5+6]; //[] 中可以是表達(dá)式，先計(jì)算表達(dá)式值后，再操縱數(shù)組，等效于 a[11]

因?yàn)閿?shù)組也是對(duì)象，所以 JavaScript 中的數(shù)組操作不存在越界的場(chǎng)景，當(dāng)試圖查詢不存在的屬性時(shí)，只會(huì)返回 undefinded。

數(shù)組元素的添加

添加元素都數(shù)組最簡(jiǎn)單的方式是通過(guò) [] 操作符，另外也可借助 Array.prototype 的一些方法：

var a = []; //a 是空數(shù)組 a[0] = 0; //指定索引位置添加元素 a.push(1); //等效于 a[length] = 1，在數(shù)組末尾添加元素 a.unshift(-1); //在數(shù)組頭部添加元素，原本數(shù)組中的元素依次向后移 a.splice(0, 0, "0", "1"); //插入刪除操作通用的方法，這里等效于 a.unshift("0", "1");

[] 方式來(lái)添加元素的前提是，中括號(hào)里的索引位置原先并沒(méi)有元素存在，如果索引位置有元素存在，則該操作變成賦值操作。

如果想在末尾添加元素，直接使用 push 即可；

如果想在開(kāi)頭添加元素，并讓其他元素自動(dòng)后移，可用 unshift；

splice 是個(gè)通用的方法，可在數(shù)組指定的任何位置添加元素，并讓這位置之后的元素自動(dòng)后移，同時(shí)它也可用來(lái)刪除指定位置元素，并讓后續(xù)元素自動(dòng)前移補(bǔ)上被刪除的位置。具體參數(shù)含義后面介紹。

數(shù)組元素的刪除

數(shù)組元素的刪除分兩種場(chǎng)景：

單純將指定位置的元素刪除，不會(huì)觸發(fā)高索引元素往下移的填充行為，也不會(huì)觸發(fā) length 的長(zhǎng)度減少；

刪除指定位置的元素，同時(shí)后面元素會(huì)往前移來(lái)填充被刪除元素留下的空白位置，同時(shí) length 會(huì)跟隨著減少。

所以，當(dāng)有涉及數(shù)組元素刪除操作時(shí)，需特別注意下，根據(jù)自己的需求場(chǎng)景，選擇對(duì)應(yīng)的方法進(jìn)行操作。

場(chǎng)景1對(duì)應(yīng)的刪除操作

var a = [1,2,3]; //數(shù)組 length = 3; delete a[1]; //此時(shí)數(shù)組：[1,,3]，length 仍舊=3

使用 delete 可用于刪除數(shù)組內(nèi)的元素內(nèi)容，但并不影響數(shù)組的長(zhǎng)度。

場(chǎng)景2對(duì)應(yīng)的刪除操作

var a = [1,2,3,4,5,6,7,8]; //數(shù)組 length = 8; a.pop(); //數(shù)組：[1,2,3,4,5,6,7] length = 7; a.shift(); //數(shù)組：[2,3,4,5,6,7] length = 6 a.splice(2, 2); //數(shù)組：[2,3,6,7] length = 4 a.length = 2; //數(shù)組：[2,3] length = 2

除了使用 Array.prototype 內(nèi)置的方法來(lái)刪除元素，對(duì) length 的賦值操作也可以達(dá)到刪除末尾的多個(gè)元素，超過(guò) length 的索引位置的元素就都被清空掉。

遍歷數(shù)組

for 循環(huán)語(yǔ)句

數(shù)組的遍歷也是很常見(jiàn)的場(chǎng)景，常規(guī)的用法類似 Java 的 for 循環(huán)語(yǔ)句：

var a = [1,2,,,,6,7,8]; //數(shù)組 length = 8; for (var i = 0; i < a.length; i++) {console.log(a[i]); }

當(dāng)數(shù)組是稀疏數(shù)組時(shí)，那些索引位置沒(méi)有元素存在的也仍舊需要遍歷，讀取的值是 undefined，所以需要根據(jù)需要做相應(yīng)判斷處理：

var a = [1,2,,,,6,7,8]; //數(shù)組 length = 8; for (var i = 0; i < a.length; i++) {if (!a[i]) continue; //跳過(guò) null，undefined 和不存在的元素//... } for (var i = 0; i < a.length; i++) {if (a[i] === undefined) continue; //跳過(guò)undefined 和不存在的元素//... } for (var i = 0; i < a.length; i++) {if (!(i in a)) continue; //跳過(guò)不存在的元素//... }

for-in 循環(huán)語(yǔ)句

除了使用常規(guī)的 for 循環(huán)外，還可以使用 for-in 的方式：

var a = [1,2,,,,6,7,8]; //數(shù)組 length = 8; for(var i in a) {console.log(a[i]); }

因?yàn)閿?shù)組實(shí)際上也是對(duì)象，數(shù)組的索引從對(duì)象角度來(lái)看，其實(shí)也就是屬性，那么就可以用 for-in 這種方式遍歷屬性，這種方式可以跳過(guò)稀疏數(shù)組中那些不存在的元素，但有個(gè)缺點(diǎn)，它也會(huì)遍歷那些繼承屬性，所以如果需要，可做一些過(guò)濾判斷：

var a = [1,2,,,,6,7,8]; //數(shù)組 length = 8; for(var i in a) {if (!a.hasOwnProperty(i)) continue; //跳過(guò)繼承的屬性 //... }

注意：雖然 for-in 也可以達(dá)到遍歷的效果，但不建議使用在遍歷數(shù)組的場(chǎng)景，因?yàn)楸闅v順序并不一定按照索引順序。

forEach 方法

上述兩種遍歷方案都需要自行處理很多情況，那么，有沒(méi)有一種方便一點(diǎn)的遍歷方法，有的：forEach

var a = [1,2,,,,6,7,8]; //數(shù)組 length = 8; a.forEach(function (x) { //x即數(shù)組a中存在的元素console.log(x); });

這種方式可以遍歷數(shù)組中存在的元素，不需做額外的判斷處理。如果函數(shù)中需要數(shù)組元素的索引信息、數(shù)組本身的對(duì)象引用信息，此時(shí)，可增加額外參數(shù)實(shí)現(xiàn):

//x:數(shù)組元素, i:元素的索引, a:數(shù)組的引用 a.forEach(function (x, i, a) { console.log(a[i] + " = " + x); });

數(shù)組方法

Array.prototype 中定義了一些很有用的操作數(shù)組的函數(shù)，可用于作為數(shù)組的方法調(diào)用，足夠滿足開(kāi)發(fā)中所需的數(shù)組相關(guān)的操作需求，列舉一些常見(jiàn)的，更多可參考 API：

join()

將數(shù)組各元素按照指定字符串拼接起來(lái)后輸出字符串：

var a = [1,,2,3]; a.join(); //輸出：1,,2,3 沒(méi)有參數(shù)默認(rèn)以逗號(hào),拼接 a.join(" ") //輸出：1 2 3 以空格拼接

不存在的元素也會(huì)占據(jù)一個(gè)拼接符，所以可以結(jié)合其他方法過(guò)濾使用，后續(xù)介紹。

reverse()

顛倒數(shù)組，將原數(shù)組進(jìn)行逆序操作：

var a = [1,,2,3]; a.reverse(); a.join(); //輸出：3,2,,1 原數(shù)組被逆序

sort()

將原數(shù)組按照指定規(guī)則對(duì)元素進(jìn)行排序，默認(rèn)以字母表順序排序：

var a = [22,,3,0,1]; a.sort(); a.join(); //輸出：0,1,22,3,,

注意：默認(rèn)排序行為是將所有元素按照字符串形式處理，一個(gè)字符一個(gè)字符的排序，所有 22 的首字符 2 在 3 前面，排序結(jié)果才會(huì)是 22 在 3 前面，因?yàn)樗⒉皇前凑諗?shù)值的大小來(lái)排序。

另外，不存的元素都排在末尾。

所以可以自行指定排序規(guī)則，如從小大到排序：

var a = [22,,3,0,1]; a.sort(function (a, b) {return a - b; //根據(jù)順序返回：負(fù)數(shù)，0，正數(shù) }); a.join(); //輸出：0,1,3,22,

concat()

將參數(shù)傳入的數(shù)值拼接到數(shù)組末尾，但不是在原數(shù)組上操作，而是會(huì)新建一個(gè)數(shù)組，此方法的拼接操作不會(huì)影響到原數(shù)組內(nèi)容。

var a = [1,2,3]; a.concat(4,5); //返回 [1,2,3,4,5] a.concat([4,5]); //返回 [1,2,3,4,5] 因?yàn)樯鲜霾僮鳑](méi)有影響到原數(shù)組 a.concat([4,5], [6,[7,8]]); //返回 [1,2,3,4,5,6,[7,8]]

注意：如果傳入的參數(shù)是數(shù)組，那么會(huì)解析一層數(shù)組，拼接數(shù)組的元素內(nèi)容，那如果數(shù)組是多維數(shù)組，也只拼接第一維的數(shù)組元素，不會(huì)進(jìn)一步解析數(shù)組。

slice()

截取原數(shù)組的某個(gè)片段，返回一個(gè)子數(shù)組，不會(huì)在原數(shù)組上操作，返回的是新數(shù)組：

var a = [1,2,3,4,5]; a.slice(0, 3); //返回 [1,2,3] 兩個(gè)參數(shù)指定起始和終點(diǎn)位置，關(guān)系是[),即左包含右不包含 a.slice(3); //返回 [4,5] 只有一個(gè)參數(shù)時(shí)，表示指定起點(diǎn)到末尾 a.slice(1, -1);//返回 [2,3,4] 負(fù)數(shù)表示倒數(shù)第n個(gè)元素，

splice()

通用的在數(shù)組的指定位置插入或刪除元素，插入會(huì)讓后面的元素自動(dòng)往后移空出位置，刪除會(huì)讓后面的元素自動(dòng)往前移填補(bǔ)空白，length 會(huì)跟隨著變化。

如果有包含刪除操作，那么刪除的數(shù)組會(huì)被返回，否則返回空數(shù)組；

var a = [1,2,3,4,5,6,7,8]; //第一個(gè)參數(shù)選擇操作的起始位置，第二個(gè)參數(shù)指定要?jiǎng)h除的個(gè)數(shù) a.splice(4); //返回 [5,6,7,8] 原數(shù)組 a：[1,2,3,4] a.splice(1,2); //返回 [2,3] 原數(shù)組 a：[1,4] a.splice(1,1); //返回 [4] 原數(shù)組 a：[1]

第一個(gè)參數(shù)選擇要操作的起始位置，第二個(gè)參數(shù)指定要?jiǎng)h除的元素個(gè)數(shù)，如果只有一個(gè)參數(shù)，那么就刪除從起始位置到末尾的元素。被刪除的元素會(huì)組成新數(shù)組返回，刪除操作是直接在原數(shù)組上進(jìn)行的。

var a = [1,2,3,4,5]; //第三個(gè)參數(shù)開(kāi)始之后的任意參數(shù)都會(huì)被插入到指定的位置 a.splice(2,0,'a','b'); //返回 [] 原數(shù)組 a：[1,2,'a','b',3,4,5] a.splice(2,2,[1,2],3); //返回 ['a','b'] 原數(shù)組 a：[1,2,[1,2],3,3,4,5]

第三個(gè)參數(shù)開(kāi)始之后的任意數(shù)量的參數(shù)都會(huì)被插入的第一個(gè)參數(shù)指定的位置，先進(jìn)行刪除操作，再進(jìn)行添加操作。

push() 和 pop()

在數(shù)組末尾添加或移除元素，pop() 時(shí)，被移除的元素會(huì)返回。

unshift() 和 shift()

在數(shù)組開(kāi)頭添加或移除元素，都會(huì)觸發(fā)數(shù)組元素進(jìn)行遷移行為。

toString()

數(shù)組的 toString() 行為跟 join() 輸出的一致。

forEach()

遍歷數(shù)組內(nèi)每個(gè)元素，每遍歷一個(gè)元素，會(huì)調(diào)用一次指定的函數(shù)，并將元素的相關(guān)信息通過(guò)參數(shù)傳入函數(shù)內(nèi)。

map()

原數(shù)組按照指定規(guī)則映射到新數(shù)組的操作，跟 forEach() 很類似，遍歷數(shù)組內(nèi)的每個(gè)元素時(shí)，都會(huì)調(diào)用一次指定的函數(shù)，并將元素相關(guān)信息通過(guò)參數(shù)傳入函數(shù)內(nèi)。但這個(gè)函數(shù)需要有一個(gè)返回值，用于生產(chǎn)新的數(shù)組的元素。

var a = [1,2,3]; var b = a.map(function (value, index, array) {return value + index; }); //b：[1,3,5]

新數(shù)組與原數(shù)組的映射關(guān)系為：新數(shù)組元素 = 原數(shù)組元素 + 元素索引；

當(dāng)有需要對(duì)原數(shù)組根據(jù)某種規(guī)則換算出新數(shù)組時(shí)，可用此方法。

filter()

原數(shù)組元素根據(jù)某種規(guī)則進(jìn)行過(guò)濾操作，過(guò)濾完后的元素作為新數(shù)組返回。跟 forEach() 也類似，都一樣是在遍歷每個(gè)元素時(shí)調(diào)用指定的方法，并將元素進(jìn)行傳入。這個(gè)方法需要一個(gè) boolean 返回值，用來(lái)表示是否可以加入新數(shù)組。

var a = [1,2,3,4,5]; var b = a.filter(function (x) {return x > 3; }); //b：[4,5]

用此方法也將稀疏數(shù)組轉(zhuǎn)成非稀疏數(shù)組，函數(shù)內(nèi)默認(rèn)返回 true 即可，因?yàn)檫@些方法的遍歷是只遍歷數(shù)組內(nèi)存在的元素。

every() 和 some()

用于檢測(cè)數(shù)組的元素是否滿足指定的條件，這兩個(gè)方法都返回 boolean 值。檢測(cè)行為就命名表示的意思，every() 表示數(shù)組里每個(gè)元素都需要滿足條件，最終才會(huì)返回 true，一旦某個(gè)元素不滿足，后續(xù)元素不會(huì)再進(jìn)行檢測(cè)，方法直接返回 false。some() 則剛好相反，只要有一個(gè)元素滿足條件，后續(xù)元素不用檢測(cè)，方法直接返回 true。

var a = [1,2,3,4,5]; a.some(function (value, index, array) {return value > 3; //返回 true，因?yàn)榇嬖诖笥?的元素 }); a.every(function (value, index, array) {return value > 3; //返回false，因?yàn)椴皇撬性囟即笥? });

reduce() 和 reduceRight()

依次對(duì)數(shù)組里每個(gè)元素按照指定規(guī)則進(jìn)行計(jì)算，計(jì)算之后的結(jié)果繼續(xù)跟下一個(gè)元素按照規(guī)則計(jì)算，常用于求和，最大值之類的場(chǎng)景。

var a = [1,2,3,4,5]; a.reduce(function (x,y) { //數(shù)組求和return x + y; }, 0);

區(qū)別上述幾個(gè)方法，這個(gè)的參數(shù)需要有兩個(gè)參數(shù)，第一參數(shù)是函數(shù)，用于指定按照某種規(guī)則計(jì)算，這個(gè)函數(shù)也需要有兩個(gè)參數(shù)，以及返回值，它的返回值會(huì)和下一個(gè)元素再一次傳入該函數(shù)中計(jì)算。reduce 的第二個(gè)參數(shù)會(huì)和數(shù)組第一個(gè)元素被傳入函數(shù)內(nèi)計(jì)算，這里是求和，所以初始值傳 0，求積可以傳1，以此類推。

如果不傳第二個(gè)參數(shù)，那么默認(rèn)以數(shù)組第一個(gè)元素的值作為第二個(gè)參數(shù)的值。

reduceRight 和 reduce 用途，用法一致，唯一的區(qū)別，它是從數(shù)組的末尾往前一個(gè)個(gè)處理元素的。一個(gè)左到右處理數(shù)組，一個(gè)右到左。

indexOf() 和 lastIndexOf()

在數(shù)組內(nèi)搜索指定元素，返回找到的第一個(gè)元素的索引位置，沒(méi)有找到返回 -1

兩個(gè)方法，一個(gè)從左往右尋找，一個(gè)從右往左尋找。

Array.isArray()

用于判斷某個(gè)對(duì)象是否是數(shù)組類型。

---

大家好，我是 dasu，歡迎關(guān)注我的公眾號(hào)（dasuAndroidTv），公眾號(hào)中有我的聯(lián)系方式，歡迎有事沒(méi)事來(lái)嘮嗑一下，如果你覺(jué)得本篇內(nèi)容有幫助到你，可以轉(zhuǎn)載但記得要關(guān)注，要標(biāo)明原文哦，謝謝支持~

轉(zhuǎn)載于:https://www.cnblogs.com/dasusu/p/10058945.html

總結(jié)

以上是生活随笔為你收集整理的前端入门11-JavaScript语法之数组的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。