midium 版本

異動相關

【原始資料】
※本文 變數 會一直用到文章尾端
※基本上有回傳值的 function 不會影響原陣列資料

let arr = [
  {
    name: 'A',
    isChecked: true
  },
  {
    name: 'B',
    isChecked: false
  },
];

Array.prototype.push()

新增元素至陣列

arr.push({name: 'C', isChecked: false});
console.log(arr);
// ------------------------------
// [{name: 'A', isChecked: true },
//  {name: 'B', isChecked: false},
//  {name: 'C', isChecked: false}]

Array.prototype.pop()

移除陣列最後一個元素

let last = arr.pop(); //pop()會回傳值 
console.log(last);
// ------------------------------
// {name: 'C', isChecked: false}

console.log(arr);
// ------------------------------
// [{name: 'A', isChecked: true },
//  {name: 'B', isChecked: false}]

Array.prototype.concat(): (Object[])

合併陣列、元素

let newData = {name: 'Z', isChecked: false};
let Newarr = arr.concat(newData);
console.log(Newarr)
// ------------------------------
// [{name: 'A', isChecked: true },
//  {name: 'B', isChecked: false},
//  {name: 'Z', isChecked: false}]

Array.prototype.splice()

splice(需動作之索引位置, 刪除元素數量, 插入元素內容)

arr.splice(0, 0, {name: 'C', isChecked: false});
console.log(arr);
// ------------------------------
// [{name: 'C', isChecked: false},
//  {name: 'A', isChecked: true },
//  {name: 'B', isChecked: false}]


arr.splice(2, 1, {name: 'D', isChecked: false});
console.log(arr);
// ------------------------------
// [{name: 'C', isChecked: false},
//  {name: 'A', isChecked: true },
//  {name: 'D', isChecked: false}]

篩選相關

【目前資料】

// arr
// ------------------------------
// [{name: 'C', isChecked: false},
//  {name: 'A', isChecked: true },
//  {name: 'B', isChecked: false}]

Array.prototype.filter(): (Object[])

篩選

let brr = arr.filter(v=> v.isChecked===false);
                  //(v=> { return !v.isChecked }); //可簡寫成這樣
console.log(arr);
// 原陣列不會被改變到值
// ------------------------------
// [{name: 'C', isChecked: false},
//  {name: 'A', isChecked: true },
//  {name: 'D', isChecked: false}]

console.log(brr);
// 新陣列
// ------------------------------
// [{name: 'C', isChecked: false},
//  {name: 'D', isChecked: false}]


let crr = arr.filter(v=> v.name==='Z');
console.log(crr);
// 若無則回傳空陣列
// ------------------------------
// []

Array.prototype.every(): (Boolean)

是否「全部」符合條件

let res = arr.every(v=> v.isChecked===true);
console.log(res);
// ------------------------------
// false

let res2 = brr.every(v=> v.isChecked===false);
console.log(res2);
// ------------------------------
// true

Array.prototype.some(): (Boolean)

是否「部份」符合條件

let res3 = arr.some(v=> v.name==='C');
console.log(res3);
// ------------------------------
// true

Array.prototype.find(): (Object | undefined)

尋找

let fd = arr.find(v=> v.isChecked===false);
console.log(fd);
// 有兩個項目符合，只回傳第一個找到的
// ------------------------------
// {name: 'C', isChecked: false}

let fd2 = arr.find(v=> v.name==='Z');
console.log(fd2);
// !小心 無符合會回傳 undefined
// ------------------------------
// undefined

Array.prototype.findIndex(): (number)

尋找，回傳所在的位置

let indx = arr.findIndex(v=> v.name==='A');
console.log(indx);
// 從 0 開始
// ------------------------------
// 1

let indx2 = arr.findIndex(v=> v.name==='Z');
console.log(indx2);
// 找不到皆回傳 -1
// ------------------------------
// -1

其他

【目前資料】

// arr
// ------------------------------
// [{name: 'C', isChecked: false},
//  {name: 'A', isChecked: true },
//  {name: 'D', isChecked: false}]

Array.prototype.forEach()

( v, i, array )： (正處理的項目, 正處理的項目索引, 舊陣列 )

//          必須 可選 可選
arr.forEach((v, i, array)=> {
  console.log(i, v.name);
})
// ------------------------------
// 0 "C"
// 1 "A"
// 2 "D"

arr.forEach((v, i, array)=> {
  console.log(array[i]);
})
// ------------------------------
// {name: 'C', isChecked: false}
// {name: 'A', isChecked: true }
// {name: 'D', isChecked: false}

arr.forEach((v)=> {
  v.name = v.name + "OOO";
})
console.log(arr);
// ------------------------------
// [{name: 'COOO', isChecked: false},
//  {name: 'AOOO', isChecked: true },
//  {name: 'DOOO', isChecked: false}]

Array.prototype.sort()

水很深的排序
延伸閱讀１：淺談 JS sort() 到背後排序方法
延伸閱讀２：關於 Array.prototype.sort() 排序這件不小的小事

arr.sort((a, b)=> { // 實務來說以文字排序會先設大寫再做比較 toUpperCase()
  return a.name < b.name ? -1 : 1;
})
console.log(arr)
// 遞增排序
// ------------------------------
// [{name: 'AOOO', isChecked: true },
//  {name: 'COOO', isChecked: false},
//  {name: 'DOOO', isChecked: false}]

arr.sort((a, b)=> {
  return a.name >b.name ? -1 : 1;
})
console.log(arr)
// 遞減排序
// ------------------------------
// [{name: 'DOOO', isChecked: false},
//  {name: 'COOO', isChecked: false},
//  {name: 'AOOO', isChecked: true }]

Array.prototype.map(): (Object[])

延伸閱讀１：# 非常彈性好用的陣列 Array 方法 map()

let names = arr.map((v)=> {
  if(isChecked) {
    v.name 
  }
})
console.log(names)
// 取得陣列所有 isChecked=True 的 name 物件
// ------------------------------
// ['DOOO','COOO','AOOO']

Array.prototype.reduce()

(accumulator , currentValue, currentIndex, array) => { * … *}, initialValue
(上一輪累計加總, 目前的值, 這一輪迭代索引, 陣列內容)=> { * … *}, 初始值
延伸閱讀１：Day 13 咩色用得好 — Array.prototype.reduce (新手摧毀者)
延伸閱讀２：Array.prototype.reduce()

// ------------------------------
// [{name: 'DOOO', isChecked: false},
//  {name: 'COOO', isChecked: false},
//  {name: 'AOOO', isChecked: true }]

let SumName = arr.reduce((accumulator, currentValue) => 
  accumulator + currentValue.name, 'init'
);
})
console.log(SumName)
// 隨便亂舉例-.- 實務用法請參考延伸閱讀
// ------------------------------
// "initDOOOCOOOAOOO"