Array Cardio ll

主題: 了解原生陣列的各種方法 (some, every, find , findIndex)

這要搭配題目來看(直接附上作者github題目連結)

練習1:

is at least one person 19 or older?

is everyone 19 or older?

我這邊是使用ES6的語法, 寫起來直覺也更簡潔

const isAdult = people.some(item => ((new Date().getFullYear() - item.year) >= 19 )
console.log(isAdult)// true

const allAdult = people.every(item => ((new Date().getFullYear()- item.year) >= 19)
console.log(allAdult) //false

其實兩個寫起來都一樣, 但是有不同的結果, 這就是表示用不同函式會有不一樣的結果
值得一提的是, 他是輸出false, true, 這樣前面也要透過新的變數存取喔!

---

練習2:

find the comment with the ID of 823423

find很像是filter, 但是不會回傳剩餘的陣列給你, 而是回傳找到符合的第一項.
所以如果有兩筆資料一樣, 也只會找到第一筆.
簡單來講, 就是找本體.

const comment = comments.find(comment => comment.id === 823423)
console.log(comment.text)// super good

常用場景:
檢查購物車有沒有特定項目, 有的話可以在做其他操作, 例如更新.

練習3:

Find the comment with this ID
delete the comment with the ID of 823423

這題順便練習了, 拿到index後怎麼刪除資料這件事

const index = comments.findIndex(comment => comment.id === 823423)
console.log(index) //1

常用場景:
檢查購物車有沒有特定項目, 有的話可以在做其他操作, 例如刪除.

slice, splice 整理

改變原本的結構, 就像是push一樣

comments.splice(index, 1) 
console.log(comments)

那被刪掉怎麼辦? 除非把它給記下來!

const ans = comments.splice(index, 1) 
console.log(ans) // {text: "Super good", id: 823423}

不改變原本的結構

const newComments = [
    ...comments.slice(0, index)
    ...comments.slice(index+1)
]
console.log(newComments)

alex 示範的解法, 好像更容易理解, 雖然是一樣的東西…

const ans1 = comments.slice(0 , index)
const ans2 = comments.slice(index + 1)
const ans3 = [...ans1, ...ans2]

另外在框架操作上, 建議的作法是資料先複製, 在進行操作.
資料來源最好都是從server端拿, 而不是直接改變資料庫的東西

const ans4 = [...comments].splice(ans3, 1)

額外補充

let cart = [
    {id : 1, count : 1},
    {id : 2, count : 1},
    {id : 3, count : 1},
    {id : 4, count : 1}
]

更新id: 3的數量變成5

const item = cart.find(item => item.id === 3)
item.count = 5 
console.log(cart)

let newCart = [...cart]
newCart[0].count = 5 
console.log(cart[0], newCart[0]) //兩者相同

// 重點是先傳位置和資料, 在check改變的部分

let obj1 = {count : 1} // 5 
let obj2 = obj1 // 5 
let obj3 = Object.assign({}, obj2)
obj1.count = 5  
let obj4 = JSON.parse(JSON.stringly(obj3))

console.log(obj1.count + obj2.count + obj3.count + obj4.count) //16

slice其餘補充

其實和splice 一樣, 裡面數字代表的都是index, 而splice是含前不含後面, 另外就是裡面index也可以是數字

var arr = [1, 2, 3, 4, 6, 7]
console.log(arr.slice(1, -1)) // 2, 3, 4, 6

裡面的-1, 就是代表最後一位

var arr = [1, 2, 3, 4, 6, 7]
console.log(arr.slice(1, 0)) // 2, 3, 4, 6, 7
console.log(arr.slice(1)) // 2, 3, 4, 6, 7

pop就是把陣列的最後一筆資料拔除, 也可以透過slice達到相同的效果

實做pop效果

let arr = [1, 2, 3, 4, 5, 6]

function poped(arr){
    return arr.slice(0, arr.length -1)
}

console.log(poped(poped(arr))) // [1, 2, 3, 4]

最後這樣的效果比, 內建的方式還要好用.

講解

---

結語

以下的methods會回傳什麼?

some -> true/false
every -> true/false
find -> 回傳值
findIndex -> 回傳值

此範例以Alex宅幹嘛的教學和wes bros為主