作者：?緝熙Soyaine
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫(kù)，也不使用編譯器和引用?，F(xiàn)在你看到的是這系列指南的第 7 篇。完整指南在 GitHub，喜歡請(qǐng) Star 哦?(?*)
實(shí)現(xiàn)效果
這一部分是挑戰(zhàn) 04 的后續(xù)，繼續(xù)熟悉 Array 的一些基本方法，包括 some()、every()、find()、splice()、slice()。這篇比較簡(jiǎn)單，但如果沒有看過上一篇文章，建議回去溫習(xí)一下。（畢竟上一篇更酷 :）
文檔提供了用于操作的 people 和 comments 數(shù)組，模擬的是人員信息及評(píng)論數(shù)據(jù)，基于這兩個(gè)數(shù)組可以練習(xí)一下上面提及的各個(gè)方法，請(qǐng)打開 HTML 后在 Console 面板中查看輸出結(jié)果。
過程指南
針對(duì) people 數(shù)組：
- 是否有人超過 19 歲？
- 是否所有人都是成年人？
針對(duì) comments 數(shù)組：
- 找到 ID 號(hào)為 823423 的評(píng)論
- 刪除 ID 號(hào)為 823423 的評(píng)論
- 獲取此 ID 對(duì)應(yīng)元素在數(shù)組中所處的位置
- 利用位置，刪除該子元素
- 或者拼接新的數(shù)組
相關(guān)知識(shí)
some 和 every
兩者的相同之處是，都接受一個(gè)函數(shù)作為參數(shù)，對(duì)數(shù)組元素都執(zhí)行一次此函數(shù)，都不會(huì)改變?cè)瓟?shù)組的值。不同之處在于返回條件不同：
some() 中直到某個(gè)數(shù)組元素使此函數(shù)為 true，就立即返回 true。所以可以用來判斷一個(gè)數(shù)組中，是否存在某個(gè)符合條件的值。
const isAdult = people.some( person => {
const currentYear = (new Date()).getFullYear();
return currentYear - person.year >= 19;
});
console.log({isAdult});
而 every() 中除非所有值都使此函數(shù)為 true，才會(huì)返回 true 值，否則為 false。主要用處，即判斷是否所有元素都符合條件。
const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);
console.log({allAdult});
與 some() 相對(duì)應(yīng)的話，some() 像是或運(yùn)算，而 every() 則是與運(yùn)算了。
find 和 fineIndex
這兩個(gè) ES6 的新特性類似于 some() ，但對(duì)于符合條件的元素，返回值不是布爾類型。不一樣的地方在于，find() 返回的是這個(gè)元素的值（或 undefined），而 findIndex() 返回的是這個(gè)元素的索引（或 -1）。
const comment = comments.find(comment => comment.id == 823423);
const index = comments.findIndex(comment => comment.id == 823423);
slice 和 splice
這兩者比較相似的地方，大概只有：參數(shù)的第一個(gè)都是指的起始位置，且都接受負(fù)數(shù)，若是負(fù)數(shù)，代表倒數(shù)第幾位。
而其他地方是需要區(qū)分清楚的：
-
slice()：不修改原數(shù)組，按照參數(shù)復(fù)制一個(gè)新數(shù)組，參數(shù)表述復(fù)制的起點(diǎn)和終點(diǎn)索引（省略則代表到末尾），但終點(diǎn)索引位置的元素不包含在內(nèi)。 -
splice()：原數(shù)組會(huì)被修改。第二個(gè)參數(shù)代表要?jiǎng)h掉的元素個(gè)數(shù)，之后可選的參數(shù)，表示要替補(bǔ)被刪除位置的元素。
讓我們來聯(lián)想一下，看到一塊紋著漂亮花紋的布料，slice 拿出相機(jī)拍了一張照，而 splice 拿出剪刀把這個(gè)花紋剪下來帶走了，再用其他布料給縫回去。
所以想要?jiǎng)h除一個(gè)元素，有兩種實(shí)現(xiàn)思路，一是把出它之外的元素給復(fù)制下來再合在一起，二是直接把它刪除。
// 刪除方法一，splice()
// comments.splice(index, 1);
// 刪除方法二，slice 拼接
const newComments = [
...comments.slice(0, index),
...comments.slice(index + 1)
];
上面的三個(gè)點(diǎn)（...）是 ES6 中的擴(kuò)展語法，可以展開這個(gè)數(shù)組并方便的拼接。
至此，數(shù)組基本操作二就結(jié)束啦~(≧▽≦)/
創(chuàng)建日期：2017-01-03
最后更新：2017-01-03
