摘要：中文指南二作者簡介是推出的一個天挑戰。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習是接著之前中文指南一的練習，繼續熟練數組的方法，依舊沒有頁面顯示效果，所以請打開瀏覽器的面板進行調試運行。

作者：?liyuechun  
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用?，F在你看到的是這系列指南的第 7 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

第七天的練習是接著之前Day04 - Array Cardio 中文指南一的練習，繼續熟練數組的方法，依舊沒有頁面顯示效果，所以請打開瀏覽器的Console面板進行調試運行。

網站給了兩個數組，分別為people數組和comments數組，如下：

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

在此兩數組的基礎上實現一下幾個操作：

是否至少有一人年滿19周歲？

是否每一個人都年滿19周歲？

是否存在id=823423的評論？

找到id=823423的評論的序列號(下標)。

刪除id=823423的評論。

some參考文檔

CASE

let isBiggerThan10 = (element, index, array) => {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

Syntax

arr.some(callback[, thisArg])

Parameters

element：當前在操作的對象。

index：當前操作對象的索引。

array：在操作的數組指針。

Return value
返回true或者false，返回true，說明數組中有滿足條件的數據存在，返回false，說明數組里面沒有滿足條件的數組存在。

版本一：

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

版本二：

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

版本三：

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

every參考文檔

CASE

let isBigEnough = (element, index, array) => { 
  return element >= 10; 
} 

[12, 5, 8, 130, 44].every(isBigEnough);   // false 
[12, 54, 18, 130, 44].every(isBigEnough); // true

Syntax

arr.every(callback)

Parameters

Parameters

element：當前在操作的對象。

index：當前操作對象的索引。

array：在操作的數組指針。

Return value
返回true或者false，返回true，代表數組中所有數據都滿足條件，否則，至少有一條數據不滿足條件。

const everyAdult = people.every(person => (new Date().getFullYear() - person.year) >= 19);
console.log({everyAdult});

find參考文檔

CASE

let  isBigEnough = (element) => {
  return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

Syntax

arr.find(callback)

Parameters

element：當前在操作的對象。

index：當前操作對象的索引。

array：在操作的數組指針。

Return value
如果有滿足條件對象，返回該對象，否則返回undefined 。

const findComment = comments.find(comment => comment.id === 823423);
console.log(findComment);
}

findIndex參考文檔

CASE

let isBigEnough = (element) => {
  return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough); 
// index of 4th element in the Array is returned,
// so this will result in "3"

Syntax

arr.findIndex(callback)

Parameters

element：當前在操作的對象。

index：當前操作對象的索引。

array：在操作的數組指針。

Return value
返回滿足條件的當前對象在數組中的索引，如果找不到滿足條件的對象，返回-1。

const findCommentIndex = comments.findIndex(comment => comment.id === 823423);
console.log(findCommentIndex);

splice參考文檔
slice參考文檔

CASE

在索引2的位置移除0個元素，并且插入"drum"

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// myFish 是 ["angel", "clown", "drum", "mandarin", "sturgeon"] 
// removed is [], 沒有元素被移除。

從索引3開始移除1個元素。

var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
var removed = myFish.splice(3, 1);

// 移除的原色是 ["mandarin"]
// myFish 為 ["angel", "clown", "drum", "sturgeon"]

從索引2移除一個元素，并且插入"trumpet"

var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2, 1, "trumpet");

// myFish 為 ["angel", "clown", "trumpet", "sturgeon"]
// 移除的元素為 ["drum"]

從索引0開始移除2個元素，并且插入"parrot", "anemone" 和 "blue"。

var myFish = ["angel", "clown", "trumpet", "sturgeon"];
var removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish為 ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
// 移除的元素是 ["angel", "clown"]

從索引2開始移除所有元素

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2);

// myFish 為 ["angel", "clown"] 
// 移除的原色為 ["mandarin", "sturgeon"]

Syntax

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

array.splice(start)： 從索引start開始移除后面所有的元素。

array.splice(start, deleteCount)： 從索引start元素刪除deleteCount個元素。

array.splice(start, deleteCount, item1, item2, ...)：從start索引開始，刪除deleteCount個元素，然后插入item1,item2,...

CASE

var a = ["zero", "one", "two", "three"];
var sliced = a.slice(1, 3);

console.log(a);      // ["zero", "one", "two", "three"]
console.log(sliced); // ["one", "two"]

Syntax

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

arr.slice()等價于arr.slice(0,arr.length)

arr.slice(begin)等價于arr.slice(begin,arr.length)

arr.slice(begin, end)：創建一個新數組，將索引begin-end(不包含end)的元素放到新數組中并返回新數組，原數組不被修改。

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 }
];
    
const findCommentIndex = comments.findIndex(comment => comment.id === 823423);

// delete the comment with the ID of 823423
//comments.splice(findCommentIndex,1);

const newComments = [
 ...comments.slice(0,findCommentIndex),
 ...comments.slice(findCommentIndex+1)
]; 

splice會修改原數組，slice不會改變原數組的值。

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記