1、块级作用域 关键字let, 常量const
之前，写js变量的时候。只有一个关键字：var
但var有一个问题，就是定义的变量有时候会成为全局变量。let所声明的变量，只在let所在的代码块内有效。
const声明的变量是常量，不能被修改；类似于Java中的final关键字。
2、模板字面量
在ES6之前,将字符串连接到一起的方法是+或者concat()方法,如

const student = {
  name: 'Richard Kalehoff',
  guardian: 'Mr. Kalehoff'
};
const teacher = {
  name: 'Mrs. Wilson',
  room: 'N231'
}
let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' 

image.gif

模板字面量本质上是包含嵌入式表达式的字符串字面量.
模板字面量用倒引号 ( `` )（而不是单引号 ( '' ) 或双引号( "" )）表示，可以包含用 ${expression} 表示的占位符

let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;

image.gif

3、解构 （数组解构，对象解构）
在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量

const point = [10, 25, -34];
const [x, y, z] = point;
console.log(x, y, z);
Prints: 10 25 -34

image.gif

4、函数数默认值
在ES6之前，无法给一个函数参数设置默认值，只能采用变通写法：

// 如果没有给参数b传值，则b=1
function add(a,b){
    b = b || 1;
    return a+b;
}
console.log(add(10));    //输出11
console.log(add(10，20));    //输出30

使用了ES6之后，可以这样写
function add(a,b = 1){
    return a+b;
}
console.log(add(10));    //输出11
console.log(add(10，20));    //输出30

image.gif

5、新增for...of循环
for...of 循环用于循环访问任何可迭代的数据类型。
for...of 循环的编写方式和 for...in 循环的基本一样，只是将 in 替换为 of，可以忽略索引。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const digit of digits) {
  console.log(digit);
}

image.gif

6、函数箭头

ES6中，定义一个函数的简写方式：

一个参数时：

let print = function (obj){
    console.log(obj);
}
// 简写为：
let print2 = obj => console.log(obj);

image.gif

多个参数时

let sum = function(a,b){
    return a + b;
}
// 简写为：
let sum2 = (a,b) => a + b;

image.gif

没有参数时

// 没有参数时，需要用()进行占位，代表参数部分
let hello = function(){
    console.log("Hello ...")
}
// 简写为：
let hello2 = () => console.log("Hello ...")

image.gif

当有多行代码时，可以使用{ }括起来

let sum3 = (a.b) =>{
    return a+b;
}

let hello3 = () =>{
    console.log("Hello");
    console.log("World");
};
hello3();

7、Map和Reduce
在ES6中，数组新增了map() 和 reduce()方法
map()
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新的数组返回。
例如：有一个字符串数组，要求把它转换为int数组

let arr = ['1','2','3','4']
console.log(arr);
let newArr = arr.map(s => parseInt(s));
console.log(newArr);

reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果，
第二个参数是数组中要处理的下一个元素
reduce()会从左至右依次把数组中的元素用reduce()处理，并把处理结果作为下一次reduce的第一个参数，如果是第一次，会把前两个元素作为计算参数，或者把传入的初始值参数作为起始值。

const arr = [2,5,-10,20]; 

image.png

8、运算符扩展
扩展运算符（spread）是三个点（…），将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3]);        // 1 2 3
console.log(1,...[2,3,4],5);    // 1 2 3 4 5

function add(x,y) {
    return x+y;
}
const number = [1, 2];
console.log(add(...number));    // 3

let arr = [...[1,2,3],...[4,5,6]];
console.log(arr);   //[1,2,3,4,5,6]

const [first,...rest] = [1,2,3,4,5,6];
console.log(first,rest);    // 1 [2,3,4,5,6]

console.log([..."hello"]);  // ["h","e","l","l","o"]

9、Promise
所谓Promise，简单来说就是容器，里面保存着某个未来才会结束的事件（通常为异步操作）的结果。从语法上说，Promise是一个对象，它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用这样的方式进行处理。

可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

const promise = new Promise(function (resolve, reject) {
    // 执行异步操作
    if (/*异步操作成功*/){
        // 调用resolve，代表Promise将返回成功的结果
        resolve(value)
    }else {
        // 调用reject，代表Promise将返回错误的结果
        reject(error)
    }
})

如果想用等到promise异步操作执行完成，做一些事情，可以通过promise的then()方法来实现：

promise.then(function(value)){
    // 异步执行成功后的回调
}

如果想要处理Promise异步执行失败的事件，还可以跟上catch：

promise.then(function(value)){
    // 异步执行成功后的回调
}.catch(function(error)){
    // 异步执行失败后的回调
}

const promise = new Promise(function (resolve, reject) {
    setTimeout(() =>{
        const num = Math.random();
        if (num < 0.5){
            resolve("success,num:" + num)
        }else {
            reject("error,num:" + num)
        }
    },300)
});
// 调用promise
promise.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

image.png

10、Generator函数
generator是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator函数有两个特征

function命令与函数名之间有一个*****号
函数体内部使用yield语句定义不同的内部状态

<script type="text/javascript">
    function * hello() {
        yield "hello";
        yield "world";
        return "over"
    }
    let hi = hello();
    console.log(hi.next());
    console.log(hi.next());
    console.log(hi.next());
    console.log(hi.next());
</script>

image.png

11、class（类）的基本语法
JavaScript的传统方法是通过构造函数定义并生成对象。ES6中引入了class的概念，通过class关键字自定义类。

<script type="text/javascript">
    class User{
        // 构造函数
        constructor(name,age = 20){
            this.name = name;
            this.age = age;
        }
        // 定义方法
        sayHello(){
            return "Hello: " + this.name;
        }
        // 静态方法
        static isAdult(age){
            if (age >= 18){
                return " 成年 " + age;
            }
            return " 未成年 " + age;
        }
    }

    class Jerry extends User{
        constructor(){
            super("Jerry",17);
            this.address = "Shanghai";
        }
    }

    let jerry = new Jerry();
    console.log(jerry);
    console.log(jerry.sayHello());
    // 静态方法需要使用类来调用
    console.log(Jerry.isAdult(jerry.age));
</script>

image.png

12、Set和Map

ES6提供了Set和Map的数据结构。
Set本质与数组类似。不同于Set中只能保存不同的元素，如果元素相同会被忽略。和Java中的Set集合非常相似。

let set = new Set();
set.add(1); // [1]

let set2 = new Set([1,2,3,4,5]) // [1,2,3,4,5]


// 添加，元素内容不可重复，重复会被忽略
set.add()
// 清空
set.clear()
// 删除指定元素，删除的是元素内容，而不是下标
set.delete(value)
// 判断指定元素是否存在
set.has(value)
// 遍历
set.forEach(function(){})
// 元素个数
set.size

Map
Map本质是与Object类似的结构。不同在于Object强制规定key值只能是字符串。而Map对象的key可以是任意对象：

object是<String, Object>集合
map是<Object, Object>集合

// map接收一个数组，数组中的元素是键值对数组
const map = new Map([
    ['key1','value1'],
    ['key2','value2']
]);
// 或者接收一个set
const set = new Set([
    ['key3','value3'],
    ['key4','value4']
]);
const map1 = new Map(map);
const map2 = new Map(set);

map.set(key,value)
map.clear()
map.delete(key)
map.has(key)
map.forEach(function(key,value){})
map.size

map.values()
map.keys()
map.entries()
for(let key of map.keys()){
    console.log(key);
}
console.log(...map.values())