摘要：中文指南二作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習(xí)是接著之前中文指南一的練習(xí)，繼續(xù)熟練數(shù)組的方法，依舊沒(méi)有頁(yè)面顯示效果，所以請(qǐng)打開(kāi)瀏覽器的面板進(jìn)行調(diào)試運(yùn)行。

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

第七天的練習(xí)是接著之前Day04 - Array Cardio 中文指南一的練習(xí)，繼續(xù)熟練數(shù)組的方法，依舊沒(méi)有頁(yè)面顯示效果，所以請(qǐng)打開(kāi)瀏覽器的Console面板進(jìn)行調(diào)試運(yùn)行。

網(wǎng)站給了兩個(gè)數(shù)組，分別為people數(shù)組和comments數(shù)組，如下：

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

在此兩數(shù)組的基礎(chǔ)上實(shí)現(xiàn)一下幾個(gè)操作：

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

是否每一個(gè)人都年滿19周歲？

是否存在id=823423的評(píng)論？

找到id=823423的評(píng)論的序列號(hào)(下標(biāo))。

刪除id=823423的評(píng)論。

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：當(dāng)前在操作的對(duì)象。

index：當(dāng)前操作對(duì)象的索引。

array：在操作的數(shù)組指針。

Return value
返回true或者false，返回true，說(shuō)明數(shù)組中有滿足條件的數(shù)據(jù)存在，返回false，說(shuō)明數(shù)組里面沒(méi)有滿足條件的數(shù)組存在。

版本一：

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：當(dāng)前在操作的對(duì)象。

index：當(dāng)前操作對(duì)象的索引。

array：在操作的數(shù)組指針。

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

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：當(dāng)前在操作的對(duì)象。

index：當(dāng)前操作對(duì)象的索引。

array：在操作的數(shù)組指針。

Return value
如果有滿足條件對(duì)象，返回該對(duì)象，否則返回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：當(dāng)前在操作的對(duì)象。

index：當(dāng)前操作對(duì)象的索引。

array：在操作的數(shù)組指針。

Return value
返回滿足條件的當(dāng)前對(duì)象在數(shù)組中的索引，如果找不到滿足條件的對(duì)象，返回-1。

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

splice參考文檔
slice參考文檔

CASE

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

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

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

從索引3開(kāi)始移除1個(gè)元素。

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

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

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

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

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

從索引0開(kāi)始移除2個(gè)元素，并且插入"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開(kāi)始移除所有元素

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開(kāi)始移除后面所有的元素。

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

array.splice(start, deleteCount, item1, item2, ...)：從start索引開(kāi)始，刪除deleteCount個(gè)元素，然后插入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()等價(jià)于arr.slice(0,arr.length)

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

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

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會(huì)修改原數(shù)組，slice不會(huì)改變?cè)瓟?shù)組的值。

Github Source Code

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