淺析JavaScript 箭頭函數(shù) generator Date JSON
ES6 標(biāo)準(zhǔn)新增了一種新的函數(shù): Arrow Function(箭頭函數(shù))。
x => x *x 上面的箭頭相當(dāng)于: function (x){ return x*x; }
箭頭函數(shù)相當(dāng)于匿名函數(shù),并且簡(jiǎn)化了函數(shù)定義。一種像上面的,只包含一個(gè)表達(dá)式,
連{ ... }和return都省略掉了。還有一種可以包含多條語(yǔ)句,這時(shí)候就不能省略{ ... }和return:
x =>{ if(x > 0){ return x * x; }else{ return -x *x; } }
如果參數(shù)不是一個(gè),就需要用括號(hào)()括起來(lái):
// 兩個(gè)參數(shù) (x,y) => x*x + y *y // 無(wú)參數(shù); () =>3.14 // 可變參數(shù) (x,y,...rest) =>{ var i, sum = x +y; for(i=0;i<rest.length;i++){ sum += rest[i]; } return sum; }
this
現(xiàn)在,箭頭函數(shù)完全修復(fù)了this的指向,this總是指向詞法作用域,也就是外層調(diào)用者obj:
var obj = { birth:1990, getAge:function(){ var b = this.birth; // 1990 var fn = () => new Date().getFullYear() - this.birth; // this指向obj 對(duì)象。 return fn(); } } obj.getAge(); // 25
如果使用了箭頭函數(shù),以前的那種hack 寫(xiě)法;
var that = this;
就不再需要了。
由于this 在箭頭函數(shù)中已經(jīng)按照是否作用域綁定了,所以,用call() 或者apply() 調(diào)用箭頭函數(shù)時(shí),無(wú)法對(duì)this 進(jìn)行
綁定,即傳入的第一個(gè)參數(shù)被忽略。
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標(biāo)準(zhǔn)引入的新型數(shù)據(jù)類(lèi)型。一個(gè)generator看上去像一個(gè)函數(shù),但可以返回多次。
function* foo(x){ yield x +1; yieldx + 2; return x +3; }
generator 和函數(shù)不同的是,generator由function* 定義(注意多出的*號(hào)),并且,除了return 語(yǔ)句,還可以用yield 返回多次。
函數(shù)只能返回一次,所以碧璽返回一個(gè)Array. 但是,如果換成generator,就可以一次返回一個(gè)數(shù),不斷返回多次。
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; }
直接調(diào)用試試:
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
直接調(diào)用一個(gè)generator和調(diào)用函數(shù)不一樣,fib(5)僅僅是創(chuàng)建了一個(gè)generator對(duì)象,還沒(méi)有去執(zhí)行它。
調(diào)用generator對(duì)象有兩個(gè)方法,一是不斷地調(diào)用generator對(duì)象的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 對(duì)象用來(lái)表示日期和時(shí)間的。
要獲取系統(tǒng)當(dāng)前時(shí)間,用:
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 號(hào) now.getHours(); // 3,表示星期三 now.getMinutes(); // 19 ,24小時(shí)制 now.getSeconds(); // 22,秒 now.getMilliseconds(); //875 毫秒 now.getTime(); // 1435146562875, 以number形式表示的時(shí)間戳 如果要?jiǎng)?chuàng)建一個(gè)執(zhí)行日期和時(shí)間的Date對(duì)象,可以用: 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的縮寫(xiě),它是一種數(shù)據(jù)交換格式。
在JSON中,一共就這么幾種數(shù)據(jù)類(lèi)型:
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,表示多語(yǔ)言就沒(méi)有問(wèn)題了。為了統(tǒng)一解析,JSON的字符串規(guī)定必須用雙引號(hào)"",Object的鍵也必須用雙引號(hào)""。
序列化
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"]}'
結(jié)果:
{ "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" Middle School", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] }
第二個(gè)參數(shù)用于控制如何篩選對(duì)象的鍵值,如果我們只想輸出指定的屬性,可以傳入Array:
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
結(jié)果:
{ "name": "guagua", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] }
還可以傳入一個(gè)函數(shù),這樣對(duì)象的每個(gè)鍵值對(duì)都會(huì)被函數(shù)先處理:
function convert(key, value) { if (typeof value === 'string') { return value.toUpperCase(); } return value; } JSON.stringify(guagua, convert, ' ');
上面的代碼把所有屬性值都變成大寫(xiě):
{ "name": "guagua", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" MIDDLE SCHOOL", "skills": [ "JAVASCRIPT", "JAVA", "PYTHON", "LISP" ] }
如果我們還想要精確控制如何序列化小明,可以給xiaoming定義一個(gè)toJSON()的方法,直接返回JSON應(yīng)該序列化的數(shù)據(jù):
反序列化
拿到一個(gè)JSON格式的字符串,我們直接用JSON.parse() 把它變成一個(gè)JavaScript 對(duì)象:
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()還可以接收一個(gè)函數(shù),用來(lái)轉(zhuǎn)換解析出的屬性: JSON.parse('{"name":"guagua","age":14}',function(key,value){ //把number * 2 if(key ==='name'){ return value + '同學(xué)' } return value; }) ; // Object{name: '瓜瓜同學(xué)',age: 14}
以上這篇淺析JavaScript 箭頭函數(shù) generator Date JSON就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 詳解JavaScript ES6中的Generator
- JS為什么說(shuō)async/await是generator的語(yǔ)法糖詳解
- js中Generator函數(shù)的深入講解
- js使用generator函數(shù)同步執(zhí)行ajax任務(wù)
- JavaScript 中使用 Generator的方法
- 深入理解js generator數(shù)據(jù)類(lèi)型
- JavaScript中 ES6 generator數(shù)據(jù)類(lèi)型詳解
- 小議JavaScript中Generator和Iterator的使用
- 在Node.js中使用Javascript Generators詳解
- Javascript生成器(Generator)的介紹與使用
相關(guān)文章
JavaScript中的this,call,apply使用及區(qū)別詳解
本文結(jié)合基本javascript的權(quán)威書(shū)籍中的內(nèi)容,根據(jù)自己的理解,通過(guò)相關(guān)示例向大家展示了javascript中this,call,apply使用及區(qū)別,非常的細(xì)致全面,希望大家能夠喜歡。2016-01-01JavaScript字符串對(duì)象slice方法入門(mén)實(shí)例(用于字符串截?。?/a>
這篇文章主要介紹了JavaScript字符串對(duì)象slice方法入門(mén)實(shí)例,slice方法用于通過(guò)指定開(kāi)始和結(jié)束位置來(lái)截取字符串,需要的朋友可以參考下2014-10-10javascript設(shè)計(jì)模式之鴨子類(lèi)型和多態(tài)
這篇文章主要為大家介紹了javascript鴨子類(lèi)型和多態(tài),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助<BR>2022-01-01JavaScript開(kāi)發(fā)過(guò)程中規(guī)范commit?msg意義詳解
這篇文章主要為大家介紹了JavaScript開(kāi)發(fā)過(guò)程中規(guī)范commit?msg意義的內(nèi)容詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2021-11-11簡(jiǎn)介JavaScript中g(shù)etUTCMonth()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中g(shù)etUTCMonth()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06js 延遲加載 改變JS的位置加快網(wǎng)頁(yè)加載速度
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載,js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度,為了提高加載速度,本文總結(jié)了一下幾個(gè)注意點(diǎn)2012-12-12Ajax執(zhí)行順序流程及回調(diào)問(wèn)題分析
有些朋友在實(shí)現(xiàn)異步局部更新數(shù)據(jù),會(huì)遇到ajax的執(zhí)行問(wèn)題,本文將對(duì)此進(jìn)行詳細(xì)介紹,需要了解的朋友可以參考下2012-12-12