ES6新特性

let和const命令

var

之前，写js变量的时候。只有一个关键字：var

但var有一个问题，就是定义的变量有时候会成为全局变量。

例如：

for(var i = 0; i < 5; i++){
     
    console.log(i);
}
console.log("循环外：" + i);

输出结果：

可以看出，在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问
题。

let

let所声明的变量，只在let所在的代码块内有效。

例如：（把var改成let）

for(let i = 0; i < 5; i++){
     
    console.log(i);
}
console.log("循环外：" + i);

输出结果：

这样，就把变量的i的作用域控制在了循环内部。

const

const声明的变量是常量，不能被修改；类似于Java中的final关键字。

例如：

const a = 10;
console.log("a = " , a);
//给a重新赋值
a = 20;
console.log("a = " , a);

输出结果：

可以看到，变量a的值是不能修改的。

字符串扩展

字符串API

在ES6中，为字符串扩展了几个新的API

• includes(“xxx”)：返回布尔值，表示是否包含xxx
• startsWith(“xxx”)：返回布尔值，表示是否以xxx开头
• endsWith(“xxx”)：返回布尔值,表示是否以xxx结尾

示例：

let str = "Hello Javascript";
console.log(str, "中是否包含 hello ==>", str.includes("hello"));
console.log(str, "中是否包含 hi ==>", str.includes("hi"));

console.log(str, "中是否以 h 开头==>", str.startsWith("h"));
console.log(str, "中是否以 a 开头==>", str.includes("a"));

console.log(str, "中是否以 a 结尾==>", str.includes("a"));
console.log(str, "中是否以 t 结尾==>", str.includes("t"));

输出结果：

字符串模板

ES6中提供了`来作为字符串模板标记。

示例：

<script type="text/javascript">
    let str = `
    hello
    Java
    and
    JavaScript
    `;
    console.log(str);
</script>

输出结果：

两个`之间的部分都会被记做字符串的值，可以任意换行。

解构表达式

什么是解构？

​ ES6中允许安装一定模式从数组对象中提取值，然后对变量进行赋值，这样被称之为解构

数组解构

例如，有一个数组

let arr = [1,2,3]

之前，想要获取其中的值，只能通过下标。但ES6可以这样做：

let arr = [1,2,3];
const [a,b,c] = arr;	// a,b,c将与arr中的每个位置对应来取值
console.log(a,b,c);
const [x] = arr;	// 只匹配一个参数值
console.log(x);

结果：

对象解构

例如，定义一个对象

const person = {
     
    name: "Tom",
    age: 20,
    language: ['Java','JavaScript','Python']
}

使用解构表达式取值：

const {
     name,age,language} = person;		// {}内的属性名必须是person的属性名
console.log(name);
console.log(age);
console.log(language);

// 如果想用其他变量接收，需要指定别名
const {
     name:n} = person;
console.log("n: ",n);

结果：

函数优化

函数数默认值

在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

函数箭头

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

• 一个参数时：

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

• 多个参数时

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

• 没有参数时

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

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

  let sum3 = (a.b) =>{
         
      return a+b;
  }
  
  let hello3 = () =>{
         
      console.log("Hello");
      console.log("World");
  };
  hello3();
  

对象的函数属性简写

比如有一个Person对象，里面有eat()方法

let person = {
     
    name: "Tom",
    // ES6之前
    eat: function (food){
     
        console.log(this.name + "在吃" + food);
    }
    // 箭头函数写法
    eat2: food => console.log(person.name + "在吃" + food);
	// 简写版
	eat3(food){
     
        console.log(this.name + "在吃" + food);
    }
}

箭头函数结合解构表达式

例如，有这样一个函数

const person = {
     
    name: "Tom",
    age: 20,
    language: ["Java","Python","JS"]
}
function hello(person){
     
    console.log("Hello," + person.name);
}

使用箭头函数和解构表达式的写法

var hi = ({
     name}) => console.log("hello," + name);
hi(person);

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()处理，并把处理结果作为下一次reduce的第一个参数，如果是第一次，会把前两个元素作为计算参数，或者把传入的初始值参数作为起始值。

例如：

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

没有指定初始值：

指定了初始值：

运算符扩展

扩展运算符（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"]

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);
})

结果：

Set和Map

ES6提供了Set和Map的数据结构。

Set

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是集合
• map是集合

构造函数：

// 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())

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;

        }
    }
    let user = new User("Tom",23);
    console.log(user);
    console.log(user.sayHello());
    // 静态方法需要使用类来调用
    console.log(User.isAdult(user.age));
</script>

结果：

类的继承：

<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>

结果：

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>

结果：

可以看到，通过hello()返回的hi对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。知道遇到return关键字或者函数执行完毕，这个时候返回的done状态为true，表示已经执行完毕。

for…of循环

通过for…of可以循环遍历Generator函数返回的迭代器。

用法：

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

输出结果：