這篇文章主要介紹“JavaScript中ES6相關知識有哪些”，在日常操作中，相信很多人在JavaScript中ES6相關知識有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中ES6相關知識有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設計、白云網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

　　let&&const

　　[size=0.9em]let與[size=0.9em]var的區(qū)別

　　let 變量名=變量值

　　使用let創(chuàng)建變量和使用var創(chuàng)建變量的區(qū)別

　　1、用var聲明的變量會變量提升，用let聲明的變量不會進行變量提升。

　　用let創(chuàng)建變量

　　let xxx=xxx;

　　用let創(chuàng)建函數(shù)

　　let xxx=function(){}

　　創(chuàng)建自執(zhí)行函數(shù)

　　;(function(){

　　})();

　　2、用let定義變量不允許在[size=0.9em]同一個作用域中重復聲明一個變量(只要當前作用域中有這個變量，不管是用var還是用let聲明的，再用let聲明的話會報錯：不能重復聲明一個變量)，但是可以重復定義(賦值)。

　　let i=10;

　　let i=20;/會報錯，

　　i=20;重復賦值不會報錯

　　3、暫時性死區(qū)：在代碼塊內，使用let命令聲明變量之前，該變量都是不可以使用的。

　　if (true) {

　　// TDZ開始

　　tmp = 'abc'; // ReferenceError,報錯之后下面都不會輸出

　　console.log(tmp); // ReferenceError，報錯之后下面都不會輸出

　　let tmp; // TDZ結束

　　console.log(tmp); // undefined

　　tmp = 123;

　　console.log(tmp); // 123

　　}

　　//下面也會報錯出現(xiàn)TDZ

　　console.log(typeof x); // ReferenceError

　　let x;

　　//作為比較如果一個變量根本沒有被聲明，使用typeof反而不會報錯。

　　console.log(typeof x);// "undefined"

　　4、ES6語法創(chuàng)建的變量(let)存在塊級作用域

　　[ES5]

　　window全局作用域

　　函數(shù)執(zhí)行形成的私有作用域

　　[ES6]

　　除了有ES5中的兩個作用域，ES6中新增加塊級作用域(我們可以把塊級作用域理解為之前學習的私有作用域，存在私有作用域和作用域鏈的一些機制)[size=0.9em]ES6中把大部分用{｝包起來的都稱之為塊級作用域;

　　[size=0.9em]const

　　const細節(jié)知識點和let類似

　　const聲明的常量只要聲明就必須賦值，而且變量的值是一定的，不能被修改;

　　[size=0.9em]注意：并不是變量的值不得改動，而是變量指向的那個內存地址不得改動。對于簡單類型的數(shù)據(jù)(數(shù)值、字符串、布爾值)，值就保存在變量指向的那個內存地址，因此等同于常量。但對于復合類型的數(shù)據(jù)(主要是對象和數(shù)組)，變量指向的內存地址，保存的只是一個指針，const只能保證這個指針是固定的，至于它指向的數(shù)據(jù)結構是不是可變的，就完全不能控制了。因此，將一個對象聲明為常量必須非常小心。

　　[size=1em][size=1em]const聲明的變量也存在暫時性死區(qū)，即只能在聲明的位置之后使用;

　　JS中創(chuàng)建變量的方式匯總

　　[size=1em][size=1em][ES5]

　　· var ：創(chuàng)建變量

　　function：創(chuàng)建函數(shù)

　　ES5中創(chuàng)建變量或者函數(shù)：存在變量提升，重復聲明等特征;

　　[size=1em][size=1em][ES6]

　　· let創(chuàng)建變量

　　const：ES6中創(chuàng)建常量

　　ES6中創(chuàng)建的變量或者常量：都不存在變量提升，也不可以重復聲明，而且還存在塊級作用域;

　　class：創(chuàng)建一個類

　　import：導入

　　ES6中的解構賦值

　　[size=1em][size=1em]按照原有值的結構，把原有值中的某一部分內容快速獲取到(快速賦值給一個變量)。

　　數(shù)組的解構賦值

　　[size=1em][size=1em]解構賦值本身是ES6的語法規(guī)范，使用什么關鍵字來聲明這些變量是無所謂的，如果不用關鍵字來聲明，那么就相當于給window添加的自定義屬性;(嚴格模式下必須使用關鍵字來聲明，因為嚴格模式下不允許出現(xiàn)不用關鍵字聲明的變量;)，如果解構不到值，那么變量的值就是undefined;

　　let [a,b,c]=[12,23,34];

　　var [d,e,f]=[35,41,63];

　　console.log(a,b,c)//12,23,34;

　　console.log(d,e,f)//35,41,63;

　　[q,w,e]=[1,2,3];//相當于給window添加了三個屬性:q,w,e值分別為1，2，3;(嚴格模式下會報錯)

　　[size=1em][size=1em]多維數(shù)組的解構賦值，可以讓我們快速的獲取到需要的結果

　　let [a,b,c]=[[45,36],12,[23,43,[1,2[4,[8]]]]23,34];

　　console.log(a)//[45,36]

　　console.log(b)//12

　　console.log(c)//[23,43,[1,2,[4,[8]]]]

　　//數(shù)組中不需要解構的值可用逗號(，)空開，一個逗號代表空開一項

　　let [,,,A]=[12,23,45];

　　console.log(A)//undefined

　　let [,,B]=[12,23,45]

　　console.log(B)//45

　　[size=1em][size=1em]在解構賦值中，支持擴展運算符即[size=1em]…[size=1em],只要用了擴展運算符，就相當于新生成了一個數(shù)組或者對象，如果解構不到值的話，新生成的數(shù)組或者對象為空，而不是undefined，但是擴展運算符必須放在末尾

　　let [a,...c]=[12,1,4,83,34];

　　console.log(a)//12

　　console.log(c)//[1,4,83,34];

　　let [a,...b,c]=[12,1,4,83,34];//會報錯，擴展運算符只能放在末尾;

　　對象的解構賦值

　　[size=1em][size=1em]對象的簡潔表示法：

　　const foo = 'bar';

　　const baz = {foo};

　　baz // {foo: "bar"}

　　// 等同于

　　const baz = {foo: foo};

　　[size=1em][size=1em]對象的解構與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定;而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

　　let { foo, bar } = { foo: "aaa", bar: "bbb" };

　　foo // "aaa"

　　bar // "bbb"

　　如果變量名與屬性名不一致，必須寫成下面這樣。

　　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'

　　first//error: first is not defined

　　如果要將一個已經(jīng)聲明的變量用于解構賦值，必須非常小心。

　　// 錯誤的寫法

　　let x;

　　{x} = {x: 1};//會報錯

　　因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發(fā)生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。

　　// 正確的寫法

　　let x;

　　({x} = {x: 1});

放在圓括號當中就可以避免 JavaScript 將其解釋為代碼塊。

到此，關于“JavaScript中ES6相關知識有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)-成都網(wǎng)站建設公司網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

標題名稱：JavaScript中ES6相關知識有哪些-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://jinyejixie.com/article20/csdejo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、營銷型網(wǎng)站建設、做網(wǎng)站、小程序開發(fā)、網(wǎng)站內鏈、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)