整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          JavaScript 里三個點 ...,可不是省略號

          JavaScript 里三個點 ...,可不是省略號啊···

          文分享自華為云社區(qū)《JavaScript 里三個點 ... 的用法-云社區(qū)-華為云》,作者: Jerry Wang 。

          靜止參數(shù)

          使用 rest 參數(shù),我們可以將任意數(shù)量的參數(shù)收集到一個數(shù)組中,然后用它們做我們想做的事情。引入了其余參數(shù)以減少由參數(shù)引起的樣板代碼。

          function myFunc(a, b, ...args) {
          
          console.log(a); // 22
          
          console.log(b); // 98
          
          console.log(args); // [43, 3, 26]
          
          };
          
          myFunc(22, 98, 43, 3, 26);

          在 myFunc 的最后一個以 ...為前綴的參數(shù)中,這將導(dǎo)致所有剩余的參數(shù)都放在 javascript 數(shù)組中。

          rest 參數(shù)收集所有剩余的參數(shù),因此在最后一個參數(shù)之前添加 rest 參數(shù)是沒有意義的。其余參數(shù)必須是最后一個形參。

          rest 參數(shù)可以解構(gòu)(僅限數(shù)組),這意味著它們的數(shù)據(jù)可以解包為不同的變量。

          function myFunc(...[x, y, z]) {
          
          return x * y* z;
          
          }
          
          myFunc(1) // NaN
          
          myFunc(1, 2, 3) // 6
          
          myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

          點差運算符

          展開運算符用于將可迭代對象(如數(shù)組)的元素擴展到可以容納多個元素的位置。

          function myFunc(x, y, ...params) { // used rest operator here
          
          console.log(x);
          
          console.log(y);
          
          console.log(params);
          
          }
          
          var inputs=["a", "b", "c", "d", "e", "f"];
          
          myFunc(...inputs); // used spread operator here
          
          // "a"
          
          // "b"
          
          // ["c", "d", "e", "f"]

          一直有多種組合數(shù)組的方法,但是擴展運算符提供了一種用于組合數(shù)組的新方法:

          const featured=['Deep Dish', 'Pepperoni', 'Hawaiian'];
          
          const specialty=['Meatzza', 'Spicy Mama', 'Margherita'];
          
          const pizzas=[...featured, 'veg pizza', ...specialty];
          
          console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

          使用擴展運算符,現(xiàn)在可以使用比 Object.assign() 更短的語法進行淺克隆(不包括原型)或合并對象。

          var obj1={ foo: 'bar', x: 42 };
          
          var obj2={ foo: 'baz', y: 13 };
          
          var clonedObj={ ...obj1 };
          
          // Object { foo: "bar", x: 42 }
          
          var mergedObj={ ...obj1, ...obj2 };
          
          // Object { foo: "baz", x: 42, y: 13 }

          總結(jié)

          當(dāng)我們在代碼中看到三個點 (...) 時,它要么是 rest 參數(shù),要么是展開運算符。

          有一個簡單的方法來區(qū)分它們:

          • 當(dāng)三個點 (...) 位于函數(shù)參數(shù)的末尾時,它是“rest 參數(shù)”并將參數(shù)列表的其余部分收集到一個數(shù)組中。
          • 當(dāng)三個點 (...) 出現(xiàn)在函數(shù)調(diào)用或類似函數(shù)中時,它被稱為“擴展運算符”并將數(shù)組擴展為 list.

          點擊下方關(guān)注,第一時間了解華為云新鮮技術(shù)~

          華為云博客_大數(shù)據(jù)博客_AI博客_云計算博客_開發(fā)者中心-華為云

          個點(...)是擴展運算符,是ES6語法,它可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時,將數(shù)組表達式或者string在語法層面展開;還可以在構(gòu)造字面量對象時將對象表達式按照key-value的方式展開。說白了就是把數(shù)組中大括號([])、對象中花括號({})去掉!

          //數(shù)組
          var nums=[1, 2, 3, 4, 5]
          console.log(...nums) 
          //1 2 3 4 5
          
          //對象
          var person={ name: 'A', age: 30 }
          console.log({ ...person }) 
          // {name:'A',age:30}

          它有什么用呢?

          • 數(shù)組或?qū)ο蟮膹?fù)制
          //數(shù)組的復(fù)制
          var arr1=['hello']
          var arr2=[...arr1]
          console.log(arr2) 
          // ['hello']
          
          //對象的復(fù)制
          var obj1={ name: 'A' }
          var obj2={ ...obj1 }
          console.log(obj2) 
          // {name:'A'}
          • 數(shù)組或?qū)ο蠛喜?/li>
          //數(shù)組的合并
          var arr1=['hello']
          var arr2=['world']
          var mergeArr=[...arr1, ...arr2]
          console.log(mergeArr)
          // ['hello','world']
          
          // 對象合并
          var obj1={ name: 'A' }
          var obj2={ age: 30 }
          var mergeObj={ ...obj1, ...obj2 }
          console.log(mergeObj) 
          // {name: "A", age: 30}
          • 字符轉(zhuǎn)數(shù)組用它

          、頁面內(nèi)跳轉(zhuǎn)的錨點設(shè)置

          頁面內(nèi)的跳轉(zhuǎn)需要兩步:

          方法一:

          ①:設(shè)置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)

          ②:在頁面中需要的位置設(shè)置錨點<a name="miao"></a>;(注意:a標(biāo)簽中要寫一個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標(biāo)簽中按需填寫必要的文字,一般不寫內(nèi)容

          方法二:

          ①:同方法一的①

          ②:設(shè)置錨點的位置 <h3 id="miao">喵星人基地</h3>;在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加一個id屬性,屬性值與①中href的屬性值一樣,不加#

          方法二不用單獨添加一個a標(biāo)簽來專門設(shè)置錨點 ,只在需要的位置的標(biāo)簽中添加一個id即可。

          小案例:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

          <head>

          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

          <title>萌寵集結(jié)號</title>

          </head>

          <body>

          <ul>

          <li><a href="#miao">去找喵星人</a></li>

          <li><a href="#wang">去找汪星人</a></li>

          <li><a href="#meng">其他萌物</a></li>

          </ul>

          <a name="miao"></a><!--設(shè)置錨點方法1-->

          <h3 id="miao">喵星人基地</h3><!--設(shè)置錨點方法2-->

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <a name="wang"></a>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <a name="meng"></a>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          </body>

          </html>

          二、跨頁面跳轉(zhuǎn)

          ①:設(shè)置錨點鏈接,在href中的路徑后面追加:#+錨點名,即可

          如:<a href="萌寵集結(jié)號.html#miao">跳轉(zhuǎn)到萌寵集結(jié)號頁面</a>

          ②:要跳轉(zhuǎn)到的頁面中要設(shè)置錨點,方法見一種的步驟②,兩個方法任選其一。


          主站蜘蛛池模板: 国产乱码一区二区三区四| 亚洲视频一区二区在线观看| 另类国产精品一区二区| 国产午夜精品一区二区三区小说 | 久久99久久无码毛片一区二区| 少妇无码一区二区三区| 无码AV一区二区三区无码 | 国产精品合集一区二区三区| 一区二区三区观看| 精品国产日韩亚洲一区在线| 日韩精品无码一区二区三区 | 亚洲av无一区二区三区| 久久婷婷久久一区二区三区| 波多野结衣中文字幕一区 | 丝袜美腿一区二区三区| 日本大香伊一区二区三区| 日本精品一区二区三区四区| 国产成人一区二区三中文| 青青青国产精品一区二区| 风间由美性色一区二区三区| 午夜无码视频一区二区三区| 国产在线一区二区杨幂| 成人毛片无码一区二区| 欧美日韩综合一区二区三区| 亚洲一区在线免费观看| 99久久人妻精品免费一区| 在线播放国产一区二区三区 | 无码人妻精品一区二区三区不卡 | 日韩人妻无码一区二区三区久久| 一夲道无码人妻精品一区二区| 一区二区3区免费视频| 狠狠爱无码一区二区三区| 国产伦精品一区二区三区精品| 怡红院美国分院一区二区| 黑巨人与欧美精品一区| 国产精品视频无圣光一区| 波多野结衣一区二区三区高清av | 一本一道波多野结衣一区| 精品少妇人妻AV一区二区三区| 中文字幕无线码一区二区| 中文字幕无线码一区2020青青|