learn ES6 from freecodecamp

1.var & let

var声明的变量只有全局变量和函数内变量两种区别；

let声明的变量是块级作用域，在循环、条件语句等外部无法访问；

let不允许重复声明，var可以重复声明，容易产生问题；

2.const

对象（包括数组和函数）在使用 const 声明的时候依然是可变的。 使用 const 来声明只会保证变量不会被重新赋值。

const变量名注意字符全部大写；

3.防止对象被改变

Object.freeze(obj);

4.省略函数体的匿名函数

        const fun = () =>{函数体}；

        fun();

函数体只有return语句的情况下可以省略return：

        const fun = (a, b) => a*b；

给参数设置默认值：

         const fun = (a = 1, b) => a*b；

5.操作符之‘...’

一、省略参数，就不需要查看 args 数组，并且允许我们在参数数组上使用 map()、filter() 和 reduce()。

const sum = (...args) => {
  return args.reduce((a, b) => a + b, 0);
}

二、展开数组，只能够在函数的参数中或者数组中使用

简言之，去掉数组的中括号，变成以逗号分隔的一个个数据

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;

arr2 = [...arr1];

6.解构赋值

const obj={name: 'Amy', age: 18}

一、const {name, age} = obj作用等同于分别将const name=obj.name; const age = obj.age;

二、变量名和属性名不一致时,userName为新变量名

const {name: userName, age: userAge} = obj

三、嵌套对象的解构

const obj = {A:{name: 'Amy', age: 18}}

const {A: {name: userName, age: userAge} } = obj

四、数组解构

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);// 1 2 5
//依次赋值，少变量的情况下，多余数组值舍去

//简单交换两个值
[a, b] = [b, a]

//list是一个数组，结合...操作符取排除前两个元素的list
const [, , ...arr] = list;

五、函数参数的解构

obj = {name: 'a', age: 18}

const fun = ({name, age}) => 'name is ' + name + ', age is ' + age;

7.字符串模板的应用

反引号、变量放在 ${变量名} 中，不需要打断语句：

let str = `My name is ${userName}.I'm ${age} years old.`

8.简化的对象

{a, b, c}和{a:a, b:b, c:c}等价

9.对象中简化的函数定义

 10.class关键字,类名首字母大写，后续驼峰

11.getter和setter，，，，注意私有变量以下划线开始命名（建议）

函数名相同，使用方式和变量一样

//getter
get name(){
    return this._name
}
//setter
set name(name){
    this._name = name
}
//use
obj.name = 'Jo'
userName = obj.name

12.模块脚本的使用，类似C++ 的库函数

13.使用export和import来重用函数

//在需要导出的函数的js文件中
export { 函数名1， 函数名2}

//在引用函数的js文件中
import {函数名1, 函数名2} from '源js文件所在目录以及文件名'

//全部导入
import * as stringFunctions from "./string_functions.js";
//使用
stringFunctions.func1()
stringFunctions.func2()

14.export default

还需要了解另外一种被称为默认导出的 export 的语法。 在文件中只有一个值需要导出的时候，通常会使用这种语法。 它也常常用于给文件或者模块创建返回值。

就是给函数前加上export default，每个文件只能有一个export default

export default function subtract(x, y) {
  return x - y;
}

默认导出的导入，无需花括号，变量名不用相同

import sub from "./math_functions.js";

15.promise

Promise 有三个状态：pending、fulfilled 和 rejected。 上一个挑战里创建的 promise 一直阻塞在 pending 状态里，因为没有调用 promise 的完成方法。 Promise 提供的 resolve 和 reject 参数就是用来结束 promise 的。 Promise 成功时调用 resolve，promise 执行失败时调用 reject， 如下文所述，这些方法需要有一个参数。

const myPromise = new Promise((resolve, reject) => {
  if(condition here) {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
});

上面的示例使用字符串作为这些函数的参数，但参数实际上可以是任何格式。 通常，它可能是一个包含数据的对象，你可以将它放在网站或其他地方。

const makeServerRequest = new Promise((resolve, reject) => {
  // responseFromServer 设置为 false，表示从服务器获得无效响应
  let responseFromServer = false;

  if(responseFromServer) {
    resolve("We got the data");
  } else {  
    reject("Data not received");
  }
});

//resole结束时会调用then
makeServerRequest.then(result => {
  console.log(result);
});

//reject会调用catch
makeServerRequest.catch(error => {
  console.log(error);
});