浅析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 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
vue的for循环使用方法
Feb 12 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
用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 咖啡文化
php5新改动之短标记启用方法
2008/09/11 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
用jquery来定位
2007/02/20 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python创建和删除目录的方法
2015/04/29 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
通过shell+python实现企业微信预警
2019/03/07 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python的dict判断key是否存在的方法
2020/12/09 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
高校十八大报告感想
2014/01/27 职场文书
如何撰写岗位职责
2014/02/01 职场文书
办公室文员自荐书
2014/02/03 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
cf战队宣传语
2015/07/13 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP