ES6的理解

ES6自2015年推出已過了三年,現已成熟使用。好比，const和let定義、箭頭函數、模塊的導入和導出等，已經出如今咱們平常的使用中，能夠說並不陌生，但就係統的學習一直沒開始。

最近在看《深刻理解ES6》這本書,結合平常的使用,系統梳理一下(想到哪寫到哪,後續一直添加).

一.塊級做用域的出現以及變量定義的改變

塊級做用域:大括號包裹的部分造成的局部做用域。

ES6以前,JavaScript只有兩種做用域--全局做用域和局部做用域(函數做用域),大括號並不是做用域的界定符,並且具備變量提高的機制.

ES6推出後,界定了塊狀做用域,let和const定義也消除了變量提高.

ES6以前,變量在程序退出後或者函數執行完銷燬變量;ES6後,程序執行到塊級做用域外即銷燬變量.

let代替var用於定義變量,重複定義時會報錯.
const用於定義常量,且必須初始化,一旦設定後不可更改,不然會報錯.

書中推薦的最佳實踐：默認使用const定義，只在須要改變的變量中使用let定義。

平常使用的感受是定義變量變得簡潔、高效，不須要擔憂變量重名和冗餘了。

二.模塊的導出與導入

ES6引入模塊是爲了解決做用域問題。

以前的腳本形式,定義的做用域都是全局做用域;如今的模塊形式,定義的是當前模塊的的做用域,將模塊做用域和全局做用域區分出來,讓日益複雜的前端工程變得容易維護.

export做爲導出符,能夠導出變量、函數、類等。

導出的方式包括導出聲名（export var a=5；）、導出引用（var a=5； export a；）、導出重命名（export a as aaa）、還能夠默認導出（export default）

import做爲導入符，能夠單個導入（import { a } from '/example.js'）,多個導入（import { a，b } from '/example.js'）、導入整個模塊（不經常使用）、導入時重命名、默認值導入（import a
from ‘example.js’）

默認導入是ES6建立者推崇的導入方法,具備語法純淨、簡潔的特色。

3.對象的擴展

JavaScript中的每個值都是某種特定的對象，提高對象的功能和效率，對日益複雜的程序應用相當重要。

建立對象最流行和高效的方法是對象字面量,能夠完成對象的創建、變動、刪除：

var a = {//建立
    a1: 11,
    a2: 22
}
a.a2 = 222;//變動
a.a3 = 33;
delete a.a3;//刪除對象屬性

其中ES6作出支持了可計算屬性名

var a = {
    a1: 11,
    [newName]: 22//[]表示可計算部分，至關於屬性訪問的方括號訪問法
}

ES6還對對象的使用作出了簡化,例如vue中的使用:

①  components:{
        compA,//原寫法compA: compA(無需重命名時)
        compB
    }
②  computed: {
        dataFlag(){//ES6簡化寫法
            return this.dataF;
        },
        dataFlag1: function(){
            return this.dataF;
        }
    }

ES6還新增了Object.is()和Object.assign()方法:

Object.is()是全等斷定,相對==和===功能更強大
==會進行類型強制轉換,===對+0和-0以及NAN無做用

console.log(+0===-0)//true
console.log(Object.is(+0,-0))//false
console.log(NAN===NAN)//false
console.log(Object.is(NAN,NAN))//true
Object.assign()對象的混入，至關於引入了其餘對象的方法和屬性。

3、解構

解構是ES6新增的、關於對象和數組的、高效、直觀的訪問途徑。

一、對象的解構

objectA = { att1: 12, att2: 34, att3: { att31: 567, att32: 890} }

初始化對象：let { att1,att2 } = objectA;//att1=12,att2=34
重命名：let = {att1: num1, att2: num2} = objectA;//num1=12,num2=34

解構賦值：({ att1,att2 } = objectA);//**必須加小括號，賦值表達式的左側不能爲代碼塊**
函數參數中賦值：function(){ alert(value)}; function({att1,att2} = objectA);//打印objectA的值

嵌套解構：let { att3: { att31 } } = objectA;//att31=567

二、數組解構

arryA = [1,2,3,[4,5],{ab: 6,cd: 7}];

數組解構需列出目標解構值以前的全部元素

[a,b] = arryA; //a=1,b=2
[,c] = arryA; //c=2
[...arryB] = arryA; //arryB = [1,2,3];
[,,,[d]] = arryA; //d=4;
[,,,,{ab}] = arryA //ab=6;

數組解構的小應用：①交換兩個變量的值 [a,b] = [b,a]; ②賦值數組[...arryB] = arryA;

解構表達式的右側不能爲null或undefined