前端ES6 面試過關寶典

• ES6是新一代的 JS 語言標準，規范了JS的使用標準（var標量提升）、新增了 JS 原生方法更加優雅

• ES2015特指在2015年發布的新一代JS語言標準，ES6泛指下一代JS語言標準，包含ES2015、ES2016、ES2017、ES2018等，現階段在絕大部分場景下，ES2015默認等同ES6，ES5泛指上一代語言標準，ES2015可以理解為ES5和ES6的時間分界線，

• babel是一個 ES6 轉碼器，可以將 ES6 代碼轉為 ES5 代碼，以便兼容那些還沒支持ES6的平臺，

優化：

• 新增模板字串，不需要再使用 + 拼接字串，使用（${}）取代以往字串形式，可以保存空格、換行符等

升級：

• 新增 includes 方法（以往只有indexOf、lastIndexOf查找字符位置）
• 新增 startsWith()、endsWith()、padStart()、padEnd()、repeat()

優化：

• 陣列解構賦值 let [a,b,c] = [1,2,3]形式進行賦值
• 擴展運算子 實作陣列和松散序列的轉化 let args = [...arguments]，輕松實作陣列結構復制

升級：

• 新增 find，且修復 [NaN].indexOf(NaN) === -1 的bug

  • 這里的修復指傳 callback arr.find(item => isNaN(item))

• copyWithin(target , start 【, end 默認length】)，將陣列 (s,end] 的內容復制到 target開始的地方，end為負數則就取start處的資料

• includes() :可以用來改寫 條件1 && 條件2 && 條件3

• fill() : new Array(10).fill(1)

• flat() : [1,2,[2,3]].flat()，只能展開一層

優化：

• 更加嚴謹安全
  • Number.isNaN：更為嚴格安全，isNaN()會將字串先往Number型別轉換，再判斷
  • Number.isFinite(): Infinity、字串、物件回傳 false，全域isFinite()同上
  • Number.isInteger(1.0) // true，判斷是否是整數
• Math:
  • Math.cbrt(8) === 2，計算立方根
  • Math.hypot(3:,4) === 25，計算所有引數的平方的和的平方根
  • Math.sign()：正數回傳1，負數回傳-1，非數字回傳NaN
  • Math.trunc()：先轉換為Number型別，正數、負數取整 / 非數字回傳NaN

優化：

• 物件屬性變數式宣告：

// 屬性名與對應value的變數名相同時可縮寫
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange};    
// let myFruits = {apple: 'red appe', orange: 'yellow orange'};

• 物件解構賦值
• 物件的擴展運算子（...）：let {...obj} = {'a' : 1 , 'b' : 2}
• super關鍵字：同this總是指向當前函式所在的物件不同
  • super總是指向當前函式所在物件的原型物件

升級，ES6在Object原型上新增的方法

• Object.is：做兩個目標物件的相等比較，修復NaN === NaN //false ，Object.is(NaN,NaN) // true
• Object.assign(onlyTarget , source1 ,...)：合并覆寫到onlyTarget中
  • source中的自身屬性會被合并
  • source中的繼承屬性、不可列舉的屬性不會被合并
    • 且無法正確復制get和set屬性(會直接執行get/set函式，取return的值)
• getOwnPropertyDescriptors(obj)：獲取物件所有的自身屬性（配合defineProperties使用）,ES5中getOwnPropertyDescriptor(obj,屬性名)只能單個獲取（配合defineProperty使用）
  • defineProperties( obj , {屬性1 ： {組態檔} , 屬性2 ：{組態檔} ... } )
  • defineProperty( obj , 屬性名 , {組態檔} )
• getPropertypeOf()與setProperTypeOf()：獲取或設定當前物件的prototype物件
  • __proto__屬性只是各大瀏覽器私加過于廣泛而默許的屬性
    • 在非瀏覽器環境不一定可以使用
• keys() / values() / entries()：分別獲取物件 鍵 / 值 / 鍵值對 的 陣列

優化：

• 箭頭函式：箭頭函式內的 this 指向函式定義時所在的物件，而不是函式執行時所在的物件
  • 箭頭函式如果外層仍是箭頭函式，將繼續向更外層尋找
  • 箭頭函式不能用作建構式，因為沒有自己的this，在new重定向this指向時，沒有屬于自己的this的可供系結
  • 箭頭函式沒有this，也不存在arguments物件，不過物件擴展符獲取
    • var fn = (...arguments)=>{console.log(arguments)} ; fn(1,2,3) // [1,2,3]
• 函式默認賦值，ES6之前無法通過形參給出默認賦值

升級部分

• ES6新增了雙冒號運算子，用來取代bind、call和apply（瀏覽器暫不支持，Babel已經支持轉碼）

foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

• ES6引入的第7種基本資料型別，Symbol()生成的值都是獨一無二的
  • 解決物件屬性名太多導致的屬性名沖突問題
  • Symbol作物件屬性名無法被for in、for of、Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()遍歷到
    • Symbol() 不是物件的私有屬性，其它物件也可以使用它作屬性

let a = Symbol('a');
let obj = {} ;
obj[a] = 'xxx';
// obj = {a : 'xxx'} 的屬性名不是Symbol('a')，而是默認使用字符'a' 作屬性名

• 成員唯一，可以用來去重，Array.from(new Set([1,2,3,3,3,4]))
  • 多個NaN被Set認為是相同的，+0與-0也是相同的，undefined也會被存盤
• .size()、.add()、.clear()、.delete()、.has()
  • 繼承自Object，.keys()、.values()、.entries()、.forEach()

• new Map() | new Map([['key1' , 'v1'] , ['key2', 'v2']])
• Map可以看作是Object的超集，打破傳統鍵值的限制
  • 出現原因：Object的key局限于字串，可以是函式、物件、任意基本型別（甚至是NaN）
  • .size()、.clear()、delete()、entries()、get(key)、has(key)、keys()、set(key,value)、values()
    • entries()回傳迭代物件（遍歷：for...of... / next()）
  • 遍歷Map：for (let [key, value] of myMap)、myMap.forEach(function(value, key){}

• Proxy可以攔截物件的get/set方法自由去處理

const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};
const p = new Proxy({}, handler);

• 是將原生的一些零散分布在Object、Function或者全域函式里的方法(如apply、delete、get、set等等)，統一整合到Reflect上
  • Reflect.apply(target, thisArgument, argumentsList) 整合 apply方法
  • Reflect.defineProperty(target, propertyKey, attributes) 整合defineProperty方法

• 解決 JS 異步機制中回呼機制產生的回呼地獄問題
  • 可以鏈式呼叫

• 是一種標準、解決方案，Set、Map都不能用for回圈遍歷

  • 要么單獨為它倆設計，要么統一規劃新的API(被采取)

• 就好像JavaScript是ECMAScript標準的一種具體實作一樣，Iterator標準的具體實作是Iterator遍歷器

• 所有部署了key值為[Symbol.iterator]，且[Symbol.iterator]的value是標準的Iterator介面函式
  • 該函式必須回傳一個物件
  • 物件中包含next方法
  • 執行next()能回傳包含value/done屬性的Iterator物件)的物件，都稱之為可遍歷物件
  • next()后回傳的Iterator物件也就是Iterator遍歷器

//obj.[Symbol.iterator]() 就是Iterator遍歷器
let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

• ES6規定，所有部署了Iterator介面的物件（可遍歷物件）都可以用for...of遍歷
  • 擴展運算子本質上也是由for...of的一種實作

//Array
let array = ['red', 'green', 'blue'];
array[Symbol.iterator]() //Iterator遍歷器
array[Symbol.iterator]().next() //{value: "red", done: false}

//String
let string = '1122334455';
string[Symbol.iterator]() //Iterator遍歷器
string[Symbol.iterator]().next() //{value: "1", done: false}

//set
let set = new Set(['red', 'green', 'blue']);
set[Symbol.iterator]() //Iterator遍歷器
set[Symbol.iterator]().next() //{value: "red", done: false}

//Map
let map = new Map();
let obj= {map: 'map'};
map.set(obj, 'mapValue');
map[Symbol.iterator]().next()  {value: Array(2), done: false}

• 由上可知出現了統一的遍歷方法
• ES6規定，所有部署了Iterator介面的物件（可遍歷物件）都可以用for...of遍歷
  • 擴展運算子本質上也是由for...of的一種實作

Generator函式可以說是Iterator介面的具體實作方式

• yeild 相當于 next() 方法

// 注意 * 貼著function
function* generator(){
  yeild 1;
  yeild 2;
}

Generator函式可以說是Iterator介面的具體實作方式

• async函式可以理解為內置自動執行器的Generator函式語法糖，它配合ES6的Promise近乎完美的實作了異步編程解決方案

作為ES5生成實體物件的語法糖，使物件實體化的程序更像面向物件編程

• Class內部定義的所有方法都是不可列舉的

// ES5 玩法
function MyClass(data , props){
    this.data = https://www.cnblogs.com/lhx9527/archive/2022/10/03/data
    this.props = props
    return this
}
MyClass.prototype.toString = function(){
    return this.data +',' + this.props
}
var mc = new MyClass('a','b')
// ES6 玩法
class MyClass{
    constructor(data,props){
        this.data = https://www.cnblogs.com/lhx9527/archive/2022/10/03/data
        this.props = props
    }
    toString(){
        return this.data +',' + this.props
    }
}
Object.keys(MyClass.prototype) // []

• ES6的建構式必須使用new，ES5不使用new也可以執行
• Class不存在變數提升，必須先宣告Class才能使用，ES5中可以先實體化、再宣告
• ES5的繼承實質：先創造子類的實體化物件this，再將父物件的方法掛載到this上
  • ES6則是先將父類實體物件的方法、屬性掛載到this（super），再用子類建構式進一步實體化this

// ES5方法
function Parent(){ }
function Child(){ }
// 方法1
var child1 = new Child()
child1.prototype = new Parent() // 這樣 child1 就可以訪問 Parent 上的方法了
// 方法2
function Child(){ 
    Parent.call(this , arguments) 
}

// ES6方法
class Child extends Parent{
    constructor(props){
        super(props) // 可以在父類中列印資料
        this.props = props
    }
}

• module、export、import是ES6用來統一前端模塊化方案的設計思路和實作方案
  • import引入的模塊是靜態加載（編譯階段加載）而不是動態加載（運行時加載）
    • 靜態加載優點：引入宏（macro）和型別檢驗（type system）
    • 將來瀏覽器的新 API 就能用模塊格式提供，不再必要做成全域變數或者navigator物件的屬性
    • 不再需要物件作為命名空間（比如Math物件），未來這些功能可以通過模塊提供
  • import引入export匯出的介面值是動態系結關系，即通過該介面，可以取到模塊內部實時的值

• 箭頭函式取代var self = this
• let取代var
• 常用陣列/物件的解構賦值來命名變數
  • let { name , age } = { ...{name:'lhx' , age : 12 } }
• 長字串拼接可以使用模板字串
• Class取代傳統建構式，實體化物件
• 保持模塊化開發思維，常用 import、 export方法

• 基礎傳參 function fn(str1 : string , num1 : number)
• 默認傳參 function fn(str1 : string = 'default' , num1 : number = 12)
• 剩余傳參 function fn(s1 : string . s2 : string , arr : string[] ) 呼叫=> fn('a','b','c','d','e')
• 可選傳參 function fn(s1 : string , num1 ?: number )

• 先給出函式名相同、接收不同引數的函式宣告,再給出函式的定義
  • 不同引數定義：
    • 數量不同
    • 順序不同
    • 型別不同

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
function disp(s1:string,n1:number):void; 
//  引數型別不同，應設定為any
function disp(x: string | number,y?:string | number):void {
    console.log(x);
    console.log(y);
}
disp("abc")
disp(1,"xyz");
disp('a' , 100)