ES6 變數與解構 二

2022-08-24 11:45:08 字數 3507 閱讀 6952

一、變數的宣告與使用 【測試示例需要在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 上面的 表示，可以從陣列中提取值，按照位置的物件...