ES6整理

一，定义变量let

1、变量提升，var声明的变量会自动提升到最高级，在声明之前就能访问而且还不会报错，它的值是undefined。

console.log(a); //undefined
    var a = 2;

    // 1，let声明变量没有变量提升，提前访问会报错
    console.log(b);
    let b = 10;

2、let声明的变量是一个块级作用域，只在当前的作用域有效，外面的作用域访问不到。

if( 1 ==1 ){
        let c = 10;
    }
    // console.log(c); //报错

3、let声明的变量不能重复声明

    let d = 2;
    let d = 9; //报错

4、let声明的变量不会污染全局变量。

let RegEXP = 20;
console.log(RegEXP);
console.log(window.RegExp); //没有这个值

5，解决了for循环中变量提升的问题，var定义的变量会被外面作用域访问到

//解决了for循环中var定义的变量，会变量提升变成全局变量，会被外面作用域访问。
var arr = [];
for(var i = 0; i< 10; i++){
    arr[i] = i;
}
console.log(i); //10

二，const 声明一个常量

1、const 声明的常量，一旦被声明，值就无法修改

const pi = 3.01415;
//pi = 3;     //报错

    {
        const arr = [5,6,8,9,];
        arr.push(7);
        console.log(arr);　　//(5) [5, 6, 8, 9, 7]
        arr = 10;     //值不能改变，否则报错
    }

2、const声明的对象可以修改里面的属性，但是不能直接修改常量的值

const person = {
    name:'小狗'
}
person.name = 'bobo';
console.log(person.name);

// 下面这个直接改变常量的值会报错
person = {
    age:20
}

 例如：应用场景，固定的地址就可以用常量

const path = 'path';
console.log(path);　　//path

三，字符串的扩展

判断字符串”hello word”中是否存在”word”，用字符串中的方法只有indexOf：

var str = 'hello word';
var result = str.indexOf('word');
console.log(result);　　//6

 在ES6中又为我们提供了其它的方法：

includes():  返回布尔值，用于判断字符串是否包含某些字符

var bool = str.includes('word');
console.log(bool);    //true

startsWith(str[,num]):  返回布尔值，用于判断字符串是否以某个字符开头

var bool2 = str.startsWith('hello');
console.log(bool2);    //true

//给这个方法传入2个参数
var bool3 = str.startsWith('word',6);
console.log(bool3);　　//true

endsWith(str[,num]):  返回布尔值，用于判断字符串是否以某些字符结尾

var bool4 = str.endsWith('d');
console.log(bool4);　　//true
//给这个方法传入两个参数
var bool5 = str.endsWith('o',7);
console.log(bool5);　　//false

repeat(num):  传入数字,这个方法将字符串重复数字对应次数

var str322= '我爱我家，
';
console.log(str322.repeat(3));        //3行 我爱我家，

四， 5.0模板语法 :`模板字符串`

var obj33 = {
    name:'zhuzhu',
    age:18,
    sex:'男',
    hobby:'女',
    veight:120,
    height:180
};
// 字符串拼接方法
var str4 = '大家好，我叫:'+obj33.name+'，今年'+obj33.age+'，性别'+obj33.sex+'，爱好'+obj33.hobby+'。';
console.log(str4);        //大家好，我叫:zhuzhu，今年18，性别男，爱好女。

// 但是字符串的拼接太麻烦了，有没有简单的方法来解决这个问题呢，有的，模板字符串就可以了
var temp111 = `大家好，我叫${obj33.name}，今年${obj33.age}，性别${obj33.sex}，爱好${obj33.hobby}`;
console.log(temp111);    //大家好，我叫zhuzhu，今年18，性别男，爱好女

//1，可以是变量
let name8 = "美女";
let temp22 = `我叫${name8}`;
console.log(temp22);    //我叫美女

// 2，可以是方法
function getName(){
    return "宝宝";
}
let temp3 = `我叫${getName()}`;
console.log(temp3);        //我叫宝宝

// 3,可以是表达式
let aa = 1 ;
let bb = 2;
let temp4 = `a + b=${aa+bb}`;
console.log(temp4);        //a + b=3

五，6.0箭头函数：()=>{}

为了方便书写，es6规定了一种新的写法来简化匿名函数：去掉function改为=>，结构为()=>{}

// 最原始函数
var arr = [2,3,5,7];
 $(arr).each(function(index,item){
   console.log(item);
 });
// 改造一：函数中的funtion关键字我们可以省略，参数 和 方法体之间用=>
$(arr).each((index,item)=>{console.log(item);})

var fn = function(a, b) {
          return a + b;
        }
        // es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号{}
        const fn = (a, b) => { a + b };  // {}可以省略

总结：

参数特点：

1)参数只有一个，可以去掉()

2)参数多个，不能去掉

3)参数没有，不能去掉

方法体特点：

1)方法体只有一句，可以省略{}

2)方法体只有一句，如果有return，也可以省略return

3)如果有多句代码，不能省略return

箭头函数没有固定的写法，它是根据当前方法的参数和方法的返回值来的。

注意：

        　箭头函数可以替换函数表达式，但是不能替换函数声明；

        　箭头函数本身没有this，箭头函数内部的this是定义时所在的对象；

        　箭头函数不可以使用arguments对象，该对象在函数体内不存在；

        　箭头函数不能作为构造函数，因为没有 prototype 和constructor属性 

// 箭头函数不能作为构造函数：因为没有 prototype 和constructor属性 
let foot = function (name, age){
    this.name = name;
    this.age = age;
}

let foot2 = (name, age)=>{
    this.name = name;
    this.age = age;
}

let obj = new foot('abd', '19');
let obj2 = new foot2('abd', '19'); //报错，foot2 is not a constructor

 六，解构赋值：对象/数组赋值

对象赋值：对象根据属性名一一对应，无序对应
        首先有这么一个对象const props = {
            className: 'tiger-button',
            loading: false,
            clicked: true,
            disabled: 'disabled'
            }
        // es5
        var loading = props.loading;
        var clicked = props.clicked;
        // es6
        const { loading, clicked } = props;
    数组赋值：数组以序列号一一对应，有序对应；允许指定默认值；内部使用严格相等运算符（===）
        // es6
        const arr = [1, 2, 3];
        const [a, b, c] = arr;

        // es5
        var arr = [1, 2, 3];
        var a = arr[0];
        var b = arr[1];
        var c = arr[2];

七，for...of循环遍历

ES6 借鉴 Java、C# 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

 for(let codePointAt of 'hicai'){
        console.log(codePointAt);
        }  // h i c a i
        遍历对象用for...in

const arr = ['red', 'green', 'blue'];
for (let i of arr){
console.log(i); //打印出数组所有值
}

八，展开运算符：（提高代码效率）

ES6中用...来表示展开运算符，可以将数组方法或者对象方法进行展开；
        数组：
            const arr1 = [1, 2, 3];
            const arr2 = [...arr1, 10, 20, 30];
            // 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];
        对象：
            const obj1 = {a:1,b:2,c:3}
            const obj2 = {
            ...obj1,  d: 4,  e: 5,  f: 6
        }
        // 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})

九，class（类）

在js中，每个对象都有原型对象，所有js对象都从原型上继承方法和属性；
ES5中，属性放在构造函数constructor里，方法放在原型prototype上；
ES6中引入类class来代替构造函数constructor；还提供了extends划分super关键字；

十，promise对象：解决异步编程

　　　　特点：a）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态：pending（进行中）、resolve（成功）、rejected（失败）
        一旦状态改变，就不会改变
        基本用法：
        Promise构造函数的两个参数是resolve和reject；
        Promise实例生成后，可以用then方法分别制定resolve和rejected状态的回调函数；
        Promise的then方法是定义在原型对象Promise.prototype上的，then方法返回的是一个新的Promise实例，不是原来那个Promise实例，因此可以用链式写法；
        方法1：Promise.all()方法用于将多个promise实例包装成一个新的promise实例；
        方法2：Promise.race()方法只要有一个peomise执行完毕就执行

十一，模块化

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

十二，Set和Map数据结构：

Set
            a）Set实例成员值唯一存储key值，map实例存储键值对（key-value）
            b）Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。
            操作方法：
                add（value）：添加某个值,返回Set结构本身
                delete（value）：删除某个值，返回布尔值
                has（value）：返回布尔值，表示该值是否为Set的成员
                clear（）：清除所有成员，没有返回值
            遍历方法：
                keys()：返回键名
                values()：返回键值   
                entries()：返回键值对
                forEach()：使用回调遍历每个成员
      　Map  
            a）Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键；
            b）Map实例的属性和操作方法：
                size属性：返回Map结构的成员总数；
                set(key, value)：设置键名key对应的键值为value，然后返回整个Map结构，若key已有值，则更新键值，否则生成该键。
                get(key)：读取key对应的键值
                has(key)：返回布尔值，表示某个键是否存在当前map对象中。
                delete(key)：删除某个键，返回true，删除失败返回false
                clear()：其清除所有成员，没有返回值
            c）map的遍历方法：
                keys()：返回键名
                values：返回键值
                entries：返回所有成员
                forEach()：遍历map的所有成员，map的遍历顺序就是插入顺序

十三，generator拦截器

参考：https://www.cnblogs.com/suihang/p/9961791.html

https://www.cnblogs.com/jolene/p/6067290.html

https://www.cnblogs.com/rocky-fang/p/5755755.html

https://blog.csdn.net/weixin_42412046/article/details/81459294