ES6
---
* JavaScript語言隨着使用的人愈來愈多,ECMA語法規範:if/else
* 爲了讓js語言更適應大型應用的開發、旨在消除一些怪異的行爲javascript
### 包含內容(strict嚴格模式)
---
* 使用嚴格模式的方式:
- 在全局中或者文件中直接使用
+ `use strict`;
+ 如下的代碼就按照嚴格模式來執行
- 在函數中開啓嚴格模式
+ `function xx(){ "use strict"; }`
+ 以上函數內的代碼就執行嚴格模式,非該函數內的代碼正常模式
* 全局變量顯式聲明html
```javascript
'use strict';java
// function aa(){
// 'use strict'
// }
personName = 'jack'; //personName is not defined
console.log(personName);node
```
* 禁止使用with語句es6
```javascript
'use strict';
var person = {
name: 'jack'
};
//下面一行報錯:Strict mode code may not include a with statement
with(person) { //針對參數對象作一些操做
name = 'rose';
}
console.log(person);數組
```
* 禁止this關鍵字指向全局對象
```javascriptpromise
function aaa() {
return this; //開啓嚴格模式的時候,返回的this是undefined,之前是window
}服務器
aaa();//在ES5中沒有開啓嚴格模式返回值是window,而開啓之後進制this指向全局對象,因此是undefend
```
* 保留字
- implements, interface, package, private, protected, public, static, yieldbabel
LET關鍵字
* LET是塊級做用域,塊級就表明着{},若是沒有在{}內,就是全局的做用域
* 不存在變量類型提高
- 不會出現:無論在哪裏使用,最終都變成了全局對象
* 注意事項:
- 1:變量查找機制:和之前同樣,就近原則,若是當前做用域{}內沒有該變量的聲明,就往上級做用域查找
- 2:每一個塊內使用的是本身各自的let聲明變量
- 3:不容許同一個做用域下,還同一個名稱的聲明
* let就是爲了解決變量會自動提高成全局變量的一個問題異步
嚴格模式和關鍵字的區別
* 嚴格模式的開啓,影響着代碼的限制(咱們使用上的不一樣)
* 關鍵字對代碼的功能的加強(效果上的不一樣)
* 一般使用ES6,就建議開啓嚴格模式,避免有依賴報錯
const關鍵字
* 也是塊級做用域
* 注意點:
- 1:必須一次性完成初始化,聲明+賦值
- 2: 不可以二次賦值:`const p = {}; p='abc';//不能`
+ 能夠給對象掛載屬性,不會改變對象的指向
* `const p = {}; p.name= 'abc';//能夠`
小總結
* 嚴格模式
- 約束之前代碼的方式的一些限制
+ 必須顯示聲明全局變量(先聲明後使用,不然報錯)
- 禁止this指向全局對象,若是全局函數中return this;返回的是undefined
- with在ES5中是根據傳入的對象才作相關操做,ES6嚴格模式下是禁止的
* Let:塊級做用域,若是再也不{} 下就是全局的變量,在{}下就屬於本身塊的聲明
- 查找機制: 就近原則,當前塊內沒有聲明就向上級做用域查找
- 不存在變量類型提高(不會自動提高成全局變量)
- 使用細節:
- 同一個塊內不容許同名變量的聲明
* const
- 塊級做用域,不存在變量類型提高
- 必須一次性完成初始化,聲明+賦值
- 不容許二次賦值,能夠掛載屬性
模板字符串(字符串擴展)
* 使用方式:
- tab鍵的上方,反引號包括起來`字符串擴展`
* 模板字符串支持換行符的輸出
* 能夠嵌入對象或者變量`${對象.屬性名}`
* 瞭解:能夠支持原生字符串的輸出 `String.raw`hello\r\nworld``
擴展ES6函數
* 字符串操做
- 字符串對象.includes(參數);
+ 判斷調用的字符串對象是否包含參數字符串,返回值Boolean
- 字符串對象.startsWith(參數);
+ 判斷調用的字符串對象是否以參數字符串開頭,返回bool
- 字符串對象.endsWith(參數);
+ 判斷調用的字符串對象是否以參數字符串結尾,返回bool
- 字符串對象.repeat(num);//瞭解
+ 返回調用字符串對象的num次字符串內容
* 數學操做
- Math.trunc(float); //返回截取掉小數位的整數部分
+ Math.trunc(3.1415926);// 3
* 數組操做
- 在數組中查找指定元素
+ 數組對象.find(callback);
+ callback:參數列表: ele元素,index下標,arr原數組
+ 注意:該函數的返回值同過回調函數內部的return來作控制
+ 返回值:返回元素的值,若是沒有查找到返回undefined
* 獲取數組
+ 獲取數組Array.of(3,3,5); //瞭解就能夠,返回一個數組[3,3,5]
+ 經過對象參數獲取數組` Array.from({length:3,1:'abc','2':'def'});`
+ length是必須的屬性,其餘的屬性能夠是1或者'1' -->
```javascript
let citys = ['北京', '上海', '廣州'];
//找到上海元素
let city = citys.find(function(ele, index, arr) {
console.log('ele', ele);
return '上海' === ele; //結束遍歷並返回元素
});
console.log(city);
// 在數組中查找元素的下標
// 返回的是指定元素的下標,若是沒有查找到元素返回-1
let citys = ['北京', '上海', '廣州'];
// //找到上海元素
let index = citys.findIndex(function(ele, index, arr) {
console.log('ele', ele);
return '上海' === ele; //結束遍歷並返回元素
});
console.log(index);
```
箭頭函數
* 讓this再也不多變
- 箭頭函數自己是沒有this的,在聲明時箭頭函數會根據上層函數的this進行綁定,再也不是根據調用時的this去改變了
* 沒有參數
- `()=>1;` //沒有參數返回1
* 一個參數
- `num => num;` //這種狀況能夠省略參數的括號
* 多個參數
- `(n1,n2) => n1+n2;` //返回n1+n2
* 多行代碼
- `(n1,n2) => {//code.....} `
* 箭頭函數本沒有arguments,會根據聲明綁定上一次function拿到其中的arguments
* 箭頭函數不能夠用做構造函數
#### ESpromise
* 承諾,異步操做
* readyState狀態
```
readyState
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器鏈接已創建
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒
status
200: "OK"
404: 未找到頁面
參考資料
* ES6參考資料:http://es6.ruanyifeng.com/
* babel參考資料: http://www.ruanyifeng.com/blog/2016/01/babel.html
* node學習 http://cnodejs.org/getstart 《Node.js 包教不包會》
#### ES6轉換ES5