資訊專欄INFORMATION COLUMN
摘要：自年推出已過了三年現(xiàn)已成熟使用。最近在看深入理解這本書結(jié)合日常的使用系統(tǒng)梳理一下想到哪寫到哪后續(xù)一直添加一塊級(jí)作用域的出現(xiàn)以及變量定義的改變塊級(jí)作用域大括號(hào)包裹的部分形成的局部作用域。二模塊的導(dǎo)出與導(dǎo)入引入模塊是為了解決作用域問題。
ES6自2015年推出已過了三年,現(xiàn)已成熟使用。比如，const和let定義、箭頭函數(shù)、模塊的導(dǎo)入和導(dǎo)出等，已經(jīng)出現(xiàn)在我們?nèi)粘５氖褂弥?，可以說并不陌生，但就系統(tǒng)的學(xué)習(xí)一直沒開始。
最近在看《深入理解ES6》這本書,結(jié)合日常的使用,系統(tǒng)梳理一下(想到哪寫到哪,后續(xù)一直添加).
一.塊級(jí)作用域的出現(xiàn)以及變量定義的改變
塊級(jí)作用域:大括號(hào)包裹的部分形成的局部作用域。
ES6之前,JavaScript只有兩種作用域--全局作用域和局部作用域(函數(shù)作用域),大括號(hào)并非作用域的界定符,而且具有變量提升的機(jī)制.
ES6推出后,界定了塊狀作用域,let和const定義也消除了變量提升.
ES6之前,變量在程序退出后或者函數(shù)執(zhí)行完銷毀變量;ES6后,程序執(zhí)行到塊級(jí)作用域外即銷毀變量.
let代替var用于定義變量,重復(fù)定義時(shí)會(huì)報(bào)錯(cuò).
const用于定義常量,且必須初始化,一旦設(shè)定后不可更改,否則會(huì)報(bào)錯(cuò).
書中推薦的最佳實(shí)踐：默認(rèn)使用const定義，只在需要改變的變量中使用let定義。
日常使用的感覺是定義變量變得簡(jiǎn)潔、高效，不需要擔(dān)心變量重名和冗余了。
二.模塊的導(dǎo)出與導(dǎo)入
ES6引入模塊是為了解決作用域問題。
之前的腳本形式,定義的作用域都是全局作用域;現(xiàn)在的模塊形式,定義的是當(dāng)前模塊的的作用域,將模塊作用域和全局作用域區(qū)分出來,讓日益復(fù)雜的前端工程變得容易維護(hù).
export作為導(dǎo)出符,可以導(dǎo)出變量、函數(shù)、類等。
導(dǎo)出的方式包括導(dǎo)出聲名（export var a=5；）、導(dǎo)出引用（var a=5； export a；）、導(dǎo)出重命名（export a as aaa）、還可以默認(rèn)導(dǎo)出（export default）
import作為導(dǎo)入符，可以單個(gè)導(dǎo)入（import { a } from "/example.js"）,多個(gè)導(dǎo)入（import { a，b } from "/example.js"）、導(dǎo)入整個(gè)模塊（不常用）、導(dǎo)入時(shí)重命名、默認(rèn)值導(dǎo)入（import a
from ‘example.js’）
默認(rèn)導(dǎo)入是ES6創(chuàng)建者推崇的導(dǎo)入方法,具有語(yǔ)法純凈、簡(jiǎn)潔的特點(diǎn)。
3.對(duì)象的擴(kuò)展
JavaScript中的每一個(gè)值都是某種特定的對(duì)象，提升對(duì)象的功能和效率，對(duì)日益復(fù)雜的程序應(yīng)用至關(guān)重要。
創(chuàng)建對(duì)象最流行和高效的方法是對(duì)象字面量,可以完成對(duì)象的建立、變更、刪除：
var a = {//創(chuàng)建
a1: 11,
a2: 22
}
a.a2 = 222;//變更
a.a3 = 33;
delete a.a3;//刪除對(duì)象屬性
其中ES6做出支持了可計(jì)算屬性名
var a = {
a1: 11,
[newName]: 22//[]表示可計(jì)算部分，相當(dāng)于屬性訪問的方括號(hào)訪問法
}
ES6還對(duì)對(duì)象的使用做出了簡(jiǎn)化,例如vue中的使用:
① components:{
compA,//原寫法compA: compA(無(wú)需重命名時(shí))
compB
}
② computed: {
dataFlag(){//ES6簡(jiǎn)化寫法
return this.dataF;
},
dataFlag1: function(){
return this.dataF;
}
}
ES6還新增了Object.is()和Object.assign()方法:
Object.is()是全等判定,相對(duì)==和===功能更強(qiáng)大
==會(huì)進(jìn)行類型強(qiáng)制轉(zhuǎn)換,===對(duì)+0和-0以及NAN無(wú)作用
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()對(duì)象的混入，相當(dāng)于引入了其他對(duì)象的方法和屬性。
三、解構(gòu)
解構(gòu)是ES6新增的、關(guān)于對(duì)象和數(shù)組的、高效、直觀的訪問途徑。
1、對(duì)象的解構(gòu)
objectA = { att1: 12, att2: 34, att3: { att31: 567, att32: 890} }
初始化對(duì)象：let { att1,att2 } = objectA;//att1=12,att2=34
重命名：let = {att1: num1, att2: num2} = objectA;//num1=12,num2=34
解構(gòu)賦值：({ att1,att2 } = objectA);//**必須加小括號(hào)，賦值表達(dá)式的左側(cè)不能為代碼塊**
函數(shù)參數(shù)中賦值：function(){ alert(value)}; function({att1,att2} = objectA);//打印objectA的值
嵌套解構(gòu)：let { att3: { att31 } } = objectA;//att31=567
2、數(shù)組解構(gòu)
arryA = [1,2,3,[4,5],{ab: 6,cd: 7}];
數(shù)組解構(gòu)需列出目標(biāo)解構(gòu)值之前的所有元素
[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;
數(shù)組解構(gòu)的小應(yīng)用：①交換兩個(gè)變量的值 [a,b] = [b,a]; ②賦值數(shù)組[...arryB] = arryA;
解構(gòu)表達(dá)式的右側(cè)不能為null或undefined
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101349.html
摘要：的翻譯文檔由的維護(hù)很多人說，阮老師已經(jīng)有一本關(guān)于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書的目的是以目前還在制定中的ECMASc...
摘要：最近買了深入理解的書籍來看，為什么學(xué)習(xí)這么久還要買這本書呢主要是看到核心團(tuán)隊(duì)成員及的創(chuàng)造者為本書做了序，作為一個(gè)粉絲，還是挺看好這本書能給我?guī)硪粋€(gè)新的升華，而且本書的作者也非常厲害。 使用ES6開發(fā)已經(jīng)有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語(yǔ)法介紹。 最近買了《深入理解ES6》的書籍來看，為什么學(xué)習(xí)ES6這么久還要買這本書呢？主要是看到Daniel A...
摘要：理解元編程和是屬于元編程范疇的，能介入的對(duì)象底層操作進(jìn)行的過程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個(gè)可以用來進(jìn)行元編程的特性。在之后，標(biāo)準(zhǔn)引入了，從而提供比較完善的元編程能力。 導(dǎo)讀 幾年前 ES6 剛出來的時(shí)候接觸過 元編程（Metaprogramming）的概念，不過當(dāng)時(shí)還沒有深究。今天在應(yīng)用和學(xué)習(xí)中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...
摘要：塊級(jí)綁定拓展對(duì)象功能解構(gòu)改進(jìn)的數(shù)組代理和反射附錄小的改變附錄 understanding es6 -- Nicholas C. Zakas 塊級(jí)綁定 function 拓展對(duì)象功能 解構(gòu) symbol Sets and Maps Iterators and Generators class 改進(jìn)的數(shù)組 promise 代理和反射 -- Proxy&Reflection mo...
閱讀 3771·2021-09-22 15:49
閱讀 3318·2021-09-08 09:35
閱讀 1430·2019-08-30 15:55
閱讀 2332·2019-08-30 15:44
閱讀 722·2019-08-29 16:59
閱讀 1608·2019-08-29 16:16
閱讀 491·2019-08-28 18:06
閱讀 903·2019-08-27 10:55
