ES6 新特性

ES6 新特性

1.let(变量) & const(常量)

特点：

1. 不存在变量提升
2. 不允许重复声明
3. 只在块级作用域内有效 —— { }内
4. const在声明时必须赋初始值，对于数组和对象的元素修改，不算做对常量的修改，const保存的是内存地址

2.解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值

• 数组：

const a = ['one','two','three']
let [value1,value2,value3] = a
console.log('value1-----', value1) //value1-----one
console.log('value2-----', value2) //value2-----two
console.log('value3-----', value3) //value3-----three

• 对象

const person = {
	name:'张三',
	age:18,
	tell:function(){
	console.log('我叫张三，今年18岁')
	}
}
let {name,age,tell} = person
console.log(name) //张三
console.log(age)  //18
console.log(tell) //ƒ () {console.log("我叫张三，今年18岁");}
tell() //我叫张三，今年18岁

3.模板字符串

` `(反引号)内容中可以进行变量拼接 ${变量} 或者使用换行符，’ '和" "中则不可以，出现会报错

    const person = {
      name: "张三",
      age: 18,
    };
    console.log("我叫" + person.name + "，今年" + person.age + "岁"); 
    console.log(`我叫${person.name}，今年${person.age}岁`); 

4.简化对象写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁

let name = '张三';
let age = 18;
const person = {
	name, // name:name
	age, //age:age
	tell(){ //tell:function()
	console.log('我叫张三，今年18岁')
	}
}

5.箭头函数

1. 外部没有函数时，箭头函数的this指向window，有则指向外部函数
2. 当形参有且只有一个的时候，可以省略( ),当代码体只有一条语句的时候，可以省略{ }，此时return必须省略，而且语句的执行结果就是函数的返回值

let a = 10;
let b = 20;
let add = (x,y) =>{
	return x + y
}
console.log(add(a,b));

6.形参赋值

ES6允许给函数参数赋初始值

let add = (x = 10,y = 20) =>{
	return x + y
}
console.log(add()); //30
console.log(add(2,3)); //5

7.rest参数

代替arguments，用在函数定义时的形参前面，当函数调用时，用于接收不确定的参数，或与解构赋值结合使用，用于接收剩余的值,存储在数组中.

    function number(a, b, ...args) {
      console.log(a);
      console.log(b);
      console.log(...args);
    }
    number(1, 2, 3, 4, 5);

    var array = [1, 2, 3, 4, 5, 6];
    var [a, b, ...c] = array;
    console.log(a); //1
    console.log(b); //2
    console.log(c); //[3, 4, 5, 6]

8.拓展运算符

… 用在字符串或数组前面时称为扩展运算符,将数组或字符串进行拆解
注：虽然形式与rest参数类似，但是rest参数是用在函数定义时的形参位置，扩展运算符是用在函数实际调用时的实参位置

    const STUDENTS = ["小明", "小芳", "小红"];
    function show(...args) { //rest参数
      console.log(...args);
    }

    show(STUDENTS); // ["小明", "小芳", "小红"]
    show(...STUDENTS); // 拓展运算符 小明 小芳 小红

9.set(集合)

ES6提供了新的数据结构set(集合)，本质上是一个对象。它类似于数组，但成员的值都是唯一的。
set的属性和方法：

• size，返回集合的元素个数
• add，增加一个新元素，返回当前集合
• delete，删除元素，返回Boolean值
• has，检测集合中是否包含某个元素，返回Boolean值

 let s = new Set(['red','bule','green','red']) // red blue green

        let size = s.size // 查看元素个数
        let has = s.has('red') // 检测是否含该元素 true
        s.add('yellow') // 添加元素
        s.delete('blue') // 删除元素
        let has2 = s.has('blue') // 检测是否含该元素 false
        
        // 遍历集合
        for(let item of s){
            console.log(item)
        }
        s.clear() // 清空集合

        console.log(size,has,has2, typeof s) //3 true false "object

10.map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。
Map的属性和方法：

• size，返回Map的元素个数
• set，增加一个新元素，返回当前Map
• get，返回键名对象的键值
• has，检测Map中是否包含某个元素，返回Boolean值
• clear，清空集合，返回undefined

 let m = new Map();

    // 添加元素
    m.set("name", "张三"); // 键名，键值
    m.set("tell", function () {
      console.log("我是张三 ");
    });
    let friend = {
      school: "三中",
    };
    m.set(friend, ["小吴", "小王", "小芳"]);

    console.log(m); //Map(3) {"name" => "张三", "tell" => ƒ, {…} => Array(3)}
    // 删除元素
    m.delete("tell");

    // 获取元素
    let friends = m.get(friend);
    console.log(friends); // (3) ["小吴", "小王", "小芳"]

    // 获取元素个数
    let size = m.size;
    console.log(size); // 2

    // 遍历Map
    for (let item of m) {
      console.log("item---", item);
      // 每一个item都是一个数组，第一个元素为键，第二个元素为值
    }

    // 清空Map
    m.clear();

    console.log(typeof m); // object

11.Promise

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
一个 Promise 必然处于以下几种状态之一：

• pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
• fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

    new Promise((resolve, reject) => {
      setTimeout(() => {
        //resolve("hello world");
        reject("error data");
      }, 1000);
    }).then(
      (data) => {
        console.log(data); //hello world
      },
      (error) => {
        console.log(error); // error data
      }
    );

12. Generator函数(生成器)

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

Generator函数有两个特征:

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

function* hello () {
    yield "hello";
    yield "world";
    return "done";
}
let h = hello();
 
console.log(h.next()); //{value: "hello", done: false}
console.log(h.next()); //{value: "world", done: false}
console.log(h.next()); //{value: "done", done: true}
console.log(h.next()); //{value: undefined, done: true}

注：next调用和for…of调用同时存在，只会支持最先的一个

for (let obj of h) {
    console.log(obj);
}// 输出：hello world

13.模块化

模块化就是把代码进行拆分，方便重复利用。类似 Java 中的导包：要使用一个包，必须先导入一个包。而 JS 中没有包的概念，换来的是模块。

模块功能主要是由两个命令构成：export 和 import 。

• export：用于规定模块的对外接口；
• import：用于导入其他模块提供的功能。

number.js

export function add(x,y){
	return x + y
}

use.js

import add from './number.js'

console.log(add(2+3))

14.class（类）

ES6中引入 class 的概念，通过 class 关键词自定义类。

• constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。
• class之间可以通过extends关键字实现继承父类的所有属性和方法。
• super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

    class People {
      constructor(name) {
        //构造函数
        this.name = name;
      }
      sayName() {
        console.log(this.name);
      }
    }

    class Student extends People {
      constructor(name, grade) {
        //构造函数
        super(name); //调用父类构造函数
        this.grade = grade;
      }
      sayGrade() {
        console.log(this.grade);
      }
    }

    let S = new Student("张三", 80);

    console.log(S.sayName(), S.sayGrade()); //张三 80

15.Map和Reduce

在ES6中，数组新增了map() 和 reduce()方法

• map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新的数组返回。

let str = ['1','2','3','4']
console.log(str); //["1","2","3","4"]

let num = str.map(s => parseInt(s));
console.log(num); //[1,2,3,4]

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

1. 第一个参数是上一次reduce处理的结果
2. 第二个参数是数组中要处理的下一个元素

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

    const arr = [2, 3, 4, 5];
    //无初始值
    console.log(arr.reduce((a, b) => a + b)); //14
    console.log(arr.reduce((a, b) => a * b)); //120
    // 有初始值
    console.log(arr.reduce((a, b) => a + b, 1)); //15
    console.log(arr.reduce((a, b) => a * b, 0)); //0
    console.log(arr.reduce((a, b) => a + b, 10)); // 24
    console.log(arr.reduce((a, b) => a * b, 6)); // 360