学习ES6新特性总揽

ES6的推行感觉是极大的解放了生产力,各种方法得心应手,但回头看了看浏览器支持,默默的板砖去了。

新语法在各种浏览器上支持并不是特别好,要想直接用在生产环境还有很长的撸要走。不过有万能的Babel,可以轻松的让你使用最新的javascript语法,而不用等到浏览器的支持。

本文主要概述总结ES6中的新特性,后续有时间在分别对每一项内容研究,如有不对的地方,欢迎指正。

let和const 命令

let会强制把变量的作用域变成块级的。

const申明常量,申明后不能被修改(它的作用域和let相同,属于块级作用域)。

1
2
3
4
if(true){
let foo = 'xxxx'
}
console.log(foo); // foo is not defined

变量的解构赋值

ES6 中可以通过特定的形式,提取出对象或者数组的值,然后再赋给其他变量。

极大精简了代码,增加了代码的可读性。

1
2
3
4
5
6
7
// before
var foo1 = 1;
var foo2 = 2;
var foo3 = 3;
//now
var [foo1,foo2,foo3] = [1,2,3];

数组的结构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

ES6之前:

1
2
3
var a = 1;
var b = 2;
var c = 3;

ES6中的写法:

var [a,b,c] = [1,2,3]

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

1
2
3
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo; // "aaa"
bar; // "bbb"

字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

1
2
3
4
5
6
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

字符串的扩展

ES6中对字符串新增了at() repeat()等实用的方法,不过耀眼的还是模版字符串的支持。

模板字符串的用法和其他模板插件类似,使用时通过反引号声明,${xxx}的形式赋值变量,多行字符串可以正常换行。

1
2
3
var name = "xhay", lan = "ES6";
var info = `Hello ${name}, this is ${lan}?`

函数的扩展

函数新增了很多语法糖以及新的用法:

  • 在形参后面可以方便的给参数添加默认值
  • 通过剩余操作符,轻松的把多余的参数获取到
  • 箭头函数,让函数调用更加的简洁,而且简化了回调函数
  • more

Symbol

Symbol不是字符串,也不是对象,是一种全新的原始类型。

Proxy和Reflect

代理和反射,可以通过它来记录对象的各种操作记录。

新的数据结构 Set& Map

一般情况使用对象键值对存储数据已经住够了,但是无法保证和Object上的属性和方法冲突,而且对象的键总是字符串,而新的集合就能避免这些问题。

Iterator和for…of循环

。。。

Generator函数

通过next执行每一个yield表达式,感觉很像chrome的debugger模式。

Promise对象

Promise让我们的代码可以将异步操作用同步操作的流程展示出来,避免了回调地狱的问题。

Promise执行后无法取消,其内部的错误(包含代码错误)会被捕获到,不会继续向外抛出。

【我所理解的Promise】

异步操作和Async函数

。。。

Class

class 是 JavaScript 现有的原型继承的语法糖,让我们在创建对象以及继承方面使用更加的简洁。

Module

使用 import 和 expor t关键字实现类似于第三方插件的 require 功能,但是在用法上有很大的不同。