ECMAScript(ES6)总结

一： let 关键字
1、不允许重复声明
2、块级作用域
3、不存在变量提升
4、不影响作用域链
应用场景：以后声明用let就对了
二： const 关键字
1、生命必须赋予初始值
2、标识符一般为大写
3、不允许重复声明
4、值不允许修改
5、块级作用域
注意：对象属性修改和数组值修改不会引发const报错
应用场景：声明对象类型使用const，非对象类型生命用let
三： 变量的解构赋值
es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为解构赋值
如：
–数组的解构赋值–

const arr = ['one','two','three','four'];
let [one ,two,three,four] = arr;

相当于

let one = 'one';
let two = 'two';
let three = 'three';
let four = 'four';

–对象的解构赋值–

const lin = {
    name: 'LINXIANG',
    tags: ['车手','歌手','不老神话','演员']
}
let {name, tags} = lin;

相当于

let name = 'LINXIANG';
let tags = ['车手','歌手','不老神话','演员'];

–复杂解构–

let wangfei = {
    name: '六星',
    age: 18,
    songs: ['html','java','CSS','javascript'],
    history: [
        {name: '可爱'},
        {name: '性感'},
        {name: '成熟'},
    ]
};
let {songs: [one,two,three],history:[first,second,third]} = wangfei;

相当于：

let one = 'html';
let two = 'java';
let three = 'CSS';
let history = [
    {name: '可爱'},
    {name: '性感'},
    {name: '成熟'},
];
let first = {name: '可爱'};
let second = {name: '性感'};
let third = {name: '成熟'};

注意：频繁使用对象方法、数组元素、就可以使用解构赋值形式

四： 模板字符串（用反引号`标识）
特点：
1、字符串可以出现换行符
2、可以使用${}形式输出变量
如：

let name = '刘宇';
let str = `
<ul>
    <li>升腾</li>
    <li>玛丽</li>
    <li>艾伦</li>
    <li>${name}</li>
</ul>
`

注意：当遇到字符串与变量拼接的情况要使用模板字符串
五： 简化对象写法
es6允许在大括号里面，直接写入变量和函数
如：

let name = "fairy";
let slogon = "永远的fairy";
let improve = function() {
    console.log("可爱美丽又大方");
}
// 属性和方法简写
let fairy = {
    name,
    slogon,
    improve,
    change() {
        console.log("永远的小姐姐");
    }
}
console.log(fairy)

注意：对象简写形式简化了代码，所以以后简写就行了
六： 箭头函数
ES6 允许使用[箭头] (=>) 定义函数

/**
* 1、通用写法
*/
let fn = (arg1,arg2,arg3) => {
    return arg1 + arg2 + arg3;
}

注意：
1、如果形参只有一个，那么小括号可以省略
2、函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
3、箭头函数的this指向声明时所在作用域下this的值
4、箭头函数不能作为构造函数实现实例化
5、不能使用arguments

```javascript
  /**
    * 2、省略小括号的情况
    */
    let fn2 = num => {
        return num + 2;
    }
    /**
    * 3、省略花括号的情况
    */
    let fn3 = score => score * 20;
    /** 
    * 4、this指向声明时所在作用域中this的值
    */
    let fn4 = () => {
        console.log(this);
    }
    let school = {
        name: 'fairy',
        getName() {
            let fn5 = () => {
                console.log(this.name);
            }
            fn5();
        }
    }

七：注意：rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arguments**

  /**
    * 作用与arguments类似
    */
    function add(...args) {
        console.log(args)
    }
    add(1,2,3,4,5);
    /**
    * rest参数必须是最后一个形参
    */
    function minus(a,b, ...args) {
        console.log(a,b,args);
    }
    minus(100,101,1,2,3,4,5,6);

注意：其中 args 为数组，代表 arguments和rest参数，都为数组 rest参数非常适合不定个数参数函数使用
八： spread扩展运算符
扩展运算符(spread)也是三个点（…）。好比rest参数的逆运算，将一个数组转为用逗号分割的序列，对数组进行解包。

/**
* spread展开数组
*/
let tfboys = ["fairy", "jack","race","lisa"]
function fn() {
    console.log(arguments);
}
fn(...tfboys);
/**
* 展开对象
*/
let skillOne = {
    fairy: 'FAIRY'
}
let skillTwo = {
    jack: "JACK"
}
let skillThree = {
    race: "RACE"
}
let skillFour = {
    lisa: "LISA"
}
let gailun = {...skillOne,...skillThree,...skillTwo,...skillFour};
console.log(gailun)

九： Symbol
ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值，是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol的特点
1、Symbol的值是唯一的，用来解决命名冲突的问题
2、Symbol值不能与其他数据进行运算
3、Symbol定义的对象属性不能使用for …in循环遍历，但是可以使用 Reflect.ownKeys来获取对象的所有键名
如：

 let s1 = Symbol();
    console.log(s1, typeof s1);//Symbol() "symbol"
    // 添加标识的 symbol
    let s2 = Symbol('fairy');
    let s2_2 = Symbol('fairy');
    console.log(s2 == s2_2)//false
    // 使用Symbol for定义
    let s3 = Symbol.for('fairy');
    let s3_2 = Symbol.for('fairy');
    console.log(s3 == s3_2);//true

注意：遇到唯一性的场景时要想到 Symbol
Symbol中的内置值（11个）
1、Symbol.hasInstance : 当其他对象使用 instanceof运算符，判断是否为该对象实例时，会调用这个
2、Symbol.isConcatSpreadabel : 等于一个布尔值，表示该对象用于Arrray.prototype.concat()时，是否可以展开
3、Symbol.species ：创造衍生对象时，会使用该属性
4、Symbol.match : 当执行str.match(myObject)时，会待用返回该方法的返回值
5、Symbol.replace : 当执行str.replace(myObject)时，会待用返回该方法的返回值
6、Symbol.search : 当执行str.search(myObject)时，会待用返回该方法的返回值
7、Symbol.split : 当执行str.split(myObject)时，会待用返回该方法的返回值
8、Symbol.iterator : 对象进行for …of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
9、Symbol.toPrimitive : 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
10、Symbol.toStringTag : 在该对象上面调用toString方法时，返回该方法的返回值
11、Symbol.unscopables : 该对象指定了使用with关键字时，那些属性会被with环境排除。
十： 迭代器
遍历器（Iterator）就是一种机制，它是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作。
1、ES6创造了一种新的遍历命令for …of循环，Iterator接口主要供for …of消费
2、原生具备iterator接口的数据（可用for of 遍历）
Array
arguments
set
map
string
typedArray
NodeList
3、工作原理
创造一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
每调用next方法返回一个包含value和done属性的对象
注意：需要自定义遍历数据的时候，要想到迭代器
十一： 生成器
如：

 function * gen() {
        yieId : '一只没有耳朵';

        yieId : '一只没有尾巴';

        return '真奇怪';
    }
    let iterator = gen();
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());

说明：
* 的位置没有限制
生成器函数返回的结果是迭代器对象，调用迭代器对象的next方法可以得到yieId语句后的值
yieId相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次next方法，执行一段代码
next 方法可以传递实参，作为yieId语句的返回值
十二： Promise
是ES6引入的异步编程的新解决方案，promise是一个构造函数
用来封装异步操作并可以获取其失败或成功的记过，
promise构造函数：promise(excutor){}
promise.prototype.then方法
promise.prototype.catch方法
十三： Set
数据结构（set）,类似数组，成员的值都是唯一的，集合实现了 iterator接口，可使用[扩展运算符]和[for…of…]进行遍历，集合的属性和方法：
size 返回集合的元素个数
add 新增一个新元素，返回当前集合
delete 删除元素 返回boolean值
has 检测集合中是否包含某个元素，返回boolean值
clear 清空集合返回Undefined
如：

// 创建一个空集合
let s = new Set();
// 创建一个非空集合
let s1 = new Set([1,2,3,1,2,3])
// 返回集合的元素个数
console.log(s1.size);//3
// 添加新元素
console.log(s1.add(4));//set{1,2,3,4}
// 删除元素
console.log(s1.delete(1));//true
// 检测是否存在某个值
console.log(s1.has(2));//true
// 清空集合
console.log(s1.clear());//undefined

十四：Map
es6提供了map数据结构，类似于对象，键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可当做“键”，也可以使用[扩展运算符]和[for…of…]进行遍历。map的属性和方法
size 返回map的元素个数
set 增加一个新元素，返回当前map
get 返回键名对象的键值
has 检测map中是否包含某个元素，返回boolean值
chear 清空集合返回Undefined
如：

   // 创建一个空map
    let m = new Map();
    // 创建一个非空map
    let m2 = new Map([
        ['name','fairy'],
        ['flogon','超级无敌宇宙最可爱']
    ]);
    // 获取映射元素的个数
    console.log(m2.size);//2
    // 添加映射值
    console.log(m2.set('age', 6))//map(3){"name" => "fairy","flogon" => "超级无敌宇宙最可爱","age" => 6}
    // 获取映射值
    console.log(m2.get('age'))// 6
    // 检测是否有该映射
    console.log(m2.has('age'))// true
    // 清除
    console.log(m2.clear())//undefined

十五： class类
es6提供了更接近传统语言的写法，引入了class（类）概念
知识点
class声明类
constructor定义构造函数初始化
extends继承父类
super调用父级构造方法
static定义静态方法和属性
父类方法可以重写
如：
// 父类

   class Phone {
        // 构造方法
        constructor(brand, color, price) {
            this.brand =  brand;
            this.color = color;
            this.price = price;
        }
        // 对象方法
        call() {
            console.log('我可以打电话')
        }
    }
    // 子类
    class SmartPhone extends Phone {
        constructor(brand, color, price, screen, pixel) {
            super(brand, color, price);
            this.screen = screen;
            this.pixel = pixel;
        }
        // 子类方法
        photo() {
            console.log("我可以拍照");
        }
        playGame() {
            console.log("我可以玩游戏")
        }
        // 方法重写
        call() {
            console.log("方法重写")
        }
        // 静态方法
        static run() {
            console.log("我可以正常运行")
        }
        static connect() {
            console.log("我可以建立连接")
        }
    }

    // 实例化对象
    const Nokia = new Phone('洛基亚','灰色',230);
    const iPhone6s = new SmartPhone('苹果','白色', 6088,'4.7inch','500w');
    // 调用子类方法
    iPhone6s.playGame();//我可以玩游戏
    // 调用重写方法
    iPhone6s.call();//方法重写
    // 调用静态方法
    SmartPhone.run();//我可以正常运行

十六：数值扩展
二进制和八进制分别用0b和0o来表示
Number.isFinite()用来检查一个数值是否为有限的
Number.isNaN()用来检查一个值是否为NaN
Number.parseInt()和Number.parseFloat();
es将全局的parseInt()和parseFloat()移植到Number对象上面，使用不便
Math.trunc:去除一个数的小数部分，返回整数部分。
Number.isInteger()用来判断一个数值是否为整数
十七：对象拓展
ES6新增了一些Object对象的方法
1、Object.is 比较两个值是否严格想等，与[===]行为基本一致(+0与NaN)
2、Object.assign对象的合并，将源对象的所有可枚举属性，复制到目标对象
3、proto、setPrototypeOf、setPrototypeOf可以直接设置对象的原型