es6到es10增長了那些新特性?

ES6新特性(2015)

在2015年6月：ECMAScript 2015 (ES2015)，第6版，最先被稱做是 ECMAScript 6 (ES6) 。ES6是一次很是關鍵的革命，在此次的版本更新中，增長的東西比較多。在這裏列舉幾個容易理解而且實用的:前端

函數參數默認值 (難度 *)

應用場景數組

function add(a = 1, b = 2) {
    //...
  }
複製代碼

模板字符串 (難度 *)

應用場景微信

let name = 'Andy';
const str = `Hello ${name}`;
console.log(str)
複製代碼

解構賦值

應用場景markdown

var a, b;
  [a, b] = [1, 2]
複製代碼

對象屬性簡寫 (難度 *)

應用場景app

const name = 'Andy', age = '22', city = 'WuHan';
  const student = {
    name,
    age,
    city
  };
  console.log(student); //{name: "Andy", age: "22", city: "WuHan"};
複製代碼

Let與Const (難度 *)

在前端開發過程當中，ES6 中用的最多就應該是聲明方式了。在 ES6 之前，JavaScript中就只有 var 一種聲明，可是如今引入了 let 和 const 兩種聲明方式，經過下面表格來進行歸類。異步

	var	let	const
變量提高	true	false	false
全局變量	true	false	false
重複聲明	true	false	false
從新賦值	true	true	false
暫時死區	false	true	true
塊做用域	false	true	true
只聲明不初始化	true	true	false

延展操做符 (難度 *)

應用場景函數

function add(a, b) {
    return a+b;
  };
  const numberArray = [1, 2];

  // 不實用延展符
  console.log(add.apply(null, numberArray))

  // 使用延展符
  console.log(add(...numberArray))
複製代碼

箭頭函數 (難度 * * *)

箭頭函數的出現給前端開發帶來了很大的幫助，它不只極大的簡化了代碼的簡練，最大的一個特色就是箭頭函數與包圍它的代碼共享同一個this,能幫助開發者解決this做用域問題。性能

應用場景fetch

// 常見的箭頭函數寫法
  () = 1
  a => a+1
  (a, b , c) => a+b+c
  () => {
    console.log("hello")
  }
複製代碼

ES7新特性(2016)

ES 2016年添加了兩個比較簡單的新特性優化

Array.prototype.includes()：(難度 *)

應用場景

const strArray = ['a', 'b', 'c'];
  const str = 'a';
  const str0 = 'd';
  console.log(strArray.includes(str)); // true
  console.log(strArray.includes(str0)); // false
複製代碼

指數操做符

應用場景

console.log(2**10) // 1024
複製代碼

ES8新特性(2017)

Object.values() （難度 *）

應用場景

const obj = {
  a: 1,
  b: 2,
  c: 3
}

console.log(Object.values(obj))
複製代碼

Object.entries() （難度 *）

應用場景

const obj = {
  a: 1,
  b: 2,
  c: 3
}

console.log(Object.entries(obj))
複製代碼

String padding: padStart()和padEnd() （難度 *）

padStart()應用場景

let str = 'hello'
  console.log(str.padStart(7, '00')) // "00hello"
複製代碼

padEnd()應用場景

let str = 'hello';
  console.log(str.padEnd(7,00)) // "hello00"
複製代碼

Object.getOwnPropertyDescriptors() （難度 **）其實這個方法在開發過程當中並非很常見，Object.getOwnPropertyDescriptors()函數用來獲取Object對象自身屬性

應用常見

const obj = {
    name: 'Andy',
    age: 18
  };
  Object.getOwnPropertyDescriptors(obj)

複製代碼

ES9新特性(2018)

異步迭代
Promise.finally() (難度 * * *)

對於Promise調用鏈通常要麼最終成功 (.then) 要麼失敗 (.catch)。可是有的時候，須要不管成功仍是失敗，都須要執行某一行代碼，finally()是能夠指定你最終的代碼。

應用場景

let state = true;
  fetch(request).then((response) => {
    //
  }).then(() => {console.log("hi, 進入.then")})
  .catch((err) => {console.log("hi, 進入.catch")})
  .finally(() => {state = false})
複製代碼

Rest/Spread 屬性（難度 * *）

應用場景

const obj = {
    name: 'Andy',
    age: 22,
    six: 'm'
  };
  const {name, ...b} = obj;
  // name = 'Andy'
  // b = { age: 22, six: 'm'}
複製代碼

ES10新特性(2019)

Array.prototype.flat()

flat() 方法會按照指定的要求去深度遍歷數組，返回已經降維的新數組

應用場景

var numberArray = [1, 2, 3, [4, 5], [6, 7, [8, 9]]];
  console.log(numberArray.flat()); // [1, 2, 3, 4, 5, 6, 7, [8, 9]
  console.log(numberArray.flat(2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9];
複製代碼

BagInt

在2019年6月時，推出了 ES10 新特性，其中比較特殊的就是推出了 BigInt 基本類型。BigInt 是一種內置對象，它提供了一種方法來表示大於 253 - 1 的整數。這本來是 Javascript中能夠用 Number 表示的最大數字。BigInt 能夠表示任意大的整數。

PS:你們看了後以爲對本身有幫助能夠三連留言,歡迎提出寶貴意見，也歡迎各位對相關技術有興趣的開發者（由團隊開發人員微信號x118422邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~