2019年幾道常見js面試題整理

花間酒發表於2019-11-11

最近出去面了幾家試試水，也在整理一些面試題。我已經總結在gitbook/github裡了，主要作用就是總結和分享一下自己的心得體會，現在每天還在持續更新中，歡迎大家star，有問題請隨時提issue

1. 手寫new操作符

function newClass(obj, args) {
    let newObj = {};
    newObj.__proto__ = obj.prototype
    obj.call(newObj, args);
    return newObj
}

function a(text) {
    this.text = text;
}

let b = newClass(a, 'test');
console.log(b) // {text: "test"}
複製程式碼

2. 手寫防抖/節流

// 防抖
function debounceHandle(fn) {
    let timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.call(this, arguments);
        }, 300)
    }
}
複製程式碼

// 節流
function throttle(fn, delay) {     
    var timer = null;     
    var lastTime = Date.now();     
    return function() {             
        var curTime = Date.now();
        var interval = delay - (curTime - lastTime);  // 計算間隔             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (interval <= 0) {              
            fn.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(fn, interval);              
        }
    }
}
複製程式碼

3. 手寫promise

首先明確三種狀態

pending - 進行中
fulfilled - 成功
rejected - 失敗

function NewPromise(executor) {
    let _this = this;
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledFunc = [];//儲存成功回撥
    this.onRejectedFunc = [];//儲存失敗回撥

    executor(resolve, reject);

    function resolve(value) {
        if (_this.state === 'pending') {
            _this.value = value;
            //依次執行成功回撥
            _this.onFulfilledFunc.forEach(fn => fn(value));
            _this.state = 'fulfilled';
        }
    }

    function reject(reason) {
        if (_this.state === 'pending') {
            _this.reason = reason;
            //依次執行失敗回撥
            _this.onRejectedFunc.forEach(fn => fn(reason));
            _this.state = 'rejected';
        }
    }
}

NewPromise.prototype.then = function (onFulfilled, onRejected) {
    let self = this;
    if (self.state === 'pending') {
        if (typeof onFulfilled === 'function') {
            return new NewPromise((resolve, reject) => {
                self.onFulfilledFunc.push(() => {
                    let x = onFulfilled(self.value);
                    if (x instanceof Promise) {
                        x.then(resolve, reject)
                    } else {
                        resolve(x)
                    }
                });
            })
        }
        if (typeof onRejected === 'function') {
            return new NewPromise((resolve, reject) => {
                self.onRejectedFunc.push(() => {
                    let x = onRejected(self.value);
                    if (x instanceof Promise) {
                        x.then(resolve, reject)
                    } else {
                        resolve(x)
                    }
                });
            })
        }
    }
    if (self.state === 'fulfilled') {
        if (typeof onFulfilled === 'function') {
            return new NewPromise((resolve, reject) => {
                let x = onFulfilled(self.value);
                if (x instanceof Promise) {
                    x.then(resolve, reject)
                } else {
                    resolve(x)
                }
            })
        }

    }
    if (self.state === 'rejected') {
        if (typeof onRejected === 'function') {
            return new NewPromise((resolve, reject) => {
                let x = onRejected(self.reason);
                if (x instanceof Promise) {
                    x.then(resolve, reject)
                } else {
                    resolve(x)
                }
            })
        }
    }
};

let p = new NewPromise((resolve, reject) => {
    console.log(1) // 輸出 1
    resolve(2);
});

p.then(x => {
    console.log(x); // 輸出 2
    return 3
}).then(x => {
    console.log(x); // 輸出3
    return 4;
}).then(x => {
    console.log(x) // 輸出4
    console.log('輸出完畢')
});
複製程式碼

執行結果

4. 箭頭函式

ES6新增箭頭函式，總結起來有如下幾個注意點

this指向

let obj = {
    name: 'ronaldo',
    getName: function () {
        return this.name;
    },
    getName2: () => {
        return this.name;
    }
}

console.log(obj.getName())  // 輸出ronaldo
console.log(obj.getName2()) // 輸出空，此時this等於window
複製程式碼

無法當建構函式

var Person = (name, age) => {
    this.name = name;
    this.age = age;
}
var p = new Person('messi', 18); // Uncaught TypeError: Person is not a constructor
複製程式碼

arguments引數無法獲取當前傳入的引數

let func1 = function () {
    console.log(arguments);
}

let func2 = () => {
    console.log(arguments);
}
func1(1, 2, 3);  // Arguments(3) [1, 2, 3] 引數有1,2,3
func2(1, 2, 3);  //Arguments() [] 無引數
複製程式碼

但是可以通過剩餘引數來獲取箭頭函式傳入引數

let func1 = function () {
    console.log(arguments);
}

let func2 = (...args) => {
    console.log(args);
}
func1(1, 2, 3);  // Arguments(3) [1, 2, 3] 引數有1,2,3
func2(1, 2, 3);  // [1,2,3] 注：純陣列，不再是Arguments物件
複製程式碼

5. 解構

個人理解，解構就是ES6新增對陣列和物件實現分離內部元素/屬性對快速操作

解構還是很好理解的，下面一段程式碼理解了就足夠了

let obj = { d: 'aaaa', e: { f: 'bbbb' }, g: 100 };
let { d, ...a } = obj;
console.log(d);
console.log(a);
a.e.f = 'cccc';
console.log(a);
console.log(obj);
複製程式碼