guyoung：使用ES6新特性開(kāi)發(fā)微信小程序（2）
|
原文鏈接：http://mp.weixin.qq.com/s?__biz=MzI0ODU5Mzg0NA==&mid=2247483659&idx=1&sn=913e99fbc8ee7840c2ee71caa7de5d86&chksm=e99f2dd0dee8a4c6368924a3e392cffb4ae65d635ea6e62479aed6458aac7aaf477aa88e0f65#rd Template Literals（模板對(duì)象）
ES6中的模板字符串(Template String)是一種能在字符串文本中內(nèi)嵌表達(dá)式的字符串字面量(String Literal)。
let firstName = 'Zhang',
lastName = 'San';
let fullName =
`${firstName} ${lastName}`;
console.log(fullName); // 輸出：Zhang San
let add = function(x, y) {
return `${x} + ${y} = ${x + y}`;
};
console.log(add(10, 5)); // 輸出：10 + 5 = 15
與普通字符串不同的是，模板字符串可以多行書(shū)寫(xiě)。
console.log(`
<div>
Support for multiple lines with backticks
</div>`);
模板字符串中所有的空格、新行、縮進(jìn)，都會(huì)原樣輸出在生成的字符串中。 Extended Literals（字面量的擴(kuò)展）ES6增加了兩個(gè)新的數(shù)字進(jìn)制標(biāo)識(shí)符，第二個(gè)字母為b來(lái)表示二進(jìn)制，第二個(gè)字母為o來(lái)表示八進(jìn)制。
console.log(0b111110111 === 503) // 輸出: true
console.log(0o767 === 503) // 輸出: true
ES6更好的支持Unicode，支持?jǐn)U展字符串和正則表達(dá)式的Unicode。 Enhanced Regular Expression（增強(qiáng)的正則表達(dá)式）ES6對(duì)正則表達(dá)式添加了u修飾符，含義為“Unicode模式”，用來(lái)正確處理大于\uFFFF的Unicode字符。也就是說(shuō)，會(huì)正確處理四個(gè)字節(jié)的UTF-16編碼。
console.log(/^\uD83D/u.test('\uD83D\uDC2A')); // 輸出: true
console.log(/^\uD83D/.test('\uD83D\uDC2A')); // 輸出: false
上面的代碼中，\uD83D\uDC2A是一個(gè)四字節(jié)的UTF-16編碼，代表一個(gè)字符。不加“u”，會(huì)按 ES5 將其識(shí)別為2個(gè)字符，加了“u”之后，會(huì)按 ES6 將其正確識(shí)別為一個(gè)字符。 ES6對(duì)正則表達(dá)式添加了y修飾符，叫做“粘連”（sticky）修飾符。y修飾符的作用與g修飾符類(lèi)似，也是全局匹配，后一次匹配都從上一次匹配成功的下一個(gè)位置開(kāi)始。不同之處在于，g修飾符只要剩余位置中存在匹配就可，而y修飾符確保匹配必須從剩余的第一個(gè)位置開(kāi)始。
// y修飾符
var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
// 第一次匹配都成功
console.log(r1.exec(s)[0]); // 輸出: aaa
console.log(r2.exec(s)[0]); // 輸出: aaa
console.log(r1.exec(s)[0]); // 輸出: aa
// 剩余部分第一個(gè)位置是下劃線，不匹配
console.log(r2.exec(s)); // 輸出: null
ES6 為正則表達(dá)式新增了sticky屬性，用于表示正則對(duì)象是否設(shè)置了y修飾符。
var r = /hello\d/y;
console.log(r.sticky); // 輸出: true
ES6 為正則表達(dá)式新增了flags屬性，返回正則表達(dá)式的修飾符。
console.log(/abc/ig.flags); // 輸出: gi
Enhanced Object Literals（增強(qiáng)的對(duì)象字面量）ES6新增屬性的簡(jiǎn)潔表示法，允許直接寫(xiě)入變量和函數(shù)，作為對(duì)象的屬性和方法。這樣的書(shū)寫(xiě)更加簡(jiǎn)潔。
function f1(x, y) {
return { x, y };
}
除了屬性簡(jiǎn)寫(xiě)，ES6方法也可以簡(jiǎn)寫(xiě)。
function f2() {
return {
hello() {
return "Hello!";
}
}
}
ES6新增屬性名表達(dá)式，允許字面量定義對(duì)象時(shí)，用表達(dá)式作為對(duì)象的屬性名，即把表達(dá)式放在方括號(hào)內(nèi)。
function f3() {
return {
foo: true,
['a' + 'bc']: 123
}
}
function getCar(make, model, value) {
return {
make,
model,
value,
['make' + make]: true,
depreciate() {
this.value -= 2500;
}
};
}
let car = getCar('Kia', 'Sorento', 40000);
console.log(car); // 輸出: Object {make: "Kia", model: "Sorento", value: 40000, makeKia: true}
car.depreciate();
console.log(car.value); // 輸出: 37500
Destructuring Assignment（解構(gòu)賦值）ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）。 解構(gòu)賦值允許你使用類(lèi)似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量。這種賦值語(yǔ)法極度簡(jiǎn)潔，同時(shí)還比傳統(tǒng)的屬性訪問(wèn)方法更為清晰。 數(shù)組的解構(gòu)賦值，可以從數(shù)組中提取值，按照對(duì)應(yīng)位置，對(duì)變量賦值。
let numbers = [10, 20];
let [a, b] = numbers;
console.log(a, b); // 輸出: 10 20
對(duì)象的解構(gòu)賦值。
let position = { lat: 42.34455, lng: 17.34235 };
let { lat, lng } = position;
console.log(lat, lng); // 輸出: 42.34455 17.34235
字符串的解構(gòu)賦值，字符串被轉(zhuǎn)換成了一個(gè)類(lèi)似數(shù)組的對(duì)象。
const [c1, c2, c3, c4, c5] = 'hello';
console.log(c1, c2, c3, c4, c5); // 輸出: h e l l o
函數(shù)參數(shù)的解構(gòu)賦值
function add([x, y]) {
return x + y;
}
console.log(add([1, 2])); // 輸出: 3
|
