技術標籤：# JS

ES6（2015）

模組化(Module)

ES5不支援原生的模組化，在ES6中模組作為重要的組成部分被新增進來。模組的功能主要由 export 和 import 組成。每一個模組都有自己單獨的作用域，模組之間的相互呼叫關係是通過 export 來規定模組對外暴露的介面，通過import來引用其它模組提供的介面。同時還為模組創造了名稱空間，防止函式的命名衝突。

匯出(export)

//匯出變數
export   var name = 'xw'
var name =  'xw';
var age =  '20';
export {name, age};
//匯出常量
export
 
  const msg =  'msg';
//匯出函式
export function myModule(name) {
			return name;
		}

匯入(import)

import {myModule} from 'myModule';
import {name,age}  from 'test';
 //一條import 語句可以同時匯入預設函式和其它變數。
 import defaultMethod, { otherMethod } from 'xxx.js';

Set

建立類似陣列的資料結構，但成員是唯一（無重複）

let set = Set()       // 建立
let
 
 set = Set([1,2])  // 建立（通過陣列）
set.size              // 成員數
set.has(value)        // 是否存在
set.add(value)        // 新增
set.delete(value)     // 刪除
set.clear()           // 清除

set.keys();           // SetIterator {"a", "b", "c"}
set.values();         // 同上
set.entries();        // 同上
set.
 
forEach(item=>{});

Map

任何型別資料都可以當成key

let m = new Map();
let map = new Map([['k1','v1'],['k2','v2'],['k3','v3']])

map.size
map.has('key')
map.set('key','value')
map.get('key')
m.delete('key')
m.clear()

map.keys()
map.values()
map.entries()
map.forEach((value,key,map)=>{})

箭頭函式

這是ES6中最令人激動的特性之一。=>不只是關鍵字function的簡寫，它還帶來了其它好處。箭頭函式與包圍它的程式碼共享同一個this,能幫你很好的解決this的指向問題。有經驗的JavaScript開發者都熟悉諸如var self = this;或var that = this這種引用外圍this的模式。但藉助=>，就不需要這種模式了。
箭頭函式的箭頭=>之前是一個空括號、單個的引數名、或用括號括起的多個引數名，而箭頭之後可以是一個表示式（作為函式的返回值），或者是用花括號括起的函式體（需要自行通過return來返回值，否則返回的是undefined）。

let fun = a=>{return a}
let fun = ()=>{
	return 0;
}
let fun = (a,b)=>{
	return a+b;
}

預設引數

const test = (a='a',b='b',c='c')=>{
     	 return a+b+c
     	 }
console.log(test('A','B','C')) //ABC
console.log(test('A','B')) //ABc
console.log(test('A')) //ABc

模板字串

 //不使用模板字串：
 var name = 'Your name is ' + first + ' ' + last + '.'
 var name = `Your name is ${first} ${last}.`

結構賦值

陣列的結構賦值

var foo = ["one", "two","three","four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
//如果你要忽略某些值，你可以按照下面的寫法獲取你想要的值
var [first, , , last] = foo;
console.log(first);// "one"
console.log(last); // "four"
//你也可以這樣寫
var a, b;   //先宣告變數
[a, b] = [1,2];
console.log(a);  // 1
console.log(b);  // 1
//利用結構賦值交換兩個變數的值。
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a);// 3
console.log(b);// 1

物件的結構賦值

const student = {
     name:'Ming',
     age:'18',
     city:'Shanghai' 
    }
const {name,age,city} = student;
console.log(age); // "18"
console.log(city);// "Shanghai"

延展操作符(Spread operator)

var arr1 = [0,1,2];
var arr2 = [3,4,5];
var arr3 = [...arr1, ...arr2]; //[0,1,2,3,4,5]
//等同於 var arr4 = arr1.concat(arr2);

var obj1 = { 
     foo: 'bar', 
     x:42 
    };
var obj2 = { 
     foo:'baz', 
     y:13 
    };
var obj3 = { ...obj1 };	// 克隆後的物件: { foo: "bar", x: 42 }
var obj4 = { ...obj1, ...obj2 }; // 合併後的物件: { foo: "baz", x: 42, y: 13 }

Promise

var test = (a,b)=>{
	return new Promise((reslove,reject)=>{
		//非同步操作
		reslove(resoult)//返回正確結果
		reject(err) //出錯時的結果
	})
}
//使用
test(a,b).then(res=>{
 	 //...promise   reslove（）返回正確結果後執行到這裡
}).catch(err=>{
     //前面reject（err）後代碼會執行到裡
})
//或者
try{
	var resoult = await test(a,b)
	//...
}
catch(err){
	//...
}

ES7新特性（2016）

includes()

includes() 函式用來判斷一個數組是否包含一個指定的值，如果包含則返回 true，否則返回false。
語法：array.includes(value,index),其中value為查詢的值，index表示從此下標開始查詢

let arr = ['react','angular','vue'];
if (arr.includes('react')){
	console.log('react存在');
}

var arr=['a','b','c'];
arr.includes('a')//------------------返回true
arr.includes('a',1)//----------------返回false
arr.includes('b',1)//-----------------返回true

指數運算子**

在ES7中引入了指數運算子**，**具有與Math.pow(…)等效的計算結果

// es6
console.log(Math.pow(2,10));//2 的 10次方  1024
// es7
console.log(2 ** 10) // 1024

ES8新特性（2017）

async/await

async function process(array) {
     for await (let i of array) {
     	doSomething(i);
     }
}

Object.values()

const obj = {
	     a:1, 
	     b:2, 
	     c:3
     };
const values= Object.values(obj);
console.log(values);//[1, 2, 3]

Object.entries()

Object.entries()函式返回一個給定物件自身可列舉屬性的鍵值對的陣列。
這個真的很有用。之前為了遍歷key和value搞得很煩。

for(let [key,value] of Object.entries(obj1)){
	console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

String padding

String.padStart(targetLength,[padString])
String.padEnd(targetLength,padString])
targetLength:當前字串需要填充到的目標長度。如果這個數值小於當前字串的長度，則返回當前字串本身。
padString:(可選)填充字串。如果字串太長，使填充後的字串長度超過了目標長度，則只保留最左側的部分，其他部分會被截斷，此引數的預設值為 " "。

 console.log('0.0'.padStart(4,'*'))
 console.log('0.0'.padStart(20))
 console.log('0.0'.padEnd(4,'*')) 
 console.log('0.0'.padEnd(10,'*'))
/*
	*0.0
	0.0
	0.0*
	0.0*******
*/

Object.getOwnPropertyDescriptors()

const obj2 = {
    name: 'Jine',
    get age() { 
    	return '18' 
    }
};
Object.getOwnPropertyDescriptors(obj2)
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//		value:"Jine",
//		writable:true
//   }
// }

SharedArrayBuffer物件

有了 SharedArrayBuffer 後，多個 web worker 就可以同時讀寫同一塊記憶體了你再也不需要 postMessage 伴有時延的通訊了，多個 web worker 對資料訪問都沒有時延了
SharedArrayBuffer 物件用來表示一個通用的，固定長度的原始二進位制資料緩衝區，類似於 ArrayBuffer 物件，它們都可以用來在共享記憶體（shared memory）上建立檢視。與 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分離。

/*** 
* @param {*} length 所建立的陣列緩衝區的大小，以位元組(byte)為單位。  
 * @returns {SharedArrayBuffer} 一個大小指定的新 SharedArrayBuffer 物件。其內容被初始化為 0。
*/
new SharedArrayBuffer(length)

Atomics物件

Atomics 物件提供了一組靜態方法用來對 SharedArrayBuffer 物件進行原子操作。
這些原子操作屬於 Atomics 模組。與一般的全域性物件不同，Atomics 不是建構函式，因此不能使用 new 操作符呼叫，也不能將其當作函式直接呼叫。Atomics 的所有屬性和方法都是靜態的（與 Math 物件一樣）。
多個共享記憶體的執行緒能夠同時讀寫同一位置上的資料。原子操作會確保正在讀或寫的資料的值是符合預期的，即下一個原子操作一定會在上一個原子操作結束後才會開始，其操作過程不會中斷。

Atomics.add()
//將指定位置上的陣列元素與給定的值相加，並返回相加前該元素的值。
Atomics.and()
//將指定位置上的陣列元素與給定的值相與，並返回與操作前該元素的值。
Atomics.compareExchange()
//如果陣列中指定的元素與給定的值相等，則將其更新為新的值，並返回該元素原先的值。
Atomics.exchange()
//將陣列中指定的元素更新為給定的值，並返回該元素更新前的值。
Atomics.load()
//返回陣列中指定元素的值。
Atomics.or()
//將指定位置上的陣列元素與給定的值相或，並返回或操作前該元素的值。
Atomics.store()
//將陣列中指定的元素設定為給定的值，並返回該值。
Atomics.sub()
//將指定位置上的陣列元素與給定的值相減，並返回相減前該元素的值。
Atomics.xor()
//將指定位置上的陣列元素與給定的值相異或，並返回異或操作前該元素的值。
//wait() 和 wake() 方法採用的是 Linux 上的 futexes 模型（fast user-space mutex，
//快速使用者空間互斥量），可以讓程序一直等待直到某個特定的條件為真，主要用於實現阻塞。
Atomics.wait()
//檢測陣列中某個指定位置上的值是否仍然是給定值，是則保持掛起直到被喚醒或超時。
//返回值為 "ok"、"not-equal" 或 "time-out"。呼叫時，如果當前執行緒不允許阻塞，則會丟擲異常
//（大多數瀏覽器都不允許在主執行緒中呼叫 wait()）。
Atomics.wake()
//喚醒等待佇列中正在陣列指定位置的元素上等待的執行緒。返回值為成功喚醒的執行緒數量。
Atomics.isLockFree(size)
//可以用來檢測當前系統是否支援硬體級的原子操作。對於指定大小的陣列，如果當前系統支援硬體級的原子操作，
//則返回 true；否則就意味著對於該陣列，Atomics 物件中的各原子操作都只能用鎖來實現。此函式面向的是技術專家。

ES9新特性（2018）

非同步迭代

ES2018引入非同步迭代器（asynchronous iterators），這就像常規迭代器，除了next()方法返回一個Promise。因此await可以和for…of迴圈一起使用，以序列的方式執行非同步操作。例如：

 async function process(array) {
    for await (let i of array) {
        	doSomething(i);
     }
}

Promise.finally()

一個Promise呼叫鏈要麼成功到達最後一個.then()，要麼失敗觸發.catch()。在某些情況下，你想要在無論Promise執行成功還是失敗，執行相同的程式碼，例如清除，刪除對話，關閉資料庫連線等。

function doSomething() {
   doSomething1()
  .then(doSomething2)
  .then(doSomething3)
  .catch(err => {
		console.log(err);
 }).finally(() => {
		// finish here!
  });
}

正則表示式命名捕獲組

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
		match  = reDate.exec( '2018-04-30'),
		year   = match.groups.year,  
		// 2018
		month  = match.groups.month, 
		// 04
		day    = match.groups.day;   
		// 30
const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
       d = '2018-04-30',
       usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

ES10新特性（2019）

新增了Array的flat()方法和flatMap()方法

flat() 方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回。
flat()方法最基本的作用就是陣列降維
其次，還可以利用flat()方法的特性來去除陣列的空項

var arr1 = [1,2, [3,4]];
arr1.flat(); 
// [1, 2, 3, 4]
var arr2 = [1,2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1,2, [3,4, [5,6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作為深度，展開任意深度的巢狀陣列
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]
//去除空項
var arr4 = [1, 2, ,4,5];
arr4.flat();
// [1, 2, 4, 5]