es6 新特性

1、

2⃣️模版字符串

使用 反引号``(键盘上esc下面那个键) 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

2、

解构(destructuring)赋值

　　数组以序列号一一对应，这是一个有序的对应关系。
　　对象根据属性名一一对应，这是一个无序的对应关系。

复制代码
// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a,b,c) // 1,2,3

对象的解构赋值

const MYOBJ = {
    className: 'trigger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

现在我们想要取得其中的2个值：loading与clicked：

// es5
var loading = MYOBJ.loading;
var clicked = MYOBJ.clicked;

// es6
const { loading, clicked } = MYOBJ;
console.log(loading);// false

// 还可以给一个默认值，当props对象中找不到loading时，loading就等于该默认值
const { loadings = false, clicked } = MYOBJ;
console.log(loadings);// false

3、

展开运算符(spread operater)

　　 在ES6中用...来表示展开运算符，它可以将数组方法或者对象进行展开。上栗子

1.函数调用中使用展开运算符

　　函数调用里，将一个数组展开成多个参数，我们会用到apply：

function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);
　　在ES6里可以这样写

function test(a,b,c) { }
var args = [0,1,2];
test(...args);

2.数组字面量中使用展开运算符

　　有了ES6，我们可以直接加一个数组直接合并到另外一个数组当中

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

展开运算符也可以用在push函数中，可以不用再用apply()函数来合并两个数组：

var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']

3.用于解构赋值

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

注意：解构赋值中展开运算符只能用在最后，否则会报错

4.展开运算符可以将伪数组变成真正的数组

var list=document.querySelectorAll('div');
var arr=[..list];

关于对象展开
好像目前ES6还不支持这样,现在这样写浏览器会报错，ES7草案里貌似有提到，所以对象展开这里先了解一下就好了

const obj1 = {
  a: 1,
  b: 2, 
  c: 3
}

const obj2 = {
  ...obj1,
  d: 4,
  e: 5,
  f: 6
}

// 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4,e:5,f:6})

扩展：Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 语法：Object.assign(target, 一个或多个sources)

模块的 Import 和 Export

import 用于引入模块，export 用于导出模块。

// 引入整个文件
import dva from 'dva';

// 引入函数(可以是一个或多个)
import { connect } from 'dva';
import { Link, Route } from 'dva/router';

// 引入全部并作为 github 对象
import * as github from './services/github';

// 导出默认
export default App;
// 部分导出，复合写法是 export { App } from './file';
　　等价于import { App } from './file；export｛App｝

1.let命令

　　1）let和var的区别：let声明的变量只有所在的代码块有效。

　　2）没有变量的提升，一定要声明后使用。使用let命令声明变量之前，该变量都是不可用的。形成“暂时性死区”。

　　3）typeof 不再是一个百分之百安全的操作。

2.块级作用域

　　1）es5和es6比较：es5 只有全局作用域和函数作用域，没有块级作用域。

　　2）let实际上为javascript新增了块级作用域

　　3）es6 允许块级作用域的任意嵌套。

　　4）es5规定函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明，严格模式下会报错。为ES5和es6环境避免报错，应不要在块级作用域里声明函数。

3.const命令

　　1）const声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化，不能留到以后赋值。

　　2）其他特性和let类似

　　3）对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

　　

ES5只有两种声明变量的方法：var命令和function命令。ES6除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6一共有6种声明变量的方法。