鸭题-04-ES6

ES6

---

webpack babel-loader （解决es6兼容性问题）

1. let const

  if(true){
       let name ="kerwin" // 块级作用域，只能活在这个大括号里面
   }

// const 常量，如果是复杂数据类型可以改变，因为它引用的是一个地址，如果是基本数据类型就不可改变   
   const obj = {name:"kerwin"}
   obj.name="xiaoming" // √
   // obj = {name:"xioamng"}
   // obj= 'dwadwa'

const obj = 111
obj=222 // ×

2. 箭头函数
this指向父作用域的this

3解构

	let {type,payload} = data;  // {type:"",payload:""}

4 … 展开合并

	[...arr1,...arr2] 	
	{...obj1,...obj2} 

5.promise

	//异步处理方案
	1. 回调函数
    2. Promise
    3. generator 生成器 yield (生成器函数可以让函数临时挂起，然后.next执行下一个 ) 
    4. async await (同步的思想写异步 async异步 await等待)

	//解决回调地狱 ，嵌套金字塔
	
	function test1(){
		return new Promise((resolve,rejet)=>{
			setTimeout(() => {
			  	resolve("123")
			}, 2000)
		})
	}
	
	test1().then(res=>{
	
	}).catch(error=>{
	
	})
	// pending reject(拒绝承诺) fullfilled(兑现承诺)
	
	axios.get("1.php").then(res=>{
		return axios.get(2.php,{res})
	}).then(res=>{
		return axios.get(3.php)
	}).then(res=>{
		console.log(res.data)
	}).catch(error=>{
		console.log(error)
	})
	async await 写起来
	
	async function test(){
		var a = await axios.get(1);
		var b= await axios.get(2,{a});
		var c= await axios.get(3,{b})
		console.log(c);
	}
	
	test()
	
	//所有的异步都结束
	Promise.all([axios.get(1),axios.get(2)]).then(res=>{
		//loading隐藏
	}).catch(error=>{
	
	})
	
	Promise.race([axios.get(1),axios.get(2)])

**6.class (语法糖 => 构造函数,babel-loader) **

	class Person{
		constructor(name,age) {
		  this.name = name;
		  this.age =age;
		}
		say=()=>{
	
		}
	}
	
	class Test extends person{
		constructor(name,age,location) {
		  super(name,age);
		  this.location = location;
		}
        compoenntDidMount(){
            console.log("修改，会覆盖之前父类的生命周期")
        }
	
		say(){
	
		}
	}

7.模块化

	import obj from "./a" ;  
	export default aaa;
	
	import {test} from "./b" ; 
	export {test} ; 
	export var test =function(){}

	AMD - 前端 异步加载 - 提前下载， 提前加载 require.js
	CMD -  异步加载 - 提前下载 ， 按需加载 -- 玉伯 -sea.js
	CommonJs -同步加载（webpack） (第三方)
		require("./b")    // 会把整个 b 模块都导入进来
		=>module.exports 
		=>exports
	ES6 - 模块化 (标准) // 可以按需导入
	
	//ES6 和 commonJS区别？
	//ES6可以导入某几个接口 import {a} from './module.js' + webpack- tree shaking 摇树优化(把多余的东西不要)
// 实现了只导入某几个接口
	//commonJS 导入整个文件

8.Set解构
不能重复的类似于数组的一个新的结构
9. 字符串模板

`aaaa${name}bbbb`