ES6新特性

ES6的常用新特性簡介，全部特性可參閱 Ecma-International

MDN

ES6入門

ES6 教程

ES6

全稱

ECMAScript 6.0

，是

JavaScript

的下一個版本标準，

2015.06

發版。

ECMAScript

和

JavaScript

的關系是，前者是後者的規格，後者是前者的一種實作。

let 與 const

ES2015(ES6)

新增加了兩個重要的

JavaScript

關鍵字:

let

const

。

ES6

明确規定，代碼塊内如果存在

let

或者

const

，代碼塊會對這些指令聲明的變量從塊的開始就形成一個封閉作用域。代碼塊内，在聲明變量之前使用它會報錯，稱為暫時性死區。

ES6

的塊級作用域必須有大括号，如果沒有大括号，

JavaScript

引擎就認為不存在塊級作用域。

for 循環計數器很适合用 let
let const 隻能聲明一次， var 可以聲明多次。
var 會變量提升， let 與 const 也存在變量提升但有所不同。
const 聲明一個隻讀的常量，一旦聲明，常量的值就不能改變。
const let 在全局作用域中聲明的變量不會挂載到 window 上。
let const 聲明的變量隻在其聲明所在的代碼塊内有效，形成塊級作用域。
const 其實保證的不是變量的值不變，而是保證變量指向的記憶體位址所儲存的資料不允許改動。對于基本資料類型 number 、 string boolean 等，值就儲存在變量指向的那個記憶體位址，是以 const 聲明的簡單類型變量等同于常量。而引用類型 object ， array function 等，變量指向的記憶體位址其實是儲存了一個指向實際資料的指針，是以 const 隻能保證指針是固定的，至于指針指向的資料結構變不變就無法控制了。

解構指派

ES6

允許按照一定模式，從數組和對象中提取值，對變量進行指派，這被稱為解構指派。

let [a, b, c] = [1, 2, 3]; // 基本
let [a, [[b], c]] = [1, [[2], 3]]; //嵌套
let [a, , b] = [1, 2, 3]; // 可忽略
let [a = 1, b] = []; // a = 1, b = undefined // 不完全解構
let [a, ...b] = [1, 2, 3]; // 剩餘運算符
let [a, b, c, d, e] = 'hello'; // 字元串等
let { a, b } = { a: 'aaa', b: 'bbb' }; // 對象模型的解構 前後兩個kay需對應

Symbol

ES6

引入了一種新的原始資料類型

Symbol

，表示獨一無二的值，最大的用法是用來定義對象的唯一屬性名。

ES6

資料類型除了

Number

String

Boolean

Object

null

undefined

，還新增了

Symbol

let s1 = Symbol("s");
let s2 = Symbol("s");
console.log(s1 === s2); //false

Spread / Rest 操作符

Spread

用于将數組作為參數直接傳入函數。

var s = ['1', '2', '3'];
function f(s1,s2,s3){
    console.log(`Hello ${s1},${s2},${s3}`); //ES6新增字元串中加入變量和表達式
}
f(...s); //Hello 1,2,3

Rest

用于函數傳參傳遞數組。

function f(...args){
    console.log(args);
}
f(1,2,3,4,5); //[1, 2, 3, 4, 5]

箭頭函數

ES6

中，箭頭函數就是函數的一種簡寫形式，使用括号包裹參數，跟随一個

=>

，緊接着是函數體，特别需要注意的是箭頭函數是繼承目前上下文的

this

關鍵字。

var add = (a, b) => a + b;
var show = a => console.log(a);
var test = (a,b,c) => {console.log(a,b,c);return a+b+c;}
add(1,1); //2
show(1); //1
test(1,1,1); //1 1 1

參數預設值

function f(a = 1){
    console.log(a);
}
f(); //1
f(11); //11

字元串拓展

ES6

之前判斷字元串是否包含子串，用

indexOf

方法，

ES6

新增了子串的識别方法。

includes() 傳回布爾值，判斷是否找到參數字元串。
startsWith() 傳回布爾值，判斷參數字元串是否在原字元串的頭部。
endsWith() 傳回布爾值，判斷參數字元串是否在原字元串的尾部。
repeat() 傳回新的字元串，表示将字元串重複指定次數傳回。
padStart() 傳回新的字元串，表示用參數字元串從頭部補全原字元串。
padEnd() 傳回新的字元串，表示用參數字元串從尾部（右側）補全原字元串。

數值拓展

二進制表示法新寫法字首 0b 或 0B ，例如 console.log(0B11 === 3); //true
八進制表示法新寫法字首 0o 0O console.log(0O11 === 9); //true
常量 Number.EPSILON ，表示 1 與大于 1 的最小浮點數之間的差,值接近于 2.2204460492503130808472633361816E-16
Number.MAX_SAFE_INTEGER 表示在 JavaScript 中能夠精确表示的最大安全整數。
Number.isFinite() 用于檢查一個數值是否為有限的 finite ，即不是 Infinity
Number.parseInt() 逐漸減少全局方法，用于全局變量的子產品化,方法的行為沒有發生改變。

數組拓展

Array.of() 将參數中所有值作為元素形成數組。
Array.from() 将類數組對象或可疊代對象轉化為數組。
find() 查找數組中符合條件的元素,若有多個符合條件的元素，則傳回第一個元素。
findIndex() 查找數組中符合條件的元素索引，若有多個符合條件的元素，則傳回第一個元素索引。
fill() 将一定範圍索引的數組元素内容填充為單個指定的值。
copyWithin() 将一定範圍索引的數組元素修改為此數組另一指定範圍索引的元素。
entries() 周遊鍵值對。
keys() 周遊鍵名。
values() 周遊鍵值。
includes() 數組是否包含指定值。
flat() 嵌套數組轉一維數組。
flatMap() 先對數組中每個元素進行了處理，再對數組執行 flat() 方法。

疊代器

Symbol.iterator 一個統一的接口，它的作用是使各種資料結構可被便捷的通路。
for of 是 ES6 新引入的循環，用于替代 for..in forEach()

類

ES6

提供了更接近傳統語言的寫法，引入了

class

這個概念，作為對象的模闆。通過

class

關鍵字，可以定義類，與多數傳統語言類似。不過，

ES6

的

class

不是新的對象繼承模型，它隻是原型鍊的文法糖表現形式。

class Me {
  constructor() {
    console.log("constructor");
  }
  study() {
    console.log('study');
  }
}

console.log(typeof Me); //function
let me = new Me(); //constructor
me.study(); //study

Promise 對象

Promise

是異步程式設計的一種解決方案。

從文法上說，Promise 是一個對象，從它可以擷取異步操作的消息。

Promise

異步操作有三種狀态：

pending

fulfilled

rejected

。除了異步操作的結果，任何其他操作都無法改變這個狀态。

then

方法接收兩個函數作為參數，第一個參數是

Promise

執行成功時的回調，第二個參數是

Promise

執行失敗時的回調，兩個函數隻會有一個被調用。

const p1 = new Promise(function(resolve,reject){
    resolve('resolve');
}); 
const p2 = new Promise(function(resolve,reject){
    reject('reject');
});
p1.then(function(v){  
    console.log(v); //resolve
});
p2.then(function(v){ 
    console.log(v);
},
function(v){
    console.log(v); //reject
});

每日一題

https://github.com/WindrunnerMax/EveryDay