ES6新增內容總結

ES6新增內容有：1，模塊化思想。2，關於變量let和const。3，解構賦值。4，字符串的擴展。5，函數的擴展。6，箭頭函數。7，繼承apply的用法

以下就是詳解：

1：模塊化思想

　　非模塊化有命名的沖突，文件依賴的缺點，而模塊化思想解決了這樣的問題，一個文件即一個模塊模塊的導出，通過exports 和module.exports。

export：

在一個模塊文件里可以有多個export用於暴露模塊的接口，但只能有一個export default用於暴露模塊的默認接口，例如：

export const myStr = 'hello world'
export const myNum = 1000
export const myBoole = false
export default {
id: 1,
title: 'this is title',
}

import：

引入模塊的時候通過export暴露的接口需要用{}包起來，通過export暴露的接口則不用，例如：

// 引入默認輸出對象
import defaultObj from './test.js'
// 引入多個輸出變量
import {myStr, myNum, myBoole} from './test.js'
// 同時引入默認輸出對象和多個輸出變量
import defaultObj {myStr, myNum, myBoole} from './test.js'

var module=require('filePath');

• 模塊文件的后綴： .js .json .node

  加載優先級（不寫后綴的情況下）.js->.json->.node

2.關於變量let和const總結

　　let聲明的變量不存在預解析，在塊級作用域內不允許重復聲明，在塊級作用域外不可訪問let和const聲明的變量。const是用來聲明常亮，不允許重新賦值，聲明時必須初始化

3.解構賦值

/*變量的結構賦值*/
//數組的結構賦值
let [a,b,c,d]=[1,2,3,5]; console.log(a,b,c,d); /*對象的結構賦值*/
/*let {name,age}={name:'小明',age:20}; console.log(name,age);*/
// 對象屬性別名
let {name:firstName,age}={name:'小明',age:20}; console.log(firstName,age); let {sin,cos}=Math; console.log(typeof sin); console.log(typeof cos); /*字符串的結構賦值*/ let[h,g,j]='jefiwi'; console.log(h,g,j);

4.字符串的擴展
　　includes()//判斷字符串是否包含字符串，第一個參數要判斷的字符串，第二個參數從索引為多少開始。舉個簡單的例子

var arr = "abcdefghi"; console.log(arr.includes("j")) //false
console.log(arr.includes("d")) //true
console.log(arr.includes("d",5)) //false
console.log(arr.includes("d",3)) //true

　　第二個參數可以不寫，默認為0
　　還有就是模板字符串
　　　　假如說現在有一個列表，列表內容是循環得出的，這個時候我們就要在循環內部寫結構標簽

var arr = ['11','22','33']; var str = ""; for(var i = 0;i<arr.length;i++){ str +=` <li>${arr[i]}</li>
 ` }; console.log(str) /* *<li>11</li> *<li>22</li> *<li>33</li> */

這時，我們就可以把 str，放在我們想要的地方了

5.函數的擴展
1.默認值. 2.參數解構賦值，3.rest參數 4  ... 擴展符.

//默認值
function print(a=10,b=2,c=1){  3     let result=a+b+c;  4  console.log(result);  5 }  6 print();  7 //解構賦值
function foo({name='小明',age=18}={}){  9  console.log(name,age); 10 } 11 foo(); 12 foo({name:'小紅',age:20}); 13 //rest參數
function restParam(a,b,...param){ 15  console.log(a); 16  console.log(b); 17  console.log(param); 18 ​ 19 } 20 restParam(1,2,3,56,6,9,45,12); 21 1
2
[ 3, 56, 6, 9, 45, 12 ] 24 //...擴展符 在函數調用時將數組轉換為單個參數。
function restParam(a,b,c,d,e){ 26     console.log(a+b+c+d+e); 27 ​ 28 } 29 let arr=[20,30,45,56,30] 30 restParam(...arr); 31 //合並數組
let arr1=[12,5]; 33 let arr2=[45,89]; 34 let arr3=[...arr1,...arr2] 35 ​

 

6.箭頭函數

    let foo=(a,b)=>{ 2         console.log(a+b) 3  }; 4     foo(10,20) 5     //以上寫法就相當於
    function foo(a,b){ 7         return console.log(a+b) 8  }; 9     foo(10,20)

箭頭函數注意事項

1.this取決於函數的定義，而不是調用。
2.箭頭函數不用new關鍵字
3.箭頭函數不可以使用arguments獲得參數列表，可以使用rest參數代替


7.apply

 

語法	定義	說明
call(thisObj，Object)	調用一個對象的一個方法，以另一個對象替換當前對象。	call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象.如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj
apply(thisObj，[argArray])	應用某一對象的一個方法，用另一個對象替換當前對象。	如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數