javascript數(shù)組操作

今天針對(duì)javascript的數(shù)組的一些常見(jiàn)操作進(jìn)行一些講解，希望對(duì)給為開(kāi)發(fā)者有幫助。 先看下面常見(jiàn)的三種循環(huán)。

for循環(huán)

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 循環(huán)

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循環(huán)

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循環(huán)和 for of循環(huán)都是遍歷數(shù)組本身，但是區(qū)別是 i的值，前者是索引，后者是數(shù)組值。 for in循環(huán)不僅遍歷數(shù)組本身，還遍歷了原型遍歷，同時(shí)可以遍歷對(duì)象。這里指的注意的是 i的值是 string類(lèi)型的 "0,1,2,3" 總結(jié)：for循環(huán)能滿足我們的大多數(shù)情況，但是是最麻煩的，拿到的是索引，不如for of那樣直接拿到數(shù)組值。for in循環(huán)功能是最強(qiáng)的，能遍歷對(duì)象，但是缺點(diǎn)第遍歷了原型對(duì)象，有時(shí)候可能對(duì)我們的遍歷產(chǎn)生影響。 上面的3個(gè)循環(huán)都能通過(guò) break跳出循環(huán)。

forEach循環(huán)

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循環(huán)和 for in循環(huán)是很像的，區(qū)別是 forEach是以回調(diào)函數(shù)的形式來(lái)遍歷的，參數(shù)分別是數(shù)組值，索引和數(shù)組本身，遍歷期間可以通過(guò) row對(duì)數(shù)組本身進(jìn)行處理，會(huì)改變數(shù)組本身。 forEach對(duì)于需要中斷遍歷就沒(méi)那么友好，不能通過(guò)break來(lái)結(jié)束循環(huán)。大多數(shù)情況下 forEach很容易滿足我們的遍歷，但是forEach循環(huán)存在上下文變量的問(wèn)題（如果不能用箭頭函數(shù)的情況下，這里通過(guò)箭頭函數(shù)避免了該問(wèn)題）。

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遍歷參數(shù)是一樣的，同樣是通過(guò)回調(diào)函數(shù)來(lái)遍歷整個(gè)數(shù)組，不同是 map遍歷通過(guò)return給我們返回一個(gè)全新的數(shù)組。

filter操作

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

filter操作是用來(lái)數(shù)組過(guò)濾的，找出符合條件的值并返回一個(gè)新的數(shù)組，回調(diào)函數(shù)的參數(shù)跟forEach一樣，通過(guò)返回true false來(lái)判斷是否符合新數(shù)組的條件。

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操作是用來(lái)合并數(shù)組的，并返回一個(gè)新的數(shù)組。這里有個(gè)騷操作是 arr.concat()只需要一行代碼就能輕松實(shí)現(xiàn)數(shù)組的拷貝。

sort排序

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

sort對(duì)數(shù)組進(jìn)行排序，接受一個(gè)回調(diào)函數(shù)，函數(shù)的參數(shù)是連續(xù)的數(shù)組2項(xiàng)，上面的代碼類(lèi)似實(shí)現(xiàn)了一個(gè)冒泡排序，通過(guò)返回 true false來(lái)判斷是否需要調(diào)換位置，這些操作直接作用在原數(shù)組上。

一些其他操作

//shift:刪除原數(shù)組第一項(xiàng)，并返回刪除元素的值；如果數(shù)組為空則返回undefined
//unshift:將參數(shù)添加到原數(shù)組開(kāi)頭，并返回?cái)?shù)組的長(zhǎng)度
//pop:刪除原數(shù)組最后一項(xiàng)，并返回刪除元素的值；如果數(shù)組為空則返回undefined
//push:將參數(shù)添加到原數(shù)組末尾，并返回?cái)?shù)組的長(zhǎng)度
//reverse:將數(shù)組反序
//splice(start,deleteCount,val1,val2,...):從start位置開(kāi)始刪除deleteCount項(xiàng)，并從該位置起插入val1,val2,...
//slice(start,end):返回從原數(shù)組中指定開(kāi)始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組
//join(separator):將數(shù)組的元素組起一個(gè)字符串，以separator為分隔符，省略的話則用默認(rèn)用逗號(hào)為分隔符
//some(),every()判斷數(shù)組中是否存在滿足條件的值，前者有一個(gè)為true則返回true，后者所有未true才返回true，有點(diǎn)像&&和||。

//這里寫(xiě)一個(gè)數(shù)組比較的問(wèn)題
[]==[]
//prints:false
var a1 =[1, 2, 3]
var a2 =[1, 2, 3]
a1.toString() == a2.toString()
//prints:true
//上面的方式巧妙的避開(kāi)了大量代碼來(lái)判斷數(shù)組是否相同

對(duì)象操作

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方法可以將對(duì)象的key組成一個(gè)數(shù)組，得到數(shù)組時(shí)候我們就可以使用forEach等一些方法來(lái)遍歷這個(gè)對(duì)象了。 Object.assign能合并n個(gè)對(duì)象的屬性，后面的屬性會(huì)覆蓋前面的屬性，最終得到一個(gè)新的對(duì)象。這2個(gè)es6的方式是很實(shí)用的。

總結(jié)

數(shù)組是javascript常見(jiàn)的數(shù)組類(lèi)型，操作很多，選擇適當(dāng)?shù)姆绞侥芴岣叱绦蛐阅芎痛a可讀性。部分函數(shù)是es6才有的這里不做說(shuō)明，具體各種操作性能也不做對(duì)比。