ECMAScript6 ES6語法

　　2015年6月份，在es5的基礎上擴展了很多新的功能， 稱為es6/es2015， ES7將在2017年6月份出來。我們要學習的僅僅只是es6中的部分常用新功能，這些功能在使用的時候一定要慎重，因為他們中有一部分js代碼在部分瀏覽器不能兼容，但是所有寫在服務器端的代碼基本上都支持ES6的寫法。

 

1.0開啟嚴格模式

如何開啟：

如果需要在函數中開啟，在函數的第一行加上這段字符串”use strict”，如果需要整js代碼中開啟，在js第一行加上這段字符”use strict”。

;這是es5中的一個特性，設立"嚴格模式"的目的，主要有以下幾個：

"use strict";//開啟了嚴格模式

A.消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

B.消除代碼運行的一些不安全之處，保證代碼運行的安全；

C.提高編譯器效率，增加運行速度；

D.為未來新版本的Javascript做好鋪墊。

注意：

1）正常模式下可以使用直接使用未聲明的變量，但是嚴格模式不行

//1.0嚴格模式下變量必須定義以后才能使用
 name = "jhon";
 console.log(name);

2）正常模式下可以在一個函數中傳入兩個同名參數，但是嚴格模式下不行

//2.0嚴格模式下方法 不能定義多個同名參數
 function fn(aa,aa,bb){
   return aa + aa + bb;
 }
 fn("11","22","33");

 

2.0定義變量：let （類似於var）

在javascript一直有一個bug式的取在var：

1）var聲明的變量會有變量提升

console.log(name);//undeinfed
var name = "jhon";

2）var 沒有塊級作用域

var name = "jhon";
{
   var name = "tom";
}
console.log(name);//tom
3）var 可以多次重復定義一個變量
var name = "jhon";
var age = 18;
var name = "tom";
var name = "rose";
console.log(name);

這些聲明在后台開發語言中是絕對不被允許的，為了規范變量的聲明es6推出新的關鍵字let代替var申明變量，let的特點：

1）let聲明的變量不會有變量提升，只有在前面定義了在后面才能使用

console.log(name);//報錯
let name = "jhon";

2）let存在塊級作用域（當大括號結束時，塊級作用域中的變量都會被銷毀）

let name = "jhon";
{
   let name = "tom";
}
console.log(name);//jhon

3）let不能多次重復定義一個變量

let name = "jhon";
let age = 18;
let name = "tom";
console.log(name);

應用小案例：給多個li標簽設置點擊輸入文本內容事件。

注意點：使用let最后加上”use strict”關鍵字

 

3.0定義常量const

常量：常量指的是不會改變的數據（Window Linux Unix）

作用：一旦申明一個常量：

1）值不能再改變

"use strict";
 const banben = "window";
banben = "linux";//會報錯

2）常量具有塊級作用域

{
   const banben = "window";
}
console.log(banben);//報錯

3）不要在塊中申明常量

4）沒有變量提升，先聲明后使用

console.log(banben);//報錯
const banben = "window";

5）不可以算不算申明同名的常量

const banben = "window";
const banben = "linux";//報錯

6）一定要賦初始值，否則報錯

const banben;
banben = "window";//報錯
console.log(banben);

7）如果聲明的是對象，對象的地址不能改變，但是可以改變其內部的屬性。

const obj = {
   name: "jhon",
   age: 18
};
console.log(obj.name);//jhon
obj.name = "tom";
console.log(obj.name);//tom

應用場景：

var path = require('path');
var path = "123";

在nodejs中加載完模塊時，模塊的指針一般是不會改變的，可以使用常量來接收，可以防止將來在導入模塊時多次模塊。

const path = require('path');

 

4.0字符串的擴展：

問題：如果要判斷字符串”hello word”中是否存在”word”，用字符串中的方法只有indexOf：

var str = "hello word";
 var result = str.indexOf("word")
 console.log(result);//6

在ES6中又為我們提供了其它的方法：

Includes()：返回布爾值，用於判斷字符串是否包含某些字符

var bool = str.includes('word');
console.log(bool);//true

startsWith(str[,num])：返回布爾值，用於判斷字符串是否以某些字符開頭

var bool = str.startsWith("hello");
console.log(bool);//true
//2.1給這個方法傳入兩個參數
 var bool = str.startsWith("word",6);
 console.log(bool);//true

endsWith(str[,num])：返回布爾值，用於判斷字符串是否以某些字符結尾

var bool = str.endsWith("d");
console.log(bool);//true
//3.1給這個方法傳入兩個參數
 var bool = str.endsWith('o',5);
 console.log(bool);

repeat(num)：傳入一串數字，將來這個方法會將字符串重復數字對應的次數

var str1 = "我愛我家\n";
 console.log(str1.repeat(10));

注意：

A.傳入的數字可以是正小數，那么將來這個數字會被向下取整

console.log(str1.repeat(2.6));

B.不能傳入負數，會報錯

console.log(str1.repeat(-3));

C.可以傳入一個字符串類型的數值

console.log(str1.repeat("12a"));

 

5.0模板語法：`模板字符串`

問題：通過對象完成一個自我介紹的方法：自我介紹中包含對象的年齡，姓名，性別，愛好，體重。

"use strict";
var obj = {
   name: "zhuiming",
   age: 18,
   sex: "男",
   hobby: "女",
   weight: 126,
   height: 180
};
 var str = "大家好，我叫" + obj.name + ",今年" + obj.age + ",性別" + obj.sex + ",愛好" +                     obj.hobby +".";
 console.log(str);

但是字符串的拼接太麻煩了，有沒有簡單的方法來解決這個問題呢，有的，模板字符串就可以了

結構：`模板內容${code}`;

1)定義一個模板，並且給模板加一些占位，注意占位有自己的格式：${}
var temp = `大家好，我叫${obj.name}，今年${obj.age}，性別${obj.sex}，愛好${obj.hobby}`;
//2)將模板中的一些變量賦值
console.log(temp);

注意：code可以是變量，可以是方法名，還可以是js表達式。

//1.0可以放變量
 let name = "jhon"
 let temp1 = `我叫${name}`;
 console.log(temp1);
//2.0可以放方法
 function getName(){
   return "jhon";
 }
 let temp2 = `我叫${getName()}`;
 console.log(temp2);
//3.0可以放表示式
let a = 1;
let b = 2;
let temp3 = `a + b 的和是${a + b}`;
console.log(temp3);

 

6.0箭頭函數:()=>{}

js中使用匿名函數的位置太多了，固定結構為function(){}，為了方便書寫，es6規定了一種新的寫法來簡化匿名函數：去掉function改為=>,結構為()=>{}

//箭頭函數的演變規則

//箭頭函數的演變規則
var arr = [2,3,5,1,24];
//最原始的匿名函數
 $(arr).each(function(index,item){
   console.log(item);
 });

演變過程：

//改造一：匿名函數中的funtion關鍵字我們可以省略，參數與方法體之間中=>
 $(arr).each((index,item)=>{console.log(item);})
//改造二：如果方法體中的代碼只有一句我們可以去掉{},並且代碼結尾的分號要去掉
 console.log("_--------------------------------_");
 $(arr).each((index,item)=>console.log(item));
//改造三：如果匿名函數中的參數只有一個可以將參數的括號去掉
 $(arr).each(index=>console.log(arr[index]));
//改造四：如果匿名函數中有返回值，並且只有一句代碼，我們可以去掉return關鍵字。
 $(arr).sort(function(m,n){
   return n - m;
 });
 $(arr).sort((m,n)=>n-m);

總結：

參數特點：

1)參數只有一個，可以去掉()

2)參數多個，不能去掉

3)參數沒有，不能去掉

方法體特點：

1)方法體只有一句，可以省略{}

2)方法體只有一句，如果有return，也可以省略return

3)如果有多句代碼，不能省略

箭頭函數沒有固定的寫法，它是根據當前方法的參數和方法的返回值來的。

注意：

1）箭頭函數中的this指向問題：

   箭頭函數沒有自己的this，函數體內部寫的this,會順着作用域去找最近真實存在的this。

function aa(){
//this.b=1;
setTimeout(()=>{
//this.b=2;
console.log(this.b);
});
}
aa();

2）箭頭函數內部的this是定義時所在的對象，而不是使用時所在的對象，並且不會改變。

function foo(){
   this.name = "jhon";
   return ()=>{
      console.log(this.name);
   }
}
var fo = foo();//返回的是一個函數對象
foo.name = "tom";
fo();//jhon 說明一旦箭頭函數聲明完成以后，this指向不會發生改變

3）箭頭函數不能作為構造函數：

var foo = function(name,age){
   this.name = name;
   this.age = age;
}
var foo = (name,age)=>{
   this.name = name;
   this.age =age;
}
var obj = new foo("jhon",18);

4)箭頭函數中不存在arguments，箭頭函數中的argument指向的是外層的arguments.

function foo(){
   setTimeout(()=>{
      console.log(arguments);
   })
}
foo("aa","bb","cc");//{ '0': 'aa', '1': 'bb', '2': 'cc' }