iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

JavaScript 30天系列 第 7

JS30 - day07: Array Cardio Day 2

  • 分享至 

  • xImage
  •  

練習重點

  • some()
  • every()
  • find()
  • findIndex()
  • slice()

陣列資料

提供了兩筆陣列資料

// 第一筆資料 people: [{name:'str', year:num}]
const people = [
  { name: 'Wes', year: 1988 },
  { name: 'Kait', year: 1986 },
  { name: 'Irv', year: 1970 },
  { name: 'Lux', year: 2015 }
];

// 第二筆資料 comments: [{comments:'str', id:num}]
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 }
];

範例語法備註

[ Array.prototype.some() ]

只有其中有一筆符合判斷就會回傳true並結束
some(item, index, array) (item:物件/ index:索引/ array:全部陣列)

[ 題目 ] 有沒有至少一個人是19歲或大於的

使用some()逐筆進行判斷,只要有一筆通過判斷則回傳true並結束

const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19 );
console.log(isAdult); //回傳true

[ Array.prototype.every() ]

必須完全符合,才會回傳true,只要有一筆不符合就會回傳false
every(item, index, array)

[ 題目 ] 全部的人都有大於或等於19歲嗎

使用every()檢查所有的物件是否全部符合條件,

const allAdult = people.every(person => ((new Date()).getFullYear()) - person.year >= 19 );
console.log(allAdult); //回傳false,不是每筆都大於或等於19

[ Array.prototype.find() ]

find()與filter()想像,但find()只會回傳一次,且回傳第一筆為true的值
find(item, index, array)

[ 題目 ] 找到ID=823423的

這邊可以在陣列comments裡多加一筆id一樣為823423,並且要加在原來的那行後面
會發現它只會回傳前面那筆

const commentID = comments.find(comment => comment.id === 823423);
console.log(commentID); //回傳 {text: "Super good", id: 823423}

[ Array.prototype.findIndex() ]

尋找陣列中符合的元素並返回該筆的index索引,如果沒有符合的將返回-1
findIndex(item, index, array)

[ 題目 ] 找出id=823423 並且刪除該筆

使用findIndex()找到該筆索引後,使用splice()刪除該筆

const index = comments.findIndex(com => com.id === 823423 );
console.log(index); // 回傳1
console.table(comments);

comments.splice(index,1); // 刪掉該索引數的一筆資料
console.table(comments);

也可以刪掉後組成新的陣列,使用slice()寫法如下:

// 先找出要刪除的筆數index
const index = comments.findIndex(com => com.id === 823423 );
console.log(index); // 回傳1

// 在使用 slice()
const newComments = [
  // 取出索引0~index 的筆數,並逐筆塞入newComments
  ...comments.slice(0, index), 
  // 取出索引index+1 的筆數,並逐筆塞入newComments
  ...comments.slice(index + 1)
];
console.table(newComments);

上述slice(start,end) 可提取陣列的某個部份,並返回新的陣列

// * 提出索引位置6~11的字符 *
const str="Hello happy world!"
document.write(str.slice(6,11));
// 輸出happy

// * 提出索引位置6開始的所有字符
var str="Hello happy world!"
document.write(str.slice(6));
// 輸出 happy world!

上一篇
JS30 - day06: Type-Ahead
下一篇
JS30 - day08: Fun with HTML5 Canvas
系列文
JavaScript 30天11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言