JavaScript 數組操做方法 和 ES5數組拓展

JavaScript中數組有各類操做方法，如下經過舉例來講明各類方法的使用：

數組操做方法

push

在數組最後添加一個元素

var arr=[3,4,5,6] console.log(arr) //[3, 4, 5, 6] arr.push("evenyao") //字符串須要加""，數字不加 console.log(arr) //[3, 4, 5, 6, "evenyao"] 

 

pop

把數組最後一位取出來，並返回，且原來數組發生變化

var arr=[3, 4, 5, 6, "evenyao"] console.log(arr) //[3, 4, 5, 6, "evenyao"] var value = arr.pop() //arr.pop()的返回值就是取出的值，但這裏是undefined是由於前面有var value console.log(value) //"evenyao" console.log(arr) //[3, 4, 5, 6] 

 

shift

把數組第一位取出來，並返回，且原來數組發生變化

var arr=["root",3, 4, 5, 6, "evenyao"] console.log(arr) //["root",3, 4, 5, 6, "evenyao"] var value = arr.shift() console.log(value) //"root" console.log(arr) //[3, 4, 5, 6, "evenyao"] 

 

unshift

在數組第一位新增一個元素

var arr=[3, 4, 5, 6, "evenyao"] console.log(arr) //[3, 4, 5, 6, "evenyao"] arr.unshift("root") //字符串須要加""，數字不加 console.log(arr) //["root",3, 4, 5, 6, "evenyao"] 

 

join

把數組元素使用參數做爲鏈接符，連接成字符串，不會修改原數組的內容

var arr=[3, 4, 5, 6, "evenyao"] console.log(arr.join('-')) //3-4-5-6-evenyao console.log(arr) //[3, 4, 5, 6, "evenyao"] 

 

splice

splice方法用於一次性解決數組添加、刪除（這兩種方法一結合就能夠達到替換效果），方法有三個參數

1.開始索引
2.刪除元素的位移
3.插入的新元素，固然也能夠寫多個

使用splice完成刪除

var arr=[3, 4, 5, 6, "evenyao"] var arr2 = arr.splice(1,2) //從下標爲1的元素開始，取出2個元素做爲一個數組的返回，原數組發生改變 console.log(arr) //[3, 6, "evenyao"] console.log(arr2) //[4, 5] 

使用splice完成新增

var arr=[3, 4, 5, 6, "evenyao"] arr.splice(1,0,8,9,"yes") //從下標爲1的位置（元素4）開始，刪除0個，新增三個元素（8,9,"yes"），位置在（元素4）以前 console.log(arr) //[3, 8, 9, "yes", 4, 5, 6, "evenyao"] 

 

slice

取出元素（區間）可做爲新數組。但不同的是原數組不發生變化

var arr=[3, 4, 5, 6, "evenyao"] var arr2 = arr.slice(2,3) //從arr下標爲2開始，到下標爲3結束（不包括3，即只取了一個），做爲新數組，原數組不變 console.log(arr) //[3, 4, 5, 6, "evenyao"] console.log(arr2) //[5] 

 

reverse

將數組逆序，會修改原數組

var arr=[3, 4, 5, 6, "evenyao"] console.log(arr) //[3, 4, 5, 6, "evenyao"] arr.reverse() console.log(arr) //["evenyao", 6, 5, 4, 3] 

 

concat

用於拼接數組，但不會修改任何一個原始數組，也不會遞歸連接數組內部數組

var a = [1,2,3,4,5]; var b = [6,7,8,9]; console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a); //[1, 2, 3, 4, 5] console.log(b); //[6, 7, 8, 9] 

也由於不會改變任何一個原始數組，所以能夠用concat來進行數組的深拷貝，即：

var arr=[3, 4, 5, 6, "evenyao"] var arr2 = arr.concat([]) //至關於和一個空數組進行了拼接，而後生成了arr2看上去和arr如出一轍，可是倒是兩塊不同的內存空間 console.log(arr) //[3, 4, 5, 6, "evenyao"] console.log(arr2) //[3, 4, 5, 6, "evenyao"] arr === arr2 //false 

 

sort

用於對數組進行排序，會改變原數組

var arr=[5,4,3,2,1] arr.sort() console.log(arr) //[1, 2, 3, 4, 5] 

可是有一些狀況下狀況下會變成下面這樣：

var arr=[7,8,9,10,11] arr.sort() console.log(arr) //[10, 11, 7, 8, 9] 

由於按照字母表排序，7比10大，這時候咱們須要傳入自定義排序函數

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

其餘案例：

var users = [ { name: 'aaa', age: 21 }, { name: 'baa', age: 18 }, { name: 'abc', age: 24 } ] // 按age 從小到大排序 var sortByAge = users.sort(function(v1, v2){ return v1.age > v2.age }) // 按name從大到小排序 var sortByName = users.sort(function(v1, v2){ return v1.name > v2.name })

ES5 數組拓展

ES5爲Array作了大幅拓展

.indexOf / .lastIndexof

該方法用於查找數組內指定元素的位置，查到第一個以後返回其索引，沒有找到則返回-1。lastIndexOf反向搜索，查到第一以後，返回其索引，但順序仍是取正序。

var arr = [2,3,4,"root","evenyao",3,8,7] console.log(arr.indexOf(3)) //1 console.log(arr.indexOf(11)) //-1 console.log(arr.lastIndexof(3)) //5 

 

forEach

遍歷數組，參數爲一個回調函數，回調函數有三個參數

1. 當前元素 value
2. 當前元素索引值 i
3. 整個數組 array

var arr = [1,2,3,4,5,6] arr.forEach(function(value,i,array){ array[i]= value + 1 }) console.log(arr); //[2, 3, 4, 5, 6, 7] 

var arr = [3,4,"evenyao"] arr.forEach(function(value,index){ console.log('' + value+value) }) //33 //44 //evenyaoevenyao 

 

map

遍歷數組，回調函數。返回值作操做以後組成一個新數組返回，新數組索引結構和原數組一致，原數組不變

var arr = [1,2,3,4,5,6] var arr2 = arr.map(function(val){ return val * val }) console.log(arr) //[1, 2, 3, 4, 5, 6] console.log(arr2) //[1, 4, 9, 16, 25, 36] 

 

every、some

邏輯斷定，回調函數返回一個布爾值

• every是全部函數的每一個回調函數都返回true，才返回true，遇到false就終止執行，返回false

var arr = [1,2,-1,0,5] arr.every(function(val){ return val>0 }) //false 

 

 

 

var arr = [1,2,1,3,5] arr.every(function(val){ return val>0 }) //true 

 

 

• some是存在有一個回調函數返回true就終止執行並返回true，不然返回false

var arr = [1,2,-1,0,5] arr.some(function(val){ return val>0 }) //true 

  

 

filter

返回數組的一個子集，回調函數用於邏輯判斷是否返回，返回true則把當前元素加入到返回數組中，false則不加。新數組只包含返回true的值，原數組保持不變。

var arr = [3,5,6,-1,-2,-3] var arr2 = arr.filter(function(val){ return val > 0 }) console.log(arr) //[3, 5, 6, -1, -2, -3] console.log(arr2) //[3, 5, 6] 

其餘案例：

var users = [ { name: "John", age: 15 }, { name: "Pete", age: 19 }, { name: "Ann", age: 12 } ] //篩選age > 18的用戶 var age18 = users.filter(function(user){ return user.age > 18 }) console.log(age18) 

 

 

 

var users = [ { name: "John", age: 15 }, { name: "Pete", age: 19 }, { name: "Ann", age: 12 } ] //篩選姓名中含有'n'的用戶 var namehasn = users.filter(function(user){ return user.name.indexOf('n')>-1 }) console.log(namehasn) 

 

 

 

reduce

遍歷數組，調用回調函數，將數組元素組合成一個值，不影響原數組

1. 回調函數：把兩個值合爲一個，返回結果
2. value，一個初始值，可選

var arr = [3,4,5] arr.reduce(function(v1,v2){ return v1 + v2 }) //12 arr.reduce(function(v1,v2){ return v1 * v2 }) //60 //含value初始值 arr.reduce(function(v1,v2){ return v1 + v2 },10) //22 arr.reduce(function(v1,v2){ return v1 * v2 },10) //600

參考連接

• 參考 阮一峯 javascript 教程
• 參考 JavaScript 之 對象/JSON/數組