浅析JavaScript 箭头函数 generator Date JSON


Posted in Javascript onMay 23, 2016

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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
javascript用函数实现对象的方法
May 14 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
用js实现放大镜的效果的简单实例
May 23 #Javascript
jQuery实现摸拟alert提示框
May 22 #Javascript
javascript实现标签切换代码示例
May 22 #Javascript
超实用的JavaScript代码段 附使用方法
May 22 #Javascript
JavaScript数组合并的多种方法
May 22 #Javascript
浅析JavaScript回调函数应用
May 22 #Javascript
为什么JavaScript没有块级作用域
May 22 #Javascript
You might like
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
一些mootools的学习资源
2010/02/07 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
js面向对象编程总结
2017/02/16 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
Vue实现web分页组件详解
2017/11/28 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python splitlines使用技巧
2008/09/06 Python
基于Python测试程序是否有错误
2020/05/16 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
外企财务年会演讲稿
2014/01/03 职场文书
保险公司晨会主持词
2014/03/22 职场文书
房屋买卖协议书
2014/04/10 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书