DIV CSS 佈局教程網

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: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
 skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
 JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"

middle-school":"\"W3C\" Middle School","skills":　　["JavaScript","Java","Python","Lisp"]}'

結果：

　　{
"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 === 'string') {
　　return value.toUpperCase();
}
　　return value;
}
JSON.stringify(guagua, convert, ' ');

上面的代碼把所有屬性值都變成大寫：

{
　　"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('[1,2,3,true]'); //[1,2,3,true]
JSON.parse('{"name":"瓜瓜"，"age":14}'); // Object{name:'瓜瓜'，age:14}
JSON.parse('true'); // true
JSON.parse('123.45'):// 123.45

JSON.parse()還可以接收一個函數，用來轉換解析出的屬性：
JSON.parse('{"name":"guagua","age":14}',function(key,value){ 
//把number * 2
if(key ==='name'){ 
return value + '同學'
}
return value;
}) ; // Object{name: '瓜瓜同學'，age: 14}

以上這篇淺析JavaScript 箭頭函數 generator Date JSON就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。