iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0
自我挑戰組

JavaScript 30 挑戰日誌系列 第 7

Day 07:陣列習題 (2)

  • 分享至 

  • xImage
  •  

作品 Demo 連結: 傳送門
(請按下 F12 開啟開發者工具並進入 Console 頁籤)

作品目標:使用本身提供的陣列,透過 JavaScript Console 出題目所要的答案。
難易度:★☆☆☆☆

JavaScript - 課程提供的 Data

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 }
];

【第一題:people 內是否至少有一位是成年?】

const isAdults = people.some( people => new Date().getFullYear() - people.year > 18 );
console.log(isAdults);  // true

這裡用到的新的簡單過濾器叫做 .some()
他不會回傳陣列,而是會回傳一個 boolean 值

如果至少有一個符合條件
即回傳 true、否則 false

【第二題:people 內是否至皆為成年?】

const everyOneAdults = people.every( people => new Date().getFullYear() - people.year > 18 );
console.log(everyOneAdults);  //false

.every() 跟 .some() 是類似的函數,
只差在是要全陣列都符合才會回傳 true

【第三題:請撈出 comments 裏頭 id 為 823423 的資訊】

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

.find() 是會回傳符合條件的元素給你

【第三題:找出 id 為 823423 的資訊刪除,回傳新陣列】

const targetIdx = comments.findIndex( comment => comment.id === 823423);
const newComments = [
    ...comments.splice(0, targetIdx),
    ...comments.splice(targetIdx)
];

console.table(newComments);
//  0:{text: "Love this!", id: 523423}
//  1:{text: "You are the best", id: 2039842}
//  2:{text: "Ramen is my fav food ever", id: 123523}
//  3:{text: "Nice Nice Nice!", id: 542328}

這裡使用到的是 .findIndex()
如字面意思,他跟 .find() 相同
只是回傳的會是符合結過的 index 號碼
最後我們在使用 splice 來加入新的陣列

大家還記得 "..." 的意思吧?
就是會將元素一個一個推進去,而不是連陣列外層都放進去喔!
(大家可以試試看不加 "..." 就會懂了 =D


昨天已經爆肝一天,等等還要繼續
小心肝加油呀!! QAQ//


上一篇
Day 06:搜尋地區名稱
下一篇
Day 08:製作 Canvas 繪圖板!
系列文
JavaScript 30 挑戰日誌8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言