摘要:看完本文,希望可以寫出更加漂亮簡潔函數(shù)式的代碼可以用來匯總數(shù)據(jù)的初始值把一個對象數(shù)組變成一個以數(shù)組中各個對象的為屬性名,對象本身為屬性值的對象。
Handle javascript data structures with map/reduce
看完本文,希望可以寫出更加漂亮、簡潔、函數(shù)式的代碼?
reducereduce 可以用來匯總數(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]
請大家自行思考下filter和find的區(qū)別
數(shù)組concatconst 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
摘要:操作符或調(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每一個零部件的用途。本書介紹了該系列的兩個主題:...
摘要:查找原因無法獲取到是因為同源策略和標(biāo)記的原因。在同一個站點下使用屬性是無效的。此外,這個指示也會被用做響應(yīng)中被忽視的標(biāo)示。而通過設(shè)置為獲得的第三方,將會依舊享受同源策略,因此不能被通過或者從頭部相應(yīng)請求的腳本等訪問。 作者:codexu _ showImg(https://segmentfault.com/img/remote/1460000020161476); 瀏覽器里明明存在的c...
摘要:思路上次換工作,面試遇到一道面試題,如下請設(shè)計數(shù)據(jù)庫,用來存放老師學(xué)生等人員的信息,盡量滿足以后的擴展。 ————因為懶惰,所以思索 場景 我們有多種類型訂單:實物訂單、特享商戶訂單、核銷訂單、生活繳費訂單、電影票訂單、機票訂單、以及以后會持續(xù)新增的未知類型訂單,它們都存放在不同的訂單類型表中 影響 導(dǎo)致有些業(yè)務(wù)做起來會比較痛苦 比如: 統(tǒng)計當(dāng)前用戶未付...
閱讀 3156·2021-10-08 10:04
閱讀 1098·2021-09-30 09:48
閱讀 3466·2021-09-22 10:53
閱讀 1684·2021-09-10 11:22
閱讀 1698·2021-09-06 15:00
閱讀 2156·2019-08-30 15:56
閱讀 719·2019-08-30 15:53
閱讀 2288·2019-08-30 13:04