Array Cardio陣列方法

這次的練習，只有js的陣列方法，所以沒有成品的截圖><

附上個人codepen

技巧點

1. some()

• 在陣列中，遞迴每一個元素，並且判斷元素是否符合你所設定的條件函式，只要其中有一個元素有符合條件，則回傳true；若所有元素都不符合條件，就會傳false．
• 此方法不會去改動到原始陣列．

const list = [
  {
    type: "fruit",
    name: "banana"
  },
  {
    type: "drink",
    name: "cola"
  },
  {
    type: "drink",
    name: "tea"
  },
];

const haveFruit = list.some((item, index, array) => {
  return item.type === "fruit";
})
// item依序為陣列的每一個物件，index為item在陣列中的索引值，array為list陣列本身．index、array參數是可選擇性帶入

console.log(haveFruit); // true

• 從上面的範例中，可以發現就只有一個物品種類屬於fruit，有滿足至少一個元素符合條件．結果回傳為true．

const nums = [1, 2, 3, 4, 5];
const result = nums.some((num) => num > 10);
// 判斷陣列中是否至少有一個數字大於10

console.log(result); // false

2. every()

• 判斷陣列中的所有元素，是否通過你設定的條件，最後回傳一個布林值．當全部元素通過回傳true；反之false．

const list = [
  {
    type: "fruit",
    name: "banana"
  },
  {
    type: "drink",
    name: "cola"
  },
  {
    type: "drink",
    name: "tea"
  },
]; 

const isAllFruit = list.every((item, index, array) => {
  return item.type === "fruit";
})

console.log(isAllFruit); // false

• 拿跟上次some一樣的list陣列示範，程式碼部分幾乎一樣，只有將some替換成了every，結果就變成了false．因為every方法要求所有元素都要符合條件．

3. findIndex()

• 從陣列中找尋第一個符合條件函式的元素，並將此元素在陣列中的索引位置回傳．

const food = ["cola", "cookie", "juice", "rice", "bread"];
const whereIsRice = food.findIndex((food, index, array) => {
  return food === "rice";
})
// food為遞迴中的元素，item為遞迴中的該元素陣列的索引值，array為要執行方法的此陣列food．
console.log(whereIsRice); // 3

• 找到第一個符合條件的就會回傳他的索引值，假設今天陣列中有兩個元素符合的話，也只會回傳第一個找到的元素之索引值．如下：

const food = ["cola", "rice", "juice", "rice", "bread"];
const whereIsRice = food.findIndex((food, index, array) => {
  return food === "rice";
})
console.log(whereIsRice); // 1

• 那陣列中都沒有符合條件的元素，就會回傳-1，

const age = [17, 6, 13, 16, 2];
const result = age.findIndex((item, index, array) => {
  return item > 18;
})
console.log(result); // -1

4.find()

• 與上面的findIndex非常相似，用於找到符合條件的第一個元素，並將此元素整個回傳．若都沒有元素符合，則回傳undefined．

const nums = [1, 12, 3, 49, 25];
const result = nums.find((num, index, array) => {
  return num % 2 === 0;
})
console.log(result); // 12

const arr = [
  {
    name: "jack",
    grade: 48,
  },
  {
    name: "marry",
    grade: 20,
  },{
    name: "hank",
    grade: 78,
  },
]

const result = arr.find((item) => {
  return item.grade > 60;
})
console.log(result); // {name: 'hank', grade: 78}

心得

方法真的很多，當你要用的時候，還會想不起來有什麼可以用，這時候問chatGPT最快了哈哈，或是直接將需求整個告訴他，讓他幫你寫程式碼更快ＸＤ