面試之ES6你都知道哪些呢(詳細實例展示）

1、export和import
1）、導入的時候有沒有大括號的區別是什麼

• 當用export default people導出時，就用 import people 導入（不帶大括號）
• 一個文件裏，有且只能有一個export default。但可以有多個export。
• 當用export name 時，就用import { name }導入（記得帶上大括號）
• 當一個文件裏，既有一個export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age }
• 當一個文件裏出現n多個 export 導出很多模塊，導入時除了一個一個導入，也可以用import * as example

2 )使用
import和export命令只能在模塊的頂部，不能在代碼塊之中。

//導入部分
//全部導入
import Person from './example'
 
//將整個模塊所有導出內容當做單一對象，用as起別名
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())
 
//導入部分
import { name } from './example'
 
//導出部分
// 導出默認
export default App
 
// 部分導出
export class User extend Component {};

2、Promise
1）、Promise是異步編程的一種解決方案，將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。

它有三種狀態，分別是pending-進行中、resolved-已完成、rejected-已失敗。改變狀態的方式只有一種即異步的結果：如果成功狀態由padding——>fulfilled；否則狀態由padding——>rejected。無法提供其他方式改變狀態。
2）、Promise 構造函數包含一個參數和一個帶有 resolve（解析）和 reject（拒絕）兩個參數的回調。在回調中執行一些操作（例如異步），如果一切都正常，則調用 resolve，否則調用 reject。對於已經實例化過的 promise 對象可以調用 promise.then() 方法，傳遞 resolve 和 reject 方法作爲回調。then()方法接收兩個參數：onResolve和onReject，分別代表當前 promise 對象在成功或失敗時。
理解: 異步的結果如果是resolved就會執行promise實例.then()方法第一個回調函數參數；如果是rejected就會執行.then方法的第二個回調函數參數，並分別把前面resolve和reject回調函數的參數傳遞給它們。
3）、Promise.catch()方法用於指定發生錯誤時的回調函數，最好是在.then()的鏈式調用最後調用一下此方法來捕獲異常。它的返回值仍然是個Promise對象。如果異步操作拋出錯誤，狀態就會變爲rejected，就會調用catch方法指定的回調函數，處理這個錯誤。另外，then方法指定的回調函數，如果運行中拋出錯誤，也會被catch方法捕獲。
4)、Promise.finally()方法用於指定不管 Promise 對象最後狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。不接受任何參數，這意味着沒有辦法知道，前面的 Promise 狀態到底是fulfilled還是rejected。這表明，finally方法裏面的操作，應該是與狀態無關的，不依賴於 Promise 的執行結果。finally本質上是then方法的特例
5）Promise.all()方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例

const p = Promise.all([p1, p2, p3])

• p1、p2、p3都爲Promise實例，如果不是調用Promise.resolve將它們轉成Promise實例。
• p的狀態由p1，p2，p3共同決定如果它們的狀態全都爲fulfilled則p的狀態變成fulfilled，此時p1，p2，p3的返回值組成一個數組傳遞給p的回調
• 若p1，p2，p3中只要有一個爲rejected，則p的狀態變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

var promise = new Promise((resolve, reject) => {
    var success = true;
    if (success) {
        resolve('成功');
    } else {
        reject('失敗');
    }
}).then(
    (data) => { console.log(data)},
    (data) => { console.log(data)}
)

Promise執行過程：

setTimeout(function() {
    console.log(0);
}, 0);
var promise = new Promise((resolve, reject) => {
    console.log(1);
    setTimeout(function () {
        var success = true;
        if (success) {
            resolve('成功');
        } else {
            reject('失敗');
        }
    },2000);
}).then(
    (data) => { console.log(data)},
    (data) => { console.log(data)}
);
console.log(promise);	//<pending> 進行中
setTimeout(function () {
    console.log(promise);	//<resolved> 已完成
},2500);
console.log(2);
 
//1
//Promise {<pending>}
//2
//0
//成功
//Promise {<resolved>: undefined}

3、新增聲明命令let和const

在es6中通常用 let 和 const 來聲明，let 表示變量、const 表示常量。

特點：

• let 和 const 都是塊級作用域。以{}代碼塊作爲作用域範圍 只能在代碼塊裏面使用。
  不存在變量提升，只能先聲明再使用，否則會報錯。在代碼塊內，在聲明變量之前，該變量都是不可用的。這在語法上，稱爲“暫時性死區”（temporal
  dead zone，簡稱 TDZ）。
• 在同一個代碼塊內，不允許重複聲明。
• const聲明的是一個只讀常量，在聲明時就需要賦值。（如果 const
  的是一個對象，對象所包含的值是可以被修改的。抽象一點兒說，就是對象所指向的地址不能改變，而變量成員是可以修改的。）

4、模板字符串（Template String）

用一對反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，也可以在字符串中嵌入變量，js表達式或函數，變量、js表達式或函數需要寫在${ }中。即完成拼接。

var str = `aaa
bbb
ccc`;
console.log(str);
let name = "小豬";
function a() {
    return "ID";
}
console.log(`我的名字叫做${name}，年齡${17+2}歲，性別${'男'}，遊戲ID：${a()}`)

5、函數的擴展

• 函數的默認參數

ES6爲參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。

function fun(a,b=1){
    console.log(a+b);
}
fun(1);    //2

• 箭頭函數

在es6中，提供了一種簡潔的函數寫法，我們稱作“箭頭函數”。

寫法：函數名=(形參)=>{……} 當函數體中只有一個表達式時，{}和return可以省略，當函數體中形參只有一個時，()可以省略。

特點：箭頭函數中的this始終指向箭頭函數定義時的離this最近的一個函數，如果沒有最近的函數就指向window。

//省略寫法
var people = name => 'hello' + name;
 //完整寫法
var getFullName = (firstName, lastName) => {
    var fullName = firstName + lastName;
    return fullName;
} 

6、對象的擴展

• 屬性的簡寫。ES6 允許在對象之中，直接寫變量。這時，屬性名爲變量名, 屬性值爲變量的值。

var foo = 'bar';
var obj = {foo};  //等同於  var obj = {foo: foo};

方法的簡寫。省略冒號與function關鍵字。

var o = {
  method() {
    return "Hello!";
  }
};
 
// 等同於
var o = {
  method: function() {
    return "Hello!";
  }
};

• Object.keys()方法，獲取對象的所有屬性名或方法名（不包括原形的內容），返回一個數組。

var obj={name: "john", age: "21", getName: function () { alert(this.name)}};
console.log(Object.keys(obj));    // ["name", "age", "getName"]
console.log(Object.keys(obj).length);    //3
 
console.log(Object.keys(["aa", "bb", "cc"]));    //["0", "1", "2"]
console.log(Object.keys("abcdef"));    //["0", "1", "2", "3", "4", "5"]

• Object.assign()，assign方法將多個原對象的屬性和方法都合併到了目標對象上面。可以接收多個參數，第一個參數是目標對象，後面的都是源對象。

var target  = {}; //目標對象
var source1 = {name : 'ming', age: '19'}; //源對象1
var source2 = {sex : '女'}; //源對象2
var source3 = {sex : '男'}; //源對象3，和source2中的對象有同名屬性sex
Object.assign(target,source1,source2,source3);
 
console.log(target);    //{name : 'ming', age: '19', sex: '男'}

7、for…of 循環

是遍歷所有數據結構的統一的方法。for…of循環可以使用的範圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如arguments對象、DOM NodeList 對象）、Generator 對象，以及字符串。

var arr=["貓","豬","雞"];
for(var val of arr){
    console.log(val);	
}
//貓
//小豬
//雞

8、解構賦值

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。

• 數組的解構賦值

數組中的值會自動被解析到對應接收該值的變量中，數組的解構賦值要一一對應 如果有對應不上的就是undefined

var [name, pwd, sex]=["小周", "123456", "男"];
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男

• 對象的解構賦值

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var obj={name:"小周", pwd:"123456", sex:"男"}
var {name, pwd, sex}=obj;
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
 
//如果想要變量名和屬性名不同，要寫成這樣
let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };
console.log(foz) // "aaa"
console.log(foo) // error: foo is not defined

9、set數據結構

Set數據結構，類似數組。所有的數據都是唯一的，沒有重複的值。它本身是一個構造函數。

1）屬性和方法：

• size 數據的長度
• add() 添加某個值，返回 Set 結構本身。
• delete() 刪除某個值，返回一個布爾值，表示刪除是否成功。
• has() 查找某條數據，返回一個布爾值。
• clear() 清除所有成員，沒有返回值。

2）應用

對數組進行去重操作

var arr = [1,1,2,2,3];
var s = new Set(arr);
console.log(s);	//{1, 2, 3}
 
console.log(s.size);	//3
console.log(s.add(4));	//{1, 2, 3, 4}
console.log(s.delete(4));	//true
console.log(s.has(4));	//false
s.clear();

10、Spread Operator 展開運算符(…)

1）將字符串轉成數組

var str="abcd";
console.log([...str]) // ["a", "b", "c", "d"]

2）將集合轉成數組

var sets=new Set([1,2,3,4,5])
console.log([...sets]) // [1, 2, 3, 4, 5]

3)兩個數組的合併

var a1=[1,2,3];
var a2=[4,5,6];
console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]

4）在函數中，用來代替arguments參數
rest參數 …變量名稱

rest 參數是一個數組 ，它的後面不能再有參數，不然會報錯

function func(...args){
    console.log(args);//[1, 2, 3, 4]
}
func(1, 2, 3, 4);
 
function f(x, ...y) {
    console.log(x);
    console.log(y);
}
f('a', 'b', 'c');     //a 和 ["b","c"]
f('a')                //a 和 []
f()                   //undefined 和 []