ES6深刻淺出-2 新版函數：3 三個點運算 & 新版字符串-1.函數與對象的語法糖

主要講的內容



時間充裕的話就講，模板字面量

默認參數值

首先講es6以前，咱們是怎麼作的。例如咱們要寫一個求和的函數，
請兩個參數的和，可是若是有的人就是穿一個參數呢？

那麼b沒有傳值，b的值是多少呢？打印出來就是undefined。NaN就是a+b的值

因此咱們要處理b這個參數。b等於b或者是0，這是一個縮寫的形式。基本上全部es5的前端都會去這麼寫，默認參數

上面的一行簡寫的方式等於下面if else的方式。
b賦值b給b有什麼用？就是爲了形式好看而已。若是b不存在就讓他等於0

或的邏輯就是一個短路邏輯，前面若是是一個真值，就直接取b的值，交給b。若是前面b是個假值，就看第二個的值，把第二個的值交給b。
就是這麼個意思，這就是一個取默認值的慣用寫法。因此Es5的寫法讓人很難懂。

那麼a和b若是你不傳的話，哪一個不傳，哪一個就是0

只傳一個1。結果是1

傳1和2

若是我要求四個數值的和。那麼就要判斷四遍

es6的語法。

若是a或者b的值等於undefined。那麼默認就是0

至關因而這種舊的方法。if判斷b的值是不是undefined




兩個都不傳，0+0就是0

以上就是默認參數。

函數默認參數和python的區別

若是你沒有給我傳第二個參數。那麼我就給第二個參數一個默認值


傳一個1過去。數組內的結果最終返回的就是1

1放的空數組和2放的空數組。是同一個空數組嗎？

因此每次進push函數的時候，它都是一個新的空數組。


python並非這樣的。數組是共有的，每次調用這個數組，只初始化一次。js裏面，每次都是新的數組，這就是二者之間的區別。
​​​​​​

剩餘參數

要求不少個參數的和，可是並不知道傳遞幾個參數進來。

es5裏面的寫法。arguments就是全部的參數


arguments是一個僞數組，它的原型鏈直接到了這個對象，，只有數組的樣子，沒有數組的方法。


arguments是有個僞數組，它的原型鏈直接到了這個對象，看下面的__proto__:Object


循環argumens求和



假設第一個參數,咱們傳一個前綴進去。

由於第一個參數是傳遞的信息，因此循環arguments的時候 從1開始求和。再也不是從0開始了。

三個點

三個點後面加參數，就表示後面全部的參數都統一的放到numbers這個數組裏面。

打印出來numbers的值

這樣求和就是循環numbers這個數組了。

簡寫的形式，由於numbers是一個真的數組。reduce方法是計算數組元素相加後的綜合。reduce的第二個參數，是可選的，表示初始值，這裏給的初始值是0
reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

 

僞數組轉數組

沒有剩餘參數的話。那麼怎麼獲取到後面的全部參數呢？經過arguments.slice從第一個參數開始切 一直到最後一個。問題在於arguments是一個僞數組，它沒有slice方法。因此第一步就應該把arguments變成一個數組。

很遺憾es5沒有給咱們提供一個好的方法，把一個僞數組變成數組。下面一句話是前端程序員看了全部的api後，發現一個最方便的，es5裏面把一個arguments從一個僞數組變成一個真數組的方式。

這一句是es6裏面提供新的方法，把一個僞數組編程一個數組的方法。


更簡單的方式。前面加三個點表示把1到10這10個參數都放到新的數組裏面。

打印出了args，那麼它是否是一個真的數組呢？

在concole內查看，args的原型就是一個數組，

 

最簡單的方式

展開操做

array2是array1的後三項

a對應的上面的1，b對應2，c對應3，...array2表示後面都包了。abc實際上是三個佔位符，表示佔了前面三個元素，那麼array2只能去後面的456這三個元素了，array2就是456

那麼array2的值輸出就是 456

 

前面三個用逗號省略掉了。這叫作模式匹配。

複製一個array1。可是這樣沒有什麼意義。直接寫array2=array1就能夠。

在array1前面加0 後面加7.

es5的寫法。用數組0連接數組1，再連接數組7

解構賦值

把a和b的值相互調換，須要用到第三個變量。

es6的寫法，藉助，數組，讓左邊的第0項等於右邊數組的第0項，讓左邊的第1項等於右邊數組的第1項，






因此括號往上走。b的值就變成了這樣。這就是爲何寫js的代碼。每一行後面都要加分號的緣由了。若是不加的話，括號會自動往上走

b是數組3

由於括號往上走了，直接等於了最後的[3]

讓a等於10，b等於20，rest等於後面的 30,40,50。這是解構賦值的寫法，從等號右邊的數組解構。

解構對象

es5的語法

es6的語法糖。表示從frank裏面取name、age、gender。而後這三個東西分別聲明一個變量。
這就是解構賦值。把frank的結構解開，而後分別賦值給name、age、gender

寫成一行的方式


a等於1，b等於2

若是沒有2，那麼b就undefined了。若是想給b一個默認值呢？

若是沒有b，那麼b就等於7

若是b有值，那麼b就等於2

因此5和7是 a和b的默認值





聲明一個函數，你能夠就看到這樣的語法。主要看f函數的返回值是什麼。因此結果就是a=1 b=2


解構賦值，取了個別名。解構賦值取的是name，可是把name重命名成xingming


那麼有沒有這個name的值呢？windows自帶了name。因此這裏咱們把name都換成name2這個變量名，打印name2就會報錯。

繼續再複雜一點的 -子對象

假設frank有孩子，如今想取他的孩子的名字tom該怎麼取呢？

先取出child，再從child裏面取出name



child的name起個別名。這裏只有xingming這個變量被聲明瞭。




輸出child報錯。它並無被聲明，只聲明瞭name、age、gender這三個變量

綜合語法

若是孩子剛出生，沒有起名字，也就沒有name這個屬性值，給name屬性一個默認值爲Tom

若是有名字，就是裏面的那個名字

這裏的frank是被解構的對象。

拷貝對象

把objA的屬性，一個一個的全拷貝過來。



a是字符串被完整的拷貝過來了。

全拷貝，沒有把這個對象拷貝過來，只是把這個對象的地址拷貝過來了。

改了B的值可是A的值也被改了。全拷貝就是你們共用對象。

不講深拷貝。由於作不到。全部深拷貝的答案都是錯的

方便的方法作全拷貝

把objeA全部的屬性都拷貝過來。

打印拷貝後的B。這就是把A的全部的屬性，全拷貝過來。

作對象合併

定義A和C。如今要合併A和C。只看下面兩個紅框內的代碼。最下面的代碼是沒有修改的。

之前的寫法，先把A的拷貝過來，再把C的拷貝過來。後面的屬性會覆蓋前面的屬性。

最後p1的值是C的。

三個點的寫法

把A的屬性拷貝過來，在把C的屬性拷貝過來。C在後面會覆蓋前面的屬性。

MDN 上更多的例子  

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC

這是深拷貝。若是這個對象知足如下條件就是深拷貝
第一個這個對象沒有複雜的對象。沒有日期對象，沒有正則對象。沒有函數，沒有循環引用，沒有全部普通對象以外的對象，
第二個條件：這個對象沒有Undefined
‘
不適用於複雜對象的深拷貝。

若是面試官問你，寫一個能是適應於複雜對象的深拷貝。回答：遞歸，能夠參考別人寫的算法，理解着背下來。

字符串

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E8%A7%A3%E6%9E%84%E5%AF%B9%E8%B1%A1
這是一個es5版本的字符串處理。它接收一個對象，判斷這個對象是否是一個undefined，若是是undefined就把這個對象初始化成一個空對象，若是不是undefined就不變它。

它要取options裏面的size，還要判斷options裏面的size是否是undefined若是是undefined就默認取big。若是不是undefined就無論它

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

首先參數默認值就是一個空對象。


左邊這一堆東西默認值是空對象。

來解構一下。取這個對象的size若是沒有那麼就默認爲big。取cords對象，若是就默認爲{ x: 0, y: 0 }。取radius若是沒有就是25 

function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

一步一步來解析

把取的第一個參數命名爲a，若是a不存在，那就給a默認值爲空對象{}

這個a我要給它解構一下，分別是size、cords、radius

同時要給解構的這幾個值 分別一個默認值

推薦的寫法，定義總的變量爲options。而後裏面再去解構options這個變量

合構-屬性增強

和解構相反的操做。

假設有兩個變量叫作x和y。把他倆合成一個對象。這就是把他合起來。


es6的語法糖


變量和值相同 就直接寫一個。




解構都是在等號的左邊，右邊是被解構的對象

function的簡化寫法

若是要加參數

從別的地方拷貝obj1對象。

一個對象的屬性和方法，下面是四種寫法

之前的函數寫法

還能夠給方法的參數加默認值

最後一個例子-動態key值

想聲明一個對象，給你一個key

須要你聲明一個對象 有這個key



這麼寫他的key就是字符串key。而不是變量key



咱們很難把一個變量變成一個key，一旦咱們把變量寫在那裏，它自動的就變成了字符串。由於js他的字符串是能夠隱藏的


因此js程序員一直以來，想要動態的添加key的時候，只能這麼去添加

es6語法糖

把key做爲一個變量，而後取key這個變量的值。

同時還能夠作運算。key+key就是兩個x

以上就是動態的key值
 

結束