es6簡單小複習

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!"
  }
}