標準開頭

今天我們來看一下ES6的函數部分知識

函數

函數初始值

有時候，函數的非必填參數，我們可以給予其默認值。保證程序完整不會出錯

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

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

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

在ES6中，我們可以直接在參數欄上指定默認值

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

這樣讓方法看起來更加整潔。且保證了程序的正常運行

我們可以用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');復制代碼

轉換為ES5代碼后，我們可以看出：其轉換方法就是判斷參數列表內是否有值且長度是否足夠。然后再進行判斷

函數剩余操作符

在對于很多重復參數的函數，我們可以用“...”剩余操作符進行省略

例如，我們現在有個方法，要把每個參數進行相加，參數可以隨便定義長度。但是長度必須>2

在ES5中，我們可能要重復寫好多的參數名。不僅造成浪費，也讓程序易讀性變差

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

其實我們從param2 - param5可以借助ES6合并為同一個參數。且無需手動擴展

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

合并后的參數會輸出為一個數組，大家可以按照數組的操作來操作它

函數參數解構

如果我們按照一個對象的方式當作參數傳入一個函數，且函數參數也是對象的方式接受。那我們可以完成一次解構

還記得之前解構要怎么做嗎？要保證解構雙方的類型，數據格式要類似

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

不難理解

箭頭函數

箭頭函數應該是ES6函數中最Nice的一個知識了。中文名叫“箭頭函數”，英文名叫“Lambda表達式”。

箭頭函數是為了在你聲明方法時，更加簡單便捷。其語法如下:

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

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

當你的函數只有一個參數時，你可以更加簡化函數方法

let result = num => num * 2;復制代碼

但是當你使用箭頭函數時，你可就小心咯。我們用箭頭函數會涉及到一個叫“作用域”的問題。這個問題通常影響我們的關鍵字this的值

因為箭頭函數內調用this，作用域并不是指向箭頭函數本身，而是指向比箭頭函數還要大一層的函數。舉個栗子

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

這時候控制臺輸出undefined

正如我們所說的，箭頭函數內的this會指向它上一層函數中的作用域。但是他并沒有上一層函數體。所以我們打印this，也是顯示undefined

簡述深淺拷貝

先上這樣一段代碼

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

按照一般邏輯，我們復制一份myInfo到heInfo。然后我們修改heInfo內的屬性，輸出myInfo應該不會變才對

但是我們錯了

{ name: 'Mike', age: 17 }復制代碼

像這種對象拷貝叫做 “淺拷貝”。意味著只是拷貝了內存地址，但是并沒有再內存中復制一份給新變量

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

有時候我們會用到淺拷貝，但是一般情況下我們要用到深拷貝。也就是我們常說的值傳遞

深拷貝的方式很多。由于本人學識有限，給大家?guī)硪粋€容易理解的深拷貝方法

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

這應該算是最簡單的深拷貝方法了。其原理就是將源對象轉化為一個JSON對象，然后用parse方法再釋放為一個對象。經過這么一折騰，內存地址就發(fā)生了改變。也就達到了深拷貝的效果

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

結果輸出為:?{ name: 'janlay', age: 17 }

2. 使用外置clone方法

其原理也很簡單，通過遍歷對象，讓對象的每個值都挨個復制給新對象，不再進行整體復制。細分到對象的最小單位

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

調用??heInfo = clone(myInfo);

結果輸出為?{ name: 'janlay', age: 17 }

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

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

The End

Babel中文網 - ES6在線轉換ES5工具

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。