ES6系列1 基礎入門

es5 只有全域性作用域和函式作用域（例如，我們必須將**包在函式內來限制作用域），這導致很多問題：

es6中允許使用反引號 `` 來建立字串,可以嵌入變數，也可以原生輸出.模板字串是為了解決使用+號拼接字串的不便利而出現的。它的功能非常強大，但是我們大多數時候使用它則非常簡單。

（1）es5輸出

（2）es6輸出

es6 允許使用「箭頭」（=>）定義函式。它主要有兩個作用：縮減**和改變this指向，接下來我們詳細介紹：

// es5
var fn = function(a, b) 
// es6 箭頭函式寫法，當函式直接被return時，可以省略函式體的括號
const fn = (a, b) => a + b;

// es5
var foo = function() 
// es6
const foo = () =>

多個引數記得加括號

const double6 = (number,number2) => number + number2;

如果箭頭函式的**塊部分多於一條語句，就要使用大括號將它們括起來，並且使用return語句返回。

const double = (number,number2) =>

由於大括號被解釋為**塊，所以如果箭頭函式直接返回乙個物件，必須在物件外面加上括號，否則會報錯。

// 報錯
let gettempitem = id => ;
// 不報
let gettempitem = id => ();

const team = 隸屬於$小組`;    // this不知道該指向誰了
})}}
console.log(team.teamsummary());//["henry隸屬於undefined小組", "elyse隸屬於undefined小組"]

teamsummary函式裡面又嵌了個函式，這導致內部的this的指向發生了錯亂。那如何修改：

方法一: let self = this

const team = 隸屬於$小組`;
})}}
console.log(team.teamsummary());//["henry隸屬於es6小組", "elyse隸屬於es6小組"]

方法二: bind函式

const team = 隸屬於$小組`;
}.bind(this))
}}console.log(team.teamsummary());//["henry隸屬於es6小組", "elyse隸屬於es6小組"]

方法三: 箭頭函式

const team = 隸屬於$小組`;
})}}
console.log(team.teamsummary());//["henry隸屬於es6小組", "elyse隸屬於es6小組"]

解析結構是一種全新的寫法，我們只需要使用乙個例子，大家就能夠明白解析結構到底是怎麼一回事兒。

// 首先有這麼乙個物件
const props =

當我們想要取得其中的2個值：loading與clicked時：

// es5
var loading = props.loading;
var clicked = props.clicked;
// es6
const  = props;
// 給乙個預設值，當props物件中找不到loading時，loading就等於該預設值
const  = props;

正是由於解析結構大大減少了**量，因此它大受歡迎，在很多**中它的影子隨處可見。另外，陣列也有屬於自己的解析結構。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;
// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

陣列以序列號一一對應，這是乙個有序的對應關係。

而物件根據屬性名一一對應，這是乙個無序的對應關係。

根據這個特性，使用解析結構從物件中獲取屬性值更加具有可用性。

屬性簡寫

//傳統寫法
var x = 2, y = 3,
o = ;
//es6簡潔寫法
var x = 2, y = 3,
o = ;

方法簡寫

//傳統寫法
var o = ,
y: function() 
}//es6簡潔寫法
var o = ,
y() 
}

計算屬性名計算屬性名：物件中乙個或多個屬性名是通過某個表示式計算得來的。

var prefix = "user_";
var o = 
};o[prefix + 'foo'] = function () 
o[prefix + 'bar'] = function ()

計算屬性名也可以作為簡潔方法的名稱出現：

var o = 
}

之前我們不能直接為函式指定預設引數，因此很多時候為了保證傳入的引數具備乙個預設值，我們常常使用如下的方法：

function add(x, y) 
console.log(add()); // 50

這種方式並不是沒有缺點，比如當我傳入乙個x值為false，這個時候任然會取到預設值，就不是我們的本意了。

來看看es6的預設值寫法：

function add(x = 20, y = 30) 
console.log(add());

在實際開發中給引數新增適當的預設值，可以讓我們對函式的引數型別有乙個直觀的認知。

const buttongroupprops = 
export default function buttongroup(props = buttongroupprops)

ES6系列 ES6簡介

2015年6月17日，ecmascript的第六個版本正式發布，該版本正式名稱為ecmascript 2015，但通常被稱為ecmascript 6或者es6。瀏覽器對es6的支援情況 es6主要應用於node.js，如果想用在瀏覽器中，就需要使用轉碼器將es6 轉成es5 這意味著，可以用es6...

es6 快速入門系列解構

其他章節請看 es6 快速入門系列我們經常使用陣列或物件儲存資料，然後從中提取出相關資料資訊以前開發者為了從物件或陣列中提取出特定資料並賦值給變數，編寫了很多重複的就像這樣 function demo1 obj demo1 es6引入新特性解構。來解決上面的問題，請看下面 function...

es6基礎入門篇

1 let 允許重複賦值，但不允許重複宣告變數 2 const 宣告常量，不允許重複宣告，也不允許重複賦值 3 字串 1 string.fromcharcode 編碼能讓編碼轉成字元示例，統計瀏覽器能支援多少個中文字元 let name for let i 0x4e00 i 0x9fa5 i c...

ES6系列1 基礎入門

ES6系列 ES6簡介

es6 快速入門 系列 解構

es6基礎入門篇

相關推薦

es6 快速入門系列解構