详细解读JavaScript 箭头函数 generator Date JSON-tutorial js-php.cn

下面我就为大家带来一篇浅析JavaScript 箭头函数 generator Date JSON。现在就分享给大家，也给大家做个参考。

ES6 标准新增了一种新的函数： Arrow Function(箭头函数)。

　　　　x => x *x
　　　　上面的箭头相当于:
　　　　　　function (x){ 
　　　　　　　　　　return x*x;
　　　　　　}

Salin selepas log masuk

箭头函数相当于匿名函数，并且简化了函数定义。一种像上面的，只包含一个表达式，

连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

　　　　　　　　x =>{ 
　　　　　　　　　　if(x > 0){ 
　　　　　　　　　　　　return x * x;
　　　　　　　　　　}else{ 
　　　　　　　　　　　　return -x *x;
　　　　　　　　　　}
　　　　　　　　}

Salin selepas log masuk

如果参数不是一个，就需要用括号()括起来：

　　　　// 两个参数
　　　　　　(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;
　　　　}

Salin selepas log masuk

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

Salin selepas log masuk

如果使用了箭头函数，以前的那种hack 写法；

var that = this;

Salin selepas log masuk

就不再需要了。

由于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

Salin selepas log masuk

generator

generator(生成器)是ES6标准引入的新型数据类型。一个generator看上去像一个函数，但可以返回多次。

　　　　function* foo(x){ 
　　　　　　　　yield x +1;
　　　　　　　　yieldx + 2;
　　　　　　　　return x +3;
　　　　}

Salin selepas log masuk

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; 
　　　　　　}

Salin selepas log masuk

直接调用试试：

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

Salin selepas log masuk

直接调用一个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}

Salin selepas log masuk

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)

Salin selepas log masuk

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;小明&#39;,
age: 14,
gender: true,
height: 1.65,
grade: null,
&#39;middle-school&#39;: &#39;\"W3C\" Middle School&#39;,
 skills: [&#39;JavaScript&#39;, &#39;Java&#39;, &#39;Python&#39;, &#39;Lisp&#39;]
};
 JSON.stringify(xiaoming); // &#39;{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"

middle-school":"\"W3C\" Middle School","skills":　　["JavaScript","Java","Python","Lisp"]}&#39;

Salin selepas log masuk

结果：

　　{
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
　　"JavaScript",
　　"Java",
　　"Python",
　　"Lisp"
　　]
　　}

Salin selepas log masuk

第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：

JSON.stringify(xiaoming, ['name', 'skills'], ' ');

结果：

{
　　"name": "guagua",
　　"skills": [
　　"JavaScript",
　　"Java",
　　"Python",
　　"Lisp"
]
　　}

Salin selepas log masuk

还可以传入一个函数，这样对象的每个键值对都会被函数先处理：

function convert(key, value) {
if (typeof value === &#39;string&#39;) {
　　return value.toUpperCase();
}
　　return value;
}
JSON.stringify(guagua, convert, &#39; &#39;);

Salin selepas log masuk

上面的代码把所有属性值都变成大写：

{
　　"name": "guagua",
　　"age": 14,
　　"gender": true,
　　"height": 1.65,
　　"grade": null,
　　"middle-school": "\"W3C\" MIDDLE SCHOOL",
　　"skills": [
　　"JAVASCRIPT",
　　"JAVA",
　　"PYTHON",
　　"LISP"
]
　　}

Salin selepas log masuk

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse() 把它变成一个JavaScript 对象：

JSON.parse(&#39;[1,2,3,true]&#39;); //[1,2,3,true]
JSON.parse(&#39;{"name":"瓜瓜"，"age":14}&#39;); // Object{name:&#39;瓜瓜&#39;，age:14}
JSON.parse(&#39;true&#39;); // true
JSON.parse(&#39;123.45&#39;):// 123.45

JSON.parse()还可以接收一个函数，用来转换解析出的属性：
JSON.parse(&#39;{"name":"guagua","age":14}&#39;,function(key,value){ 
//把number * 2
if(key ===&#39;name&#39;){ 
return value + &#39;同学&#39;
}
return value;
}) ; // Object{name: &#39;瓜瓜同学&#39;，age: 14}

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

深入理解JavaScript中的块级作用域、私有变量与模块模式（图文教程）

JavaScript 输出显示内容（基础的教程）

Javascript 普通函数和构造函数的区别（结合代码，详细解读）

Atas ialah kandungan terperinci 详细解读JavaScript 箭头函数 generator Date JSON. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!