ES6 變數與解構 二

一、變數的宣告與使用 【測試示例需要在node環境中測試,瀏覽器環境下並不完全相容es6**】

es6中可以使用 {} 來包含任意一段**,被 {} 包裹的內容稱為乙個**塊(區域性作用域)

let關鍵字　【宣告變數】

特性：1.塊級作用域    【區域性作用於宣告的**塊中】

2.變數宣告不會提公升    【變數未宣告前無法使用該變數】

3.暫時性死區    【該變數宣告前面的區域】

4.不能重複宣告    【同一**塊中不能重複宣告同一變數】

const關鍵字    【宣告常量(一般用大寫字母表示常量)】

特性：【在遵從let宣告變數的特性上再新增如下兩條特性】

1、宣告時初始化    【宣告的同時必須賦值】

2、值不可修改

二、解構

1、陣列的解構賦值　【左邊是變數,右邊是值,左邊無匹配值時為undefined】

完全解構【左右資料恰好匹配】

eg：

let [a,b,c] = [1,2,3];

不完全解構【左右資料不同】

a、左邊資料多則只宣告該變數,其值為undefined

b、右邊資料多餘項則忽視不考慮

eg：

let [a, [b], d] = [1, [2, 3], 4];     //

a = 1; b = 2; d = 4

集合解構【擴充套件運算子的使用...】

a、...tail返回目前右邊未匹配的所有值組成的陣列

eg：

let [head, ...tail] = [1, 2, 3, 4]; //

head = 1; tail = [2, 3, 4]
//累加操作
let sum = 0;
function
test(...arr)
}test(1,2,3,4,5);

預設值【當匹配值嚴格等於undefined,預設值生效】

eg：

let [x, y = 'b'] = ['a']; 　　//

x='a', y='b』

預設值為函式

注：先判斷是否匹配到值,若匹配值嚴格等於undefined,再進行預設值的賦值運算;否則,預設值賦值操作不會執行

eg：

function

test() 
let [x = test()] =;
console.log(x); 
//test 2

2、物件的解構賦值　【右邊不存在左邊變數對應的屬性名時,物件屬性值為undefined;即物件中未宣告的屬性的值為undefined】

物件原始結構賦值【變數重新命名後,最終宣告的變數是重新命名的變數】

eg：

let  = 

//上面**模擬於下面**【左邊name匹配右邊物件中同名屬性獲取其屬性值並賦值給name重新命名的myname變數==》將let myname = 'nzc'】
let myname = 'nzc';
let myage = 18;

物件的屬性沒有次序,變數必須與屬性同名才能取到正確的值【重新命名相同可以簡寫】

eg：

let  = 

//簡寫如下
let = 
//模擬於下面**
let name = 'nzc';
let age = 18;

物件巢狀解構

eg：

let person =  ] };

let ] } = person; //
name='nzc' age=18
//模擬於下面 param變數被重新命名為 [name, ],所以自身並未宣告;即不存在param變數
let ] } = ] }

預設值(預設值生效的條件是，物件的屬性值嚴格等於undefined)

eg：

//

name='nzchs'->name變數預設值;age:myage=21->myage預設值【age重新命名為myage再賦予預設值】
let = 
let =

3、字串的解構賦值

解構時，字串被轉換成了乙個類似陣列的物件。

eg：

let [a, b, c] = 'hello'; //

a=h;b=e;c=l

length屬性解構

eg：

let  = 'hello'; //

len = 5 【匹配右邊字串轉換為的類陣列物件的length屬性並將其值賦值給重新命名的len變數】

4、數值和布林值解構賦值

解構時，如果等號右邊是數值和布林值，則會先轉為相應的基本引用資料型別物件

eg：

let  = 123; //

函式 str1 === number.prototype.tostring 返回true
let = true; //
函式 str2 === boolean.prototype.tostring 返回true

5、函式引數的解構賦值

基本陣列解構賦值傳參

eg：

function add([x, y])

add([1, 2]); //
函式add返回值為3

函式引數帶有預設值

eg：

function test() 

//函式呼叫
test(); //
返回值為[3, 8]
test(); //
返回值為[3, 0]
test({}); //
返回值為[0, 0]
test(); //
報錯 cannot destructure property `x` of 'undefined' or 'null'

三、解構常用用途

1、變數值的交換

eg：

let x = 1;

let y = 2;
[x,y] =[y,x]; 
console.log(x,y); 
//2 1

2、函式引數的賦值：

eg：

//

[a=0,b=1] = [1] a=1,b=1
function test([a=0,b=1])
test([1]); //
返回值為2

3、提取物件中的資料

eg：

let obj= ;

let = obj; //
定義對應的變數

4、輸入模組的指定方法

const  = require("source-map");

5、遍歷map結構

var map = new

map();
map.set('name', 'nzc');
map.set('age', 18);
for(let [key, value] of map)

ES6 變數解構

es6允許按照一定的模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 destructuring 語法 let a,b,c 1,2,3 console.log a,b,c 1 2 3 順序 從陣列中取值,按照對應位置,對變數取值,這種寫法屬於 匹配模式 只要等號兩邊模式相同,左邊的變數就會被...

ES6 變數解構用法

1 陣列解構，可以設定預設值 use strict let x,y b a 控制台輸出b console.log y 2 物件解構 use strict let 控制台輸出aaa console.log foo 控制台輸出bbb console.log bar 物件的解構與陣列有乙個重要的不同。陣列...

es6變數解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示，可以從陣列中提取值，按照位置的物件...