小程序模板網(wǎng)

guyoung:使用ES6新特性開發(fā)微信小程序(1)

發(fā)布時(shí)間:2018-04-08 11:56 所屬欄目:小程序開發(fā)教程
原文鏈接:http://mp.weixin.qq.com/s?__biz=MzI0ODU5Mzg0NA==&mid=2247483658&idx=1&sn=5461f829c6bca653d2c1aea04dbf924d&chksm=e99f2dd1dee8a4c7113906a7b9b345c96dfca401e40bbd44e04e0dc70913099cfa48a906a11c#rd

ECMAScript 6(簡(jiǎn)稱ES6)是JavaScript語言的最新標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的,所以又稱ECMAScript 2015。
微信小程序支持絕大部分ES6的新增特性。

Constants(常量)

ES6新增了const關(guān)鍵字,用來聲明常量,一旦聲明,常量的值就不能改變了。
const PI = 3.141593;
console.log(PI);

PI = 3; // 報(bào)錯(cuò): Uncaught TypeError: Assignment to constant variable.

const PI = 3.1; // 報(bào)錯(cuò): Uncaught SyntaxError: Identifier 'PI' has already been declared


const只在聲明所在的塊級(jí)作用域內(nèi)有效。

Scoping(作用域)

ES6新增了let關(guān)鍵字,用來聲明變量,但聲明的作用只在代碼塊內(nèi)有效。

{
    let a = 10;

    var b = 1;

}

console.log(a); // 報(bào)錯(cuò): Uncaught ReferenceError: a is not defined

console.log(b); // 輸出: 1
上面代碼在代碼塊之中,分別用let和var聲明了兩個(gè)變量。然后在代碼塊之外調(diào)用這兩個(gè)變量,結(jié)果let聲明的變量報(bào)錯(cuò),var聲明的變量返回了正確的值。這表明,let聲明的變量只在它所在的代碼塊有效。
for (let i = 0; i < 5; i++) {
    console.log(i);

}

console.log(i) // 報(bào)錯(cuò): ReferenceError: i is not defined


上面代碼的計(jì)數(shù)器i,只在for循環(huán)體內(nèi)有效。

let為JavaScript新增了塊級(jí)作用域。
function test() {
    let x = 1;

    let y = 2;

    {

        let x = 10;

        let y = 20;

    }

    console.log(x, y);

}

test(); // 輸出: 1 2
上面的函數(shù)有兩個(gè)代碼塊,都聲明了變量x, y,運(yùn)行后輸出1 2。這表示外層代碼塊不受內(nèi)層代碼塊的影響。如果使用var定義變量n,最后輸出的值就是10 20。

Arrow Functions(箭頭函數(shù))

箭頭函數(shù)是ES6在語法上提供的一個(gè)很好的特性,其特點(diǎn)有:

* 語法更為簡(jiǎn)潔了。
* 文法上的固定this對(duì)象。

一個(gè)參數(shù)
let square = (x) => x * x;
console.log('5 * 5 = ', square(5)); // 輸出: 5 * 5 =  25


多個(gè)參數(shù)
let add = (x, y) => x + y;    
console.log('2 + 3 = ', add(2, 3)); // 輸出: 2 + 3 =  5


 
let total = () => square(add(5, 3));

console.log(

    '(5 + 3)*(5 + 3) = ', total()); // 輸出: (5 + 3)*(5 + 3) =  64


數(shù)組遍歷
 
var array = [1, 2, 3];

array.forEach(v => console.log(v)); // 輸出: 1 2 3


var bob = {
    _name: "Bob",

    _friends: ['Tom', 'Jerry'],

    printFriends() {

        this._friends.forEach(f =>

            console.log(this._name + " knows " + f));

    }

}

bob.printFriends(); // 輸出: Bob knows Tom Bob knows Jerry



Extended Parameter Handling(參數(shù)的擴(kuò)展)

允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值,即直接寫在參數(shù)定義的后面。

function logName(name = 'Unknown') {
    console.log('Name: ', name);

}

logName(); // 輸出:Unknown

logName('JavaScript'); // 輸出:JavaScript


Rest不定參數(shù)(用"...."表示)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)。
 
function add(...numArray) {

    let sum = 0;

    for (let num of numArray) {

        sum += num;

    }

    return sum;

}

console.log(add(1, 2, 3)); // 輸出:6

console.log(add(1, 2, 3, 4, 5)); // 輸出:15


Spread操作符和Rest不定參數(shù)一樣,都使用 "..." 表示,Spread操作符允許我們將數(shù)組中的參數(shù)一個(gè)一個(gè)傳入函數(shù)中。
function add(x, y, z) {
    return x + y + z;

}

console.log(add(...[1, 2, 3])); // 輸出:6

console.log(add(...[3, 4, 5])); // 輸出:12


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/23155.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×