資訊專(zhuān)欄INFORMATION COLUMN
摘要：與條件判斷一般我們判斷或用如果我們有更多水果與去重提供了新的數(shù)據(jù)結(jié)構(gòu)。所以所有的關(guān)于數(shù)據(jù)的操作，都可以用函數(shù)式的方式處理。這樣做的可讀性遠(yuǎn)遠(yuǎn)高于嵌套一大堆的函數(shù)調(diào)用我們選擇一些函數(shù)，讓它們結(jié)合，生成一個(gè)嶄新的函數(shù)。
1、Array.includes 與條件判斷
一般我們判斷或用 ||
// condition
function test(fruit) {
if (fruit == "apple" || fruit == "strawberry") {
console.log("red");
}
}
如果我們有更多水果
function test(fruit) {
const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
if (redFruits.includes(fruit)) {
console.log("red");
}
}
2、Set 與去重
ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類(lèi)似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。Set 本身是一個(gè)構(gòu)造函數(shù)，用來(lái)生成 Set 數(shù)據(jù)結(jié)構(gòu)。
數(shù)組去重
const arr = [3, 5, 2, 2, 5, 5]; const unique = [...new Set(arr)]; // [3,5,2]
Array.from 方法可以將 Set 結(jié)構(gòu)轉(zhuǎn)為數(shù)組。我們可以專(zhuān)門(mén)編寫(xiě)使用一個(gè)去重的函數(shù)
function unique(array) {
return Array.from(new Set(array));
}
unique([1, 1, 2, 3]); // [1, 2, 3]
字符去重
let str = [...new Set("ababbc")].join("");
console.log(str);
// "abc"
另外 Set 是如此強(qiáng)大，因此使用 Set 可以很容易地實(shí)現(xiàn)并集(Union)、交集(Intersect)和差集(Difference)。
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
3、Map 與字典類(lèi)型數(shù)據(jù)
一般而已，JavaScript 實(shí)現(xiàn)字典數(shù)據(jù)是基于 Object 對(duì)象。但是 JavaScript 的對(duì)象的鍵只能是字符串。對(duì)于編程來(lái)說(shuō)有很多不便。 ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類(lèi)似于 Object 對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類(lèi)型的值，字符串、數(shù)值、布爾值、數(shù)組、對(duì)象等等都可以當(dāng)作鍵。
const resultMap = new Map()
.set(-1, {text:"小于",color:"yellow")
.set(0, {text:"等于",color:"black")
.set(1, {text:"大于",color:"green")
.set(null,{text:"沒(méi)有物品",color:"red"})
let state = resultMap.get(null)
// {text:"沒(méi)有物品",color:"red"}
Map 的遍歷順序就是插入順序
const map = new Map([["F", "no"], ["T", "yes"]]);
for (let key of map.keys) {
console.log(key);
}
// "F"
// "T"
for (let value of map.value()) {
console.log(value);
}
// "no"
// "yes"
4、函數(shù)式的方式處理數(shù)據(jù)
按照我的理解，函數(shù)式編程主張函數(shù)必須接受至少一個(gè)參數(shù)并返回一個(gè)值。所以所有的關(guān)于數(shù)據(jù)的操作，都可以用函數(shù)式的方式處理。
假設(shè)我們有這樣的需求，需要先把數(shù)組 foo 中的對(duì)象結(jié)構(gòu)更改，然后從中挑選出一些符合條件的對(duì)象，并且把這些對(duì)象放進(jìn)新數(shù)組 result 里。
let foo = [
{
ame: "Stark",
age: 21
},
{
ame: "Jarvis",
age: 20
},
{
ame: "Pepper",
age: 16
}
];
//我們希望得到結(jié)構(gòu)稍微不同，age大于16的對(duì)象：
let result = [
{
person: {
ame: "Stark",
age: 21
},
friends: []
},
{
person: {
ame: "Jarvis",
age: 20
},
friends: []
}
];
從直覺(jué)上我們很容易寫(xiě)出這樣的代碼：
let result = [];
//有時(shí)甚至是普通的for循環(huán)
foo.forEach(function(person){
if(person.age > 16){
let newItem = {
person: person,
friends: [];
};
result.push(newItem);
}
})
使用函數(shù)式的寫(xiě)法，可以?xún)?yōu)雅得多
let result = foo
.filter(person => person.age > 16)
.map(person => ({
person: person,
friends: []
}));
數(shù)組求和
let foo = [1, 2, 3, 4, 5];
//不優(yōu)雅
function sum(arr) {
let x = 0;
for (let i = 0; i < arr.length; i++) {
x += arr[i];
}
return x;
}
sum(foo); // => 15
//優(yōu)雅
foo.reduce((a, b) => a + b); // => 15
5、compose 與函數(shù)組合
以下代碼稱(chēng)為組合 compose
const compose = function(f, g) {
return function(x) {
return f(g(x));
};
};
由于函數(shù)式編程大行其道，所以現(xiàn)在將會(huì)在 JavaScript 代碼看到大量的箭頭()=>()=>()=>的代碼。
ES6 版本 compose
const compose = (f, g) => x => f(g(x));
在 compose 的定義中， g 將先于 f 執(zhí)行，因此就創(chuàng)建了一個(gè)從右到左的數(shù)據(jù)流。這樣做的可讀性遠(yuǎn)遠(yuǎn)高于嵌套一大堆的函數(shù)調(diào)用.
我們選擇一些函數(shù)，讓它們結(jié)合，生成一個(gè)嶄新的函數(shù)。
reverse 反轉(zhuǎn)列表， head 取列表中的第一個(gè)元素;
const head = arr => arr[0]; const reverse = arr => [].concat(arr).reverse(); const last = compose(head, reverse); last(["jumpkick", "roundhouse", "uppercut"]); // "uppercut"
但是我們這個(gè)這個(gè)compose不夠完善，只能處理兩個(gè)函數(shù)參數(shù)。redux源碼有個(gè)很完備的compose函數(shù)，我們借鑒一下。
function compose(...funcs){
if (funcs.length === 0){
return arg => arg
}
if (funcs.length === 1 ){
return funcs[0]
}
return funcs.reduce((a,b)=>(...args) => a(b(...args)))
}
有了這個(gè)函數(shù)，我們可以隨意組合無(wú)數(shù)個(gè)函數(shù)?，F(xiàn)在我們?cè)黾有枨?，組合出一個(gè)lastAndUpper函數(shù)，內(nèi)容是先reverse 反轉(zhuǎn)列表， head 取列表中的第一個(gè)元素, 最后toUpperCase大寫(xiě)。
const head = arr => arr[0]; const reverse = arr => [].concat(arr).reverse(); const toUpperCase = str => str.toUpperCase(); const last = compose(head, reverse); const lastAndUpper = compose(toUpperCase, head, reverse,); console.log(last(["jumpkick", "roundhouse", "uppercut"])); // "uppercut" console.log(lastAndUpper(["jumpkick", "roundhouse", "uppercut"])) // "UPPERCUT"
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/101398.html
摘要：以下我經(jīng)常用，又總是記不住的幾個(gè)方法轉(zhuǎn)成數(shù)組形式獲取中的內(nèi)容關(guān)鍵在頁(yè)面標(biāo)簽加載完成事件關(guān)鍵在阻止瀏覽器事件默認(rèn)行為關(guān)鍵，記憶方法阻止事件冒泡關(guān)鍵，記憶方法數(shù)組的幾個(gè)常用方法是數(shù)組的每一項(xiàng)如的下標(biāo)，每一個(gè)元素的順序等同于一個(gè)單純的循環(huán)可以對(duì)進(jìn) 以下我經(jīng)常用，又總是記不住的幾個(gè)方法 document.querySelectorAll 轉(zhuǎn)成數(shù)組形式； [].slice.call(docume...
摘要：判斷第一個(gè)參數(shù)是否為真，的話(huà)拋出異常并且在控制臺(tái)輸出相應(yīng)信息。以參數(shù)為標(biāo)識(shí)記錄調(diào)用的次數(shù)，調(diào)用時(shí)在控制臺(tái)打印標(biāo)識(shí)以及調(diào)用次數(shù)。如果可以，打印元素表示的指定對(duì)象，或者對(duì)象視圖。接受一個(gè)參數(shù)作為標(biāo)識(shí)，結(jié)束特定的計(jì)時(shí)器。 我們?cè)趯?xiě)代碼的時(shí)候，偶爾會(huì)打印出后端傳過(guò)來(lái)的信息，然后根據(jù)信息寫(xiě)我們的html代碼，本來(lái)以為console.log就可以了，但是偶然又發(fā)現(xiàn)了console是有家族的，這說(shuō)明...
摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...
摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...
摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...
閱讀 1691·2023-04-25 20:16
閱讀 3857·2021-10-09 09:54
閱讀 2706·2021-09-04 16:40
閱讀 2523·2019-08-30 15:55
閱讀 840·2019-08-29 12:37
閱讀 2743·2019-08-26 13:55
閱讀 2913·2019-08-26 11:42
閱讀 3155·2019-08-23 18:26
