ES6基本語法入門

一、用let代替var聲明變量

    ES5中，我們可以在代碼中任意位置聲明變量，甚至可以重寫已經聲明的變量，ES6引入了一個let關鍵字，它是新的var。

let language = 'javascript';
let language = 'zj'; //此處會報錯
console.log(language);

 

 

 

因為同一作用域中let已經聲明過了，所以再次聲明會報錯

 

二、常量

ES6還引入了const關鍵字，和let用法一樣，唯一的區別就是，const變量是只讀的

 

三、模板字符串拼接

用反引號拼接字符串

let language = 'javascript';
console.log(language);

let lan = `此處寫字符串 ${language}`;
console.log(lan) //此處寫字符串 javascript

 

只要把變量寫在${}里面就好了；模板字符串也可以識別空格，可可以用於多行的字符串，再也不用寫\n了。

 

四、箭頭函數

let circle = (x) => {
const PI = 3.14;
let area = PI * r * r;
return area;
}

 

可以省略掉關鍵字function，如果函數只有一條語句，可以連關鍵字都省略掉

let circle2 = (x) => 3.14 * r * r;

 

五、函數參數的默認值

let sum = (x = 1, y = 2, z = 3) => x + y + z;
console.log(sum());

 

可以聲明函數參數的默認值

 

六、聲明展開和剩余參數

ES6展開操作符 ... 

let params = [1,2,3];
console.log(...params); //1 2 3

let pro = {
one:0,
two:1,
three:2,
};
console.log({...pro}); //{ one: 0, two: 1, three: 2 }

 

七、數組解構

   

 var [a, b] = ['x', 'y'];

 

以上代碼和下面的代碼效果是一樣的

a = 'x';

b = 'y';

數組解構也可以進行值的互換

[x, y] = [y, x];

 

八、使用面向對象biancheng

//ES5語法
function Book (title, page, isbn) {
this.title = title;
this.page = page;
this.isbn = isbn;
}
Book.prototype.printTitle = function () {
console.log(this.title);
};

 

//ES6語法
class Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}
}

 

ES6只需要使用class關鍵字，聲明一個有constructor函數和諸如printIsbn等其他函數的類；

我們可以用extends擴展一個類並繼承它的行為

//ES6語法
class ITDesk extends Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}

}

更多es6細節請看： http://es6.ruanyifeng.com/#docs/array