成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6 換種思路處理數(shù)據(jù)

jindong / 3130人閱讀

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

Handle javascript data structures with map/reduce

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

reduce

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

把一個對象數(shù)組變成一個以數(shù)組中各個對象的 id 為屬性名,對象本身為屬性值的對象。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

map 可以理解為是數(shù)組的轉(zhuǎn)換器,依次對數(shù)組中的每個元素做變換進而得到一個新的數(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ù)組并不會受到影響
find?

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

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;
filter

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

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

請大家自行思考下filterfind的區(qū)別

數(shù)組concat
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}

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

為對象動態(tài)地添加字段
const dynamicKey = "wearsSpectacles";
const user = {name: "Shivek Khurana"};
const updatedUser = {...user, [dynamicKey]: true};
// updatedUser is {name: "Shivek Khurana", wearsSpectacles: true}
將對象轉(zhuǎn)換為query字符串?
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"
得到對象數(shù)組的元素 index
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)為原作者有點為了函數(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"};
// 利用對象的解構(gòu),取出非password的所有字段
const {password, ...newUser} = user

以上代碼片段的共同原則:不改變原數(shù)據(jù)。希望大家的代碼都可以盡可能的簡潔,可維護?。

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/107177.html

相關(guān)文章

  • 這一次,我們換種姿勢學(xué)習(xí) javascript

    摘要:操作符或調(diào)用函數(shù)時傳入?yún)?shù)的操作都會導(dǎo)致關(guān)聯(lián)作用域的賦值操作。此外可以使用和來設(shè)置對象及其屬性的不可變性級別。忽視這一點會導(dǎo)致許多問題。使用調(diào)用函數(shù)時會把新對象的屬性關(guān)聯(lián)到其他對象。 前言 《你不知道的 javascript》是一個前端學(xué)習(xí)必讀的系列,讓不求甚解的JavaScript開發(fā)者迎難而上,深入語言內(nèi)部,弄清楚JavaScript每一個零部件的用途。本書介紹了該系列的兩個主題:...

    zone 評論0 收藏0
  • Cookie就擺在那,為什么死活吃不到?

    摘要:查找原因無法獲取到是因為同源策略和標(biāo)記的原因。在同一個站點下使用屬性是無效的。此外,這個指示也會被用做響應(yīng)中被忽視的標(biāo)示。而通過設(shè)置為獲得的第三方,將會依舊享受同源策略,因此不能被通過或者從頭部相應(yīng)請求的腳本等訪問。 作者:codexu _ showImg(https://segmentfault.com/img/remote/1460000020161476); 瀏覽器里明明存在的c...

    shmily 評論0 收藏0
  • 用面向?qū)ο蟮乃季S方式來設(shè)計數(shù)據(jù)

    摘要:思路上次換工作,面試遇到一道面試題,如下請設(shè)計數(shù)據(jù)庫,用來存放老師學(xué)生等人員的信息,盡量滿足以后的擴展。 ————因為懶惰,所以思索 場景 我們有多種類型訂單:實物訂單、特享商戶訂單、核銷訂單、生活繳費訂單、電影票訂單、機票訂單、以及以后會持續(xù)新增的未知類型訂單,它們都存放在不同的訂單類型表中 影響 導(dǎo)致有些業(yè)務(wù)做起來會比較痛苦 比如: 統(tǒng)計當(dāng)前用戶未付...

    alexnevsky 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<