JavaScript ES6语法新特性整理，ES6必须掌握的知识点，更强大更方便

雨点打透心脏的1/2处 2022-12-05 09:51 84阅读 0赞

# ES6 #

## 一、前言 ##

ES6全称ECMAScript 6，从2015年6月正式发布至今已有四五个年头，那些不支持ES6语法的浏览器终将淹没在历史的长河里。

兼容性：  
IE10+、Chrome、FireFox  
IOS10+、Android 6+、NodeJS  
不兼容的也可以转换/编译为ES5.1。

现在都快2021年了，让我们全面拥抱ES6把！

## 二、新特性预览 ##

为什么？当然是ES6有两把刷子，主要的变化方面如下：

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

## 三、开始学习 ##

### 1. 变量&常量 ###

新增let和const关键字，用于声明变量和常量。

*  不能重复声明
 *  块级作用域
 *  常量值就不支持修改

新增产量申明const关键字，一旦申明，常量值就不能修改。

#### 1.1 解构赋值 ####

*  左右结构必须一样
 *  声明和赋值不能分开

//原写法
    let arr = [1,2,3];
    let a = arr[0];
    let b = arr[1];
    let c = arr[2];
    
    //解构赋值写法
    let [a,b,c] = [1,2,3];
    
    //json也可以
    let { a,b,c} = { a:1,b:2,c:3};
    console.log(a,b,c);//1 2 3
    
    //颗粒粗细控制
    let { user,type} = { { name:'Mike',id:'0012'},type:'worker'};
    let { { name,id},type}= { { name:'Mike',id:'0012'},type:'worker'};

#### 1.2 JSON ####

*  赋值时，名字更值一样时，可以简写

let name = 'Mike'
    let json = { name,id:'001'};
    console.log(json);//{ name: "Mike", id: "001" }

### 2. 函数 ###

#### 2.1 箭头函数 ####

新增箭头函数，是标准函数的简写。  
不需要写function了，加一个=>即可。

let show=function(){ 
    	alert('Hello World!');
    };
    
    //可简写为：
    let show=()=>{ 
    	alert('Hello World!');
    };

*  如果只有一个参数，()可以省

let show=function(name){ 
    	alert('Hello '+name+'!');
    };
    
    //可简写为：
    let show=name=>{ 
    	alert('Hello '+name+'!');
    };

*  如果只有一个return，return和\{\}可以省

let add=function(a,b){ 
    	return a+b;
    };
    
    //可简写为：
    let add=(a,b)=>a+b;

#### 2.2 函数参数 ####

*  参数扩展  
    当传入的参数数量不确定时，可以把不确定的部分统一使用一个参数用数组的格式组装起来。把这个参数叫做剩余参数，它值能放在最后一个参数位上。

//声明方式，使用...为前缀即可
    let show=function(a,b,...args){ 
    	alert(args);
    };
    
    show(1,2,3,4,5,6,7);//[3,4,5,6,7]

*  数组展开

let show=(a,b,c)=>a+b+c;
    let arr = [1,2,3];
    let result = show(...arr ); //5

*  默认参数

let show=(name='World')=>{ 
    	alert('Hello '+name+'!');
    };
    
    show();//Hello World!
    show('You');//Hello You!

### 2.3 字符串 ###

新增以下两个新方法：

*  startsWith `判断以什么开头`

let str ='http://www.baidu.com';
    if(str.startsWith('http://')){ 
    	alert("普通网址");
    }else if(str.startsWith('https://')){ 
    	alert("加密网址");
    }

*  endsWith `判断以什么结尾`

let str ='教学.mp4';
    if(str. endsWith('mp4')){ 
    	alert("视频");
    }else if(str. endsWith('mp3')){ 
    	alert("音频");
    }

#### 2.4 字符串模板 ####

*  可以直接放如参数，$\{name\}
 *  可以随意换行，不用每行做拼接

let name = 'World';
    let str = `<div> <h1>Hello ${ name}</h1> </div>`

### 3. 数组 ###

新增以下四个方法：

*  map `映射`

let arr = [1,2,3];
    //把arr中的每个值都变为两倍
    let result = arr.map(item=>item*2);

*  reduce `汇总`

let arr = [6,12,24,48];
    //求合
    let result = arr.reduce((tmp,item,index)=>tmp+item);//90
    //取平均数
    let result = arr.reduce((tmp,item,index)=>(index<(arr.length-1))?tmp+item:(tmp+item)/arr.length);//22.5

求合中reduce方法三个参数讲解  
数组arr=\[6,12,24,48\]，合为90，具体计算流程如下：

<table> 
 <thead> 
  <tr> 
   <th>次数</th> 
   <th>tmp<br>临时值</th> 
   <th>item<br>当前值</th> 
   <th>index<br>序号</th> 
   <th>return<br>tmp+item</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>6<br>取arr[0]</td> 
   <td>12<br>取arr[1]</td> 
   <td>1</td> 
   <td>18</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>18<br>第1次的返回值</td> 
   <td>24<br>取arr[2]</td> 
   <td>2</td> 
   <td>42</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>42<br>第2次的返回值</td> 
   <td>48<br>取arr[3]</td> 
   <td>3</td> 
   <td>90<br>最终结果</td> 
  </tr> 
 </tbody> 
</table>

*  filter `过滤`  
    进多出少。  
    返回true及保留，返回false及排除。

let arr = [1,2,3,4];
    //取单数
    let result = arr.filter (item=>!item%2==0);//[1,3]

*  forEach `迭代`

let arr = [6,12,24,48];
    arr.forEach((item,index)=>{ 
    	alert(indxe + ":" +item);
    });

### 4. 面向对象 ###

#### 4.1 类 ####

规范了类的写法。

*  有了专用关键字class
 *  有专门的构造器
 *  方法可直接写类里面了

class User{ 
    	//构造器
    	constructor(id,name){ 
    		this.id = id;
    		this.name = name;
    	}
    	getId(){ 
    		return this.id;
    	}
    	getName(){ 
    		return this.name;
    	}
    }

#### 4.2 继承 ####

有了专门的继承语法。

class VipUser{ 
    	constructor(id,name,level){ 
    		super(id,name);
    		this.level = level;
    	}
    	getLevel(){ 
    		return this.level;
    	}
    }

### 5. Promise ###

//读取省
    let readProvince= new Promise(function(resolve,reject)){ 
    	//异步读取数据
    	//...
    	//读取成功调用resolve
    	//读取失败调用reject
    });
    //读取市
    let readCity = new Promis(...); 
    //读取区
    let readArea= new Promis(...); 
    
    //单个调用
    readProvince.then(function(arr){ 
    		//读取成功
    	},function(arr){ 
    		//读取失败
    	});
    
    //多个调用
    Promise.all([readProvince,readCity,readArea]).then(funciton(arr){ 
    	//全都成功了,结果为arr数组[省,市,区]
    },function(){ 
    	//至少有一个失败
    })

以上代码在实际项目中可以进行封装

//读取
    let readData=type=>new Promis(function(resolve,reject)){ 
    	//异步读取数据
    	//...
    	//读取成功调用resolve
    	//读取失败调用reject
    });
    
    //多个调用
    Promise.all([
    	readData('Province'),
    	readData('City'),
    	readData('Areae')
    ]).then(results=>{ 
    	//全都成功了,结果为results数组[省,市,区]
    	let [province,city,areae] = results;
    },err=>{ 
    	//至少有一个失败
    })

#### 相关概念 ####

*  异步  
    操作之间没啥关系，同时进行多个操作。
 *  同步  
    同时只进行一个操作。

### 6. generator ###

癞蛤蟆，捅一步跳一步。

//方法名前加*号表示generator函数
    function *flow(){ 
    	alert('步骤1');
    	yield;//暂时放弃执行下面的
    	alert('步骤2');
    	yield;
    	alert('步骤3');
    }
    //generator函数无法直接调用
    let grt = flow(); //获取函数对象
    grt.next(); //下一步，提示：步骤1
    alert('步骤0');
    grt.next(); //下一步，提示：步骤2

#### yield ####

可以传参，可以返回内容；可用于处理带有逻辑的异步操作，这是Promise无法简单完成的。

//通过用户的喜好，返回对应的推荐商品
    function *flow(){ 
    	let xh = '在这里获取用户喜好';
    	let likes yield xh;
    	let tj = '在这里通过用户喜好获取商品';
    	return tj;
    }
    let gettj = flow();
    gettj.next();
    let tjlist = gettj.next();//获得当前用户的推荐商品

#### 对比 ####

*  Promise  
    适合一次读一堆，比如配置类型的数据。
 *  generator  
    适合有逻辑判断的，比如每个用户推荐内容。