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!"
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/21291.html
標籤：其他
下一篇：有關es6的模塊化