iT邦幫忙

1

JS30 Day 7 - Array Cardio Day 2學習筆記

  • 分享至 

  • twitterImage
  •  

今天,這個單元主要是銜接Day4,練習並熟悉關於陣列的一些方法,
如比對資料、搜尋資料、刪除增加資料等等。
而題目分為5題

此處為題目會用到的資料


    const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];


    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good1', id: 823423 },
      { text: 'Super good2', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];

第一題 Array.prototype.some():尋找資料是否有年齡為19歲(含)以上的人

用來檢查陣列中有任何一筆符合條件的資料,有的話返回true,否則false
通常用於比較兩個陣列


    const ans1 = people.some(p => {
      return new Date().getFullYear() - p.year >= 19
    });
    console.log(ans1); //true
    

第二題 Array.prototype.every():判斷是否全部資料年齡都為19歲(含)以上的人

用來檢查陣列中是否全部資料都符合條件,有的話返回true,否則false


    const ans2 = people.every(p => {
      return new Date().getFullYear() - p.year >= 19
    });
    console.log(ans2); // false
    

第三題 Array.prototype.find():找尋資料中id 為 823423的資料

用來找尋陣列中第一筆符合條件的資料,並返回其資料,類似filter,但filter會保留所有符合條件的。
如果要每筆都查盡量用filter,而只要找一筆資料就用find


    const ans3 = comments.find(comment => {
      return comment.id === 823423;
    });
    // 我刻意在資料中加一筆id相同的資料,但回傳第一筆符合的就停止了
    console.log(ans3); // text: {"Super good1", id: 823423}
    

find大多會運用在更新一筆特定資料,如(購物車)如下:


    let cart = [
      {id: 1,count: 1},
      {id: 2,count: 1},
      {id: 3,count: 1},
      {id: 4,count: 1}
    ];
    const item = cart.find(item => {
      console.log(item.id); // 到3就停止了,因為已找到目標
      return item.id === 3;
    });
    // 將item的count更新為8
    item.count = 8;
    console.log(cart);
    // 0: {id: 1, count: 1}
    // 1: {id: 2, count: 1}
    // 2: {id: 3, count: 8}
    // 3: {id: 4, count: 1}
    

第四題 Array.prototype.findIndex():找尋資料中id 為 823423的資料

用來找尋陣列中第一筆符合條件的資料,並返回其下標(找編號)


    const ans4 = comments.findIndex(comment => {
      return comment.id === 823423;
    });
    console.log(ans4); // 1
    

第五題 arrayObject.slice(start,num):刪除資料中id 為 823423的資料

arrayObject.splice(start,num)

start:起始位置 num:操作個數
slice, splice差別在於splice會影響原資料,slice不會

splice():可以發現原資料也跟著改變。

    ans4為我們上一題獲得的值(1)
    // const ans5 = comments.splice(ans4, 1);
    // console.log(ans5, comments);
    // 0: {text: "Super good1", id: 823423} ,[{…}, {…}, {…}, {…}, {…}]

解構,會創建一個新的陣列,指向的就不是原資料的位址


    let a = [1, 2, 3, 4]
    console.log([...a] === a); //false
    

而如果我們要不影響資料使用splice,可以利用解構達到deep copy在做刪除


    // const ans5 = [...comments].splice(ans4, 1);
    // console.log(ans5, comments);
    // 0: {text: "Super good1", id: 823423} ,[{…}, {…}, {…}, {…}, {…}, {…}]

slice():可以發現原資料不會改變。


    var ans6 = comments.slice(0, ans4);
    // 從下標為2的資料之後全部刪除
    var ans7 = comments.slice(ans4 + 1);
    console.log(ans6, ans7, comments);
    // 0: {text: "Love this!", id: 523423},
    // [{…}, {…}, {…}, {…}]
    // [{…}, {…}, {…}, {…}, {…}, {…}]

為了不影響原資料,我們也可以利用解構,做deep copy


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

或是利用Object.assign來達到 deep copy


    let obj1 = {
      count: 1
    };
    // 創建一個新的物件(新的位址)並將obj1的資料放進去
    let obj3 = Object.assign({}, obj1);
    obj3.count = 3;
    console.log(obj1, obj3); //{count: 1} {count: 3}
    

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言