ES6的理解

silvertheo 發布于2019-08-23 14:55 / 981人閱讀

摘要：自年推出已過了三年現已成熟使用。最近在看深入理解這本書結合日常的使用系統梳理一下想到哪寫到哪后續一直添加一塊級作用域的出現以及變量定義的改變塊級作用域大括號包裹的部分形成的局部作用域。二模塊的導出與導入引入模塊是為了解決作用域問題。

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()對象的混入，相當于引入了其他對象的方法和屬性。

三、解構

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

1、對象的解構

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

2、數組解構

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

數組解構需列出目標解構值之前的所有元素

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

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

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

云服務器 GPU云服務器云計算的理解 cdn的理解對大數據的理解 ajax的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101349.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
《深入理解ES6》筆記——導讀

摘要：最近買了深入理解的書籍來看，為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序，作為一個粉絲，還是挺看好這本書能給我帶來一個新的升華，而且本書的作者也非常厲害。使用ES6開發已經有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語法介紹。最近買了《深入理解ES6》的書籍來看，為什么學習ES6這么久還要買這本書呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 評論0 收藏0
【資源集合】 ES6 元編程（Proxy & Reflect & Symbol）

摘要：理解元編程和是屬于元編程范疇的，能介入的對象底層操作進行的過程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個可以用來進行元編程的特性。在之后，標準引入了，從而提供比較完善的元編程能力。導讀幾年前 ES6 剛出來的時候接觸過元編程（Metaprogramming）的概念，不過當時還沒有深究。今天在應用和學習中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 評論0 收藏0
Understanding ES6 -- 深入理解ES6書籍

摘要：塊級綁定拓展對象功能解構改進的數組代理和反射附錄小的改變附錄 understanding es6 -- Nicholas C. Zakas 塊級綁定 function 拓展對象功能解構 symbol Sets and Maps Iterators and Generators class 改進的數組 promise 代理和反射 -- Proxy&Reflection mo...

PAMPANG 2019-08-23 15:14 評論0 收藏0