成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

讓人愛不釋手的 JS 擴展操作符13種寫法

作者：布蘭
開發 前端
擴展操作符給我最大的印象就是，這玩意還挺方便的，然而最近寫代碼的時候經常性的遇到需要使用擴展操作符的場景，所以我干脆在網上找了些資料，把平時常見的應用場景給羅列了下，發現這個操作符是真的強大，有多強大？來看看下面這些用法吧。

[[377080]]

 我相信你一定或多或少的接觸或使用過 JS 中的擴展操作符(Spread Operator)，在基本形式中，擴展操作符看起來像三個點，比如如下這樣：

  1. [...arr] 

而實際上，它也就是這么用的，但是如果事情有這么簡單，就不用我在這里寫了。擴展操作符給我最大的印象就是，這玩意還挺方便的，然而最近寫代碼的時候經常性的遇到需要使用擴展操作符的場景，所以我干脆在網上找了些資料，把平時常見的應用場景給羅列了下，發現這個操作符是真的強大，有多強大?來看看下面這些用法吧。

1. 字符串轉數組

字符串轉數組最普遍的做法是這樣：

  1. let str = 'hello' 
  2. let arr = str.split('') 
  3. console.log(arr)  // ['h', 'e', 'l', 'l', 'o'] 

而使用了擴展操作符后可以這樣：

  1. let str = 'hello' 
  2. let arr = [...str] 
  3. console.log(arr)  // ['h', 'e', 'l', 'l', 'o'] 

2. 將類數組轉換為數組

在 JS 中有一種數據結構叫做 NodeList，它和數組很相似，也被叫做“類數組”，類數組是什么?在 MDN 中是這么定義它的：

  • “類數組：擁有一個 length 屬性和若干索引屬性的任意對象。

類數組有哪些呢?以下這些可以看成是類數組：

  • NodeList：document.querySelectorAll() 返回的對象;
  • HTMLCollection：document.getElementsByTagName() 返回的對象;
  • Arguments：函數里的參數對象;

類數組沒有數組的一些方法比如 push、map 等，所以經常需要將它們轉成數組，而通常我們是這么轉化的：

  1. let nodeList = document.querySelectorAll('div') 
  2. console.log(nodeList instanceof NodeList)  // true 
  3.  
  4. let arr = Array.apply(null, nodeList) 
  5. console.log(arr instanceof Array)  // true 
  6.  
  7. // 或者 
  8. let arr2 = [].slice.call(nodeList) 
  9. console.log(arr2 instanceof Array)  // true 
  10.  
  11. // 又或者 
  12. let arr3 = Array.from(nodeList) 
  13. console.log(arr3 instanceof Array)  // true 

而有了擴展操作符可以這么做：

  1. let nodeList = document.querySelectorAll('div') 
  2. let arr = [...nodeList] 
  3. console.log(arr instanceof Array)  // true 

3. 向數組中添加項

往數組中添加幾項通常這樣操作：

  1. let arr = [5] 
  2.  
  3. // 從頭部添加 
  4. arr.unshift(1, 2) 
  5. console.log(arr)  // [1, 2, 5] 
  6.  
  7. // 從尾部添加 
  8. arr.push(6, 7) 
  9. console.log(arr)  // [1，2, 5, 6, 7] 
  10.  
  11. // 從任意位置添加 
  12. arr.splice(2, 0, 3, 4) 
  13. console.log(arr)  // [1，2, 3, 4, 5, 6, 7] 

使用擴展操作符后：

  1. let arr = [3, 4] 
  2. arr = [1, 2, ...arr, 5, 6] 
  3. console.log(arr)  // [1, 2, 3, 4, 5, 6] 

4. 拷貝數組和對象

通常拷貝一個數組，可以這么做：

  1. let arr = [1, 3, 5, 7] 
  2. let arr2 = arr.concat() 
  3.  
  4. // 或者 
  5. let arr3 = arr.slice() 
  6. arr[0] = 2 
  7. console.log(arr)   // [2, 3, 5, 7] 
  8. console.log(arr2)  // [1, 3, 5, 7] 
  9. console.log(arr3)  // [1, 3, 5, 7] 

但是有了擴展操作符，拷貝數組就能寫得很簡單：

  1. let arr = [1, 3, 5, 7] 
  2. let arr2 = [...arr] 
  3. arr[0] = 2 
  4. console.log(arr2)  // [1, 3, 5, 7] 

同樣的，擴展操作符還能拷貝對象。拷貝對象的通常做法：

  1. let person = { name: '布蘭', age: 12} 
  2. let p2 = Object.assign({}, person) 
  3. person.age = 20 
  4. console.log(person)  // { name: '布蘭', age: 20 } 
  5. console.log(p2)      // { name: '布蘭', age: 12 } 

有了擴展操作符，拷貝一個對象就相當方便了：

  1. let person = { name: '布蘭', age: 12 } 
  2. let p2 = {...person} 
  3. person.age = 20 
  4. console.log(person)  // { name: '布蘭', age: 20 } 
  5. console.log(p2)      // { name: '布蘭', age: 12 } 
  6.  
  7. // 甚至還可以這么寫 
  8. let {...p3} = person 
  • “注意：擴展操作符只能深拷貝結構為一層的對象，如果對象是兩層的結構，那么使用擴展操作符拷貝會是淺拷貝。

5. 合并數組或對象

數組合并通常是這么做的：

  1. let arr1 = [1, 3, 5] 
  2. let arr2 = [2, 4, 6] 
  3. let arr3 = arr1.concat( arr2 ) 
  4. console.log(arr3)  // [1, 3, 5, 2, 4, 6] 

使用擴展操作符后，可以這么寫：

  1. let arr1 = [1, 3, 5] 
  2. let arr2 = [2, 4, 6] 
  3. let arr3 = [...arr1, ...arr2] 
  4. console.log(arr3)  // [1, 3, 5, 2, 4, 6] 

對了，它除了能合并數組外還能合并對象呢。合并對象，通常的做法是：

  1. let p1 = { name: '布蘭' } 
  2. let p2 = { age: 12 } 
  3. let p3 = Object.assign({}, p1, p2) 
  4. console.log(p3)  // { name: '布蘭', age: 12} 

用擴展操作符合并對象：

  1. let p1 = { name: '布蘭' } 
  2. let p2 = { age: 12 } 
  3. let p3 = { ...p1, ...p2 } 
  4. console.log(p3)  // { name: '布蘭', age: 12} 

6. 解構對象

經常我們給對象設置參數的時候會這么做：

  1. let person = { 
  2.     name: '布蘭', 
  3.     age: 12, 
  4.     sex: 'male' 
  5. } 
  6. let name = person.name 
  7. let age = person.age 
  8. let sex = person.sex 

而有了擴展操作符，我們就可以這么寫，不過其實如下這種寫法并不是擴展操作符的寫法🤣，而是剩余操作符的寫法，雖然寫出來后看起來差不多，但就在操作對象這一點上，基本上可以認為它和擴展操作符是相反的操作，擴展操作符是用來展開對象的屬性到多個變量上，而剩余操作符是用來把多個參數凝聚到一個變量上。

  1. let person = { 
  2.     name: '布蘭', 
  3.     age: 12, 
  4.     sex: 'male' 
  5. } 
  6. let { name, ...reset } = person 
  7. console.log(name)   // '布蘭' 
  8. console.log(reset)  // { age: 12, sex: 'male' } 

7. 給對象添加屬性

給對象加屬性通常這樣加：

  1. let person = { name: '布蘭' } 
  2. person.age = 12 
  3. console.log(person)  // { name: '布蘭', age: 12 } 

使用擴展操作符給對象添加屬性：

  1. let person = { name: '布蘭' } 
  2. person = {...person, age: 12} 
  3. console.log(person)  // { name: '布蘭', age: 12 } 

關于使用擴展操作符給對象添加屬性，這里有 2 個小技巧：

1.給新對象設置默認值：

  1. // 默認 person 對象的 age 屬性值 為 12 
  2. let person = {age: 12, ...{ name: '布蘭' } } 
  3. console.log(person)  // { age: 12, name: '布蘭' }  

2.重寫對象屬性

  1. let person = { name: '布蘭', age: 12 } 
  2.  
  3. // person 對象的 age 屬性被重寫為 20 
  4. person = {...person, age: 20 } 
  5. console.log(person)  // { name: '布蘭', age: 20 } 

8. 設置對象 Getter

設置對象 Getter 通常做法是這樣：

  1. let person = { name: '布蘭' } 
  2. Object.defineProperty(person, 'age', { 
  3.     get() { return 12 }, 
  4.     enumerable: true, 
  5.     configurable: true 
  6. }) 
  7. console.log(person.age)  // 12 

而有了擴展操作符后可以這么寫：

  1. let person = { name: '布蘭' } 
  2. person = { 
  3.     ...person,  
  4.     get age() { return 12 } 
  5. } 
  6. console.log(person.age)  // 12 

9. 將數組作為函數參數展開

如果我們有一個形參是多個參數的函數，但是當調用的時候發現入參卻是一個數組，常規做法是這樣：

  1. let arr = [1, 3, 5] 
  2. function fn(a, b, c) { }  
  3. fn.apply(null, arr) 

使用擴展操作符后，就簡單多了：

  1. let arr = [1, 3, 5] 
  2. function fn(a, b, c) { }  
  3. fn(...arr) 

10. 無限參數的函數

如果有這么一個累加函數，他會把所有傳遞進來的參數都加起來，普通做法是把參數都整合到數組里，然后這樣做：

  1. function doSum(arr) { 
  2.     return arr.reduce((acc, cur) => acc + cur) 
  3. } 
  4. console.log( doSum([1, 3]) )     // 4 
  5. console.log( doSum([1, 3, 5]) )  // 9 

如果參數不是數組，而是需要一個個傳遞，相當于函數必須支持無限參數，那可能會這么做：

  1. function doSum() { 
  2.     let sum = 0 
  3.     for(let i = 0, l = arguments.length; i < l; i++){ 
  4.         sum += arguments[i] 
  5.     } 
  6.     return sum 
  7.      
  8.     // 或者 
  9.     // let args = [].slice.call(arguments)  
  10.     // return args.reduce((acc, cur) => acc + cur) 
  11. } 
  12. console.log( doSum(1, 3) )        // 4 
  13. console.log( doSum(1, 3, 5) )     // 9 
  14. console.log( doSum(1, 3, 5, 7) )  // 16 

而有了擴展操作符，就簡單多了：

  1. function doSum(...arr) { 
  2.     return arr.reduce((acc, cur) => acc + cur) 
  3. } 
  4. console.log( doSum(1, 3) )        // 4 
  5. console.log( doSum(1, 3, 5) )     // 9 
  6. console.log( doSum(1, 3, 5, 7) )  // 16 

11. 擴展函數的剩余參數

有的時候一個函數需要傳遞很多的參數，比如小程序頁面(WePY)的 onLoad 生命周期函數里就可能有很多別的頁面傳遞過來的參數，然后還需要在函數里進行一些數據初始化工作，這樣一來就會顯得很臃腫不美觀，比如：

  1. function init(a, b, x, y) { 
  2.     // 進行一系列初始化數據工作 
  3. } 

而使用了擴展操作符后，我們就可以按照業務把參數進行解構，把本該在一個函數里進行初始化的工作拆分成多個，可以這么做：

  1. function other( x, y ) {} 
  2. function init(a, b, ...restConfig) { 
  3.     // 使用 a 和 b 參數進行操作 
  4.     // 其余參數傳給原始函數 
  5.     return other( ...restConfig ) 
  6. } 

12. 結合 Math 函數使用

比如當需要對一個數組求最大值的時候，通常會這么做：

  1. let arr = [3, 1, 8, 5, 4] 
  2. function max(arr) { 
  3.     return [].concat(arr).sort((a, b) => b - a) 
  4. } 
  5. console.log(max(arr)[0])  // 8 
  6.  
  7. // 或者 
  8. arr.reduce((acc, cur) => Math.max(acc, cur))  // 8 
  9.  
  10. // 又或者 
  11. Math.max.apply(null, arr)  // 8 

但是使用擴展操作符后，能夠把給數組求最大值寫得更加簡潔：

  1. let arr = [3, 1, 8, 5, 4] 
  2. let max = Math.max(...arr) 
  3. console.log(max)  // 8 

13. 在 new 表達式中使用

假設有一個數組格式的日期，想要通過 Date 構造函數創建一個日期實例的話，可能會這么做：

  1. let arr = [2021, 1, 1] 
  2. let date = new Date([].toString.call(arr)) 
  3. console.log(date)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)' 
  4.  
  5. // 或者 
  6. let date2 = new (Function.prototype.bind.apply( 
  7.     Date,  
  8.     [null].concat(arr) 
  9. )) 
  10. console.log(date2)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'  

而有了擴展操作符就簡單多了：

  1. let arr = [2021, 1, 1] 
  2. let date = new Date(...arr) 
  3. console.log(date)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)' 

總結

這個操作符真可謂使用簡單無腦，但是功能效率上不得不說很強大，所以我們要做的就是只要記住在什么時候使用它就好了，于是乎為了讓大家能更好的記住這 13 種使用場景，我特意做了一個圖，方便大家記憶，是不是很貼?。以上這些只列了 13 種寫法，我覺得作為一個這么強大的操作符，肯定有更多使用的場景。


 

責任編輯：姜華 來源： 大海我來了
JS工具操作符
相關推薦

2009-08-29 08:41:07

Windows 7新功能

2011-09-16 09:06:20

Smalltalk

2021-02-02 21:42:30

VS Code編輯器開發

2021-01-18 09:55:46

Spring代碼Java

2010-12-08 09:59:10

CSS

2021-04-25 10:15:38

Python編程語言軟件包

2021-04-13 10:07:08

Python軟件包編程語言

2021-12-09 13:30:17

微軟

2011-03-31 14:22:28

Chrome插件

2021-01-24 11:55:40

spring升華代碼的技巧開發

2024-07-24 08:33:06

JavaScript匯編語言

2011-05-12 09:12:16

Ubuntu 11.0

2017-05-24 18:00:13

AndroidAndroid DatView

2013-05-06 22:52:10

智能手機交互方式用戶體驗

2024-12-17 15:00:00

Python代碼

2016-05-05 10:54:53

Android開發應用

2023-07-04 08:19:25

IDEA插件

2021-01-11 08:21:34

spring升華代碼的技巧開發

2020-11-03 15:10:55

Spring Batc框架Java

2011-04-19 09:08:09

web工具項目管理
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 国产精品无码久久久久 | 欧美日韩中文字幕在线 | 99国产精品久久久久 | 久久国产精品精品 | 91久久久久 | av在线播放一区二区 | 在线视频成人 | 91视频进入 | 麻豆久久 | 91视频在线 | 性色综合| 日韩毛片在线视频 | a级大片免费观看 | jlzzxxxx18hd护士 | 国产高清在线精品 | 欧美日韩中文字幕在线 | 99精品国产一区二区三区 | 免费国产一区 | 毛片一区二区三区 | 天天爽天天操 | 欧美日韩在线精品 | 欧美不卡一区二区三区 | 午夜精品一区二区三区在线视频 | 精品久久av | 免费视频成人国产精品网站 | 天天色图 | 中文字幕1区2区3区 日韩在线视频免费观看 | 日韩精品在线看 | 97精品超碰一区二区三区 | 亚洲欧美综合网 | 国产日韩欧美在线 | 亚洲视频精品 | 久久天堂网 | 久久久蜜桃| 天天色官网 | 日韩在线观看一区 | 密色视频 | 久久99久久 | 亚洲欧美综合 | 欧美日韩中文字幕在线 | 五月婷婷色 |