浅析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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
基于javascript编写简单日历
May 02 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
vue配置多页面的实现方法
May 22 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP 采集心得技巧
2009/05/15 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
node.js超时timeout详解
2014/11/26 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
javascript History对象原理解析
2020/02/17 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python中list列表的高级函数
2016/05/17 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python全栈开发语法总结
2020/11/22 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
灵泰克Java笔试题
2016/01/09 面试题
英语系毕业生自荐信
2013/10/31 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis