Es6解構賦值

2021-10-12 07:02:06 字數 2620 閱讀 1169

es6解構賦值

定義:

解構賦值就是從目標物件或陣列中提取自己想要的變數。最常用的場景是:element-ui,vant-ui按需引入,請求介面返回資料,提取想要資料。

語法:

陣列結構

var a, b, rest;

[a, b] = [10, 20];

console.log(a); // 10

console.log(b); // 20

物件解構

( = );

console.log(a); // 10

console.log(b); // 20

…rest 解構陣列

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a); // 10

console.log(b); // 20

console.log(rest); // [30, 40, 50]

…rest 解構物件(最新)

( = );

console.log(a); // 10

console.log(b); // 20

console.log(rest); //

解析乙個從函式返回

function f() 

var a, b;

[a, b] = f();

console.log(a); // 1

console.log(b); // 2

更多應用場景

預設值

var a, b;

[a=5, b=7] = [1];

console.log(a); // 1

console.log(b); // 7

交換變數

var a = 1;

var b = 3;

[a, b] = [b, a];

console.log(a); // 3

console.log(b); // 1

忽略你不感興趣的返回值

function f() 

var [a, , b] = f();

console.log(a); // 1

console.log(b); // 3

將剩餘陣列賦值給乙個變數

當解構乙個陣列時,可以使用剩餘模式,將陣列剩餘部分賦值給乙個變數。

var [a, ...b] = [1, 2, 3];

console.log(a); // 1

console.log(b); // [2, 3]

給新的變數名賦值

可以從乙個物件中提取變數並賦值給和物件屬性名不同的新的變數名。

var o = ;

var = o;

console.log(foo); // 42

console.log(bar); // true

for of 迭代和解構

var people = [

, age: 35

},, age: 25

}];for (var } of people)

// "name: mike smith, father: harry smith"

// "name: tom jones, father: richard jones"

es6中的 class繼承

父類(基類)

子類

extends 關鍵字

class 相當於es5中建構函式 class中定義方法時,前後不能加function,全部定義在class的protopyte屬性中

class中定義的所有方法是不可列舉的 class中只能定義方法,不能定義物件,變數等 class和方法內預設都是嚴格模式

es5中constructor為隱式屬性

父類

class people

eat() $ eat food`)

}}

子類

通過extends 繼承父類

class woman extends people 

eat()

} let wonmanobj=new woman('xiaoxiami');

wonmanobj.eat();

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...