快捷導(dǎo)航

ES6 中可以提升幸福度的小功能

更新時(shí)間：2018年08月06日 09:16:29 作者：前端小智

這篇文章主要介紹了ES6 中可以提升幸福度的小功能,在量解構(gòu)賦值的用途，函數(shù)的用處等方面給大家介紹，需要的朋友可以參考下

一、變量解構(gòu)賦值的用途

1）交換變量的值

let x = 1;
let y = 2;
[x, y] = [y, x]

2）從函數(shù)返回多個(gè)值

// 返回一個(gè)數(shù)組
function example(){
  return [1, 2, 4];
}
let [a, b, c] = example() 
// 返回一個(gè)對(duì)象
function example(){
  return {
    foo:1,
    bar: 2
  }
}
let {foo, bar} = example(); 或者 ( {foo, bar} = example() )

3）提取JSON數(shù)據(jù)

let jsonData = {
 id:42,
 status: "OK",
 data: [867, 5309]
};
let { id, status, data: number} = jsonData;

4）輸入模塊的指定方法

加載模塊時(shí)，往往需要指定輸入的方法，解構(gòu)賦值使得輸入語(yǔ)句非常清晰

const { SourceMapConsumer, SourceNode } = require("source-map")

5) 數(shù)組復(fù)制的功能

在es5中，開發(fā)者經(jīng)常使用 concat（）方法克隆數(shù)組:

// 在 es5 中克隆數(shù)組
var colors = [ 'red', 'green', 'blue' ];
var clonedColors = colors.concat();
console.log(clonedColors); // "[red, green, blue]"

concat() 方法的設(shè)計(jì)初衷是連接兩個(gè)數(shù)組，如果調(diào)用時(shí)不傳遞參數(shù)就會(huì)返回當(dāng)前數(shù)組的副本。在es6中可以通過(guò)不定元素的語(yǔ)法來(lái)實(shí)現(xiàn)相同的目標(biāo)：

let colors = [ 'red', 'green', 'blue' ]
let [ ...clonedColors ] = colors;
console.log(clonedColors); // "[red, green, blue]"

6) 結(jié)合Set集合，創(chuàng)建一個(gè)無(wú)重復(fù)元素的數(shù)組

function eliminateDuplicates(items) {
  return [...new Set(items)]
}
let numbers = [1, 2, 3, 3, 3, 4, 5];
let noDuplicates = eliminateDuplicates(numbers );
console.log(noDuplicates ); // [1,2,3,4,5]

7) 使用apply 把兩個(gè)數(shù)據(jù)合并成一個(gè)

var arra1 = [{
 name: '小智',
 age: 26
}]
var arra2 = [{
 name: '大智',
 age: 27
}]
arra1.push.apply(arra1, arra2)
console.log(arra1)

二、函數(shù)的用處（常見(jiàn)就不多說(shuō)了）

1）創(chuàng)建立即執(zhí)行函數(shù)表達(dá)式

// es5
let person = function(name) {
 return {
  getName: function() {
   return name;
  }
 }
}('小智');
console.log(person.getName()); // 小智

在這段代碼中，立即執(zhí)行函數(shù)表達(dá)式創(chuàng)建了一個(gè)包含getName() 方法的新對(duì)象，將參數(shù) name 作為該對(duì)象的一個(gè)私有成員返回給函數(shù)的調(diào)用者。

只要箭頭函數(shù)包裹在小括號(hào)里，就可以用它實(shí)現(xiàn)相同的功能

// es6
let person = ((name) => {
 return {
  getName: function() {
   return name;
  }
 }
})('小智2');
console.log(person.getName()); //小智

2.利用參數(shù)默認(rèn)值可以指定某一個(gè)參數(shù)不得省略，如果省略就拋出一個(gè)錯(cuò)誤。

function throwEmptyError() {
  throw new Error('參數(shù)不能為空');
}
function foo(mustBeParams = throwEmptyError() ){
  return mustBeParams();
}
foo() // 參數(shù)不能為空

三、擴(kuò)展對(duì)象的功能性讓代碼更加簡(jiǎn)潔

1) 可計(jì)算屬性名

在es6中，使用方括號(hào)可以計(jì)算屬性名稱，如

let lastName ='last name';
let person = {
  "first name": 'Nicholas',
  [lastName]: 'Zakas'
}
console.log(person['first name']); // "Nicholas"
console.log(person[lastName]); // Zakas

2) 利用 Object.assign()合并兩個(gè)對(duì)象

function request(options) {
 let defaultOptions = {
  port: 8000,
  type: 'get'
 }
 Object.assign(options,defaultOptions);
 console.log(options)
}
request({url: 'http://www.baidu.com'})

四、結(jié)合es6簡(jiǎn)潔函數(shù)寫法，高階函數(shù)的應(yīng)用

1) tab 函數(shù)

// 此處tap函數(shù)接受一個(gè) vaule 并返回一個(gè)包含value 閉包函數(shù),該函數(shù)被執(zhí)行
const tap = (value) => (fn) => (
 typeof(fn) === 'function' && fn(value),
 console.log(value)
)

tab函數(shù)用處:假設(shè)你在遍歷一個(gè)來(lái)自服務(wù)器的數(shù)組，并發(fā)現(xiàn)數(shù)據(jù)錯(cuò)了，因此你想調(diào)試一下，看看數(shù)組包含了什么，就可以用 tab函數(shù)

[1, 2 ,3, 4].forEach((a) => {
 tap(a)((a)=> {
  console.log(a)
 })
});
#### 2) once 函數(shù)

在很多情況下，我們只需要運(yùn)行一次給定的函數(shù)，發(fā)起一次銀行支付請(qǐng)求等，這時(shí)就可以用到 once 函數(shù)。

const once = (fn) => {
  let done = false;
  return function () {
    return done?undefined:((done=true),fn.apply(this,arguments))
  }
}
const doPayment = once(()=>{
 console.log('payment is done')
})
doPayment(); // payment is done
console.log(doPayment()); //undefined
#### 3) 函數(shù)柯里化的應(yīng)用

開發(fā)者編寫代碼的時(shí)候應(yīng)用的不同階級(jí)編寫很多日志，我們可以編寫一個(gè)如下的日志函數(shù):

const loggerHelper = (mode, initialMessage, errorMessage, lineNo) => {
 if (mode === 'DEBUG') {
  console.debug(initialMessage,errorMessage + 'at line:' + lineNo)
 }
 else if (mode === 'ERROR') {
  console.error(initialMessage,errorMessage + 'at line:' + lineNo)
 }
 else if (mode === 'WARN') {
  console.warn(initialMessage,errorMessage + 'at line:' + lineNo)
 }
 else
  throw "Wrong mode"
}

當(dāng)開發(fā)者需要向控制臺(tái)打印Stats.js文件中的錯(cuò)誤時(shí)，可以用如下方式：

loggerHelper("ERROR", "ERROR At Stats.js", "Invalid argument passed", 23);

這樣對(duì)于我們追求完美可讀的程序員來(lái)說(shuō)，可能是不太能接受的，現(xiàn)在用柯里來(lái)優(yōu)化以上代碼，
先簡(jiǎn)要說(shuō)明什么是函數(shù)柯里化：

柯里化是把一個(gè)多參數(shù)函數(shù)轉(zhuǎn)換成一個(gè)嵌套的一元函數(shù)過(guò)程。

封裝一個(gè)把把多參數(shù)函數(shù)轉(zhuǎn)制為一元函數(shù)的curry函數(shù)

let curry = (fn) => {
 if (typeof fn !== 'function') {
  throw Error('No function provided');
 }
 return function curriedFn(...args) {
  // 傳入?yún)?shù)是否小于函數(shù)參數(shù)列表長(zhǎng)度，
  if (args.length < fn.length) {
   return function() {
    return curriedFn.apply(null, args.concat([].slice.call(arguments)));
   }
  }
  return fn.apply(null, args)
 }
} 
let errorLogger = curry(loggerHelper)("ERROR")("ERROR At Stats.js");
let debugLogger = curry(loggerHelper)("DEBUG")("ERROR")("Debug At Stats.js");
let warnLogger = curry(loggerHelper)("WARN")("Warn")("At Stats.js");
// 用于錯(cuò)誤
errorLogger("Error message", 21)
// 用于調(diào)試
debugLogger('Debug message', 233)
// 用于警告
warnLogger("Warn message", 34);

現(xiàn)在我們能夠輕松引用上面的柯里化并在各自的上下文中使用它們了。

總結(jié)

以上所述是小編給大家介紹的ES6 中可以提升幸福度的小功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！