es6簡單小複習

阿新 • • 發佈：2020-08-11

Ecmascript 6

ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。
Ecmascript 是 JavaScript 語言的標註規範
JavaScript 是 Ecmascript 規範的具體實現
- 具體實現取決於各大瀏覽器廠商的支援進度
Ecmascript 6 也被稱作 Ecmascript 2015
各大瀏覽器廠商對於最新的 Ecmascript 6 標準支援可以參照：
- http://kangax.github.io/compat-table/es6/
對於不支援 ES6 的環境，可以使用一些編譯轉碼工具做轉換處理再使用
- 例如 babel

let 和 const

let：

let 類似於 var，用來宣告變數
通過 let 宣告的變數不同於 var，只在 let 命令所在的程式碼塊內有效（塊級作用域）
let 宣告的變數不存在變數提升
let不允許在相同作用域內，重複宣告同一個變數

const：

const宣告一個只讀的常量。一旦宣告，常量的值就不能改變
const 宣告必須初始化
const的作用域與let命令相同：只在宣告所在的塊級作用域內有效
const命令宣告的常量也是不提升，必須先聲明後使用
const宣告的常量，也與let一樣不可重複宣告

解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。

陣列解構：

let [a, b, c] = [123, 456, 789]
console.log(a, b, c) 123 456 789

物件解構：

let { name, age } = { name: 'Jack', age: 18 }
console.log(name, age) Jack 18

函式引數解構：

function f (p1, { p2 = 'aa', p3 = 'bb' }) {
  console.log(p1, p2, p3)
}

f('p1', { p2: 'p2' }) p1 p2 bb

字串解構：

let [a, b, c, d, e] = 'hello'
console.log(a, b, c, d, e) h e l l o

字串

實用方法：

includes(String)：返回布林值，表示是否找到了引數字串。
startsWith(String)：返回布林值，表示引數字串是否在源字串的頭部。
endsWith(String)：返回布林值，表示引數字串是否在源字串的尾部。
repeat(Number)：repeat方法需要指定一個數值，然後返回一個新字串，表示將原字串重複Number次。

模板字串：

let basket = { count: 5, onSale: true }
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字串（template string）是增強版的字串，用反引號（`）標識
它可以當作普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數
如果使用模板字串表示多行字串，所有的空格和縮排都會被保留在輸出之中
模板字串中嵌入變數，需要將變數名寫在 ${} 之中
- 大括號內部可以放入任意的JavaScript表示式，可以進行運算，以及引用物件屬性
- 大括號內部還可以呼叫函式

陣列

方法：

Array.from() 將一個偽陣列轉為一個真正的陣列
              實際應用中，常見的類似陣列的物件是DOM操作返回的NodeList集合，
              以及函式內部的arguments物件。Array.from都可以將它們轉為真正的陣列。
Array.of() Array.of方法用於將一組值，轉換為陣列
           這個方法的主要目的，是彌補陣列建構函式Array()的不足。
           因為引數個數的不同，會導致Array()的行為有差異。
find() 查詢陣列中某個元素
findIndex() 查詢陣列中某個元素的索引下標
includes() 返回一個布林值，表示某個陣列是否包含給定的值，與字串的includes方法類似

例項方法：

ES6提供三個新的方法——entries()，keys()和values()——用於遍歷陣列.
可以用 for...of 迴圈進行遍歷，唯一的區別是 keys() 是對鍵名的遍歷、
values() 是對鍵值的遍歷，entries() 是對鍵值對的遍歷。

entries() 
keys()
values()

函式的擴充套件

函式引數的預設值：

ES6 允許為函式的引數設定預設值，即直接寫在引數定義的後面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') Hello World
log('Hello', 'China') Hello China
log('Hello', '') Hello

通常情況下，定義了預設值的引數，應該是函式的尾引數
- 因為這樣比較容易看出來，到底省略了哪些引數
- 如果非尾部的引數設定預設值，實際上這個引數是沒法省略的。
指定了預設值以後，函式的length屬性，將返回沒有指定預設值的引數個數
- 也就是說，指定了預設值後，length屬性將失真

rest 引數：

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) 10

擴充套件運算子：

console.log(...[1, 2, 3]) 1 2 3
console.log(1, ...[2, 3, 4], 5) 1 2 3 4 5

箭頭函式：

var f = v => v

上面的箭頭函式等同於：

var f = function(v) {
  return v
}

箭頭函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件
箭頭函式不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤
箭頭函式內部不可以使用arguments物件，該物件在函式體內不存在
- 如果要用，可以用Rest引數代替

物件

屬性的簡潔表示法：

var foo = 'bar';
var baz = {foo};
baz {foo: "bar"}

等同於
var baz = {foo: foo}

除了屬性簡寫，方法也可以簡寫:
var o = {
  method() {
    return "Hello!"
  }
}

等同於

var o = {
  method: function() {
    return "Hello!"
  }
}