基于ES6作用域和解構(gòu)賦值詳解

更新時(shí)間：2017年11月03日 09:46:56 作者：昊羲

下面小編就為大家?guī)?lái)一篇基于ES6作用域和解構(gòu)賦值詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

ES6 強(qiáng)制開啟嚴(yán)格模式

作用域

•var 聲明局部變量，for/if花括號(hào)中定義的變量在花括號(hào)外也可訪問

•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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

setInterval計(jì)時(shí)器不準(zhǔn)的問題解決方法
在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時(shí)等功能，往往是不準(zhǔn)確的，針對(duì)這個(gè)問題，本文有個(gè)不錯(cuò)的解決方案
2014-05-05
再談Javascript中的異步以及如何異步
大家都知道js是單線程的，執(zhí)行起來(lái)是順序的，在順序的業(yè)務(wù)邏輯中當(dāng)然沒有問題，如果遇到可以并發(fā)執(zhí)行的業(yè)務(wù)邏輯，再排隊(duì)就很低級(jí)了！所以這里我們?cè)賮?lái)簡(jiǎn)單的談?wù)凧S中的異步以及如何異步。
2016-08-08
JavaScript面向?qū)ο缶帉戀?gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了JavaScript面向?qū)ο缶帉戀?gòu)物車功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug，情形如下：通過異步請(qǐng)求獲取json數(shù)據(jù)，然后拼接成html代碼，最后使用innerHTML類似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進(jìn)入IE7，瀏覽器就崩潰，更別提IE6了，也是一副死給你看的樣子。于是我就把這個(gè)bug定位于IE6\7，其實(shí)這時(shí)候我已經(jīng)陷入了這個(gè)固定思維模式中，浪費(fèi)了不少時(shí)間
2013-05-05
判斷“命令按鈕”是否被鼠標(biāo)單擊詳解
在本篇文章里小編給各位分享的是關(guān)于判斷“命令按鈕”是否被鼠標(biāo)單擊的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。
2019-07-07
JavaScript中常用的字符串方法函數(shù)操作方法總結(jié)
這篇文章主要介紹了JavaScript中所有的字符串函數(shù)操作方法整理匯總,包括字符串的長(zhǎng)度、連接、查找、截取、替換、分隔、轉(zhuǎn)換等處理方法,以及網(wǎng)址中獲取文件名等等,需要的朋友可以參考下
2023-12-12
ie與ff下的event事件
event是ie自帶的一個(gè)對(duì)象，而ff中不存在該對(duì)象，只能通過傳遞參數(shù)的方式來(lái)模擬event，：（
2009-09-09
javascript版的in_array函數(shù)（判斷數(shù)組中是否存在特定值）
這篇文章主要介紹了javascript版的in_array函數(shù)（判斷數(shù)組中是否存在特定值）,需要的朋友可以參考下
2014-05-05
echarts堆疊柱狀圖柱子之間間隔開具體實(shí)現(xiàn)代碼
ECharts是一個(gè)強(qiáng)大的數(shù)據(jù)可視化庫(kù),它的堆疊柱狀圖通常用于比較各個(gè)分類的數(shù)據(jù)總量,這篇文章主要給大家介紹了echarts堆疊柱狀圖柱子之間間隔開具體實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-11-11
jQuery NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法
NProgress是基于jquery的，且版本要 >1.8 。這篇文章主要介紹了NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法,需要的朋友可以參考下
2018-01-01