ES6学习笔记

开课吧的ES6教程学习笔记，视频全18讲

一、ES6介绍

1. ECMAScript和JavaScript

• ECMA是标准，JS是实现

  类似于HTML5是标准，IE10、Chrome、FF都是实现
  换句话说，将来也能有其他XXXScript来实现ECMA

• EMCAScript简称EMCA或者ES
• 目前版本

  • 低级浏览器主要支持ES 3.1
  • 高级浏览器正在从ES 5过渡到ES6

2. 兼容性

• ES6（ES2015）–IE10+、Chrome、Firefox、移动端、NodeJS这些环境都是可以的；

  • 躲，低版本不用
  • 编译、转换

  1. 在线转换（写了ES6，然后加载一个ES6的库）
  2. 提前编译（提前把js编译好）

• 在线编译转换
  babel==browser.js

  <script src="browser.js" charset="utf-8"></script>
  <script type="text/babel">
  	let a=12;
  	let b=13;
  	alert(a+b);
  </script>
  

3. ES6

• 变量
• 函数
• 数组
• 字符串
• 面向对象
• Promise
• generator
• 模块化

二、变量

1. var：

• 可以重复声明
• 无法限制修改
• 没有块级作用域

2. let：

• 不能重复声明。
• 变量-可以修改
• 块级作用域

3. const：

• 不能重复声明 。
• 常量-不可以修改
• 块级作用域

三、函数

1. 箭头函数

   function 名字(){
   	
   }
   ()=>{
   
   }			
   eg:
   let show=function (a,b){
   	alert("abc");
   };
   let show=(a,b)=>{
   	alert("abc");
   };
   

   （1）如果只有一个参数，()可以省;
   （2）如果只有一个return，{}可以省。

2. 函数参数

• 参数的扩展/展开
  （1）收集参数
  剩余参数：…args，只能当最后一个形参；
  function show(a,b,...args){}
  （2）展开数组
  展开的效果，跟直接把数组的内容写在这儿一样

  let arr1=[1,2,3];
  let arr2=[4,5,6];
  let arr=[...arr1,...arr2]'
  就相当于arr=[1,2,3,4,5,6]
  除了直接赋值：a=...arr1;	会出错
  

• 默认参数

  function show(a,b=5,c=12){
  	console.log(a,b,c);
  }
  直接写上默认值，如果后期没有赋值，则取默认值，如果后期有值，就取后值；
  

四、结构赋值

1. 左右量变结构必须一样
2. 右边必须是个东西
3. 声明和赋值不能分开（必须在一句话里完成）

   粒度自己看着办
   let [a,b,c]=[1,2,3];
   let {a,b,c}={a:1, b:2,c:3};
   let [json,[a,b],c]=[{n:1,m:2},[2,3],6]; 
   

五、数组

map 映射 一个对一个

[12,58,99,86,45,91]	
[不及格,不及格,及格,及格,不及格,及格]
let result=arr.map(item=>item>=60?'及格':'不及格');

reduce 汇总 一堆出来一个

求和
let arr=[12,69,180,8763];
let result=arr,reduce(function (temp,item,index){
	//temp：中间结果，item：当前内容，index：迭代次数
	//alert(temp+','+item+','+index);
	return temp+item;
});
alert(result);		
------------------------------------------------
求平均
let arr=[12,69,180,8763];
let result=arr,reduce(function (temp,item,index){
	if(index!=arr.length-1){
		return temp+item;
	}else{
		return (temp+item)/arr.length;
	}
});
alert(result);		

filter 过滤器 留一部分删一部分

let arr=[12,5,8,99,27,36,75,11];
let result=arr.filter(item=>item%3==0);
alert(result);

forEach 循环（迭代）

let arr=[12,5,8,9];
arr.forEach((item,index)=>{
	alert(index+':'+item);
});

六、字符串

1. 多了两个新方法

• startsWith
  
• endsWith
  

2. 字符串模板

• 直接把东西塞到字符串里面 ${东西}
• 可以折行
  
  字符串连接
  

七、面向对象-基础

1. Es6的面向对象

• class关键字、构造器和类分开了
• -class里面直接加方法
  原版对象：
  
  新版对象：
  

2. 继承

• super–超类==父类
• extends
  老版继承：
  
  新版继承：
  

八、面向对象-实例应用

1. React

• 组件化-class
• 强烈依赖JSXbabelbrowser.js（JSX可以看成是JS的扩展版）
  （1）React最基础的东西
  
  
  
  
  
  

九、json

1. JSON对象

• JSON.stringify
• JSON.parse
  
  
  
  
  
  
  
  

2. json简写

• 名字和值（key和value）一样 留一个就行
  老版：
  
  新版：
  
  
• 方法 ：function可以省略，一块删
  老版：
  
  新版：
  

json的标准写法：

• 只能用双引号
• 所有名字都必须用引号包起来
  {a:12,b:5} 错的
  {“a”:12,“b”:5} 对的
  {a:‘abc’,b:5} 错的
  {“a”:“abc”,“b”:5} 对的

十、Promise–承诺

1. 异步请求

• 异步：

操作之间没啥关系，同时进行多个操作
代码更复杂

• 同步：

同时只能做一件事
代码简单

• promise–消除异步操作
  用同步一样的方式，来书写异步代码
  promise的用法：
  • Promise.all 全部
    
    
    
    
    
    
• Promise.race 竞速-谁先来用谁
  

十一、generator-认识生成器函数

1. generator-生成器
   generat-生成

---

函数：开始运行，一路到底

generator函数：中间能停；方法名前有*，贴function或者贴名字都可以，但是不能 function*名字；yield；

---

generator
踹一脚走一步
将该整个方法生成划分成一堆的小方法

2. yield–可传参、返回
（1）传参


（2）返回



3. yield到底是啥

4. generator实例–runner

异步操作

• 回调

    //回调
    $.ajax({
    	url:xxx,
    	dataType:'json',
    	success(data1){
    		$.ajax({
    			url:xxx,
    			dataType:'json',
    			success(data2){
    			
    			},
    			error(){
    				alert("错了");
    			}
    		});
    	},
    	error(){
    		alert("错了");
    	}
    });
  

• Promise

    //Promise
    Promise.all([
    	$.ajax({url:xxx,dataType:'json'}),
    	$.ajax({url:xxx,dataType:'json'}),
    	$.ajax({url:xxx,dataType:'json'}),
    ]).then(results=>{
    	//完事
    },err=>{
    	alert('错了');
    });
  

• generator

    //generator
    runner(function *(){
    let data1=yield $.ajax(url:xxx,dataType:'json'});
    let data2=yield $.ajax(url:xxx,dataType:'json'});
    let data3=yield $.ajax(url:xxx,dataType:'json'});
    //完事
    });
  

• 带逻辑-普通回调
  

• 带逻辑-Promise
  
  
  

• 带逻辑-generator
  

  Promise–一次读一堆
  generator–逻辑性

5. generator实例–KOA （没有很理解，后期深入了解一下）

• nodejs
  

十二、ES6总结复习

1. 变量

   var：可重复声明，函数级；
   let：不可重复声明，块级，变量；
   const：不可重声明，块级，常量；

2. 箭头函数

• 方便
  i.如果只有一个参数，（）可以省略
  ii.如果只有一个return，{}可以省略
• 修正this
  this相对正常点

3. 参数扩展

• ‘…’
  收集
  扩展

• 默认参数
  function show(a,b=5){}

4. 数组方法

   map 映射
   reduce 汇总；一堆出一个
   filter 过滤；一堆出剩下的
   forEach 循环

5. 字符串

   startsWith/endsWith
   字符串模板：

    `${a}ccc${b}`
   

6. Promise
   封装异步操作
   Promise.all([]);

7. generator

   function *show(){
   yield
   }

8. JSON

   JSON.stringify({a:12,b:5}) => ‘{“a”:12,“b”:5}’
   JSON.parse(’{“a”:12,“b”:5}’) => {a:12,b:5}

9. 解构赋值

   let [a,b,c]=[12,4,6];
   左右结构一样
   右边是个合法的东西
   声明赋值一次完成

10. 面向对象
    
    

十三、ES7，ES8预览

1. 数组

• includes：数组是否包含某个东西
  

• keys/values/entries

  for…of 循环迭代器（iterator）

  • 数组：值（value）
  • json：for…of是不可用于json
  • json对象是一个不可迭代的对象，它不是迭代器

  for…in 循环数组json

  • 数组：下标（key）
  • json：key

keys—所有的key拿出来 0,1,2,3,4,…
values— 所有的values拿出来 12,5,6,77,…
entries—所有的key-value对拿出来 {key:0,value:34},{key:1,value:33},…
entry实体




2. 幂
原：Math.pow(3,8);
新：3**8

3. padStart/padEnd
   
   
   
   
   
   
4. 语法（数组）容忍度
   [1,2,3,] ES6也可以用
   show(a,c,v,) ES7可以用，参数容忍度
5. generator yield
   async await
   
   
   
   
   generator不可以用箭头函数
   async可以使用箭头函数
   
   不依赖于外部的runner了，标准就统一了，性能就高了
   可以用箭头函数了

2020-2-25开始
2020-2-26结束