javascript陣列操作

伊澤瑞爾發表於2018-08-25
JavaScript陣列

javascript陣列操作

今天針對javascript的陣列的一些常見操作進行一些講解，希望對給為開發者有幫助。 先看下面常見的三種迴圈。

for迴圈
var arr =[1, 3, 8, 4]
for (var i = 0,j = arr.length; i < j; i++) {
    console.log(arr[i], i)
}
// Prints:
// [0] is 1 0
// [1] is 3 1
// [2] is 8 2
// [3] is 4 3
複製程式碼
for in 迴圈
var arr =[1, 3, 8, 4]
var map ={a: 1,b: 2,c: 3}
Array.prototype.text =5
for (var i in arr) {
    console.log(arr[i], i)
}

for (var i in map) {
   console.log(map[i], i)
}
// Prints arr:
// [0] is 1 "0"
// [1] is 3 "1"
// [2] is 8 "2"
// [3] is 4 "3"
// [4] is 5 "text"

//prints map:
// [0] is 1 "a"
// [1] is 2 "b"
// [2] is 3 "c"

複製程式碼
for of迴圈
var arr =[1, 3, 8, 4]
for (var i of arr) {
    console.log(i)
}
// Prints:
// [0] is 1
// [1] is 2
// [2] is 3
// [3] is 8
// [4] is 4

複製程式碼

可以看到， for迴圈和 for of迴圈都是遍歷陣列本身，但是區別是 i的值，前者是索引，後者是陣列值。 for in迴圈不僅遍歷陣列本身，還遍歷了原型變數，同時可以遍歷物件。這裡值得注意的是 i的值是 string型別的 "0,1,2,3" 總結：for迴圈能滿足我們的大多數情況，但是是最麻煩的，拿到的是索引，不如for of那樣直接拿到陣列值。for in迴圈功能是最強的，能遍歷物件，但是缺點是遍歷了原型物件，有時候可能對我們的遍歷產生影響。 上面的3個迴圈都能通過 break跳出迴圈。

forEach迴圈
var arr =[1, 3, 8, 4]
arr.forEach((row, index, test) = >{
    console.log(row, index, test)
})
// Prints:
// [0] is 1 0 arr
// [1] is 2 1 arr
// [2] is 3 2 arr
// [3] is 8 3 arr
// [4] is 4 4 arr
複製程式碼

可以看到 forEach迴圈和 for in迴圈是很像的，區別是 forEach是以回撥函式的形式來遍歷的，引數分別是陣列值，索引和陣列本身，遍歷期間可以通過 row對陣列本身進行處理，會改變陣列本身。 forEach對於需要中斷遍歷就沒那麼友好，不能通過break來結束迴圈。大多數情況下 forEach很容易滿足我們的遍歷，但是forEach迴圈存在上下文變數的問題（如果不能用箭頭函式的情況下，這裡通過箭頭函式避免了該問題）。

map遍歷
var arr =[1, 3, 8, 4]
var newArr = arr.map((row, index, test) = >{
    return row
})
arr.push(5)
console.log(arr, newArr)
// Prints:
//[1,3,8,4,5],[1,3,8,4]

複製程式碼

map遍歷和forEach遍歷引數是一樣的，同樣是通過回撥函式來遍歷整個陣列，不同是 map遍歷通過return給我們返回一個全新的陣列。

filter操作
var arr =[1, 3, 8, 4]
var newArr = arr.filter((row, index, test) = >{
    return row >= 5
})
console.log(newArr)
// Prints:
//[8]

複製程式碼

filter操作是用來陣列過濾的，找出符合條件的值並返回一個新的陣列，回撥函式的引數跟forEach一樣，通過返回true false來判斷是否符合新陣列的條件。

concat操作
var arr =[1, 3, 8, 4]
var arr2 =[4, 5]
var newArr = arr.concat(arr2)
var newArr1 = arr.concat()
console.log(newArr, arr2)
// Prints:
//[1, 3, 8, 4, 4, 5]
//[1, 3, 8, 4]

複製程式碼

concat操作是用來合併陣列的，並返回一個新的陣列。這裡有個騷操作是 arr.concat()只需要一行程式碼就能輕鬆實現陣列的拷貝。

sort排序
var arr =[1, 3, 8, 4]
arr.sort((a, b) = >a > b)
console.log(arr)
// Prints:
// [1, 3, 4, 8]

複製程式碼

sort對陣列進行排序，接受一個回撥函式，函式的引數是連續的陣列2項，上面的程式碼類似實現了一個氣泡排序，通過返回 true false來判斷是否需要調換位置，這些操作直接作用在原陣列上。

一些其他操作
//shift:刪除原陣列第一項，並返回刪除元素的值；如果陣列為空則返回undefined
//unshift:將引數新增到原陣列開頭，並返回陣列的長度
//pop:刪除原陣列最後一項，並返回刪除元素的值；如果陣列為空則返回undefined
//push:將引數新增到原陣列末尾，並返回陣列的長度
//reverse:將陣列反序
//splice(start,deleteCount,val1,val2,...):從start位置開始刪除deleteCount項，並從該位置起插入val1,val2,...
//slice(start,end):返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列
//join(separator):將陣列的元素組起一個字串，以separator為分隔符，省略的話則用預設用逗號為分隔符
//some(),every()判斷陣列中是否存在滿足條件的值，前者有一個為true則返回true，後者所有未true才返回true，有點像&&和||。

//這裡寫一個陣列比較的問題
[]==[]
//prints:false
var a1 =[1, 2, 3]
var a2 =[1, 2, 3]
a1.toString() == a2.toString()
//prints:true
//上面的方式巧妙的避開了大量程式碼來判斷陣列是否相同
複製程式碼
物件操作
var map1 ={name: 'jack',age: 21,sex: '0'}
var map2 ={phone: '123456'}
var map3 =Object.assign(map1, map2)
var arr =Object.keys(map1)
console.log(arr)
console.log(map3)
//prints:
//["name", "age", "sex"]
//{name: "jack", age: 21, sex: "0", phone: "123456"}

複製程式碼

可以看到 Object.keys方法可以將物件的key組成一個陣列，得到陣列時候我們就可以使用forEach等一些方法來遍歷這個物件了。 Object.assign能合併n個物件的屬性，後面的屬性會覆蓋前面的屬性，最終得到一個新的物件。這2個es6的方式是很實用的。

總結

陣列是javascript常見的陣列型別，操作很多，選擇適當的方式能提高程式效能和程式碼可讀性。部分函式是es6才有的這裡不做說明，具體各種操作效能也不做對比。 最後覺得有用的觀眾可以分享給好友和關注該公眾號。

** 識別下方二維碼關注我的個人公眾號。大家都在這裡了，你在哪裡呢？**

公眾號

相關文章