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纔有的這裏不做說明,具體各種操作性能也不做對比。 最後覺得有用的觀衆可以分享給好友和關注該公衆號。
* 識別下方二維碼關注我的個人公衆號。大家都在這裏了,你在哪裏呢?*