[筆記][JS30天-Day07] Array Cardio Day2

發表於 | 分類於 | |

JS_30_Days

實做：Array方法操作
學習重點
  • Array方法操作：some , every , find , findIndex , slice , splice
解說

請把程式碼貼到瀏覽器console查看結果

1
2
3
4
5
6
7
8
9
10
11
12
13
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 good', id: 823423 },
  { text: 'You are the best', id: 2039842 },
  { text: 'Ramen is my fav food ever', id: 123523 },
  { text: 'Nice Nice Nice!', id: 542328 }
];

  • some
    some() 方法中直到某個陣列元素使此函數為 true，就立即返回 true。所以可以用來判斷一個陣列中，是否存在某個符合條件的值

    1
    2
    3
    4
    5
    6
    7

    const isAdult = people.some( person => {
      const currentYear = (new Date()).getFullYear();
      return currentYear - person.year >= 19;
    });

    console.log({isAdult}); // { isAdult : true };

  • every
    every() 方法中除非所有值都使此函數為 true，才會返回 true 值，否則為 false。主要用處，即判斷是否所有元素都符合條件。

    1
    2
    3
    const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);

    console.log({allAdult}); // { allAdult : false };

  • find
    find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const comment = comments.find(comment => comment.id == 823423);

    console.log({comment}); 
    /*
      {
        id: 823423,
        text: "Super good"
      }
    */

  • findIndex
    findIndex() 方法將依據提供的測試函式，尋找陣列中符合的元素，並返回其 index（索引）。如果沒有符合的對象，將返回 -1 。

    1
    2
    3
    const index = comments.findIndex(comment => comment.id == 823423);

    console.log({index}); //1

  • slice
    slice()方法返回一個從開始到結束（不包括結束）選擇的陣列的一部分淺拷貝到一個新陣列。且原始數組不會被修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

    console.log(animals.slice(2));
    // expected output: Array ["camel", "duck", "elephant"]

    console.log(animals.slice(2, 4));
    // expected output: Array ["camel", "duck"]

    console.log(animals.slice(1, 5));
    // expected output: Array ["bison", "camel", "duck", "elephant"]

  • splice
    splice()原陣列會被修改。第二個參數代表要刪掉的元素個數，之後可選的參數，表示要替補被刪除位置的元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at 1st index position
    console.log(months);
    // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

    months.splice(4, 1, 'May');
    // replaces 1 element at 4th index
    console.log(months);
    // expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

    所以想要删除一個陣列元素，有兩種方式

    1
    2
    3
    4
    5
    6
    7
    8
    // 删除方法一，splice()
    comments.splice(index, 1);

    // 删除方法二，slice 
    const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ];