基于ES6作用域和解構(gòu)賦值詳解
ES6 強(qiáng)制開(kāi)啟嚴(yán)格模式
作用域
•var 聲明局部變量,for/if花括號(hào)中定義的變量在花括號(hào)外也可訪問(wèn)
•let 聲明的變量為塊作用域,變量不可重復(fù)定義
•const 聲明常量,塊作用域,聲明時(shí)必須賦值,不可修改
// const聲明的k指向一個(gè)對(duì)象,k本身不可變,但對(duì)象可變 function test() { const k={ a:1 } k.b=3; console.log(k); }
test()解構(gòu)賦值
{ let a, b, 3, rest; [a, b, c=3]=[1, 2]; console.log(a, b); } //output: 1 2 3 { let a, b, 3, rest; [a, b, c]=[1, 2]; console.log(a, b); } //output: 1 2 undefined { let a, b, rest; [a, b, ...rest] = [1, 2, 3, 4, 5, 6]; console.log(a, b, rest); } //output:1 2 [3, 4, 5, 6] { let a, b; ({a, b} = {a:1, b:2}) console.log(a ,b); } //output: 1 2
使用場(chǎng)景
變量交換
{ let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b); }
獲取多個(gè)函數(shù)值
{ function f(){ return [1, 2] } let a, b; [a, b] = f(); console.log(a, b); }
獲取多個(gè)函數(shù)返回值
{ function f(){ return [1, 2, 3, 4, 5] } let a, b, c; [a,,,b] = f(); console.log(a, b); } //output: 1 4 { function f(){ return [1, 2, 3, 4, 5] } let a, b, c; [a, ...b] = f(); console.log(a, b); } //output: 1 [2, 3, 4, 5]
對(duì)象解構(gòu)賦值
{ let o={p:42, q:true}; let {p, q, c=5} = o; console.log(p ,q); } //output: 42 true 5
獲取json值
{ let metaData={ title: 'abc', test: [{ title: 'test', desc: 'description' }] } let {title:esTitle, test:[{title:cnTitle}]} = metaData; console.log(esTitle, cnTitle); } //Output: abc test
以上這篇基于ES6作用域和解構(gòu)賦值詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 深入理解es6塊級(jí)作用域的使用
- ES6學(xué)習(xí)教程之塊級(jí)作用域詳解
- 深入理解ES6學(xué)習(xí)筆記之塊級(jí)作用域綁定
- ES6使用let命令更簡(jiǎn)單的實(shí)現(xiàn)塊級(jí)作用域?qū)嵗治?/a>
- es6函數(shù)之rest參數(shù)用法實(shí)例分析
- es6函數(shù)之嚴(yán)格模式用法實(shí)例分析
- ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)實(shí)例分析
- ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
- ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
- 關(guān)于ES6箭頭函數(shù)中的this問(wèn)題
- ES6中Array.includes()函數(shù)的用法
- es6函數(shù)中的作用域?qū)嵗治?/a>
相關(guān)文章
微信小程序如何刷新當(dāng)前界面的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序如何刷新當(dāng)前界面的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06JavaScript實(shí)現(xiàn)簡(jiǎn)易QQ聊天界面
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易QQ聊天界面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07vscode?對(duì)?typescript代碼調(diào)試的步驟
在VS?Code中,要對(duì)?TypeScript代碼進(jìn)行調(diào)試,需要先編譯?TypeScript?代碼為JavaScript代碼,這篇文章主要介紹了vscode對(duì)typescript代碼調(diào)試的方法,需要的朋友可以參考下2023-03-03基于JS實(shí)現(xiàn)Flappy?Bird游戲的示例代碼
Flappy?Bird是13年紅極一時(shí)的小游戲,即摁上鍵控制鳥(niǎo)的位置穿過(guò)管道間的縫隙。本文將用JS實(shí)現(xiàn)這一經(jīng)典的游戲,需要的可以參考一下2022-04-04js對(duì)url進(jìn)行編碼解碼的三種方式總結(jié)
為一個(gè)字符串進(jìn)行URL編碼很容易,只需要調(diào)用encodeURI,傳入要編碼的字符串即可,而且實(shí)現(xiàn)的方法不止這一個(gè),下面這篇文章主要給大家介紹了關(guān)于js對(duì)url進(jìn)行編碼解碼的三種方式,需要的朋友可以參考下2023-02-02javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章主要介紹了javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)代碼,掌握日期對(duì)象Date,獲取時(shí)間的方法,感興趣的小伙伴們可以參考一下2015-11-11javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JavaScript前端實(shí)現(xiàn)局部打印(精確打印)的幾種方式
前端可以打印差前端展示的任意頁(yè)面的任意內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript前端實(shí)現(xiàn)局部打印(精確打印)的幾種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04一個(gè)通過(guò)script自定義屬性傳遞配置參數(shù)的方法
編寫(xiě)了一個(gè)js插件,要使用該插件需要先在html中引入該插件Js,然后再添加一個(gè)script標(biāo)簽,在里面調(diào)用,需要的朋友可以看看2014-09-09