了解一下ES6 函式 簡述深淺拷貝

2021-09-11 14:09:14 字數 3120 閱讀 6195

標準開頭

今天我們來看一下es6的函式部分知識

有時候,函式的非必填引數,我們可以給予其預設值。保證程式完整不會出錯

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

// 早期es5方法

function ajax(url, method, param) ;

console.log(url, method, param);

}複製**

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

在es6中,我們可以直接在引數欄上指定預設值

function ajax(url, method = 'get', param = {}) 複製**
這樣讓方法看起來更加整潔。且保證了程式的正常執行

我們可以用babel編譯為es5**review一下:

'use strict';

function ajax(url) ;

console.log(url, method, param);

}ajax('');複製**

轉換為es5**後,我們可以看出:其轉換方法就是判斷引數列表內是否有值且長度是否足夠。然後再進行判斷

在對於很多重複引數的函式,我們可以用「...」剩餘操作符進行省略

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

在es5中,我們可能要重複寫好多的引數名。不僅造成浪費,也讓程式易讀性變差

function sum(param1, param2, param3, param4, param5) 複製**
其實我們從param2 - param5可以借助es6合併為同乙個引數。且無需手動擴充套件

function sum(param1, ...paramn) );

console.log(result);

}複製**

合併後的引數會輸出為乙個陣列,大家可以按照陣列的操作來操作它

如果我們按照乙個物件的方式當作引數傳入乙個函式,且函式引數也是物件的方式接受。那我們可以完成一次解構

還記得之前解構要怎麼做嗎?要保證解構雙方的型別,資料格式要類似

function f() 

f();複製**

不難理解

箭頭函式應該是es6函式中最nice的乙個知識了。中文名叫「箭頭函式」,英文名叫「lambda表示式」。

箭頭函式是為了在你宣告方法時,更加簡單便捷。其語法如下:

let sum = (a, b) => ;複製**
箭頭左邊的是引數列表,右邊的就是函式方法體

當你的函式只有乙個引數時,你可以更加簡化函式方法

let result = num => num * 2;複製**
但是當你使用箭頭函式時,你可就小心咯。我們用箭頭函式會涉及到乙個叫「作用域」的問題。這個問題通常影響我們的關鍵字this的值

因為箭頭函式內呼叫this,作用域並不是指向箭頭函式本身,而是指向比箭頭函式還要大一層的函式。舉個栗子

let myinfo = `)

}};myinfo.sayhello();複製**

這時候控制台輸出undefined

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

先上這樣一段**

let myinfo = ;

let heinfo = {};

heinfo = myinfo;

heinfo.name = 'mike';

console.log(myinfo);複製**

按照一般邏輯,我們複製乙份myinfo到heinfo。然後我們修改heinfo內的屬性,輸出myinfo應該不會變才對

但是我們錯了

複製**
像這種物件拷貝叫做 「淺拷貝」。意味著只是拷貝了記憶體位址,但是並沒有再記憶體中複製乙份給新變數

像這樣的淺拷貝,還有es6的「object.assign()」方法。他的作用是傳入2個物件進行合併,然後賦值給第三個物件。

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

深拷貝的方式很多。由於本人學識有限,給大家帶來乙個容易理解的深拷貝方法

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

這應該算是最簡單的深拷貝方法了。其原理就是將源物件轉化為乙個json物件,然後用parse方法再釋放為乙個物件。經過這麼一折騰,記憶體位址就發生了改變。也就達到了深拷貝的效果

let myinfo = ;

let heinfo = {};

heinfo = json.parse(json.stringify(myinfo));

heinfo.name = 'mike';

console.log(myinfo);複製**

結果輸出為:

2. 使用外接clone方法

其原理也很簡單,通過遍歷物件,讓物件的每個值都挨個複製給新物件,不再進行整體複製。細分到物件的最小單位

function

clone(origin) ; //新物件

for (let key in origin) else

}return newobj; //返回拷貝後的新物件

}複製**

呼叫  heinfo = clone(myinfo);

結果輸出為

深拷貝的終極探索(90%的人都不知道)

漫畫 有趣的了解一下賦值 深淺拷貝

什麼是賦值?將某一數值賦給某個變數的過程,稱為賦值。將確定的數值賦給變數的語句叫做賦值語句。所賦 值 可以是數字,也可以是字串和表示式等。賦值識別符號 簡單的賦值,都是由 表示。復合賦值使用 後面跟 表示。這些賦值識別符號,也是常說的 簡寫樣式 每個數學賦值識別符號都是獨一無二的 注意,數學賦值識別...

總結一下ES6的promise

promise有三種狀態 pending 進行中 fulfilled 已成功 和rejected 已失敗 promise建構函式接受乙個函式作為引數,該函式的兩個引數分別是resolve和reject,其中resolve函式會將pending狀態改為fulfilled,reject函式將pendin...

es6下的高階函式

flter函式 返回乙個新的陣列 每次會根據條件進行一次判斷 支返回為true的一項 map函式 對陣列的每一項進行操作 返回每一項的陣列。陣列物件可以直接取出自己想要的物件 let arr let res arr.map console.log res reduce 第一引數是上次返回的值 第二個...