標(biāo)準(zhǔn)開(kāi)頭

今天我們來(lái)看一下ES6的函數(shù)部分知識(shí)

函數(shù)

函數(shù)初始值

有時(shí)候，函數(shù)的非必填參數(shù)，我們可以給予其默認(rèn)值。保證程序完整不會(huì)出錯(cuò)

在早期，我們賦初始值可能是這樣做的：

// 早期ES5方法 function ajax(url, method, param) {method = method ? method : 'GET';param = param ? param : {};console.log(url, method, param); }復(fù)制代碼

但是這種方法不夠整潔和美觀。且維護(hù)較為麻煩

在ES6中，我們可以直接在參數(shù)欄上指定默認(rèn)值

function ajax(url, method = 'GET', param = {}) {console.log(url, method, param) }復(fù)制代碼

這樣讓方法看起來(lái)更加整潔。且保證了程序的正常運(yùn)行

我們可以用babel編譯為ES5代碼review一下：

'use strict';function ajax(url) {var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';var param = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};console.log(url, method, param); }ajax('http://www.baidu.com');復(fù)制代碼

轉(zhuǎn)換為ES5代碼后，我們可以看出：其轉(zhuǎn)換方法就是判斷參數(shù)列表內(nèi)是否有值且長(zhǎng)度是否足夠。然后再進(jìn)行判斷

函數(shù)剩余操作符

在對(duì)于很多重復(fù)參數(shù)的函數(shù)，我們可以用“...”剩余操作符進(jìn)行省略

例如，我們現(xiàn)在有個(gè)方法，要把每個(gè)參數(shù)進(jìn)行相加，參數(shù)可以隨便定義長(zhǎng)度。但是長(zhǎng)度必須>2

在ES5中，我們可能要重復(fù)寫(xiě)好多的參數(shù)名。不僅造成浪費(fèi)，也讓程序易讀性變差

function sum(param1, param2, param3, param4, param5) {console.log(param1 + param2 + param3 + param4 + param5); }復(fù)制代碼

其實(shí)我們從param2 - param5可以借助ES6合并為同一個(gè)參數(shù)。且無(wú)需手動(dòng)擴(kuò)展

function sum(param1, ...paramN) {let result = param1;paramN.forEach((param) => {result += param});console.log(result); }復(fù)制代碼

合并后的參數(shù)會(huì)輸出為一個(gè)數(shù)組，大家可以按照數(shù)組的操作來(lái)操作它

函數(shù)參數(shù)解構(gòu)

如果我們按照一個(gè)對(duì)象的方式當(dāng)作參數(shù)傳入一個(gè)函數(shù)，且函數(shù)參數(shù)也是對(duì)象的方式接受。那我們可以完成一次解構(gòu)

還記得之前解構(gòu)要怎么做嗎？要保證解構(gòu)雙方的類(lèi)型，數(shù)據(jù)格式要類(lèi)似

function f({name, age}) {console.log(name, age); }f({name: 'janlay', age: 8});復(fù)制代碼

不難理解

箭頭函數(shù)

箭頭函數(shù)應(yīng)該是ES6函數(shù)中最Nice的一個(gè)知識(shí)了。中文名叫“箭頭函數(shù)”，英文名叫“Lambda表達(dá)式”。

箭頭函數(shù)是為了在你聲明方法時(shí)，更加簡(jiǎn)單便捷。其語(yǔ)法如下:

let sum = (a, b) => {return a + b;};復(fù)制代碼

箭頭左邊的是參數(shù)列表，右邊的就是函數(shù)方法體

當(dāng)你的函數(shù)只有一個(gè)參數(shù)時(shí)，你可以更加簡(jiǎn)化函數(shù)方法

let result = num => num * 2;復(fù)制代碼

但是當(dāng)你使用箭頭函數(shù)時(shí)，你可就小心咯。我們用箭頭函數(shù)會(huì)涉及到一個(gè)叫“作用域”的問(wèn)題。這個(gè)問(wèn)題通常影響我們的關(guān)鍵字this的值

因?yàn)榧^函數(shù)內(nèi)調(diào)用this，作用域并不是指向箭頭函數(shù)本身，而是指向比箭頭函數(shù)還要大一層的函數(shù)。舉個(gè)栗子

let myInfo = {name: 'janlay',sayHello: () => {console.log(`Hi,My name is ${this.name}`)} };myInfo.sayHello();復(fù)制代碼

這時(shí)候控制臺(tái)輸出undefined

正如我們所說(shuō)的，箭頭函數(shù)內(nèi)的this會(huì)指向它上一層函數(shù)中的作用域。但是他并沒(méi)有上一層函數(shù)體。所以我們打印this，也是顯示undefined

簡(jiǎn)述深淺拷貝

先上這樣一段代碼

let myInfo = {name: 'janlay',age: 17 }; let heInfo = {}; heInfo = myInfo; heInfo.name = 'Mike'; console.log(myInfo);復(fù)制代碼

按照一般邏輯，我們復(fù)制一份myInfo到heInfo。然后我們修改heInfo內(nèi)的屬性，輸出myInfo應(yīng)該不會(huì)變才對(duì)

但是我們錯(cuò)了

{ name: 'Mike', age: 17 }復(fù)制代碼

像這種對(duì)象拷貝叫做 “淺拷貝”。意味著只是拷貝了內(nèi)存地址，但是并沒(méi)有再內(nèi)存中復(fù)制一份給新變量

像這樣的淺拷貝，還有ES6的“Object.assign()”方法。他的作用是傳入2個(gè)對(duì)象進(jìn)行合并，然后賦值給第三個(gè)對(duì)象。

有時(shí)候我們會(huì)用到淺拷貝，但是一般情況下我們要用到深拷貝。也就是我們常說(shuō)的值傳遞

深拷貝的方式很多。由于本人學(xué)識(shí)有限，給大家?guī)?lái)一個(gè)容易理解的深拷貝方法

1. JSON.parse()和JSON.stringify方法

這應(yīng)該算是最簡(jiǎn)單的深拷貝方法了。其原理就是將源對(duì)象轉(zhuǎn)化為一個(gè)JSON對(duì)象，然后用parse方法再釋放為一個(gè)對(duì)象。經(jīng)過(guò)這么一折騰，內(nèi)存地址就發(fā)生了改變。也就達(dá)到了深拷貝的效果

let myInfo = {name: 'janlay',age: 17 }; let heInfo = {}; heInfo = JSON.parse(JSON.stringify(myInfo)); heInfo.name = 'Mike'; console.log(myInfo);復(fù)制代碼

結(jié)果輸出為:?{ name: 'janlay', age: 17 }

2. 使用外置clone方法

其原理也很簡(jiǎn)單，通過(guò)遍歷對(duì)象，讓對(duì)象的每個(gè)值都挨個(gè)復(fù)制給新對(duì)象，不再進(jìn)行整體復(fù)制。細(xì)分到對(duì)象的最小單位

function clone(origin) {let newObj = {}; //新對(duì)象for (let key in origin) { //循環(huán)原始對(duì)象if (typeof origin[key] === 'object') { //如果對(duì)象內(nèi)的屬性是一個(gè)對(duì)象newObj[key] = clone(origin[key]) // 用遞歸方式對(duì)對(duì)象內(nèi)的對(duì)象進(jìn)行拆分} else { //否則newObj[key] = origin[key]; //如果是簡(jiǎn)單的屬性，直接復(fù)制}}return newObj; //返回拷貝后的新對(duì)象 }復(fù)制代碼

調(diào)用??heInfo = clone(myInfo);

結(jié)果輸出為?{ name: 'janlay', age: 17 }

以上兩種深拷貝方法都非常簡(jiǎn)單。像了解更深度的深拷貝，這里推薦一個(gè)掘金的另一篇文章

?深拷貝的終極探索（90%的人都不知道）

The End

Babel中文網(wǎng) - ES6在線轉(zhuǎn)換ES5工具

總結(jié)

以上是生活随笔為你收集整理的了解一下ES6: 函数简述深浅拷贝的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。