ES6-学习

发表于   |   分类于

最近看了《ES6标准入门》第二版，在对语法有了初步了解的基础上，首先建议真正开发前看一下该书第21章——编程风格，从开始就养成良好的编程风格。

ES6语法

编程风格

let取代var，const优先
静态字符串使用单引号或反引号
为变量赋数组优先使用解构赋值
函数的参数如果是对象优先使用解构赋值
如果函数的返回多个值，优先使用对象的解构赋值而不是数组的解构赋值
单行定义的对象，最后一个成员不以逗号结尾，多行定义的对象，最后一个成员以逗号结尾
对象尽量静态化，可以使用Object.assign()添加属性
使用扩展运算符（…）赋值数组
需要使用函数表达式的场合尽量使用箭头函数
函数的所有配置项应集中在一个对象，防在最后一个参数
只有模拟实体对象时才使用Object，如果只是要key:value的数据结构则使用Map
不要export default 与 普通的export同时使用

以下是我在项目开发中使用到的、个人认为比较有用的ES6语法，总结如下：

let和const

let、const与var相比：

使用未声明的变量，直接报错
重复声明同一个变量，直接报错
是块级作用域
必须声明 ‘use strict’ 后才能使用let声明变量

用了 let、const，typeof 就不那么安全了。
声明宣称一个名字的存在，定义则为这个名字分配存储空间，而初始化则是为名字分配的存储空间赋初值。

对象的扩展

Object.keys() – 返回对象的键组成的数组
Object.values() – 返回对象的值组成的数组
Object.assign() – 对象的合并

Generator函数

1
2
3
4
5
6
7
8
9
10
11
// 定义
function* helloWorldGenerator() {
    yield 'hello';
    yield 'world';
    return 'ending';
}
// 调用
var hw = helloWorldGenerator();
hw.next();// {value: 'hello', done: false}
hw.next();// {value: 'world', done: false}
hw.next();// {value: 'ending', done: true}

调用Generator函数后，函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象（Iterator对象），必须调用next方法，是的指针移向下一个状态。总之，Generator函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。
Generator函数可以达到多个return的效果。
for…of循环、扩展运算符（…）、解构赋值和Array.from方法内部调用的都是遍历器接口，因此可以将Generator函数返回的Iterator对象作为参数使用。
调用Generator函数的返回结果可以类似数组使用

1
[...hw()]// ['hello', 'world', 'ending']

字符串的扩展

includes() – 返回布尔值，表示是否找到了参数字符串
startsWith() – 返回布尔值，表示参数字符串是否在源字符串的头部
endsWith() – 返回布尔值，表示参数字符串是否在源字符串的尾部

Class的取值函数（getter）和赋值函数（setter）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}
let inst = new MyClass();
inst.prop = 123; // 调用 setter
inst.prop; // 调用 getter

ES7语法

对象的解构赋值

对象的解构赋值是ES7的语法，需要

1
2
3
需要安装依赖 npm install babel-preset-stage-0 --save-dev   
并配置预设 presets: ['es2015', 'stage-0', 'react']  
使用 const newObj = { ...oldObj };

async await

1
2
3
4
5
6
7
8
9
10
11
async search(item) {
  try {
    // 会等待setState执行之后再向下执行
    await this.setState({
      query: item
    });
    this.fetchData();
  } catch (error) {
    console.log(error);
  }
}