js实例浅析JavaScript 箭头函数 generator Date JSON_js

上一篇: js实例在IE8上JS实现combobox支持... 下一篇:js实例用js实现放大镜的效果的简...

js实例浅析JavaScript 箭头函数 generator Date JSON

发布时间：2018-11-22 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了js实例浅析JavaScript 箭头函数 generator Date JSON，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

下面小编就为大家带来一篇浅析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;小明', 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": "quot;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}