ES6的模板字符串、箭头函数、对象的扩展 — (2)

Sep 21, 2016

我感觉目前在React中比较常用的ES6新特性，主要还是Class这个板块，当然还有就是对箭头函数的使用，在meteor这个开发框架中对对象的扩展使用也比较多，而Node则对ES6很多新特性进行了充分的超前使用。个人建议大家在阅读《ES6标准入门》这本书时最好有针对性的了解，不建议大家跟着书本目录看，可以先了解1-9章的内容，然后看Class章节，再接着看Module章节，最后根据自身实际的开发需要阅读其他章节。

(1)好用的模板字符串

如果常用jQuery那一定会经常遇到添加DOM中需要遇到添加变量的问题，一旦有变量加入，让我们在写代码中不得不注意自己的字符串拼接是不是有毛病，而现在有了模板字符串，这事就变得容易多了：

//之前是这样写的
var time = new Date();
$('body').append('<b>'+time+'</b>');
//假如有多个变量，想象一下这个麻烦啊

//有了模板字符串后
$('body').append(`<b>${time}</b>`);
//这是不是显得就完整，且不再需要注意拼接问题

需要注意模板字符串和普通字符串区别在于，模板字符串只能使用反引号，变量要写入${}，个人感觉在实际开发中这个东西很好用，当然书中有更复杂的使用，但本人在开发中尚未使用到，这里我就不写出来了。

箭头函数

箭头函数是什么东东呢？=>这就是箭头，基本使用方法：

1.当只有一个参数时


//普通写法
let test = function( t ) {
 return t;
}
//箭头写法
let test = t => t;

这里是一个巧合，即参入t再返回t,需要注意的是在不涉及其他变量时，箭头函数可以直接返回表达式结果，什么意思呢，就像这样：


let test = t => t + 2;

//等同于

let test = function(t) {
 return t+2;
}

//如果涉及其他变量

let test = function(t) {
 let b = 5;
 return b+t;
}

//这种情况就不能通过箭头函数直接返回结果了，因为代码块中涉及了处参数以为的其他变量。

2.当不需要参数或有多个参数时

这种情况需要这样来书写：


let test = () => {};
let test2 = (a, b) => a+b;

3.箭头后面能怎么书写

一般有3种书写方法：


// 1直接返回值时
test = () => 'hello';
// 可以返回一个数组

// 2执行的多语句代码块时
test = () => { 多于句代码块 }

// 3返回一个对象时
test = () => ({object})

注意返回一个对象时一定要使用括号，否则会按照代码块处理

4.使用注意事项

a.箭头函数体内的this是固定的，默认就是绑定在其定义时所在的对象
b.不可以当作构造函数
c.不可以使用arguments对象
d.不可以使用yield命令，这里可以理解不能被程序自动安排被执行

this指向固定化，实际原因是箭头函数根本没有自己的this，导致内部的this就是最外层代码块的this，所以也就不能用构造函数，这里引用书中的一个列子说明一下：


function foo() {
 return () => {
  return () => {
   return () => {
    console.log('id:', this.id);
   };
  }; 
 };
}

foo.call({id: 42})()()();

//最终得到的是 id: 42

上面的代码中只有一个this，那就是foo的this，所以不管内部有多少箭头函数，其所有的this都指向所在的最终外层对象

对象的扩展

对象的扩展在React里使用的较多，这里主要说一下目前对象扩展后的常见使用方法

1.更加简洁的书写方式

这个得益于ES6的解构赋值，拿书中的列子说明：


var foo = 'bar';
var baz = {foo};

baz // {foo: 'bar'}

//等同于
var baz = {foo: foo};

ES6的模板字符串、箭头函数、对象的扩展 — (2)

手记清单