es6常用

• 变量声明let与const

　　　　var的缺点：可以重复声明 ；没有块级作用域；不能限制；

               let        变量声明不能被模块外面调用

　　　　const   是常量声明，必须初始化不能改变赋值

• 块级作用域

　　　　 

• 变量的解构赋值   （1.左右两边要相等   2. 右边得是个正常的东西）

• 数组解构赋值          

• •         var a = [1,2,3,4,5];
            var [one,two,three] = a;
            console.log(one);  //1
            console.log(two);  //2

  • 对象解构赋值

  •  let a = {
                name:'hehe',
                age:18,
                sex:"men"
            }
            let {age,sex} = a;
            console.log(age); //18
            console.log(sex); //men

  • 字符串解构赋值

  • [a,b,c,d] = "abcd";

• 字符串扩展

• includes()    判断字符串中是否包含指定的字符串（有就返回true，没有false）

　　　　　　　　　　参数一：匹配的字符串； 参数二：从第几个开始匹配

• startsWith()    判断字符串是否以特定字串开始

• endsWith()     判断字符串是不是以特定字串结束

• 模板字符串     反引号表示模板，模板中的内容可以有格式，通过${ }方式填充数据

• 函数扩展

  • 参数默认值

  • 参数解构赋值

  • rest参数   （剩余参数）// ... 必须在最后面

  • 扩展运算符

  • 箭头函数（*）

　　　　　　1.箭头函数的this取决与函数的定义，而不是调用

　　　　　　2.箭头函数不可以new

　　　　　　3.箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替

　　　　　　4.如果又且只有一个参数，（）也可以省

　　　　　　5.如果有且只有一条语句 -return  ，{ } 也可以省　

　　　　　　6.箭头函数不适合的地方

　　　　　　　　1.在定义对象函数时

　　　　　　　　2.定义事件回调函数

　　　　　　　　3.定义构造函数

　　　　　　　　具体细节具体分析

• 类与继承

　　　　es6之前的继承为组合继承，用构造函数改变this指向来继承父类的属性（利用call（）），利用原型来继承父类的方法；

 //组合继承
    //1.父构造函数
    function Father(uname,age){
        //this指向父构造函数的实例对象  
        this.uname = uname;
        this.age = age;
    }
    Father.prototype.money = function(){  //父构造函数的方法
        console.log(10000);
    }
    //2.子构造函数
    function Son(uname,age,score){
        //this指向子构造函数的实例对象
        Father.call(this,uname,age);  //利用call改变了Father的this指向，继承了属性
        this.score = score;
    }
    //要继承父类方法，可以利用原型链
    // Son.prototype = Father.prototype;  //这样赋值，将父原型对象赋值给子原型对象，如果修改子原型对象那么父原型对象也会修改
    Son.prototype = new Father();  //将子原型的原型对象指向父原型的实例对象，那么修改子原型的方法也不会影响父原型
    //如果利用对象的形式修改了原型对象，要利用constructor指回原来的构造函数，否则将指向父原型对象
    Son.prototype.construtor = Son;
    //给子构造函数添加专属的方法
    Son.prototype.exam = function(){
        console.log('孩子考试');
    }

    var son = new Son('xiaoming',16,100);
    console.log(son);
    console.log(Son.prototype);

　　es6之后通过 类 来实现面向对象的编程 ：类的本质还是函数，可以简单的认为类是构造函数的另一种写法

　　es6新增了 Class  constructor super和 extend 

 class创建类对象：

　　（1）类有原型对象prototype

　　（2）类原型对象prototype里面有constructor指向类本身

　　（3）类可以通过原型对象添加方法

　　（4）所以说es6的类的绝大部分功能es5都能做到，class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。

　　（5）说白了ES6的类就是语法糖

<script>   
        class Person{
            constructor(name,age){      //constructor可以直接构造对象的属性
                this.name=name;
                this.age = age;
            }
            show(){
                alert(this.name);
            }
        }

        class Child extends Person{   
            constructor(name,age,job){
                super(name,age);   //super用于继承父类的属性
                this.job=job;
            }

            showJob(){
                alert(this.job);
            }
        }

        let w = new Child('xx',18,'daren');
        w.show();
        w.showJob();
        </script>

 

---

 

• 系统对象

　　array

　　　　map（ ）      映射       1对1

　　　　forEach（ ）  遍历     循环一遍

　　　　filter（ ）       过滤

　　　　reduce（ ）     减少     多变1

　　string（见上字符串扩展）

　　json

 　　1.stringify     js  ---》  json

　　 2.parse       json -----》 js

 

---

 

异步处理   （ Promise   generator  async / await ）

什么是异步操作？

异步--- 同时处理多个请求

同步----一次只能处理一个请求

promise

promise是一种语法而不是一种写法，为了解决回调地狱

使用方法：

Promise.all([
    p1,
    p2,
    p3
   。。。。。    
]).then();

//先实行完all里面所有的请求，然后执行then里面的函数

缺点：all处理时无顺序无逻辑（很少会有promise单独使用）

Generator

Generator 函数，它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号用于区别。

调用Generator函数，函数并不执行，而是返回一个遍历器对象。

必须调用遍历器对象的next方法，将函数执行到下一个yield语句的地方。

当遇到yieid语句，就暂停执行，并将yield后边的表达式的值，作为返回对象的value属性值。

yield语句如果用在一个表达式之中，必须放在圆括号里面

yield语句用作函数参数或放在赋值表达式的右边，可以不加括号

return语句，将返回表达式后边的值，并结束函数。

使用方法：

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

 

解决promis的问题，引入了 async/await  （用同步的方法写异步请求）

async-await 是promise和generator的语法糖，并且async-await 是建立在promise的机制上，但不能替代他们。

async function  函数名 ( ){
        let a= 12;
        let b = 11;
        .... //正常执行函数
            //出现await时 相当于会暂停async 函数执行await先
        let data = await promise;

    .......

        alert(a+b);
    }

//也可写成
    let xxx = asycn () => {
        .....
    }

 

es模块化

---

 

（因为浏览器不支持es6 的模块化）所以要用webpack工具将es6 的模块化编译以便让浏览器去支持

webpack编译：

1.   entry ====  入口地址

2.   output==== 输出

　　　path：绝对路径

　　　filename：文件名

3.   mode ===== 模式

4.   在所有路径前加 . / （这是node里面的要求）

 

---

 export (导出 )

　　export  function  xxx ( ){   };

　　export  class  xxx  {    }

       export   {  xxx , xxxx , xxx };

　　export    default   xx;

import （引入）

　　import  * as  mod from  " . / xxx" ;       //全部引入

　　import  { a,b,c,.... }  from " . / xxx";      // 选择引入

 

　　//引入默认成员

　　import xxx from  ‘ . / mod ' ;

 

　　//模块的代码引入，但不引入内部成员

　　import  “ . / 1.jpg ” ; 

　　import  " . / 1.css " ;

 

　　//异步引入

　　let promise = import( " . / mod1 " );

 

---

 

 call（） apply（）  bind（）

call

call 第一个作用可以调用函数，第二个作用可以改变函数内部的this指向，call内部可以传递参数，第一个表示this指向的对象，后面的参数为传值

call 的主要作用可以实现继承

apply

1.也是调用函数，第二个可以改变函数内部的this指向

2.但他的参数必须是数组（伪数组）

3.apply的主要应用 比如说可以利用apply借助于数学内置对象求最大值

var arr = [1,66,3,99,4];
//不严谨的一种方式  
// var max = Math.max.apply(null,arr);
var max = Math.max.apply(Math,arr);
var min = Math.min.apply(Math,arr);
cosole.log(max,min);
// 99 , 1

bind

1.不会调用原来的函数   可以改变原来函数内部的this 指向

2.返回的是原函数改变this之后产生的新函数

3.如果有的函数不需要立即调用，但又想改变这个函数内部的this指向，这时用bind

4.例子：有一个标签，点击禁用，三秒后开启

var btn1 = document.querySelector('button');
btn1.onclick = function(){
    this.disabled  = true; //这个this指向的是btn
    // var that = this;    //改变this指向
    setTimeout(function(){
       //that.disabled = false;  //定时器函数里的this 指向的是window
        this.disabled = false;    //使用了bind之后，改变了this的指向   
    }.bind(this),3000);    //这个this指向的就是btn这个对象