js陣列操作方法小結

大笨鐘的W發表於2019-02-16
JS陣列

Array操作方法

建立陣列

var arr=[]
var arr = new Array()
var arr1 = ["1", "2", "3"]
var arr2 = ["a", "b", "c"]
var arrLike = [{
    name: `123`,
    age: `18`
}, {
    name: `abc`,
    age: `12`
}]  //類陣列
  • 將類陣列轉換真正的陣列Array.from(array)

eg:

Array.from(arrLike)

修改陣列

  • 合併陣列，返回新陣列，原陣列不變
Array.prototype.concat(arr1, arr2)  //["1", "2", "3", "a", "b", "c"]
arr1.concat(arr2) //["1", "2", "3", "a", "b", "c"]
  • 陣列轉化為字串
Array.prototype.join(separator)  //以separator（預設為逗號）拼接為字串。
Array.prototype.toString()   //把陣列轉換為字串, 陣列中的元素之間用逗號分隔。

eg:

arr1.join() //"1,2,3"
arr1.join(``) //"123"
arr1.join(`/`) //"1/2/3"
arr1.toString() //"1,2,3"

填充

Array.prototype.fill(value,start,end)
//value 為填充值
//start 為填充陣列元素起點座標
//end 為填充陣列元素終點座標

eg:

arr1.fill(0,1,2) // ["1", 0, "3"]

判斷

Array.isArray()
Array.isArray(arr1) //true

篩選

Array.prototype.filter()
Array.prototype.map()

eg:

var words = [
    {
        id: `1`,
        name: `123`
    },
    {
        id: `2`,
        name: `abc`
    }
]

words.filter(d => d.id === `1`) //[{id: "1" , name: "123"}] 返回結果為true的值
arr1.map(x => x * 2)  // [2,4,6] 返回所有項

排序

Array.prototype.reverse()   //位置顛倒
Array.prototype.sort()

eg:

arr1.reverse() //["3", 2, "1"]
arr1.sort()  //["1", "2", "3"]

遞迴

Array.prototype.reduce()

eg:

const reducer = (accumulation,currentValue)=>{
    accumulation + currentValue
}
arr1.reduce(reducer)       // 1+2+3=6
arr1.reduce(reducer,4)     //4+1+2+3=10

查詢

Array.prototype.some(callback)    //執行callback函式，直到callback返回true

var even =  function(element){
    return element % 2 === 0
}

arr1.some(even)  //true
Array.prototype.every(callback) //陣列的所有元素是否都通過callback函式

function even(currentValue){
    return currentValue < 5
}

arr1.every(even)
Array.prototype.find(callback) //在陣列中返回符合callback第一個元素的值

function even(value){
    return even % 2 === 0
}

arr1.find(even) // 2
Array.prototype.findIndex(callback)  //返回陣列中滿足callback的第一個元素的索引。否則返回-1

function even(value){
    return value % 2 === 0
}

arr1.findIndex(even)   // 1
Array.prototype.includes(searchElement) //是否包含seachElement

arr1.includes(2)  //true

arr1.includes(0)  //false

增刪

  • pop()
Array.prototype.pop()  //刪除陣列的最後一個元素，並返回改元素的值

arr1.pop() //  3  arr1=[1,2]
  • push()
Array.prototype.push()  //增加元素到陣列末尾，返回增加的元素

arr1.push(4) // 4   arr1=[1, 2, 3, 4]
  • shift()
Array.prototype.shift()  //刪除陣列第一個元素，返回這個元素值

arr1.shift()  // 1   arr1=[2,3]
  • unshift()
Array.prototype.unshift()   //增加元素到陣列開頭 ，返回陣列長度  

arr1.unshift(0) //4  arr1=[0,1,2,3]
  • slice()
Array.prototype.slice(start,end) //返回[start,end]淺拷貝到一個新陣列，原陣列不會被修改

arr1.slice(0,2)  //[1,2]  arr1=[1,2,3]
  • splice()
Array.prototype.splice()  //通過刪除現有元素或新增新元素來更改一個陣列的內容，原陣列會被修改

Array.prototype.slice(replace-index,replace-num,replace-value)

//replace-num = 0 => inserts
arr1.splice(1,0,0)  //arr1=[1,0,2,3]

//replace-num !== 0 => replace
arr1.splice(1,1,4)  //返回被替換的元素 =>2  arr1=[1,4,3]

迴圈遍歷

  • map()
Array.prototype.map(callback)

arr1.map(val=>val*2)  // [2, 4, 6]
  • forEach()
Array.prototype.forEach(callback)

arr1.forEach(elem =>{
    console.log(elem)
})

// 1
// 2
// 3
  • entries()
Array.prototype.entries()   //返回一個新的Array Iterator物件，該物件包含陣列中每個索引的鍵/值對

arr1 = [`a`, `b`, `c`]

for( let [index,elem] of (arr1).entries()){
    console.log(index,elem)
}

// 0 "a"
// 1 "b"
// 2 "c"
  • keys()
Array.prototype.keys()  //返回一個新的Array迭代器，它包含陣列中每個索引的鍵

for(let index of(arr1).keys()){
    console.log(index)
}

// 0
// 1
// 2
  • values()
Array.prototype.values()  //返回一個新的Array迭代物件，包含陣列每個索引值

for(let elem of(arr1).values()){
    console.log(elem)
}

// a
// b
// c

相關文章