JavaScript ES6解構運算子的理解和運用
目錄
- 前言
- 解構符號的作用
- 使用方法
- 解構賦值的應用
- 淺談應用
- 提取on資料
- 可擴充套件運算子...
- 交換變數值
- 總結
前言
最近一直在學，看到了ES6中的解構符號，覺得這個給我們的程式碼簡潔性帶來了一個飛躍式的提升，而且它已經運用在了企業開發中，假如未來你工作中，別人在用，你卻讀不懂別人的程式碼，這造成的影響還是很大的。因此，好好學習一下吧。
你可以不用，但是你不能不懂✔
Script ES6中，有很多www.cppcns.com特性都是為了簡化程式碼，方便程式設計師去書寫的。解構運算子就是其中很好的特性，它可以通過減少賦值語句的使用，或者減少訪問資料下標、物件屬性的方式，使得程式碼更加簡潔，增強了程式碼的可讀性。
解構符號的作用
解構賦值是對賦值運算子的擴充套件，他是一種針對陣列或者物件進行模式匹配，然後對其中的變數進行賦值
ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構
使用方法
基本使用
let [a,b,c] = [1,2,3]; // let a = 1,b = 2,c = 3;
巢狀使用
// 陣列
let [a,[[b],c]] = [1,[[2],3]];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 物件
let obj = { x: ['hello',{y: 'world'}] };
let { x: [x,{ y }] } = obj;
console.log(x); // hello
console.log(y); // world忽略
// 陣列
let [a,b] = [1,3];
console.log(a); // 1
console.log(b); // 3
// 物件
let obj = { x: ['hello',{ y: 'world' }] };
let { x: [x,{ }] } = obj;
console.log(x); // hello
不完全解構
// 陣列
let [a = 1,b] = [];
console.log(a); // 1
console.log(b); // undefined
// 物件
let obj = { x: [{ y: 'world' }] };
let { x: [{ y },x] } = obj;
console.log(x); // undefined
console.log(y); // world剩餘運算子
// 陣列
let [a,...b] = [1,3];
console.log(a); // 1
console.log(b); // [2,3]
// 物件
let {a,...rest} = {a: 10,b: 20,c: 30,d: 40};
console.log(a); // 10
console.log(b); // 20
console.log(rest); // { c: 30,d: 40 }
字串
let [a,c,d,e] = 'hello'; console.log(a); // h console.log(b); // e console.log(c); // l console.log(d); // l console.log(e); // o
解構預設值
// 當解構模式有匹配結果，且匹配結果是 undefined 時，會觸發預設值作為返回結果。
let [a = 2] = [undefined];
console.log(a); // 2
// 物件
let {a = 10,b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
交換變數的值.
let a = 1; let b = 2; [a,b] = [b,a]; console.log(a); // 2 console.log(b); // 1
解構賦值的應用
// 1. 淺克隆與合併
let name = { name: "aaa" }
let age = { age: 'bbb' }
let person = { ...name,...age }
console.log(person) // { name: "aaa",age: 'bbb' }
let a = [1,3];
let b = [4,5];
let c = [...a,...b];
console.log(c); // [1,3,4,5]
// 2. 提取JSON資料
let JsonData = { id: 10,www.cppcns.comstatus: "OK",data: [111,222] }
let { id,status,data: numbers } = JsonData;
console.log(oCIFcQkRoid,numbers); //10 "OK" [111,222]
// 3. 函式引數的定義
//www.cppcns.com 引數有序
function fun1([a,c]) { console.log(a,c) }
fun1([1,3]); // 1 2 3
// 引數無序
function fun2({ x,y,z }) { console.log(x,z) }
fun2({ z: 3,x: 2,y: 1 }); // 2 1 3
// 引數有預設值
function fun3 ([a=1,b]) {
console.log(a,b);
}
fun3([,3]) // 1 3
淺談應用
提取json資料
上面列出了幾種解構賦值的應用，其中我們最常用的應該是第二種，提取json資料，後端傳給前端的資料就是json資料，前端通常要將資料賦值給一個物件，就是使用的這種方法。
可擴充套件運算子...
我在leetcode上刷題的時候使用過，我是用arr.push(...arr1)來合併兩個陣列的，有點像上面的淺克隆與合併。比起以往我們合併陣列的操作，這個簡直不要太簡單。
第88題，合併兩個有序陣列。
var merge = function(nums1,m,nums2,n) {
nums1.length=m;
nums2.length=n;
nums1.push(...nums2);
let arr=nums1.sort((a,b)=>{
return a-b;
})
return arr;
};
...這個運算子是將陣列中的資料遍歷出來，並拷貝到當前物件當中。
arr.push(...arr1)這個方法會將arr1的陣列元素全部解析出來，然後依次新增到arr中去，完成兩個陣列的合併。
交換變數值
再來看看交換變數值這個應用，我依稀記得一位學長的面試題：不佔用額外記憶體空間的情況下，交換a與b的值。當時有兩種解法，一是使用異或，二是用數學方法，將ab相加，再分別減之，(a=a+b,b=a-b,a=a-b)，現在使用解構符號的這個方法[a,a]，是不是也可以呢？
總結
到此這篇關於JavaScript ES6解構運算子的理解和運用的文章就介紹到這了,更多相關ES6解構運算子內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！