主要講的內容

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

默認參數值

首先講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

這是深拷貝。如果這個對象滿足以下條件就是深拷貝
第一個這個對象沒有復雜的對象。沒有日期對象，沒有正則對象。沒有函數，沒有循環引用，沒有所有普通對象之外的對象，
第二個條件：這個對象沒有Undefined
‘
不適用于復雜對象的深拷貝。

如果面試官問你，寫一個能是適應于復雜對象的深拷貝。回答：遞歸，可以參考別人寫的算法，理解著背下來。

字符串

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
這是一個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值

結束

總結

以上是生活随笔為你收集整理的ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖的全部內容，希望文章能夠幫你解決所遇到的問題。

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