網站首頁 編程語言 正文
解構賦值、模板字符串
一、解構賦值
????????解構賦值語法是一種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
相關推薦
- 2023-07-03 Python?Thread虛假喚醒概念與防范詳解_python
- 2022-06-01 Python全角與半角之間相互轉換的方法總結_python
- 2022-12-21 C++?STL容器與函數謂詞示例分析講解_C 語言
- 2022-06-16 C語言詳解鏈式隊列與循環隊列的實現_C 語言
- 2023-03-29 基于WPF實現多選下拉控件的示例代碼_C#教程
- 2022-03-29 python實現k-means算法_python
- 2022-06-06 詳細講解Docker虛擬化_docker
- 2022-12-22 OpenHarmony如何調用電話服務API撥打電話_Android
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支