知識點列表：

面試題：

sort的排序 數組拍平 經典面試題：數組扁平化 關鍵詞：

·數組基本使用 （數組使用、下標、length）

·對數組做一些操作的常見方法 （ push/pop、unshift/shift、splice/slice、join、reverse、concat、sort、delete） ·數組的創建 ·數組的下標索引可做屬性名 ·數組是對對象的特殊封裝

一、數組基本使用

1、數組

// 聲明數組的語法
var arr = [ 值 ]

值裡面可以是數據類型中的任何一個，如數字、字元串、對象、函數、數組等任何，如：

var arr = [3，4，5]

2、數組正（fu）規（za）的寫法

Array(3,4,5)
//(3) [3, 4, 5]

3、數組索引的下標

//下標表示語法
arr [下標位數]

（1）用下標訪問數組的每一個元素：

arr = [4,5,6]
//(3)[4,5,6]
arr[0]
//4
arr[1]
// 5
arr[2]
//6

（2）用下標去賦值

//為不存在位數賦值
arr[3]=101
//101
arr
//(4) [3, 4, 100, 101]
arr[100]=10
//10
arr
//(101) [3, 4, 100, 101, empty × 96, 10]

4、length（表示數組的個數）

// 表示數組個數的語法
arr.length

（1）arr.length-1 —— 獲取數組的最後一位具體數值

arr[arr.length-1]

例子如下：

arr = [4,5,6]
//(3)[4,5,6]
arr[arr.length-1]
// 6

（2）arr.length=0 ——用來清空數組，變成空數組

arr.length=0
-->0
arr
//[]

（3）arr.length = 具體數值 ——length如何進行截斷?

var arr = [4,5,6]
// undefined
arr
//(3) [4, 5, 6]
arr[100]=100
// 100
arr.length
// 101
arr[3]
// undefined
arr[99]
// undefined
arr[100]
// 100

然後，我們通過設置length進行數組截斷

arr.length = 2
//2
arr
//(2) [4, 5]

（4）使用for循環遍歷length，得出數組裡具體的值

arr =[4,5,6]
//(3) [4, 5, 6]
for(var i=0; i<arr.length; i++){
console.log(arr[i])
}
// 4
// 5
// 6

二、數組方法

1、棧方法：在數組裡最後一位進行新增、刪除操作 數組中的棧方法，先入後出 使用數組

（1）push —— 新增（於原數組的最後一位）

arr.push()

如：

arr.push(wangxiaoqin)
//4 返回值輸出位數
arr
///(4) [4, 5, 6, "wangxiaoqin"]

（2）pop —— 去除（掉原數組最後一位）

arr.pop()

如：

arr.push(wangxiaoqin)
//4 返回值輸出位數
arr
//(4) [4, 5, 6, "wangxiaoqin"]
arr.pop()
//"wangxiaoqin"
arr
//(3) [4, 5, 6]

2、隊列方法：數組裡第一位新增、刪除 數組中de 隊列方法，先入先出 隊列法使用數組 （1）unshift —— 新增（於原數組的第一位）

arr.unshift()

如：

arr.unshift(wangxiaoqin)
//4
arr
//(4) ["wangxiaoqin", 4, 5, 6]

（2）shift ——刪除（掉原數組的第一位）

arr.shift()

如：

arr.unshift(wangxiaoqin)
//4
arr
//(4) ["wangxiaoqin", 4, 5, 6]
arr.shift()
//"wangxiaoqin"
arr
//(3) [4, 5, 6]

3、在數組的任意位置新增、刪除 （1）splice: ——刪除、新增、修改、插入

arr.splice(start下標,length/替換值,具體值)

用於一次性解決數組添加、刪除（二者結合可達到替換效果）

四個主要參數：1.開始索引、2.刪除元素的位移、3.插入（替換）新元素（可以多寫幾個）、4.返回一個由刪除元素組成的新數組，沒有刪除則返回空數組，則原數組發生改變

例子如下1：指定前兩個參數，刪除數組元素，同樣會帶來索引及length改變

var arr = [1,2,3,4,5]
// undefined
arr.splice(1,3) //從下標1開始（包括下標1的值2），刪除3個，所以數組元素為2，3，4 均被刪除
//(3) [2, 3, 4] //所輸出的a.splice所執行的結果，是一個新數組為[2, 3, 4]
arr.length
//2
arr
//(2) [1, 5] //同時arr本身剩下[1,5]

例子如下2：插入和替換，如果從第幾個位開始做替換（或插入）

var arr =[1,2,3,4,5]
// undefined
arr.splice(1,0,9,99,999)//從下標1開始，即數組元素2前面，替換的數組元素個數為0，替換（其實就是插入）9，99，999三個數組元素
// []
arr.length
//8
arr
//(8) [1, 9, 99, 999, 2, 3, 4, 5]

註：這樣的插入法，是連續性的，執行數組插入（替換）是一次完成，數組本身長度發生變化

例子如下3：怎麼去掉數組裡的負數值？ ?先看一個錯誤示範：

var arr =[3, 4, -3, -2, -1, 5]
// undefined
for(var i= 0; i <arr.length; i++){
if(arr[i]<0){ //數組裡的具體值
arr.splice(i,1) //此時執行完下標為2的-3值，得出新數組[3, 4, -2, -1, 5]
} //繼續執行i++,此時i=3,此時數組元素-1下標為3，直接跳過數組元素-2的下標
}
// [-1]
arr
// (4) [3, 4, -2, 5]

正確示範：

var arr =[3, 4, -3, -2, -1, 5]
// undefined
for(var i=0;i<arr.length;i++){
if(arr[i]<0){
arr.splice(i,1)
i-- //通過退回下標，可執行忽略的那個位數上的數組元素
}
}
//undefined
arr
//(3) [3, 4, 5]

例子如下4：splice方法返回一個由刪除元素組成的新數組，沒有刪除則返回空數組，則原數組發生改變

//例子1：
var arr = [3,4,5]
//undefined
arr
// (3) [3, 4, 5]
arr.splice(1,2) //從下標為1的元素開始，拿出來2個元素作為一個數組返回，原數組發生改變
// (2) [4, 5]
arr
// [3] //原數組發生改變

//例子2：
arr.push(8,9,10)
// 6
arr
// (6) [4, 5, 6, 8, 9, 10]
arr.splice(2,0,1,2,3) //從下標為2的位置（元素6）前開始，刪除0個，新增兩個元素(在6前面新增8,9,10)
// []
arr
// (9) [4, 5, 1, 2, 3, 6, 8, 9, 10]

（2）slice —— 從已有的數組中返回選定的元素（用下標選定），做為新數組，原數組不變。如果想刪除數組中的一段元素，應該使用方法 Array.splice()

arr.slice(star,end)

如：

arr
//(9) [4, 5, 1, 2, 3, 6, 8, 9, 10]
arr.slice(2,3)//從 arr 下標為2開始，到下標為3結束(不包括3)，做為新數組，原數組不變
//[1]
arr
//(9) [4, 5, 1, 2, 3, 6, 8, 9, 10]

4、join ——加入一個任意字元串（甚至空字元串）

arr.join() //靈活應對

如：

var arr = [3,4,5]
arr
//(3) [3, 4, 5]
arr.join(-)
//"3-4-5"
arr.join(.)
//"3.4.5"

5、reverse —— 倒序法，數組裡的值進行倒序（本身發生變化），原數組會改變

arr.reverse()

如：

var arr=[3,4,5,6,7,8]
arr
//(6) [3, 4, 5, 6, 7, 8]
arr.reverse()
//(6) [8, 7, 6, 5, 4, 3] 改變原數組

假如，當數組索引（下標）不是連續或以0 開始，結果需要注意：

var a = [1,2,3,4,5]
a =[]
//[]
a[2]=2
//2
a[3]=3
//3
a[7]=4
//4
a[8]=5
//5
a.reverse()
//(9) [5, 4, empty × 3, 3, 2, empty × 2]

6、concat —— 將兩個數組合成一個數組，成為一個新數組。如：

var a = [1, 2, 3, 4, 5]
var b = [6, 7, 8, 9]
var c = a.concat(b)
//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9] //返回一個新數組，由於原數組保持不變，所以需要為這個數組賦值一個新變數
a
//(5) [1, 2, 3, 4, 5] //原數組保持不變
b
//(4) [6, 7, 8, 9] //原數組保持不變

7、sort （） 排序法，對數組進行一種內部排序。可排序數字、字元串

a.sort()

對數字排序：

var a=[5,4,3,2,1]
a.sort()
//(5) [1, 2, 3, 4, 5]

對字元串排序：

var a=[5,"a", "c", "h", "z"]
a.sort()
//(5) [5, "a", "c", "h", "z"]

假如這樣排序，結果則不是按順序排序

var a=[7,8,9,10,11]
a.sort()
//(5)[10, 11, 7, 8, 9]

不加參數，用sort排序法直接排序，它會將數組裡的元素當成字元串去排序。按照字母表排序，7就比10大，這時候我們可以在sort內部傳入自定義排序函數（比較函數）：

var a=[7,8,9,10,11]
a.sort()
//(5) [10, 11, 7, 8, 9]
a.sort(function(v1,v2){
return v1-v2
})
//(5) [7, 8, 9, 10, 11]

//或者
var friends = [{age:3,name:dog},{age:2,name:cat},{age:4,name:bird}]
friends.sort(function(v1,v2){
return v1.age -v2.age
})
//(3) [{…}, {…}, {…}]
//0: {age: 2, name: "cat"}
//1: {age: 3, name: "dog"}
//2: {age: 4, name: "bird"}
//length: 3__proto__: Array(0)

friends
//(3) [{…}, {…}, {…}]

friends.sort(function(v1,v2){
return v1.name > v2.name
})
//(3) [{…}, {…}, {…}]
// 0: {age: 4, name: "bird"}
// 1: {age: 2, name: "cat"}
// 2: {age: 3, name: "dog"}
//length: 3__proto__: Array(0)

8、 delete —— 數組中刪除數組元素可直接使用，刪除後的數組不會改變原數組長度。如：

var arr = [3,4,5]
arr
// (3) [3, 4, 5]
delete arr[2]//通過最後的輸出，則能知道數組裡的是位數屬性
//true
arr
// (3) [3, 4, empty]
console.log(arr[2])
//undefined
//undefined

以此，我們可以聯想到，如果 a[2] 被賦值為 undefined，情況也和 delete 之後的undefined 類似，delete 不會改變數組長度，也不會改變其他數據的 index 和 value 對應關係

三、如何創建一個數組

1、通過構造函數 數組，作為一個特殊對象，通過傳統的newArray創建數組 2、通過使用字面量

var arr = [5]
a.length
//1

註：使用帶初始化參數的方式創建數組的時候，最好最後不要帶多餘的逗號分隔，在不同的瀏覽器下對此處理方式不一樣。如

var a1 = [1,2,3,]
console.log(a1.length)
console.log(a1)
//該腳本在現代瀏覽器上運行結果和我們設想一樣，長度是3，但是在低版本IE下確實長度為4的數組，而最後一條數據是undefined,就會造成誤會

四、數組幾個問題

1、數組的索引 數組 也是對象，索引值 轉換為 對應字元串（如 1=>「1」 ）作為 對象屬性名，如：

var arr =[1,2,3,4]
arr[0]
//1
var i = 1
console.log(arr[i])
//2
console.log(arr[++i])
//3

注意：i++ VS ++i i++ 是後置，運行時按照：先拿i 的值 再進行++ 操作； ++i 是前置，運行時按照：先++ 操作再拿i的值 不過在做這道題的時候，我發現一旦沒有深刻理解 操作符和運行機制 的話，會導致結果不同，如：

2、數組的底層數據結構 數組 === 特殊的對象（對象，有 鍵值對 構成）。通過數組和對象的研究可以看出，數組看成在對象基礎上做一層的封裝，然後自身又增加了一些方法。如：

arr = [4,5,6]
//(3) [4, 5, 6]
//0: 4 //展開之後數組的底層數據結構
//1: 5
//2: 6
// length: 3
//__proto__: Array(0)

//或者
obj = {1:4,2:5,3:6,length:3}
// {1: 4, 2: 5, 3: 6, length: 3} //數組底層的數據結構構成
obj[1]
// 4
obj.length
// 3

2、數組裡 屬性和值 的奇怪寫法

arr [-10] = aaa
// "aaa"
arr
//(3) [4, 5, 6, -10: "aaa"]
(3) [4, 5, 6, -10: "aaa"]
// 0: 4
// 1: 5
// 2: 6
// -10: "aaa" 這是一個很奇怪的屬性和值，
// length: 3
// __proto__: Array(0)

推薦閱讀：

相關文章