ES6 舊瓶新酒

未東興發(fā)布于2019-08-21 10:48 / 1191人閱讀

摘要：本文是系列的第二篇，前一篇走馬觀花概要介紹了，這一篇標(biāo)題之所以叫舊瓶新酒，是想介紹那些原來就被廣泛使用的對象，例如，對這些對象擴(kuò)展了一些很有用的新方法。用于監(jiān)聽取消監(jiān)聽數(shù)組的變化，指定回調(diào)函數(shù)。在中已被建議撤銷。

本文是 ES6 系列的第二篇，前一篇《ES6 走馬觀花》概要介紹了ES6，這一篇標(biāo)題之所以叫“舊瓶新酒”，是想介紹那些原來就被廣泛使用的JS對象，例如String、Array，ES6對這些JS對象擴(kuò)展了一些很有用的新方法。本文會介紹一些個人覺得很有用的方法，并不會覆蓋所有ES6新增方法。

本文將介紹以下JS對象：

String

Number

Array

Object

這里有ES6特性的兼容對比表格，方面大家查看本文提及的ES6特性在各個運(yùn)行環(huán)境的兼容情況。

String Unicode 表示法

1) Unicode 表示法

JavaScript允許采用uxxxx形式表示一個字符，支持u0000—uFFFF之間的字符，對于超過uFFFF的字符，使用兩個字節(jié)的形式:

"uD842uDFB7"
// "?"

ES6 在此基礎(chǔ)上做了改進(jìn)，引入大括號來表示一個碼點(diǎn)（code point）

"u{20BB7}"
// "?"

"u0041"
// "A"

"u{41}"
// "A"

除此之外，還擴(kuò)展了String.prototype.codePointAt()和String.fromCodePoint()方法，可以識別超出uFFFF的碼點(diǎn)。

2) codePointAt()

以前通過charCodeAt()獲取字符碼點(diǎn)，但是對超出uFFFF的雙字節(jié)字符則會出錯，只能獲取第一個字節(jié)的碼點(diǎn)，ES6新增了codePointAt()方法來獲取字符的unicode碼點(diǎn)，可以正確識別雙字節(jié)的字符。

"?".charCodeAt(0)
// 55362
"?".charCodeAt(0).toString(16)
// "d842"

"?".codePointAt(0)
// 134071
"?".codePointAt(0).toString(16)
// "20bb7"

3) String.fromCodePoint()

此方法用于從碼點(diǎn)返回對應(yīng)字符，支持識別雙字節(jié)字符。

String.fromCodePoint(0x20bb7)
// "?"

遍歷器接口

ES6 的字符串實(shí)現(xiàn)了 Iterator 遍歷器接口，因此可以用 for...of 循環(huán)遍歷字符串。

for (let codePoint of "foo") {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

與普通 for 循環(huán)最大的不同是，for...of 循環(huán)遍歷的單位是字符碼點(diǎn)（code point），而 for 循環(huán)遍歷的單位是字符單元（code unit）

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "?"

實(shí)用方法

1) includes()

以前無法直接判斷一個字符串是否另一個字符串的子字符串，只能通過indexOf()方法來判斷。

"hello world".indexOf("hello")
// 0
"hello world".indexOf("es6")
// -1

在 ES6 中可以直接使用includes()直接判斷。

"hello world".includes("hello")
// true
"hello world".includes("es6")
// false

includes() 還可以接收第二個參數(shù)，表示從第幾位開始檢索

"hello world".includes("hello", 1)
// false

2) startsWith(), endsWith()

在ES6中還可以直接判斷一個字符串是否以某個特定子串開頭，或是否以某個特定子串結(jié)尾。
以前只能用String.prototype.indexOf()和RegExp.prototype.test()判斷：

"hello world".indexOf("hello")
// 0
/world$/.test("hello world")
// true

在ES6中可以這么寫

"hello world".startsWith("hello")
// true
"hello world".endsWith("world")
// true

startsWith() 和 endsWith() 還可以接收第二個參數(shù)，表示從第幾位開始檢索

"hello world".startsWith("world", 6)
// true
"hello world".endsWith("hello", 5)
// true

3) repeat()

此方法返回一個新字符串，表示將原字符串重復(fù)n次。

"hello".repeat(2)
// "hellohello"

Number 二進(jìn)制和八進(jìn)制

ES6 里可以用0b前綴表示二進(jìn)制，用0o表示八進(jìn)制

console.log(0b1100)
// 12

console.log(0o1100)
// 576

指數(shù)運(yùn)算

ES6 新增了指數(shù)運(yùn)算符 **

console.log(2 ** 4)
// 16

console.log(Math.pow(2, 4))
// 16

Number.isFinite()

Number.isFinite() 與全局函數(shù) isFinite() 的區(qū)別是，只判斷數(shù)值，所有非數(shù)值均返回false，而isFinite() 會先將非數(shù)值的值轉(zhuǎn)為數(shù)值

Number.isFinite(16)
// true
Number.isFinite("16")
// false

isFinite(16)
// true
isFinite("16")
// true

Number.isFinite(Infinity)
// false

Number.isNaN()

與 Number.isFinite() 類似，Number.isNaN() 值判斷數(shù)值，所有非數(shù)值均返回false

Number.isNaN(NaN)
// true
Number.isNaN("a")
// false
isNaN("a")
// true

Number.parseInt(), Number.parseFloat()

Number.parseInt(), Number.parseFloat()與全局函數(shù)parseInt(), parseFloat()作用相同，放到 Number 對象的靜態(tài)方法，目的是逐步減少全局性方法，使得語言逐步模塊化。

Number.isInteger()

Number.isInteger() 用來判斷一個值是否為整數(shù)。

Number.isInteger(16)
// true
Number.isInteger(16.2)
// false
Number.isInteger("16")
// false

Number.EPSILON

由于 Javascript 的浮點(diǎn)運(yùn)算不是精確的，存在誤差。Number.EPSILON 表示一個極小常量，當(dāng)浮點(diǎn)運(yùn)算的誤差小于這個常量時，就認(rèn)為浮點(diǎn)運(yùn)算結(jié)果是正確的。

0.1 + 0.2
// 0.30000000000000004

0.1 + 0.2 - 0.3 < Number.EPSILON
// true

Number.isSafeInteger()

用 Number.isSafeInteger() 函數(shù)判斷整數(shù)是否在-2^53到2^53之間，因?yàn)镴avaScript能夠準(zhǔn)確表示的整數(shù)范圍在-2^53到2^53之間。

Number.isSafeInteger(16)
// true

Number.isSafeInteger(2 ** 54)
// false

Array Array.from()

Array.from() 用于將對象轉(zhuǎn)換為數(shù)組。
例如將字符串轉(zhuǎn)為數(shù)組：

Array.from("hello")
// ["h", "e", "l", "l", "o"]

例如將DOM的NodeList轉(zhuǎn)為數(shù)組：

var elm = document.querySelectorAll("div");
Array.from(elm).forEach(function (div) {
    // do something
});

Array.from() 函數(shù)還可以接受第二個參數(shù)，用于處理數(shù)組的每個元素。

Array.from("123", (x) => x * x)
// [1, 4, 9]

Array.of()

Array.of 用于構(gòu)造一個新數(shù)組，可以取代 new Array()。因?yàn)楫?dāng) new Array() 一個參數(shù)和多個參數(shù)時，行為不一致。

new Array(3)
// [ , , ]
new Array(3, 2, 1)
// [3, 2, 1]

Array.of(3)
// [3]
Array.of(3, 2, 1)
// [3, 2, 1]

Array.observe

用于監(jiān)聽（取消監(jiān)聽）數(shù)組的變化，指定回調(diào)函數(shù)。在ES7中已被建議撤銷。

find(), findIndex()

find() 遍歷數(shù)組直到找到符合條件的元素，返回該元素，若找不到則返回undefined。findIndex() 用法跟 find() 類似，但返回值是元素的位置，若找不到則返回-1

["hello", "world", "es6"].find(function(item) {
  if(item === "world") {
    return true;
  }
});
// "world"

[1, 0, 2].findIndex(function(item) {
  if(item === 0) {
    return true;
  }
});
// 1

find()和findIndex() 還可以接收第二個參數(shù)，用于指定回調(diào)函數(shù)的 this 上下文

entries(), keys(), values()

這三個方法都返回一個遍歷器對象，用于遍歷數(shù)組。entries()用于遍歷數(shù)組鍵值對，keys()用于遍歷數(shù)組下標(biāo)，values()用于遍歷數(shù)組的值。

for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// "a"
// "b"

for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

Object Object 的簡潔表示法

直接寫變量

{x, y}
// 等同于
{
    x: x,
    y: y
}

直接寫函數(shù)

{
    say() {
        console.log("I am ES6");
    }
}
// 等同于
{
    say: function() {
        console.log("I am ES6")；
    }
}

屬性名表達(dá)式

ES6 支持在字面量定義對象時使用表達(dá)式作為屬性名。

var world = "es6";
var obj = {
    hello: 1,
    [world]: 2
};
// {hello: 1, es6: 2}

Object.assign()

Object.assign() 方法拷貝一個對象屬性到目標(biāo)對象上。

Object.assign({}, {a: 1})
// {a: 1}

Object.assign({a: 1}, {a: 2})
// {a: 2}

對于嵌套的對象，Object.assign的處理方法是替換，而不是添加。

var target = {
    a: {
        b: "hello", 
        c: "world"
    }
};
var source = {
    a: {
        b: "es6" 
    } 
};
Object.assign(target, source);
// { a: { b: "es6" } }

參考

ECMAScript 6 入門

ES6 Strings (and Unicode, ?) in Depth