ES6 你可能不知道的事 – 基础篇

547 查看

序

ES6，或许应该叫 ES2015（2015 年 6 月正式发布），对于大多数前端同学都不陌生。

首先这篇文章不是工具书，不会去过多谈概念，而是想聊聊关于每个特性 你可能不知道的事，希望能为各位同学 正确使用 ES6，提供一些指导。

对于 ES6，有些同学已经在项目中有过深入使用了，有些则刚刚开始认识他，但不论你是属于哪一类，相信这篇文章都有适合你的部分。针对文章中的问题或不同意见，欢迎随时拍砖、指正。

正文

Let + Const

这个大概是开始了解 ES6 后，我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。

以如下方式使用的同学请举下手？

// 定义常量

const REG_GET_INPUT = /^\d{1,3}$/;

// 定义配置项

let config = {

isDev : false,

pubDir: './admin/'

}

// 引入 gulp

let gulp = require('gulp');

// 引入gulp相关插件

let concat = require('gulp-concat');

let uglify = require('gulp-uglify');

let cssnano = require('gulp-cssnano');

很多人看完概念之后，第一印象都是：“const 是表示不可变的值，而 let 则是用来替换原来的 var 的。”

所以就会出现上面代码中的样子；一段代码中出现大量的 let，只有部分常量用 const 去做定义，这样的使用方式是错误的。

你可能不知道的事

const 的定义是不可重新赋值的值，与不可变的值(immutable value)不同；const 定义的 Object，在定义之后仍可以修改其属性。

所以其实他的使用场景很广，包括常量、配置项以及引用的组件、定义的 “大部分” 中间变量等，都应该以const做定义。反之就 let 而言，他的使用场景应该是相对较少的，我们只会在 loop(for，while 循环)及少量必须重定义的变量上用到他。

猜想：就执行效率而言，const 由于不可以重新赋值的特性，所以可以做更多语法静态分析方面的优化，从而有更高的执行效率。

所以上面代码中，所有使用 let 的部分，其实都应该是用 const 的。

Template Strings（字符串模板）

字符串模板是我刚接触ES6时最喜欢的特性之一，他语法简洁，语义明确，而且很好的解决了之前字符串拼接麻烦的问题。

因为他并不是 “必须” 的，而且原有的字符串拼接思维根深蒂固，导致我们很容易忽视掉他。

使用实例

我们先来看看他的一般使用场景：

const start = 'hi all';

const getName = () => {

return 'jelly';

};

const conf = {

fav: 'Coding'

};

// 模板

const msg = `${start}, my name is ${getName()}, ${conf.fav} is my favourite`;

你可能不知道的事

// 1. 与引号混用

const wantToSay = `I'm a "tbfed"`;

// 2. 支持多行文本

const slogan =

I have a dream today!

// 比较适合写HTML

const resultTpl =

</section>

Enhanced Object Literals（增强的对象字面量）

增强的对象字面量是 ES6 中的升华功能，他设计了很多简写，这些简写不但保留了明确的语义，还减少了我们多余的代码量。

当他的使用成为一个习惯时，我们会看到自己代码变得更为优雅。

你可能不知道的事

const _bookNum = 4;

const basicConfig = {

level: 5

}

const config = {

// 直接指定原型对象

__proto__: basicConfig,

// 属性简写

_bookNum,

// 方法简写

getBookNum() {

return this.bookNum;

}

Arrows and Lexical This（箭头函数）

箭头函数是ES6中的一个新的语法特性，他的用法简单，形态优雅，备受人们青睐。

大多数同学初识这个特性时，更多的仅仅用它作为函数定义的简写，这其实就有些屈才了。