首頁 > web前端 > js教程 > 詳細解讀JavaScript 箭頭函數 generator Date JSON

詳細解讀JavaScript 箭頭函數 generator Date JSON

亚连
發布: 2018-05-21 11:58:47
原創
1805 人瀏覽過

下面我就為大家帶來一篇淺析JavaScript 箭頭函數 generator Date JSON。現在就分享給大家,也給大家做個參考。

ES6 標準新增了一個新的函數: Arrow Function(箭頭函數)。

    x => x *x
    上面的箭头相当于:
      function (x){ 
          return x*x;
      }
登入後複製

箭頭函數相當於匿名函數,並且簡化了函數定義。一種像上面的,只包含一個表達式,

連{ ... }和return都省略掉了。還有一個可以包含多個語句,這時候就不能省略{ ... }和return:

        x =>{ 
          if(x > 0){ 
            return x * x;
          }else{ 
            return -x *x;
          }
        }
登入後複製

如果參數不是一個,就需要用括號()括起來:

    // 两个参数
      (x,y) => x*x + y *y
    // 无参数;
      () =>3.14
    // 可变参数
      (x,y,...rest) =>{ 
        var i, sum = x +y;
        for(i=0;i<rest.length;i++){ 
          sum += rest[i];
        }
      return sum;
    }
登入後複製

this

現在,箭頭函數完全修復了this的指向,this總是指向詞法作用域,也就是外層呼叫者obj:

    var obj = { 
        birth:1990,
        getAge:function(){ 
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj 对象。
        return fn();
        }
    }
    obj.getAge(); // 25
登入後複製

如果使用了箭頭函數,以前的那種hack 寫法;

var that = this;
登入後複製

就不再需要了。

由於this 在箭頭函數中已經按照是否作用域綁定了,所以,用call() 或apply() 呼叫箭頭函數時,無法對this 進行

綁定,即傳入的第一個參數被忽略。

    var obj = { 
        birth:1990,
        getAge:function(year){ 
          var b = this.burth; // 1990
          var fn = (y) =>y-this.birth; // this.birth 仍是1990
          return fn.call({birth:2000},year);
      }
    };
    obj.getAge(2015); // 25
登入後複製

generator

generator(生成器)是ES6標準所引入的新資料型別。一個generator看起來像一個函數,但可以返回多次。

    function* foo(x){ 
        yield x +1;
        yieldx + 2;
        return x +3;
    }
登入後複製

generator 和函數不同的是,generator由function* 定義(注意多出的*號),並且,除了return 語句,還可以用yield 返回多次。

函數只能回傳一次,所以碧璽回傳一個Array. 但是,如果換成generator,就可以一次回傳一個數,不斷回傳多次。

    function* fib(max){ 
        var t,
        a = 0,
        b=1,
        n=1;
        while (n < max){ 
          yield a;
          t = a +b;
          a = b;
          b = t;
          n++;
        }
        return a; 
      }
登入後複製

直接呼叫試試:

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
登入後複製

直接呼叫一個generator和呼叫函數不一樣,fib(5)只是創建了一個generator對象,還沒有去執行它。

呼叫generator物件有兩個方法,一是不斷呼叫generator物件的next()方法:

    var f = fib(5);
    f.next(); // {value: 0, done: false}
    f.next(); // {value: 1, done: false}
    f.next(); // {value: 1, done: false}
    f.next(); // {value: 2, done: false}
    f.next(); // {value: 3, done: true}
登入後複製

Date

#在JavaScript 中,Date 物件用來表示日期和時間的。

要取得系統目前時間,用:

    var now = new Date();
    now; //// Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
    now.getFullYear(); //2015,年份
    now.getMonth(); // 5,月份,注意月份范围为0~11,5表示六月
    now.getDate();// 24 ,表示24 号
    now.getHours(); // 3,表示星期三
    now.getMinutes(); // 19 ,24小时制
    now.getSeconds(); // 22,秒
    now.getMilliseconds(); //875 毫秒
    now.getTime(); // 1435146562875, 以number形式表示的时间戳
    如果要创建一个执行日期和时间的Date对象,可以用:
    var d = new Date(2015,5,19,20,15,30,123);
    d;// Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
登入後複製

JSON

JSON是JavaScript Object Notation的縮寫,它是一種資料交換格式。

在JSON中,一共就這麼多種資料型別:

1,number: 和JavaScript的number 完全一致;

2,boolean: 就是JavaScript的true或false;

3,String: 就是JavaScript的String ;

4,null: 就是JavaScript的null;

5,array: 就是JavaScript 的Array 表示方式—— [];

6,object: 就是JavaScript 的{...} 表示方式。

SON也定死了字元集必須是UTF-8,表示多語言就沒有問題了。為了統一解析,JSON的字串規定必須用雙引號"",Object的鍵也必須用雙引號""。

序列化

var guagua = {
name: &#39;小明&#39;,
age: 14,
gender: true,
height: 1.65,
grade: null,
&#39;middle-school&#39;: &#39;\"W3C\" Middle School&#39;,
 skills: [&#39;JavaScript&#39;, &#39;Java&#39;, &#39;Python&#39;, &#39;Lisp&#39;]
};
 JSON.stringify(xiaoming); // &#39;{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"

middle-school":"\"W3C\" Middle School","skills":  ["JavaScript","Java","Python","Lisp"]}&#39;
登入後複製

結果:

  {
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
  ]
  }
登入後複製

第二個參數用於控制如何篩選物件的鍵值,如果我們只想輸出指定的屬性,可以傳入Array:

JSON.stringify(xiaoming, ['name', 'skills'], ' ');

結果:

{
  "name": "guagua",
  "skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
]
  }
登入後複製
還可以傳入一個函數,這樣物件的每個鍵值對都會被函數先處理:
function convert(key, value) {
if (typeof value === &#39;string&#39;) {
  return value.toUpperCase();
}
  return value;
}
JSON.stringify(guagua, convert, &#39; &#39;);
登入後複製

上面的程式碼把所有屬性值都變成大寫:

{
  "name": "guagua",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
  "JAVASCRIPT",
  "JAVA",
  "PYTHON",
  "LISP"
]
  }
登入後複製
如果我們還想要精確控制如何序列化小明,可以給xiaoming定義一個toJSON()的方法,直接回傳JSON應該序列化的資料:

###反序列化########拿到一個JSON格式的字串,我們直接用JSON.parse() 把它變成一個JavaScript 物件:###
JSON.parse(&#39;[1,2,3,true]&#39;); //[1,2,3,true]
JSON.parse(&#39;{"name":"瓜瓜","age":14}&#39;); // Object{name:&#39;瓜瓜&#39;,age:14}
JSON.parse(&#39;true&#39;); // true
JSON.parse(&#39;123.45&#39;):// 123.45

JSON.parse()还可以接收一个函数,用来转换解析出的属性:
JSON.parse(&#39;{"name":"guagua","age":14}&#39;,function(key,value){ 
//把number * 2
if(key ===&#39;name&#39;){ 
return value + &#39;同学&#39;
}
return value;
}) ; // Object{name: &#39;瓜瓜同学&#39;,age: 14}
登入後複製
###上面是我整理給大家的,希望今後會對大家有幫助。 ######相關文章:#########深入瞭解JavaScript中的區塊級作用域、私有變數與模組模式(圖文教學)############ JavaScript 輸出顯示內容(基礎的教學)############Javascript 普通函數與建構函式的差異(結合程式碼,詳細解讀)######

以上是詳細解讀JavaScript 箭頭函數 generator Date JSON的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板