<address id="xpjh9"><listing id="xpjh9"><meter id="xpjh9"></meter></listing></address>

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
<noframes id="xpjh9">
<noframes id="xpjh9">

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
    <form id="xpjh9"></form><address id="xpjh9"><listing id="xpjh9"><menuitem id="xpjh9"></menuitem></listing></address>

      <noframes id="xpjh9">
      VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
      SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
      當前位置:
      首頁 > 編程開發 > .net教程 >
      • ASP.net教程之ES6學習筆記(二)

      • 2019-06-11 20:54 來源:未知

      本篇內容:

      1.函數的擴展;

      2.數組的擴展;

      • 1.函數的擴展

      (1)函數參數的默認值

      ES6之前的版本無法為函數的參數指定默認值

      ES6之后可以給函數參數指定默認值,用法如下:

      function log(x, y = 'World') {
        console.log(x, y);
      }

       

      調用結果:

      log('Hello') // Hello World
      log('Hello', 'China') // Hello China
      log('Hello', '') // Hello

       

      注意:

      函數參數變量是默認聲明的,所以不能用 let 或 const再次聲明:

      function func(x = 5)
      {
           let x = 5; //報錯
           const x = 9;     //報錯     
      }

       

      參數默認值的位置:

      設有默認值的參數,必須放在最后一個參數的位置,如:func(x,y,z = 5);

      如果帶有默認值的參數沒有放在最后面,那么會帶來一些問題,作為日常使用,我認為我們只需要記住把帶有默認值的參數放在最后最后一位,并嚴格遵守就行,至于放在前面的寫法會出現何種問題,大可不必深究。

      函數length屬性:

      指定了默認值之后,函數的length屬性將失真, 函數的length屬性將返回 沒有指定默認值的參數 的個數;

      (function (a) {}).length // 1
      (function (a = 5) {}).length // 0
      (function (a, b, c = 5) {}).length // 2

      length 屬性的返回值,等于函數的 參數個數 減去 指定了默認值 的參數個數;

      注意:如果設置了默認值的參數不是尾參數,那么length屬性也不再計算后面的參數個數了

      (function (a = 0, b, c) {}).length // 0
      (function (a, b = 1, c) {}).length // 1

       

      (2)rest參數

      ES6引入了 rest 參數,形式為  ...變量名(三個點 加 變量名),用于獲取函數的多余參數,rest 參數搭配的變量是一個數組,該變量將多余的參數放入數組中。

      復制代碼
      function add(...values) {
        let sum = 0;
      
        for (var val of values) {
          sum += val;
        }
      
        return sum;
      }
      
      add(2, 5, 3) // 10
      復制代碼

       

      (3)name屬性

      ES6中,函數的name屬性,返回該函數的函數名:

      function foo() {}
      foo.name // "foo"

       

      ES5中,給函數使用name屬性,返回空字符串,不會返回函數名

      (4)箭頭函數

      ES6允許使用箭頭定義函數,

      基本用法:

      1>有參數,只有一條返回語句:

      var func = x => x;
      
      等價于:
      
      var func = function(x){ return x}; 

      2>  沒有參數,只有一條返回語句:

      var func = () => 5;
      
      等價于:
      
      var func = function(){ return 5};

      3> 有多個參數,只有一條返回語句;

      var func = (x,y,z) => x+y+z;
      
      等價于:
      
      var func = function(x,y,x) { return x+y+z};

      4>代碼塊部分有多條語句 , 則要用大括號 把代碼塊部分括起來,并且,需要用 返回語句需要加上 return;

      復制代碼
      var func = (x,y,z) =>{
          let sum = x + y +z;
          return sum;      
      };
      
      等價于:
      
      var func = function(x,y,z){
            let sum = x + y +z;
            return sum;    
      } 
      復制代碼

      注意:

      由于大括號被解釋為代碼塊,所以如果箭頭函數直接返回一個對象,必須在對象外面加上括號,否則會報錯;

      // 報錯
      let getTempItem = id => { id: id, name: "Temp" };
      
      // 不報錯
      let getTempItem = id => ({ id: id, name: "Temp" });

      5>箭頭函數只有一行,而且不需要返回任何值:

      let func = () => void doesNotReturn();

      6>箭頭函數可以與變量解構結合使用:

      復制代碼
      const func = ({first,last}) => first +' '+ last;
      
      等價于:
      
      func function(person){
         return person.first + person.last; 
      } 
      復制代碼

      7>箭頭函數的一個用處是簡化回調函數

      復制代碼
      // 正常函數寫法
      [1,2,3].map(function (x) {
        return x * x;
      });
      
      // 箭頭函數寫法
      [1,2,3].map(x => x * x);
      復制代碼

       

      (補習:

      array,.map() 方法返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值,

      map() 方法按照原始數組元素順序依次處理元素。

      注意: map() 不會對空數組進行檢測。

      注意: map() 不會改變原始數組。

      例子:

      var numbers = [4, 9, 16, 25];
      
      var arr = numbers.map(Math.Sqrt); //[2,3,4,5]

       

      )

      注意點:

      (1)函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象。

        this對象的指向是可變的,但是在箭頭函數中,它是固定的。

      復制代碼
      function foo() {
        setTimeout(() => {
          console.log('id:', this.id);
        }, 100);
      }
      
      var id = 21;
      
      foo.call({ id: 42 });
      // id: 42
      復制代碼

       

      上面代碼中,setTimeout的參數是一個箭頭函數,這個箭頭函數的定義生效是在foo函數生成時,而它的真正執行要等到 100 毫秒后。如果是普通函數,執行時this應該指向全局對象window,這時應該輸出21。但是,箭頭函數導致this總是指向函數定義生效時所在的對象(本例是{id: 42}),所以輸出的是42

      (2)不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤。

      (3)不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。

      (4)不可以使用yield命令,因此箭頭函數不能用作 Generator 函數。

      8>嵌套的箭頭函數

      箭頭函數的內部,還可以使用箭頭函數;

      下面是一個用ES5普通函數寫的函數的嵌套:

      復制代碼
      function insert(value) {
        return {into: function (array) {
          return {after: function (afterValue) {
            array.splice(array.indexOf(afterValue) + 1, 0, value);
            return array;
          }};
        }};
      }
      
      insert(2).into([1, 3]).after(1); //[1, 2, 3]
      復制代碼

       

      用箭頭函數寫為:

      復制代碼
      let insert = (value) => ({into: (array) => ({after: (afterValue) => {
        array.splice(array.indexOf(afterValue) + 1, 0, value);
        return array;
      }})});
      
      insert(2).into([1, 3]).after(1); //[1, 2, 3]
      復制代碼

       

      (5)尾調用優化

      尾調用:尾調用是函數式編程的一個重要概念,本身非常簡單,一句話就能說清楚,就是指某個函數的最后一步是調用另一個函數。

      function f(x){
        return g(x);
      }
      
      //這就是尾調用

       

      以下三種情況,都不屬于尾調用。

      復制代碼
      // 情況一
      function f(x){
        let y = g(x);
        return y;
      }
      
      // 情況二
      function f(x){
        return g(x) + 1;
      }
      
      // 情況三
      function f(x){
        g(x);
      }
      等價于
      function f(x){
        g(x);
        return undefined;
      }
      復制代碼

       

      尾調用不一定要出現在函數的尾部,只要是最后調用即可:

      復制代碼
      function f(x) {
        if (x > 0) {
          return m(x)
        }
        return n(x);
      }
      復制代碼

       

      • 2.數組的擴展

      (1)擴展運算符

      擴展運算符(spread)是三個點(...)。它好比 rest 參數的逆運算,將一個 數組 轉為 用逗號分隔的 參數序列

      復制代碼
      console.log(...[1, 2, 3])
      // 1 2 3
      
      console.log(1, ...[2, 3, 4], 5)
      // 1 2 3 4 5
      
      [...document.querySelectorAll('div')]
      // [<div>, <div>, <div>]
      復制代碼

       

      該運算符主要用于函數的調用:

      復制代碼
      function push(array, ...items) {
        array.push(...items);
      }
      
      function add(x, y) {
        return x + y;
      }
      
      const numbers = [4, 38];
      add(...numbers) // 42
      復制代碼

       

      擴展運算符的應用:

      1>復制數組:

      數組是復合的數據類型,直接復制的話,只是復制了指向底層數據結構的指針,而不是克隆一個全新的數組。

      const a1 = [1, 2];
      const a2 = a1;
      
      a2[0] = 2;
      a1 // [2, 2]

       

      面代碼中,a2并不是a1的克隆,而是指向同一份數據的另一個指針。修改a2,會直接導致a1的變化。

      擴展運算符提供了復制數組的簡便寫法:

      const a1 = [1, 2];
      // 寫法一
      const a2 = [...a1];
      // 寫法二
      const [...a2] = a1;

      上面的兩種寫法,a2都是a1的克隆。

      2>合并數組

      const arr1 = ['a', 'b'];
      const arr2 = ['c'];
      const arr3 = ['d', 'e'];

       

      ES5寫法:

      // ES5 的合并數組
      arr1.concat(arr2, arr3);
      // [ 'a', 'b', 'c', 'd', 'e' ]

       

      ES6寫法:

      // ES6 的合并數組
      [...arr1, ...arr2, ...arr3]
      // [ 'a', 'b', 'c', 'd', 'e' ]

       

      注意:以上兩種方法都是淺拷貝,即它們的成員都是對原數組成員的引用,如果修改了原數組的成員,會同步反映到新數組。

      3>字符串

      擴展運算符還可以將字符串轉化成真正的數組:

      [...'hello']
      // [ "h", "e", "l", "l", "o" ]

       

      (2)Array.from()

      Array.from()用于將以下兩類對象轉化為真正的數組:

      1>類似數組的對象;

      2>可遍歷的的對象;

      (3)Array.from()

      Array.Of()用于將一組值轉化為數組;

      Array.of(3, 11, 8) // [3,11,8]
      Array.of(3) // [3]
      Array.of(3).length // 1

       

      (4)數組實例的copyWithin()

      數組實例的copyWithin方法,在當前數組內部,將指定位置的成員復制到其他位置(會覆蓋原有成員),然后返回當前數組。也就是說,使用這個方法,會修改當前數組。

      它接受三個參數。

      • target(必需):從該位置開始替換數據。如果為負值,表示倒數。
      • start(可選):從該位置開始讀取數據,默認為 0。如果為負值,表示倒數。
      • end(可選):到該位置前停止讀取數據,默認等于數組長度。如果為負值,表示倒數
      [1, 2, 3, 4, 5].copyWithin(0, 3)
      // [4, 5, 3, 4, 5]

      上面代碼表示將從 3 號位直到數組結束的成員(4 和 5),復制到從 0 號位開始的位置,結果覆蓋了原來的 1 和 2。

      (5)數組實例的find()和findIndex()

      find():找出第一個符合條件的數組成員,返回該成員,沒有符合條件的,則返回undefinded;

      findIndex();返回第一個符合條件的成員的位置,如果沒有符合條件的,則返回 -1 ;

      (6)數組實例的 fill()

      fill():fill使用給定值填充一個數組;

      ['a', 'b', 'c'].fill(7)
      // [7, 7, 7]
      
      new Array(3).fill(7)
      // [7, 7, 7]

       

      fill()還有第二個和第三個參數,用于指定填充的起始位置和結束位置;

      (7)數組實例的entries(),keys()和values()

      遍歷數組,返回一個遍歷器對象,可以用for ..... of ....循環進行遍歷

      entries():,是對鍵值對的遍歷;

      for (let [index, elem] of ['a', 'b'].entries()) {
        console.log(index, elem);
      }
      // 0 "a"
      // 1 "b"

       

      keys():是對鍵名的遍歷;

      for (let index of ['a', 'b'].keys()) {
        console.log(index);
      }
      // 0
      // 1

       

      values():是對鍵值的遍歷;

      for (let elem of ['a', 'b'].values()) {
        console.log(elem);
      }
      // 'a'
      // 'b'

       

      (8)數組實例 includes()

      Array.prototype.includes()方法返回一個布爾值,表示某個數組是否包含給定的值,與字符串的includes()方法類似。

      [1, 2, 3].includes(2)     // true
      [1, 2, 3].includes(4)     // false
      [1, 2, NaN].includes(NaN) // true

      該方法的第二個參數表示搜索的起始位置,默認為0。如果第二個參數為負數,則表示倒數的位置,如果這時它大于數組長度(比如第二個參數為-4,但數組長度為3),則會重置為從0開始。

      使用indexOf()的缺點:

      1>不夠語義化,它的含義是找到參數值的第一個出現位置,所以要去比較是否不等于-1,表達起來不夠直觀;

      2>它內部使用嚴格相等運算符(===)進行判斷,這會導致對 NaN 的誤判;

      (9)數組實例的flat(),flatMap()

      flat():數組的成員有時還是數組,Array.prototype.flat()用于將嵌套的數組“拉平”,變成一維的數組。該方法返回一個新數組,對原數據沒有影響

      [1, 2, [3, 4]].flat()
      // [1, 2, 3, 4]

      默認只會“拉平”一層,如果想要“拉平”多層的嵌套數組,可以將 flat()方法的參數寫成一個整數,表示想要拉平的層數,默認為1。

      [1, 2, [3, [4, 5]]].flat()
      // [1, 2, 3, [4, 5]]
      
      [1, 2, [3, [4, 5]]].flat(2)
      // [1, 2, 3, 4, 5]

       

      flatMap(): 該方法執行分為兩步:1.對數組的每一個元素執行一個處理函數。得到新元素 2.將新元素組成的數組進行 “拉平” 處理,這個方法只能 拉平 一層;

       

       

      作者:CherishTheYouth
      出處:https://www.cnblogs.com/CherishTheYouth/
      聲明:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。

      相關教程
      江苏快3 凉山 | 蚌埠 | 舟山 | 扬州 | 黄石 | 梅州 | 聊城 | 阿拉善盟 | 宣城 | 泗洪 | 辽阳 | 单县 | 深圳 | 天水 | 临沂 | 济源 | 平潭 | 三亚 | 潜江 | 常德 | 鸡西 | 七台河 | 神木 | 漯河 | 武安 | 宜春 | 嘉峪关 | 东营 | 屯昌 | 大庆 | 牡丹江 | 琼海 | 雅安 | 安徽合肥 | 顺德 | 青海西宁 | 厦门 | 灌南 | 晋中 | 内蒙古呼和浩特 | 蓬莱 | 漯河 | 长葛 | 鄢陵 | 枣阳 | 宜都 | 盐城 | 晋江 | 常德 | 天水 | 那曲 | 白沙 | 秦皇岛 | 廊坊 | 阳江 | 甘肃兰州 | 灌南 | 南通 | 苍南 | 普洱 | 甘南 | 沧州 | 内蒙古呼和浩特 | 台州 | 广汉 | 鄂州 | 石河子 | 锦州 | 连云港 | 武夷山 | 滁州 | 六安 | 内蒙古呼和浩特 | 迪庆 | 马鞍山 | 邵阳 | 白沙 | 三河 | 烟台 | 天水 | 临夏 | 洛阳 | 江苏苏州 | 青州 | 洛阳 | 博罗 | 甘肃兰州 | 广西南宁 | 邯郸 | 和田 | 株洲 | 佳木斯 | 阿坝 | 恩施 | 洛阳 | 通辽 | 厦门 | 红河 | 仙桃 | 神木 | 临夏 | 榆林 | 台湾台湾 | 迪庆 | 延安 | 十堰 | 铜仁 | 嘉兴 | 呼伦贝尔 | 丹阳 | 梅州 | 黑龙江哈尔滨 | 克孜勒苏 |