ES新特性

一、變量聲明

let a= "hello";

const PI = Math.PI;

二、解構

數組解構： let [a,b,c="dd"] = ["aa","bb","cc"];

對象解構： let {a,b,c} = object;

三、模板字符串和字符串方法

const msg = `hello world ${contry}`;
複製代碼

新增字符串方法：

.includes()  //查找字符串，返回true/false, 支持正則
.startsWith() //以XXX開頭
.endsWith() //以XXX結尾
.repeat(number) //重複字符串
.padStart(length, str) //往前填充
.padEnd(length, str) //日後填充
複製代碼

四、強化參數

* 函數參數默認值： function(a, b="hi"){} 
* 拓展運算符：[]/{} ---> ...[]/...{}  //拓展出內部的元素
* 箭頭函數：() => {}
複製代碼

五、數組新特性

* for...of //遍歷數組, for in是遍歷鍵名，for of是遍歷鍵值
* [].keys() //獲取數組下標
* [].entries() //獲取數組項
* Array.from() //類數組轉爲數組
* Array.of() //把一組值轉爲數組
* .find() //查找第一個符合條件的元素
* .findIndex() //查找第一個符合條件的元素位置
* .fill() //數組元素填充
* .includes() //查找是否存在指定元素，返回boolean
複製代碼

六、對象新特性

* name: name <==> name //對象屬性簡化
* show: function(){} <==> show(){} 
* Object.is() //檢測兩個對象是否相等
* Object.assign() //合併對象，複製對象
* Object.keys() //獲取對象的全部屬性名
* Object.values() //獲取對象的全部屬性值
* Object.entries() //將數組和對象更容易轉爲Map數據類型
例：const arr = [1, 2, 3]; 
    console.log(Object.entries(arr));  // [['0', 1], ['1', '2'], ['2', '3']]
    const obj = { foo: 'bar', baz: 'abc' }; 
    console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]
    const map = new Map(Object.entries(obj)); //Map {'foo' => 'bar', 'baz' => 'abc'}
複製代碼

七、Promise

const funSync = function(){
    return new Promise((resolve, reject) => {
        resolve(); //成功時執行
        reject(); //失敗時執行
    });
}
複製代碼

八、模塊化

特色：

(1)、加載後模塊內容更新，加載內容也更新

(2)、動態引入，返回值爲Promise對象
複製代碼

九、class類的簡化

//類的封裝
class Person {
    constructor(){}, //構造函數，定義類的屬性
    fun1(){},   //類的原型對象方法，等價於Person.prototype.fun1 = function(){}
    [變量](){}, //函數名參數化
    set name(){}, //用來修改類的屬性值
    get name(){}, //用來獲取類的屬性值
    static fun2(){} //靜態方法，不須要建立子對象能夠用類型名直接調用，等價於Person.fun2 = function(){}
}
//類的繼承 
class Children extends Parent { //等價於Object.setPrototypeof(Children, Parent) <=> Children.__proto__ = Parent
    constructor(params){
        super(params); //執行父類型構造函數並繼承父級屬性
    }
    super.fun1() //執行父級方法
}
複製代碼

九、async--await

特色：

(1)、awiat後面是一個Promise對象

(2)、async函數返回一個Promise對象

(3)、await語句後面爲reject時，async執行中斷，可經過try--catch處理錯誤。
複製代碼

十、symbol (新增數據類型)

//建立實例
let sym = Symbol("a");
//用typeof檢測數據類型
typeof sym  // 'symbol'
//比較
let s2 = Symbol('another symbol')
let s3 = Symbol('another symbol')
s2 === s3 // false **!每一個Symbol實例都是惟一的。所以，當你比較兩個Symbol實例的時候，將總會返回false

//使用Symbol來做爲對象屬性名(key)
const PROP_NAME = Symbol()
const PROP_AGE = Symbol()
let obj = {
  [PROP_NAME]: "一斤代碼"
}
obj[PROP_AGE] = 18
obj[PROP_NAME] // '一斤代碼'
obj[PROP_AGE] // 1

//使用Symbol來替代常量
const TYPE_AUDIO = Symbol();

//使用Symbol定義類的私有屬性/方法
const PASSWORD = Symbol()
class Login {
  constructor(username, password) {
    this.username = username
    this[PASSWORD] = password
  }
}

//註冊和獲取全局Symbol
let gs1 = Symbol.for('global_symbol_1')  //註冊一個全局Symbol
let gs2 = Symbol.for('global_symbol_1')  //獲取全局Symbol
gs1 === gs2  // true
複製代碼

! 注意：

• Symbol類型的key是不能經過Object.keys()或者for...in來枚舉的，它未被包含在對象自身的屬性名集合(property names)之中。
• 當使用JSON.stringify()將對象轉換成JSON字符串的時候，Symbol屬性也會被排除在輸出內容以外。

十一、set (新增數據類型)

>> 不能有重複值，key值和value值相同，支持鏈式操做

//建立實例
let set = new Set([]);
typeof //返回object

//類型方法
.add() //添加
.delete() //刪除
.has() //檢查是否存在某個值， 返回boolean
.size  //返回元素個數
.clear() //清空元素
.keys()  //獲取鍵名
.values() //獲取鍵值
.entries() //獲取鍵值對
.forEach()  //遍歷

//數據類型之間的轉換
Array.from(set) //set對象轉爲數組
[...set]
複製代碼

使用場景： 數組求並集、交集、差集

十二、map (新增數據類型)

//建立實例,key可爲任意類型的值
let map = new Map([ [key,value], [key,value] ]);

//類型方法
.set(key, value) //添加鍵值對
.get(key) //獲取鍵對應的值
.delete(key)  //刪除鍵值對
.has(key) //判斷指定的鍵是否存在
.clear() //刪除map中的全部鍵值對
.size //獲取大小
.keys() //獲取全部鍵
.values() //獲取全部的值
.entries() //獲取全部的鍵值對
.forEach() //遍歷map的全部鍵值對。
    map.forEach(function(value, key, map) {});
    
//數據類型之間的轉換
[...map] //map轉爲數組，二位數組
function mapToObj(strMap) { //map轉爲對象
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
function objToMap(obj) { //對象轉爲map
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
複製代碼

1三、generator(工廠函數)

function* fun(){ //定義
    yield "hello"; 
    yield "world";
    yield* foo();   //generator函數
}
const fun1 = fun(); //實例化
fun1.next() //執行第一個yield函數，並返回對象{value:"hello", done: false},最後一個yield的done值爲true

[...fun1]    //遍歷全部yield的值
for...of...  //能夠自動遍歷執行yield

//應用： 異步編程
function run(fn){  //流程控制
    const gen = fn();
    function next() {
        const result = gen.next();
        if (result.done) return;//結束
        result.value(next);//next做爲入參，即本工序成功後，執行下一工序
    }
    next();
};
//流程列表
function* task(){
     yield prepare;  //異步函數
     yield fired;
}
run(task);
複製代碼

十一、ES9(2018)新特性

*  正則命名捕獲：(?<name>\d{4})
   反向引用: \K<name>
*  匹配模式：g(全局) i(忽略大小寫) m(多行模式) s(把.做爲字符使用)
*  Proxy: 拓展對象功能
   new  Proxy(被代理的對象, {操做函數})
   操做函數：set()  //設置對象值時觸發
             get()  //獲取對象值時觸發
             has()  //檢測是否有某個屬性時觸發
             apply() //調用函數時觸發
             deleteProprty() //刪除屬性時觸發
*  Reflect: 
複製代碼

十二、compose()

!注意

• 該函數的參數都爲函數，該函數的返回結果也爲函數；
• 該函數執行順序爲從右向左，執行完的結果做爲參數傳遞給前一個函數。
• 建立compose()函數

//方法一
function compose(){
	var args = [].slice.call(arguments);
	return function(initArg){
		var result = initArg;
		for(var i = args.length -1; i >=0; i--){
			result = args[i](result);
		}
		return result;
	}
}
//方法二
function compose(){
	var args = [].slice.call(arguments);
	return function(initArg){
		return args.reduceRight(function(init, current){
			return current(init);
		},initArg)
	}
}
複製代碼