ES6-ES12新特性

前言：這里只是簡單列出ES新特性，以及舉例新特性的寫法串慰，想要更深入的了解偏塞，比如新特性和之前寫法的區(qū)別、好處邦鲫、優(yōu)缺點(diǎn)以及更多的使用場景灸叼，可以自行挖掘呦，這里就不一一介紹了庆捺。歡迎評論補(bǔ)充古今。

ES6（2015）

1、let和const

在ES6之前JS是沒有塊級作用域滔以，在ES6之后捉腥，有了塊級作用域的概念，const與let都是塊級作用域你画。

{   var a = 1; let b = 2; const c = 3; } 
 console.log(a); // 1
 console.log(b); // Uncaught ReferenceError: b is not defined
 console.log(c); // Uncaught ReferenceError: c is not defined

2抵碟、解構(gòu)賦值

可以方便的從數(shù)組或者對象中快速提取值賦給定義的變量桃漾。

let obj = { name: "zhu", age: 3 };
let { name, age } = obj;
console.log(name); // zz
console.log(age); // 3

3、模版字符串

var a = "zhuzhu";
var str = 'my name is' + a // 字符串拼接
var str2 = `my name is ${a}`; // 模板字符串
console.log(str); // my name is zhuzhu
console.log(str2); // my name is zhuzhu

4立磁、函數(shù)默認(rèn)參數(shù)

function foo(a = 1, b = 2) { // a呈队、b的默認(rèn)值
      console.log(a) // 3
      console.log(b) // 4
}
foo(3, 4) // 這里不傳剥槐，打印的就是1唱歧、2

5、箭頭函數(shù)（Arrow function）

() => { }
// 舉例
var list = [1, 2, 3, 4, 5];
const newList = list.map(item => item * 2);
console.log(newList); // [2, 4, 6, 8, 10]

6粒竖、擴(kuò)展運(yùn)算符

延展操作符（三個(gè)點(diǎn)...）可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時(shí), 將數(shù)組表達(dá)式或者string在語法層面展開颅崩；還可以在構(gòu)造對象時(shí), 將對象表達(dá)式按key-value的方式展開

let objClone = { ...obj };

7、symbol

symbol 是ES6 引入了一種新的基本數(shù)據(jù)類型（原始數(shù)據(jù)類型） Symbol 蕊苗，表示獨(dú)一無二的值沿后。它是JavaScript 語言的第七種數(shù)據(jù)類型，前六種是： undefined 朽砰、 null 尖滚、布爾值（Boolean）、字符串（String）瞧柔、數(shù)值（Number）漆弄、對象（Object）。
每個(gè)從 Symbol() 返回的symbol值都是唯一的造锅。一個(gè)symbol值能作為對象屬性的標(biāo)識符撼唾；這是該數(shù)據(jù)類型僅有的目的

// Symbol語法與描述：直接使用 Symbol() 創(chuàng)建新的symbol類型，并用一個(gè)可選的字符串作為其描述
const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1); // "symbol"
console.log(symbol3.toString()); // "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo')); // false

8哥蔚、新的數(shù)據(jù)結(jié)構(gòu)：Set

Set 對象允許你存儲任何類型的唯一值倒谷，無論是原始值或者是對象引用。

// 可用于數(shù)組去重
const numbers = [54,34,54,2,3,4,1,4,2,2,76,54,78,90,12,34];
console.log([...new Set(numbers)]); // [54, 34, 2, 3, 4, 1, 76, 78, 90, 12]

9糙箍、新的數(shù)據(jù)結(jié)構(gòu)：Map

Map 對象保存鍵值對渤愁。任何值(對象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。

const map = new Map();
map.set('foo', true);
map.set('bar', false);

10深夯、模塊化抖格，export 和 export default import

export 和 export default 都可用于導(dǎo)出常量、函數(shù)塌西、文件他挎、模塊等，
export、import可以有多個(gè)，export default僅有一個(gè)
通過export方式導(dǎo)出事扭，在導(dǎo)入時(shí)要加{ }逗柴，且不能自定義名字，export default不用加{ }蒜茴，且可以自定義名字

function renderHtml(url) { }
module.exports = {
    renderHtml
} // 導(dǎo)出

import { renderHtml } from "./module/renderHtml.js"; // 導(dǎo)入

function renderHtml(url) { }
exports.renderHtml = renderHtml; // 導(dǎo)出

import renderHtml from './module/renderHtml.js' // 導(dǎo)入

ES7（2016）

1胡本、數(shù)組方法include

判斷一個(gè)數(shù)組是否包含一個(gè)指定的值忠荞，根據(jù)情況殊霞，如果包含則返回 true摧阅，否則返回false。

const arr = [1, 2, 3]
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

2绷蹲、指數(shù)操作符**

相當(dāng)于Math.pow()

2**10 // 1024
Math.pow(2,10) // 1024

ES8（2017）

1棒卷、async/await

Promise可以解決回調(diào)地獄的問題，但是鏈?zhǔn)秸{(diào)用太多祝钢，則會變成另一種形式的回調(diào)地獄 —— 面條地獄比规，所以在ES8里則出現(xiàn)了Promise的語法糖async/await，專門解決這個(gè)問題拦英。

const runTask = async (code) => {
   await registeredTask(); // 注冊任務(wù)
};

runTask();

2蜒什、padStart()和padEnd()

用來補(bǔ)齊字符串

const str = '5';
console.log(str.padStart(2, '0'));  // 05
console.log(str.padEnd(2, '0'));  // 50

3、Object.values和Object.entries

Object.values()是一個(gè)與Object.keys()類似的新函數(shù)疤估，但返回的是Object自身屬性的所有值灾常，不包括繼承的值。
object.entries返回包含對象鍵名和鍵值的數(shù)組铃拇。

var obj = { name: "張三", age: 10 };
Object.values(obj) // ["張三", 10]

for (let [key, value] of Object.entries(obj)) {
      console.log(`${key}: ${value}`)
      // name: 張三
      // age: 10
}

4钞瀑、函數(shù)拓展，es2017規(guī)定函數(shù)的參數(shù)列表的結(jié)尾可以為逗號

5锚贱、Object.getOwnPropertyDescriptors()

方法用來獲取一個(gè)對象的所有自身屬性的描述符

const obj2 = { name: 'Jine', get age() { return '18' } };
Object.getOwnPropertyDescriptors(obj2)

image.png

6仔戈、SharedArrayBuffer對象

SharedArrayBuffer 對象用來表示一個(gè)通用的，固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)拧廊，類似于 ArrayBuffer 對象监徘，它們都可以用來在共享內(nèi)存（shared memory）上創(chuàng)建視圖。與 ArrayBuffer 不同的是吧碾，SharedArrayBuffer 不能被分離凰盔。

let sab = new SharedArrayBuffer(1024); // 必須實(shí)例化
worker.postMessage(sab);

ES9（2018）

1、for await...of

異步迭代器倦春，主要用來遍歷異步對象

2户敬、promise.prototype.finally()，無論premise失敗成功都會走的方法

.then(() => {
       // 成功
}).catch(() => {
      // 失敗
}).finally(() => {
      // 成功失敗都走這里
});

3睁本、對象的擴(kuò)展運(yùn)算符

let obj1 = {c: 3} let obj = {...obj1,d:4}

ES10（2019）

1尿庐、trimStart和trimEnd，用來移除字符串首位空白格

var str=" 123"; str.trimStart(); // 123

2呢堰、flat和flatMap抄瑟，用于創(chuàng)建并返回一個(gè)新數(shù)組

var arr1 = [1, 2, 3, 4]
arr1.map(x => [x * 2]) // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]) // [2, 4, 6, 8]
// 深度為1
arr1.flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]

3、Object.formEntires

可以把鍵值對列表轉(zhuǎn)化成一個(gè)對象枉疼，和 Object.entries() 相對的皮假。

Object.fromEntries([
    ['foo', 1],
    ['bar', 2]
]) // {foo: 1, bar: 2}

4鞋拟、symbol描述，let dog = Symbol("dog")惹资，dog為描述

5贺纲、toString()

6、catch褪测，es2019之前猴誊，catch是帶有參數(shù)，現(xiàn)在不帶參數(shù)

// 之前 
try {} catch(e) {};
// 現(xiàn)在 
try {} catch() {}

ES11（2020）

1汰扭、BigInt稠肘，js第八種基本類型福铅，BigInt 可以表示任意大的整數(shù)

2萝毛、空格合并運(yùn)算符（??），只有 ?? 左邊為 null 或 undefined時(shí)才返回右邊的值

3滑黔、可選鏈操作符

// 之前寫法
const name = (system && system.user && system.user.addr && system.user.addr.province && system.user.addr.province.name) || 'default';
// 之后寫法
const name = system?.user?.addr?.province?.name || 'default';

ES12（2021）

1笆包、replaceAll

返回全新字符串，所有符合匹配規(guī)則的字符都將被替換掉

var str = "hello word";
// 之前
str.replace(/o/g, "a); // hella ward
// 現(xiàn)在
str.replaceAll("o", "a"); // hella ward

2略荡、promise.any

只要其中一個(gè)promise成功庵佣，就返回那個(gè)已經(jīng)成功的permise，如果可疊戴對象中沒有一個(gè)premise成功汛兜，就返回一個(gè)失敗的premise

const promise1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("promise1");
      //  reject("error promise1 ");
    }, 3000);
  });
};
const promise2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("promise2");
      // reject("error promise2 ");
    }, 1000);
  });
};
const promise3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("promise3");
      // reject("error promise3 ");
    }, 2000);
  });
};
Promise.any([promise1(), promise2(), promise3()])
  .then((first) => {
    // 只要有一個(gè)請求成功 就會返回第一個(gè)請求成功的
    console.log(first); // 會返回promise2
  })
  .catch((error) => {
    // 所有三個(gè)全部請求失敗 才會來到這里
    console.log("error", error);
  });

3巴粪、weakRefs

使用weakRefs的class類創(chuàng)建對對象的弱引用

4、邏輯運(yùn)算符和賦值表達(dá)式

新特性結(jié)合了邏輯運(yùn)算符（&&粥谬，||肛根，??）和賦值表達(dá)式，
（1）&&=： x &&= y等同于x && (x = y);
（2）||=：x ||= y 等同于：x || (x = y)
（3）??=：x ??= y 等價(jià)于： x ?? (x = y);

5漏策、數(shù)字分隔符

用下劃線 _（U+005F）在數(shù)字間進(jìn)行分隔派哲。
let num = 1_000_000_000