日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

ES6新語法(解構賦值、模板字符串)

作者:bear*6 更新時間: 2022-01-18 編程語言

一、解構賦值

????????解構賦值語法是一種JavaScript表達式,通過解構賦值,可以將屬性/值從對象/數組中取出,賦值給其他變量。
對象和數組逐個對應表達式,或稱對象字面量和數組字面量,提供了一種簡單的定義一個特定的數據組的方法。

var x = [1,2,3,4,5];

????????解構賦值使用了相同的語法,不同的是在表達式左邊定義了要從原變量中取出什么變量。如下:

var x = [1,2,3,4,5];
var [y,z] = x;
console.log(y);
console.log(z);

打印的結果為:
在這里插入圖片描述

1、解構數組

1、變量聲明并賦值時的解構

如下:

var foo = ['wh','rc','xl'];
var [wh,rc,xl] = foo;
console.log(wh);
console.log(rc);
console.log(xl);

打印結果為:
在這里插入圖片描述

2、變量先聲明后賦值的解構

通過解構分離變量的聲明,可以為一個變量賦值,如下:

var a,b;
[a,b] = [1,2];
console.log(a);
console.log(b)

打印結果為:
在這里插入圖片描述

3、默認值

????????為了防止從數組中取出一個值為undefined的對象,可以在表達式左邊的數組中為任意對象預設默認值。如下:

var a,b;
[a=5,b=7] = [1];
console.log(a);
console.log(b);

打印結果為:
在這里插入圖片描述

4、交換變量

在一個結構表達式中可以交換講個變量的值。如下:

var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a);
console.log(b);

打印的結果為:
在這里插入圖片描述

5、解析一個從函數返回的數組

例如,讓[1,2]成為函數f()的輸出值,可以使用解構在一行內完成解析。

function f(){
    return [1,2];
}
var a,b;
[a,b] = f();
console.log(a);
console.log(b);

打印的結果為:
在這里插入圖片描述

6、忽略某些返回值

(1)我們可以忽略掉不需要的值,如下:

function f(){
    return [1,2,3];
}
var [a,,b] = f();
console.log(a);
console.log(b)

打印的結果為:
在這里插入圖片描述
(2)還可以忽略全部返回值,如下:

[,,] = f();

7、將剩余數組賦值給一個變量

????????當解構一個數組時,可以使用剩余模式,將數組剩余部分賦值給一個變量,如下:

var [a,...b] = [1,2,3];
console.log(a);
console.log(b)

打印結果為:
在這里插入圖片描述
注意:如果剩余元素右側有逗號,會拋出SyntaxError,因為剩余元素必須是數組的最后一個元素。

2、解構對象

1、基本賦值

 var o = {p:42,q:true};
 var{p,q} = o;
 console.log(p);
 console.log(q);

打印結果為:
在這里插入圖片描述

2、無申明賦值

一個變量可以獨立于其申明進行解構賦值,如下:

 var a,b;
({a,b} = {a:1,b:2})
console.log(a);
console.log(b);

打印結果為:
在這里插入圖片描述
????????需要注意的是,賦值語句周圍的圓括號(...)在使用對象字面量無聲明解構賦值時是必須的。
????????{a,b} = {a:1,b:2}不是有效的獨立語法,因為左邊的{a,b}被認為是一個塊而不是對象字面量。然而({a,b} = {a:1,b:2})是有效的,正如var {a,b} = {a:1.b:2}。而且(...)表達式之前需要有一個分號,否則可能會被當做上一行中的函數執行。

3、給新的變量名賦值

可以從一個對象中提取變量并賦值給和對象屬性名不同的新的變量名。

var o = {p:42,q:true};
var {p:foo,q:bar} = o;
console.log(foo);
console.log(bar);

打印結果為:
在這里插入圖片描述

4、默認值

????????變量可以先賦予默認值當要提取的對象對應屬性解析為undefined,變量就被賦予默認值,如下:

var {a = 10,b = 5} = {a:3};
console.log(a);
console.log(b);

打印的結果為:
在這里插入圖片描述

5、給新的變量命名并提供默認值

????????一個屬性可以同時滿足(1)從一個對象解構,并分配給一個不同名稱的變量(2)分配一個默認值,以防未解構的值是undefined。如下:

var {a:aa = 10,b:bb = 5} = {a:3}
console.log(aa);
console.log(bb);

打印結果為:
在這里插入圖片描述

二、模板字符串

????????ES5標準中一般輸出模板是通過字符串拼接的方式進行的。在ES6中可以通過模板字符串簡化字符串的拼接,模板字符串通過反引號來表示"``",如果要嵌入變量通過"${ 變量名 }"來實現:

  let arr = [
   {
        name: '小王',
        age: 20
    },
    {
        name: '小冉',
        age: 23
    },
    {
        name: '小熊',
        age: 25
    }
]
let str = "";
for(let i=0;i<arr.length;i++){
    str += `姓名是${ arr[i].name },年齡是${ arr[i].age }歲\n`;
}
console.log(str)

打印結果為:
在這里插入圖片描述

原文鏈接:https://blog.csdn.net/m0_48375854/article/details/122341775

欄目分類
最近更新