es6小结

一、定义变量 ,let

主要用于区分let var

    代码块:{} 包起来的代码， 形成了一个作用域，块级作用域
    比如: if for while
    特点: 只能在代码块里面使用
    var 只有函数作用域
    a). let具备块级作用域
    b). 不允许重复声明
    let a=12;
    let a=5;	//错的
    总结: 其实let才接近其他语言的变量
    
    用处：
    封闭空间：
    (function(){
      var a=12;
    })()
    现在：
    {
      let a=12;
    }
    
    i问题:
    
    总结: 块级作用域，其实就是 匿名函数立即调用

二、const

    定义 常量	一旦赋值，以后再也修改不了了
    const a-=12;
    a=15//报错
    
    注意:  const必须给初始值， 不能重复声明
    因为以后再也没法赋值了，所以声明的时候一定得有值
    
    用途: 为了防止意外修改变量
    比如引入库名，组件名

三、字符串连接

    之前:
    	var str='';
    	var str=""
    
    反单引号:	var str= ``	字符串模板
    
    之前: 	'abc'+变量名+'ef'
    现在:	`abc${变量名}ef`

四、解构赋值

4.1 跟顺序无关

    var [a,b,c]=[12,5,101];
    
    var {a,b,c}={b:5,a:12,c:101};	

4.2 模式匹配：左侧的样子，需要和右侧一样

	var [a,[b,c],d]=[12,[1,2],5];

	var [{a,e},[b,c],d]=[{e:'eeee', a:'aaaa'},[1,2],5];

4.3 交互：数据解析-> 后台返回数据不用点

	var arr = [{title:"abs",href:"kkk",img:"img1"}];
    var [{title,href,img}] = arr;

4.4 给默认值:

	var json={};

	var a=json.a || 12

	语法:
	var {time=12,id=0}={};

	运动框架:
	function move(options){
		options=options || {};
		options.time=options.time || 300;
	}
    move({
        time:600
    })
	function move({time=300}={}){

	}

五、复制数组

	a). 循环
	b). Array.from(arr)
	c). var arr2=[...arr];

	function show(...args){
	    	args.push(5);
	    	console.log(args);
	}
	show(1,2,3,4);
	
	数组去重
	Array.from(new Set(arr))

复制数组:

六、数组操作

基本数据类型（深拷贝->改变副本中的数据，对前者没有任何影响）：
包括str、num、boolean、null、undefined
引用类型(浅拷贝->改变副本中的数据，对前者有任何影响)
：就是对象。包括object、Array、function、date

6.0复制数组

	a). 循环
	b). Array.from(arr)
	c). var arr2=[...arr];

	function show(...args){
	    	args.push(5);
	    	console.log(args);
	}
	show(1,2,3,4);

6.1循环

    普通for
	for in
	for of	循环, 可以循环数组，不能循环json
	真正目的为了循环  map对象

6.2for of

    遍历(迭代、循环)整个对象， 	表现  类似 for in

	var arr=['apple','banana','orange','pear'];

6.3Map对象

	和json相似，也是一种key-value形式
	Map对象为了和for of循环配合而生的

	var map=new Map();

	设置:	map.set(name,value);

	获取：	map.get(name)

	删除：	map.delete(name)

	遍历map:	不能使用for in，没有效果
		
		for(var name of map){
			console.log(name); // a,apple   b,banana
		}
		
		for(var name of map.entries()){ // a,apple   b,banana
			console.log(name);
		}
		
		for(var [key,value] of map){
			console.log(key, value); // key value
		}

		for(var [key,value] of map.entries()){ //key value
			console.log(key, value); // key value
		}

		for(var key of map.keys()){	//只是循环key
			console.log(key);
		}

		for(var val of map.values()){     //只是循环value
			console.log(val);
		}

6.5for… of也可以循环数组:

	只循环值:           	for(var value of arr){}
	只循环索引:		    for(var key of arr.keys()){}
	索引和值都循环：		for(var some of arr.entries()){}

七、箭头函数：

7.1函数之前:

	function show(){
		alert(1);
	}
	show();
	----------------------
	function show(a){
		return a;
	}
	show(12);
	----------------------
	function show(a,b){
		return a+b;
	}
	show(12,5);

7.2箭头函数:

箭头函数：
	=>

	var show=a=>a;		function show(a){return a};
	
	var show=(a,b)=>a+b;		function show(a,b){return a+b};

	var show=()=>'welcome';	function show(){return 'welcome'}

	var show=() => {		
	    function show(){
    	    alert(1);				
    	    alert(1);
	    }				
	}
	注意：
		this问题， this指向了window
		arguments， 不能使用了

7.3箭头函数 应用:

7.3.1排序

    var arr=[34,101,-100,90,98,77777];

    /*arr.sort(function(n1,n2){
        return n1-n2;
    });
    console.log(arr);*/
    arr.sort((n1,n2)=>n1-n2);

    console.log(arr);

八、对象

	对象语法简洁化

	单体模式:
		json
		var name='abb';
		var age=101;
		var preson={
		    	name,
		    	age,
		    	showName(){
		       		return this.name;
		    	},
		    	showAge(){
		        	return this.age;
		   	 }
		}

九、面向对象

9.1 之前

	人类	工人类
	function Person(name,age){	//类、构造函数
	    	this.name=name;
	    	this.age=age;
	}
	Person.prototype.showName=function(){
	    	return this.name;
	};
	Person.prototype.showAge=function(){
	    	return this.age;
	};

9.2 ES6

    类	class
	构造函数	constructor	生成完实例以后，自己就执行的

	class Person{ //类
	    constructor(name,age){
	        	this.name=name;
	        	this.age=age;
	    }
	    showName(){
	        	return this.name;
	    }
	    showAge(){
	        	return this.age;
	    }
	}
	
	function move(obj='对象必须要填写的',json={},options={}){
        console.log(options);
    }

9.3 继承

	之前:  子类.prototype=new 父类();

	ES6: 
	class Person{ //类
        constructor(name='default',age=0){
            this.name=name;
            this.age=age;
        }
        showName(){
            return this.name;
        }
        showAge(){
            return this.age;
        }
    }

    //继承
    class Worker extends Person{
        constructor(name,age,job='扫地的'){
            super(name,age);
            this.job=job;
        }
        showJob(){
            return this.job;
        }
    }

    var p1=new Person();
    var w1=new Worker('mmm',56);

    //alert(p1.showAge());
    alert(w1.showName());

9.4 面向对象-应用

9.4.1 数组赋值

    class Queue{
        constructor(content=[]){
            this._queue=[...content];
        }
    }

    var q=new Queue([1,2,3,4]);

    console.log(q._queue);

9.4.2 数组加减

    class Queue{
        constructor(content=[]){
            this._queue=[...content];
        }
        shift(){
            const value=this._queue[0];
            this._queue.shift();
            return value;
        }
        push(n){
            this._queue.push(n);
            return this._queue.length;
        }
    }

    var q=new Queue([1,2,3,4]);

    q.shift();
    q.push(5);
    console.log(q._queue);

十、模块化开发

    a.js
    const a=12;
    
    export default a;
    
    
    b.js
    const a=5;
    
    export default a;
    
    c.js
    const a=5;
    const b=12;
    
    export default {a,b};
    
    sum.js
    import a from './a.js';
    import b from './b.js';
    
    export default function sum(){
        return a+b;
    };

    ----------------------------------------------
    import modA from './a.js';
    import modB from './b.js';

    console.log(modA+modB); 17
    ----------------------------------------------
    import sumMod from './sum.js';

    console.log(sumMod()); 17
    ----------------------------------------------
    import c from './c.js';

    console.log(c.a+c.b); 17

十一、异步

    异步: 多个操作可以同时进行
	ajax
	
	ajax(url,function(){
		//1
	},fnFail);
	//2

十二、Promise: 承诺

https://blog.csdn.net/weixin_41817034/article/details/80492315

12.1 说明

	就是一个对象，用来传递异步操作的数据(消息)

	pending（等待、处理中） --> Resolve(完成、fullFilled)  --> Rejected(拒绝、失败)

12.2 使用

	var p1=new Promise(function(resolve,reject){
		//resolve  成功了
		//reject    失败了
        	});

	var p1=new Promise(function(resolve,reject){
		if(异步处理成功了){
			resolve(成功数据)
		}else{
			reject(失败原因)
		}
    });

	p1.then(成功(resolve),失败(reject))	√
	--------------------------------------------
	p1.catch 用来捕获错误

12.3 Promise.all

    Promise.all 全部，用于将多个promise对象，组合，包装成一个全新的promise实例
	Promise.all([p1,p2,p3...]);

	所有的promise对象，都正确，才走成功
	否则，只要有一个错误，是失败了
	var p1=Promise.resolve(3);
    var p2=Promise.reject(5);

    Promise.all([true,p1,p2]).then(function(value){
        console.log('成功了,'+value);
    },function(value){
        console.log('错误了,'+ value);
    });

12.4 Promise.race

    返回也是一个promise对象
	最先能执行的promise结果， 哪个最快，用哪个
	var p1=new Promise(function(resolve,reject){
        setTimeout(resolve,50,'one');
    });
    var p2=new Promise(function(resolve,reject){
        setTimeout(resolve,100,'two');
    });

    Promise.race([p1,p2]).then(function(value){
        console.log(value);
    });

12.5 Promise.reject()

   	生成错误的一个promise
   	Promise.reject('这是错误的信息').then(function(){

    },function(res){
        console.log(res);
    });

12.6 Promise.resolve()

	生成一个成功的promise对象
	语法：
		Promise.resolve(value)
		Promise.resolve(promise)
		
	Promise.resolve('Success').then(function(value){
        console.log(value);
    },function(res){
        console.log(res);
    });
    -----------------------------------------------
    Promise.resolve([1,2,3]).then(function(value){
        console.log(value[0]);
    },function(res){
        console.log(res);
    });
    -----------------------------------------------
    var p1=Promise.resolve(3);

    var p2=Promise.resolve(p1);

    p2.then(function(value){
        console.log(value); //3
    });

十三 generator 生成器

13.1 基础

    function* show(){
        yield 'Hello';
        yield 'World';
        yield 'Es6';
        return 'well';
    }
    
    var res=show();
    
    console.log(res.next()); //{value:'Hello', done:false}
    console.log(res.next()); //{value:'World', done:false}
    console.log(res.next()); //{value:'Es5', done:false}
    console.log(res.next()); //{value:'well', done:true}
    
    总结：
        每次返回一个value和done结果
        value,每次yield后面值
        done是一个布尔值，代表是否遍历结束
        
    yield是都有返回值
        yield语句本身没有返回值，或者每次返回undefine
    

13.2 next可以带参数，给上一个yield值

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

    var d=fn();

    console.log(d.next());      {value: 0, done: false}
    console.log(d.next());      {value: 1, done: false}
    console.log(d.next(true));  {value: 0, done: false}
    console.log(d.next());      {value: 1, done: false}
    true 给yield

13.3 for of循环generator函数

    function* fn(){
        yield 1;
        yield 2;
        yield 3;
        yield 4;
        yield 5;
        return 6;
    }

    for(let v of fn()){
        document.write(v);
    }

13.4 generator函数放到对象里

    var json={
        *show(){
            yield 'a';
            yield 'b';
            return 'c';
        }
    };
    
    var res=json.show();

    console.log(res.next());
    console.log(res.next());
    console.log(res.next());