摘要：看完本文，希望可以寫出更加漂亮簡(jiǎn)潔函數(shù)式的代碼可以用來匯總數(shù)據(jù)的初始值把一個(gè)對(duì)象數(shù)組變成一個(gè)以數(shù)組中各個(gè)對(duì)象的為屬性名，對(duì)象本身為屬性值的對(duì)象。

Handle javascript data structures with map/reduce

看完本文，希望可以寫出更加漂亮、簡(jiǎn)潔、函數(shù)式的代碼?

reduce 可以用來匯總數(shù)據(jù)

const customer = [
  {id: 1, count: 2},
  {id: 2, count: 89},
  {id: 3, count: 1}
];
const totalCount = customer.reduce((total, item) =>
  total + item.count,
  0 // total 的初始值
);
// now totalCount = 92

把一個(gè)對(duì)象數(shù)組變成一個(gè)以數(shù)組中各個(gè)對(duì)象的 id 為屬性名，對(duì)象本身為屬性值的對(duì)象。haoduoshipin

let products = [
  {
    id: "123",
    name: "蘋果"
  },
  {
    id: "345",
    name: "橘子"
  }
];

const productsById = products.reduce(
  (obj, product) => {
    obj[product.id] = product
    return obj
  },
  {}
);

console.log("result", productsById);

map 可以理解為是數(shù)組的轉(zhuǎn)換器，依次對(duì)數(shù)組中的每個(gè)元素做變換進(jìn)而得到一個(gè)新的數(shù)組。

const integers = [1, 2, 3, 4, 6, 7];
const twoXIntegers = integers.map(i => i*2);
// twoXIntegers are now [2, 4, 6, 8, 12, 14]
// integers數(shù)組并不會(huì)受到影響

篩選出數(shù)組中的個(gè)別元素

const posts = [
  {id: 1, title: "Title 1"},
  {id: 2, title: "Title 2"},
];
// find the title of post whose id is 1
const title = posts.find(p => p.id === 1).title;

唉~ 使用了半年的 es6才發(fā)現(xiàn)有這么好用的東西，譯者傻缺還像下面這么寫過呢

const posts = [
  {id: 1, title: "Title 1"},
  {id: 2, title: "Title 2"},
];

const title = posts.filter(item => item.id === 1)[0].title;

篩選出數(shù)組中某些符合條件的元素組成新的數(shù)組

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

請(qǐng)大家自行思考下filter和find的區(qū)別

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 0];
const arrTarget = [...arr1, ...arr2];
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

function operation(query, option = {}) {
    const param = {...query, ...option};
    // ....
    return param;
}
let opt = {startTime: 123455555, endTime: 113345555};
let q = {name: "一步", age: "xxx"};
operation(q, opt);
// {name: "一步", age: "xxx", startTime: 123455555, endTime: 113345555}

對(duì)象是引用傳參的，所以函數(shù)內(nèi)部應(yīng)該盡可能的保證傳入的參數(shù)不受到污染。

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

const params = {color: "red", minPrice: 8000, maxPrice: 10000};
const query = "?" + Object.keys(params)
  .map(k =>
    encodeURIComponent(k) + "=" + encodeURIComponent(params[k])
  )
  .join("&")
;
// encodeURIComponent encodes special characters like spaces, hashes
// 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"}
];
// to find index of element with id 131
const requiredIndex = posts.map(p => p.id).indexOf(131);

更加優(yōu)雅的寫法呱呱呱提供：

const posts = [
  {id: 13, title: "Title 221"},
  {id: 5, title: "Title 102"},
  {id: 131, title: "Title 18"},
  {id: 55, title: "Title 234"}
];
const index = posts.findIndex(p => p.id === 131)

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 }), {});

這里我認(rèn)為原作者有點(diǎn)為了函數(shù)式編程而函數(shù)式了，下面是我的解決方案：

const user = {name: "Shivek Khurana", age: 23, password: "SantaCl@use"};
const newUser = {...user};
delete newUser.password;
// {name: "Shivek Khurana", age: 23}

更現(xiàn)代的寫法YiHzo提供: ?????

const user = {name: "Shivek Khurana", age: 23, password: "SantaCl@use"};
// 利用對(duì)象的解構(gòu)，取出非password的所有字段
const {password, ...newUser} = user

以上代碼片段的共同原則：不改變?cè)瓟?shù)據(jù)。希望大家的代碼都可以盡可能的簡(jiǎn)潔，可維護(hù)?。

【開發(fā)環(huán)境推薦】Cloud Studio 是基于瀏覽器的集成式開發(fā)環(huán)境，支持絕大部分編程語言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發(fā)環(huán)境。 Cloud Studio提供了完整的 Linux 環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。