1. 使用let/const替代var
  2. const声明的值为常量,不可修改引用地址
  3. 箭头函数
// es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号
const fn = (a, b) => a + b;


const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

箭头函数可以替换函数表达式,但是不能替换函数声明
箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this

在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined,这一点,在使用的时候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己错在哪!这种情况,如果你还想用this,就不要用使用箭头函数的写法。

  1. 模板字符串,解决字符串拼接问题
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;
  1. 解析结构,减少代码量,简化对象声明
// 首先有这么一个对象
const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

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

//es6
const { loading, clicked } = props;


// es6 用于数组 
const arr = [1, 2, 3];
const [a, b, c] = arr;
  1. 函数默认参数
function add(x = 20, y = 30) {
    return x + y;
}
console.log(add());
  1. 展开运算符
    在ES6中用...来表示展开运算符,它可以将数组方法或者对象进行展开。先来看一个例子它是如何使用的。
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

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

当然,展开对象数据也是可以得到类似的结果

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

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

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