本文深入解析 JavaScript ES6 的四大核心特性：箭头函数通过简化语法和固定 this 指向解决传统函数痛点；Generator 函数利用 function* 和 yield 实现多次返回值；Date 对象提供精确的时间处理；JSON 模块涵盖序列化、反序列化及自定义转换逻辑，帮助开发者掌握现代 JS 编程基础。
ES6 箭头函数：语法简化与 this 指向
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如果使用箭头函数，以往那种通过变量保存 this 引用的 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（生成器）
Generator 是 ES6 标准引入的一种新型数据类型。它看起来像普通函数，但可以多次返回结果。
function* foo(x){
yield x +1;
yieldx + 2;
return x +3;
}
Generator 与普通函数的区别在于，它由 function* 定义（注意多出的 * 号），并且除了 return 语句外，还可以使用 yield 多次返回值。
普通函数只能返回一次，因此通常返回一个数组。而 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;
}
直接调用 Generator 函数进行测试。
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 对象：时间与日期处理
关于 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
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 的 {...} 表示方式。
JSON 规定字符集必须为 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"
]
}第二个参数用于控制如何筛选对象的键值，如果只想输出指定的属性，可以传入数组。
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 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。