es6中容易忽視的細節（二）

時間 2019-11-10 標籤 es6 容易忽視細節

變量的解構賦值

結構賦值容許使用默認值html
```
let [foo = true] = [];
foo // true
```
ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。因此，只有當一個數組成員嚴格等於undefined，默認值纔會生效。c++
```
let [x = 1] = [undefined];
x//1;
let [x=1] = [null];
x//null ;
```
對象的結構和數據的結構相似，但數組的結構是根據順序決定的，對象的結構是根據未知決定的，變量名與鍵值對應才能取到值es6
```
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
```

字符串也能夠結構賦值ajax

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

字符串和數組的結構還有一個屬性編程
```
let {length:yx}=[1,2,3,,4,,5,]
yx // 7
```

結構賦值的用途
第一個用途交換變量的值數組

在es5中咱們須要用一箇中間變量來轉換交換變量的值，可是在es6中不須要
var x=4,y=5,c;
c=x;x=y;y=c;
在es6中咱們直接能夠用結構的方式直接交換
[x,y]=[y,x]

第二個用途是給函數設置默認值安全

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};
指定參數的

第三個用途輸入模塊的制定的方法app

const {set,index} = require('set-index');

es6給字符串提供了遍歷的方法async

for(let item of 'sdfsdf'){
    console.log(item)
}

字符串方法中可使用正則的是match、replace、search、split
es5中的正則修飾符g(全局匹配)/i(不區分大小寫匹配)/m(多行匹配)，es6中新增的修飾符u用來正確處理大於uFFFF的 Unicode 字符函數
```
/?{2}/.test('??') // false
/?{2}/u.test('??') // true
```

es6中數組擴展運算符的用法

在es5中咱們能夠這樣求取數組的最大值
var arr=[1,2,4,5,5]
Math.max.apply(null,arr)
在es6中咱們能夠直接
Math.max(...arr)

擴展運算髮在字符串中也一樣可使用
```
var hello = 'hello';
console.log(...hello)    //h e l l o
```
擴展運算符和Array.from()均可以將類數組(類數組說的普遍一點其實就含有length屬性的對象)的對象轉換爲數組對象，但其內部實質調用時遍歷器接口（Symbol.iterator）)[https://www.cnblogs.com/toulo...]
對象屬性的書寫：在es5中咱們是不容許把對象的鍵寫成變量或者是表達式，可是在es6中咱們能夠把對象的鍵寫成表達式，以及函數名也能夠寫成表達式的形勢
```
var a = 'index'
var obj = {a:5}
obj    // {a:5}    es5中的寫法
let obj = {[a]:5}
obj    // {index:5}    es6中的寫法會獲得這樣的結果
function [a](){}
```
Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，若是源對象某個屬性的值是對象，那麼目標對象拷貝獲得的是這個對象的引用(只對嵌套的對象實現淺拷貝，對於非嵌套的對象實行的是深拷貝)。

var obj1={a:1,b:{c:2}}
var obj2=Object.assign({},obj1)
obj1.a++;
obj1.b.c++;
obj2    // {a:1,b:{c:3}}

Object.assign也能夠用來處理數組，同位置的值進行替換，不一樣位置的源數組的值添加到目標數組
```
Object.assign([1,2,4],['sdfs',4,{a:5},4,6])
['sdfs',4,{a:5},4,6]    直接返回這樣的結果
```
null運算符
編程實務中，若是讀取對象內部的某個屬性，每每須要判斷一下該對象是否存在。好比，要讀取message.body.user.firstName，安全的寫法是寫成下面這樣。
```
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';
```
這樣的層層判斷很是麻煩，所以如今有一個提案，引入了「Null 傳導運算符」（null propagation operator）?.，簡化上面的寫法。
```
const firstName = message?.body?.user?.firstName || 'default';
```

擴展

// 若是 a 是 null 或 undefined, 返回 undefined
// 不然返回 a.b.c().d
a?.b.c().d

// 若是 a 是 null 或 undefined，下面的語句不產生任何效果
// 不然執行 a.b = 42
a?.b = 42

// 若是 a 是 null 或 undefined，下面的語句不產生任何效果
delete a?.b