使用 javascript 的小技巧

econi 發布于2019-08-23 14:57 / 2824人閱讀

摘要：與條件判斷一般我們判斷或用如果我們有更多水果與去重提供了新的數據結構。所以所有的關于數據的操作，都可以用函數式的方式處理。這樣做的可讀性遠遠高于嵌套一大堆的函數調用我們選擇一些函數，讓它們結合，生成一個嶄新的函數。

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 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。Set 本身是一個構造函數，用來生成 Set 數據結構。

數組去重

const arr = [3, 5, 2, 2, 5, 5];

const unique = [...new Set(arr)];

// [3,5,2]

Array.from 方法可以將 Set 結構轉為數組。我們可以專門編寫使用一個去重的函數

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 是如此強大，因此使用 Set 可以很容易地實現并集(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 與字典類型數據

一般而已，JavaScript 實現字典數據是基于 Object 對象。但是 JavaScript 的對象的鍵只能是字符串。對于編程來說有很多不便。 ES6 提供了 Map 數據結構。它類似于 Object 對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值，字符串、數值、布爾值、數組、對象等等都可以當作鍵。

const resultMap = new Map()

.set(-1, {text:"小于",color:"yellow")

.set(0, {text:"等于",color:"black")

.set(1, {text:"大于",color:"green")

.set(null,{text:"沒有物品",color:"red"})

let state = resultMap.get(null)

// {text:"沒有物品",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、函數式的方式處理數據

按照我的理解，函數式編程主張函數必須接受至少一個參數并返回一個值。所以所有的關于數據的操作，都可以用函數式的方式處理。

假設我們有這樣的需求，需要先把數組 foo 中的對象結構更改，然后從中挑選出一些符合條件的對象，并且把這些對象放進新數組 result 里。

let foo = [

{

ame: "Stark",

age: 21

},

{

ame: "Jarvis",

age: 20

},

{

ame: "Pepper",

age: 16

}

];

//我們希望得到結構稍微不同，age大于16的對象：

let result = [

{

person: {

ame: "Stark",

age: 21

},

friends: []

},

{

person: {

ame: "Jarvis",

age: 20

},

friends: []

}

];

從直覺上我們很容易寫出這樣的代碼：

let result = [];

//有時甚至是普通的for循環

foo.forEach(function(person){

if(person.age > 16){

let newItem = {

person: person,

friends: [];

};

result.push(newItem);

}

})

使用函數式的寫法，可以優雅得多

let result = foo

.filter(person => person.age > 16)

.map(person => ({

person: person,

friends: []

}));

數組求和

let foo = [1, 2, 3, 4, 5];

//不優雅

function sum(arr) {

let x = 0;

for (let i = 0; i < arr.length; i++) {

x += arr[i];

}

return x;

}

sum(foo); // => 15

//優雅

foo.reduce((a, b) => a + b); // => 15

5、compose 與函數組合

以下代碼稱為組合 compose

const compose = function(f, g) {

return function(x) {

return f(g(x));

};

};

由于函數式編程大行其道，所以現在將會在 JavaScript 代碼看到大量的箭頭()=>()=>()=>的代碼。

ES6 版本 compose

const compose = (f, g) => x => f(g(x));

在 compose 的定義中， g 將先于 f 執行，因此就創建了一個從右到左的數據流。這樣做的可讀性遠遠高于嵌套一大堆的函數調用.

我們選擇一些函數，讓它們結合，生成一個嶄新的函數。

reverse 反轉列表， head 取列表中的第一個元素;

const head = arr => arr[0];

const reverse = arr => [].concat(arr).reverse();

const last = compose(head, reverse);

last(["jumpkick", "roundhouse", "uppercut"]);

// "uppercut"

但是我們這個這個compose不夠完善，只能處理兩個函數參數。redux源碼有個很完備的compose函數，我們借鑒一下。

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)))

}

有了這個函數，我們可以隨意組合無數個函數。現在我們增加需求，組合出一個lastAndUpper函數，內容是先reverse 反轉列表， head 取列表中的第一個元素, 最后toUpperCase大寫。

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"

GPU云服務器云服務器 JAVASCRIPT技巧 javascript七大技巧 javascript調試技巧 Javascript注入技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101398.html

原生javascript的一些好用的小技巧1

摘要：以下我經常用，又總是記不住的幾個方法轉成數組形式獲取中的內容關鍵在頁面標簽加載完成事件關鍵在阻止瀏覽器事件默認行為關鍵，記憶方法阻止事件冒泡關鍵，記憶方法數組的幾個常用方法是數組的每一項如的下標，每一個元素的順序等同于一個單純的循環可以對進以下我經常用，又總是記不住的幾個方法 document.querySelectorAll 轉成數組形式； [].slice.call(docume...

qujian 2019-08-21 17:47 評論0 收藏0
關于console的小技巧

摘要：判斷第一個參數是否為真，的話拋出異常并且在控制臺輸出相應信息。以參數為標識記錄調用的次數，調用時在控制臺打印標識以及調用次數。如果可以，打印元素表示的指定對象，或者對象視圖。接受一個參數作為標識，結束特定的計時器。我們在寫代碼的時候，偶爾會打印出后端傳過來的信息，然后根據信息寫我們的html代碼，本來以為console.log就可以了，但是偶然又發現了console是有家族的，這說明...

luqiuwen 2019-08-22 16:41 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0