摘要：一個簡單的實踐返回數(shù)組或類似結(jié)構(gòu)中滿足條件的第一個元素。這個翻譯項目才開始，以后會翻譯越來越多的作品。

原文地址：https://codeburst.io/writing-javascript-with-map-reduce-980602ff2f2f  
作者：Shivek Khurana  
簡介：本文是一份編寫優(yōu)雅、簡潔和函數(shù)式ES6代碼的快捷清單。

現(xiàn)如今JavaScript有許多問題，但是詞法并不是其中之一。不管是三元運算符，還是map/reduce等ES6方法，亦或是擴展運算符（...）都是非常強大的工具。

除了能夠保證可讀性以及準確性，這些方法還有助于實現(xiàn)不可變性，因為這些方法會返回新的數(shù)據(jù)，而處理前的原始數(shù)據(jù)并不會被修改。這樣的處理風(fēng)格很適合redux以及Fractal。

話不多說，讓我們開始吧。

當你想要將多個數(shù)據(jù)放進一個實例中時，你可以使用一個reducer。

const posts = [
  {id: 1, upVotes: 2},
  {id: 2, upVotes: 89},
  {id: 3, upVotes: 1}
];
const totalUpvotes = posts.reduce((totalUpvotes, currentPost) =>     
  totalUpvotes + currentPost.upVotes, //reducer函數(shù)
  0 // 初始化投票數(shù)為0
);
console.log(totalUpvotes)//輸出投票總數(shù)：92

傳給reduce的第一個參數(shù)函數(shù)還可以增加2個參數(shù)：

第三個參數(shù)：每個元素在原數(shù)據(jù)結(jié)構(gòu)中的位置，比如數(shù)組下標。

第四個參數(shù)：調(diào)用reduce方法的數(shù)據(jù)集合，比如例子中的posts。
所以，一個reducer的完全體應(yīng)該是下面這樣的：

collection.reduce(
  (accumulator, currentElement, currentIndex, collectionCopy) => 
    {/*function body*/},
    initialAccumulatorValue
);

map方法的作用在于處理流式數(shù)據(jù)，比如數(shù)組。我們可以把它想象成所有元素都要經(jīng)過的一個轉(zhuǎn)換器。

const integers = [1, 2, 3, 4, 6, 7];
const twoXIntegers = integers.map(i => i*2);
// twoXIntegers現(xiàn)在是 [2, 4, 6, 8, 12, 14]，而integers不發(fā)生變化。

find返回數(shù)組或類似結(jié)構(gòu)中滿足條件的第一個元素。

const posts = [
  {id: 1, title: "Title 1"},
  {id: 2, title: "Title 2"}
];
// 找出id為1的posts
const title = posts.find(p => p.id === 1).title;

filter方法可以篩除數(shù)組和類似結(jié)構(gòu)中不滿足條件的元素，并返回滿足條件的元素組成的數(shù)組。

const integers = [1, 2, 3, 4, 6, 7];
const evenIntegers = integers.filter(i => i%2 === 0);
// evenIntegers的值為[2, 4, 6]

如果你要創(chuàng)建一個無限滾動的ui組件（比如本文后面提到的例子），可以使用擴展運算符這個非常有用的詞法。

const books = ["Positioning by Trout", "War by Green"];
const newBooks = [...books, "HWFIF by Carnegie"];
// newBooks are now ["Positioning by Trout", "War by Green", "HWFIF // by Carnegie"]

如果需要實現(xiàn)用戶從購物車中刪除物品，但是又不想破壞原來的購物車列表，可以使用filter方法。

const myId = 6;
const userIds = [1, 5, 7, 3, 6];
const allButMe = userIds.filter(id => id !== myId);
// allButMe is [1, 5, 7, 3]

譯者注：這里我猜測作者是不想修改原來的數(shù)組所以使用的filter，但是不能理解為什么要舉購物車的例子。

const books = [];
const newBook = {title: "Alice in wonderland", id: 1};
const updatedBooks = [...books, newBook];
//updatedBooks的值為[{title: "Alice in wonderland", id: 1}]

books這個變量我們沒有給出定義，但是不要緊，我們使用了擴展運算符，它并不會因此失效。

const user = {name: "Shivek Khurana"};
const updatedUser = {...user, age: 23};
//updatedUser的值為：{name: "Shivek Khurana", age: 23}

const dynamicKey = "wearsSpectacles";
const user = {name: "Shivek Khurana"};
const updatedUser = {...user, [dynamicKey]: true};
// updatedUser is {name: "Shivek Khurana", wearsSpectacles: true}

const posts = [
  {id: 1, title: "Title 1"},
  {id: 2, title: "Title 2"}
];
const updatedPosts = posts.map(p => p.id !== 1 ?
  p : {...p, title: "Updated Title 1"}
);
/*
updatedPosts is now 
[
  {id: 1, title: "Updated Title 1"},
  {id: 2, title: "Title 2"}
];
*/

const posts = [
  {id: 1, title: "Title 1"},
  {id: 2, title: "Title 2"}
];
const postInQuestion = posts.find(p => p.id === 2);
// postInQuestion now holds {id: 2, title: "Title 2"}

譯者注：奇怪啊，這不就是之前find的簡單實踐嗎？

const user = {name: "Shivek Khurana", age: 23, password: "SantaCl@use"};
const userWithoutPassword = Object.keys(user)
  .filter(key => key !== "password")
  .map(key => {[key]: user[key]})
  .reduce((accumulator, current) => 
    ({...accumulator, ...current}),
    {}
  )
;
// userWithoutPassword becomes {name: "Shivek Khurana", age: 23}

感謝Kevin Bradley提供了一個更優(yōu)雅的方法:

const user = {name: "Shivek Khurana", age: 23, password: "SantaCl@use"};
const userWithoutPassword = (({name, age}) => ({name, age}))(user);

他還表示這個方法在對象屬性更少時也能發(fā)揮作用。

你也許幾乎遇不到這個需求，但是有時候在別的地方會給你一點啟發(fā)。

const params = {color: "red", minPrice: 8000, maxPrice: 10000};
const query = "?" + Object.keys(params)
  .map(k =>   
    encodeURIComponent(k) + "=" + encodeURIComponent(params[k])
  )
  .join("&")
;
// encodeURIComponent將對特殊字符進行編碼。
// query is now "color=red&minPrice=8000&maxPrice=10000"

const posts = [
  {id: 13, title: "Title 221"},
  {id: 5, title: "Title 102"},
  {id: 131, title: "Title 18"},
  {id: 55, title: "Title 234"}
];
// 找到id為131的元素
const requiredIndex = posts.map(p => p.id).indexOf(131);

譯者注：這里我覺得方法很繁瑣?？梢允褂胒indIndex方法：const requiredIndex = posts.findIndex(obj=>obj.id===131);，同樣能獲取到下標值2。

有了這些強大的方法，我希望你的代碼會變得越來越穩(wěn)定和一絲不茍。當你的團隊中有一個新的開發(fā)者加入時，可以向他推薦這篇文章，讓他了解以前不知道的秘密。

這個翻譯項目才開始，以后會翻譯越來越多的作品。我會努力堅持的。  
項目地址：https://github.com/WhiteYin/translation