JavaScript ES6解構運算符的理解和運用
前言
最近一直在學JavaScript,看到瞭ES6中的解構符號,覺得這個給我們的代碼簡潔性帶來瞭一個飛躍式的提升,而且它已經運用在瞭企業開發中,假如未來你工作中,別人在用,你卻讀不懂別人的代碼,這造成的影響還是很大的。因此,好好學習一下吧。
你可以不用,但是你不能不懂✔
JavaScript ES6中,有很多特性都是為瞭簡化代碼,方便程序員去書寫的。解構運算符就是其中很好的特性,它可以通過減少賦值語句的使用,或者減少訪問數據下標、對象屬性的方式,使得代碼更加簡潔,增強瞭代碼的可讀性。
解構符號的作用
解構賦值是對賦值運算符的擴展,他是一種針對數組或者對象進行模式匹配,然後對其中的變量進行賦值
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, 2, 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, 2, 3]; console.log(a); // 1 console.log(b); // [2,3] // 對象 let {a, b, ...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, b, 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,2,3]; let b = [4,5]; let c = [...a,...b]; console.log(c); // [1,2,3,4,5] // 2. 提取JSON數據 let JsonData = { id: 10, status: "OK", data: [111, 222] } let { id, status, data: numbers } = JsonData; console.log(id, status, numbers); //10 "OK" [111, 222] // 3. 函數參數的定義 // 參數有序 function fun1([a, b, c]) { console.log(a, b, c) } fun1([1, 2, 3]); // 1 2 3 // 參數無序 function fun2({ x, y, z }) { console.log(x, y, 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,b] = [b,a],是不是也可以呢?
總結
到此這篇關於JavaScript ES6解構運算符的理解和運用的文章就介紹到這瞭,更多相關ES6解構運算符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解JS ES6變量的解構賦值
- 關於ES6中的箭頭函數超詳細梳理
- JavaScript擴展運算符的學習及應用詳情(ES6)
- go語言題解LeetCode88合並兩個有序數組示例
- 一文搞懂JavaScript中的this綁定規則