【JS】了解一下ES6新特性

本文談談關於ES6的新特性，主要從1.變量、2.函數、3.數組、4.字符串、5.面向對象、6.Promise、7.generator、8.JSON等幾個方面敘述。
1、變量
var 可以重復聲明，無法限制修改，函數級作用域
let 不能重復聲明，變量-可以修改，塊級作用域
const 不能重復聲明，常量-不能修改，塊級作用域

2、函數

//原始函數
function(){
	//
}
//箭頭函數
()=>{
	//
}

1.參數唯一可省略()
2.return唯一可省略{}

//函數的參數
1.參數的擴展、數組展開
1.1收集參數
function show(a,b,...args){}
*Rest Parameter必須為最后一個形參
1.2展開數組
...arr => a,b,c
*展開后的效果跟直接展示數組的內容一致

2.默認參數
為定義好的可選參數賦值即為默認參數
傳值覆蓋，空值默認

3.解構賦值
1.左右兩邊結構必須一致
2.右邊必須是合法的值
3.聲明和賦值不可分離（在一個語句內完成）
let [a,b,c]=[1,2,3];
let {a,b,c}={a:1,b:2,c:3};
let [json,arr,num,str]=[{a:1,b:2},[1,2],1,'xcbdh'];

3、數組
1.map 映射-一對一

arr.map(item=>item>=60?'及格':'不及格');

2.reduce 匯總-多對一

arr.reduce(function(tmp,item,index){
	return tmp+item
});

3.filter 過濾器-篩選

arr.filter(item=>{
	if(item%3==0){
		return true
	}else{
		return false
	}
});

//進階一下
arr.filter(item=>item%3==0);

4.forEach 迭代-循環遍歷

arr.forEach((item,index)=>{
	//
})

4、字符串
1.新方法
startsWith 匹配字符串開頭
endsWith 匹配字符串結尾
2.字符串模板
``
*使用${}放變量

5、面向對象
1.class關鍵字、構造器和類分離
2.class內部添加方法

class User{
	constructor(name,pwd){
		this.name=name;
		this.pwd=pwd;
	}
	showName(){
		alert(this.name);
	}
	showPwd(){
		alert(this.pwd);
	}
}
//繼承：
class VipUser extends User{
	constructor(name,pwd,level){
		super(name,pwd);
		this.level=level;
	}
	showLevel(){
		alert(this.level);
	}
}

//面向對象應用-React
class Item extends React.Component{
	constructor(...args){
		super(...args);
	}
	
	render(){
		return <li>{this.props.str}</li>
	}
}

class List extends React.Component{
	constructor(...args){
		super(...args);
	}
	
	render(){
		return <ul>
			{this.props.arr.map(a=><Item str={a}></Item>)}
		</ul>;
	}
}

window.onload=function(){
	let oDiv=document.getElementById('div1');
	
	ReactDOM.render(
		<List arr={['aaa','bbb','ccc']}></List>,
		oDiv
	)
}

6、Promise

異步：操作之間無關，可同時進行多個操作
同步：同時只能做一個操作

異步：代碼更復雜
同步：代碼簡單

*Promise用同步的方式書寫異步方法

Promise.all([$.ajax(),$.ajax()]).then(results=>{
	//正確
},err=>{
	//錯誤
});

*Promise.race()

7、generator

function *show(){
	yield
}

//舉個例子
const koa=require('koa');
const mysql=require('koa-mysql');
let db=mysql.createPool({host:'localhost',user:'root',password:'123456',database:'20201004'})
let server=new koa();
server.use(function *(){
	let data=yield db.query(`SELECT * FORM user_table`);
	this.body=data;
});
server.listen(2048);

8、JSON
1.JSON對象
JSON.stringify
JSON.parse
2.簡寫
key和value相同時可只寫key
方法： show:function(){...}
改寫成show(){...}
3.JSON的標准寫法
*只可使用雙引號
*所有的key需要添加引號

9、ES預覽
1.數組
includes
檢查數組是否包含某個元素

arr.keys()
arr.values()
arr.entries()
for...in 循環key
for...of 循環value（不可用於json）

keys 取出key
values 取出value
entries 取出key-value（*entry實體）

2.冪
a**b（a的b次方）

3.字符串
新方法：
padStart
padEnd
例子：str.padStart(10,'0')//字符串取10位，開頭補0

4.語法容忍度提高
元素、參數后多余逗號不報錯

5.generator yield
generator yield 轉變成：async await

async function show(){
	alert('a');
	await;
	alert('b');
}

不再依賴外部runner
可以使用箭頭函數