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

二，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);　　//

在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= '我爱我家，\n';

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的遍历顺序就是插入顺序