js面试题

1. 必考：ES 6 语法知道哪些，分别怎么用？

   举例（let const class 展开运算等等）
   ES5
   ES6

2. 必考 Promise、Promise.all、Promise.race 分别怎么用？
   Promise

3. 必考：手写函数防抖和函数节流
   防抖和节流

4. 必考：手写AJAX
   ajax

var request = new XMLHttpRequest();
request.open('GET', '/xxxx')
request.onreadystatechange = function() {
	if (request.readyState === 4) {
		console.log('请求完成')
		if (request.response.status >= 200 && request.response.status < 300) {
			console.log('请求成功')
		} else {}
	}
}
request.send()

简化版

var request = new XMLHttpRequest();
request.open('GET', '/xxxxxxx')
request.onload = () => { console.log('请求成功') }
request.send()

5. 必考：这段代码里的 this 是什么？
   this

   1 fn()
   `	this => window/global
   2 obj.fn()
   	this => obj
   3 fn.call(xx)
   	this => xx
   4 fn.apply(xx)
   	this => xx
   5 fn.bind(xx)
   	this => xx
   6 new Fn()
   	this => 新的对象
   7 fn = () => {}
   	this => 外面的this
   

6. 必考：闭包/立即执行函数是什么？
   闭包
   立即执行函数

7. 必考：什么是 JSONP，什么是 CORS，什么是跨域？
   jsonp
   cors

8. 常考：async/await 怎么用，如何捕获异常？
   async/await

9. 常考：如何实现深拷贝？

   1 递归
   2 判断类型
   3 检查循环引用（环）
   4 不可能拷贝原型 __proto__
   

   链接
   链接1
   链接2

10. 常考：如何用正则实现 trim()？

    function trim(string) {
    	return string.replace(/^\s+|\s+$/g, '')
    }
    

11. 常考：不用 class 如何实现继承？用 class 又如何实现？
    不用class实现继承

    // 定义类：实例数据（自身数据）、原型数据、静态数据
    function Book(title) {
        // 实例数据
        this.title = title;
    }
    // 原型上的
    // 原型数据
    Book.prototype.getTitle = function() {
        console.log(this.title);
    }
    // 类上的
    // 静态数据
    Book.writer = 'xiaoming';

    // 继承
    function JsBook(title, price) {
        // 复用父类构造函数，继承实例数据
        Book.call(this, title);
        // 存储其它数据
        this.price = price;
    }
    // 寄生式继承方法
    function inherit(Child, Parent) {
        function F() {
            // 纠正构造函数
            this.constructor = Child;
        }
        // 更改原型
        F.prototype = Parent.prototype
        // 更改子类原型
        Child.prototype = new F();
        // 纠正构造函数
        // child.prototype.constructor = child;
        // 实现对静态数据的继承
        for (let key in Parent) {
            // 如果是自身的
            if (Parent.hasOwnProperty(key)) {
                // 存储数据
                Child[key] = Parent[key];
            }
        }
        return Child;
    }
    inherit(JsBook, Book);
    JsBook.prototype.getPrice = function() {
        console.log(this.price);
    }
    var b2 = new JsBook('happiness', 66);
    console.log(b2);

使用class

        // 定义类
        class Book {
            // 构造函数
            constructor(title, price) {
                // 存储数据
                // 实例数据
                this.title = title;
                this.price = price;
                this.color = ['red', 'green', 'blue'];
            }
            // 原型数据
            // 原型方法
            getTitle() {
                console.log(this.title);
            }
            getPrice() {
                console.log(this.price);
            }
            // 原型属性，设置了特性，因此在实例化对象自身可以看到
            get num() {
                return this._num;
            }
            set num(val) {
                this._num = val;
            }
            get arr() {
                return this._arr;
            }
            set arr(val) {
                this._arr = val;
            }
            // 静态数据
            static get writer() {
                return 'xiaoming'
            }
            static getWriter() {
                return this.writer;
            }
        }
        // 在类的外部，静态数据通过点语法定义
        Book.msg = 'hello';
        Book.getMsg = function() {
            return this.msg;
        }


        // 继承
        class JsBook extends Book {
            // 重写属性和方法
            // 重写构造函数
            constructor(title, price, score) {
                // 通过super关键字实现构造函数继承
                super(title, price);
                // 重写新的属性
                this.score = score;
            }
            // 重写原型属性
            get time() {
                return 2020;
            }
            getTime() {
                return '2020-10';
            }
            // 静态属性
            static getWidth() {
                return 100;
            }
        }

        var jsbook = new JsBook('hello world', 22, 100);
        console.log(jsbook);

12. 常考：如何实现数组去重？

    1 hash
    2 set
    3 WeakMap
    

数组去重
hash

  function unique3(arr){
    var tmpArr = [], hash = {};//hash为hash表
    for(var i=0;i<arr.length;i++){
      if(!hash[arr[i]]){//如果hash表中没有当前项
        hash[arr[i]] = true;//存入hash表
        tmpArr.push(arr[i]);//存入临时数组
      }
    }
    return tmpArr;
  }

weakMap

let ob1 = {key: 'key', value: 'value'}
let ob2 = {value: 'value', key: 'key'}
let arr = [ob1,ob1,ob2]
function unique(array) {
  let wm = new WeakMap()
  for(let i = 0; i < array.length; i++){
    if(!wm.has(array[i])){
      wm.set(array[i], i)
    }
  }
  return wm
}
unique(arr)

13. 放弃：== 相关题目（反着答）

14. 送命题：手写一个 Promise

        // 实现promise
        function MyPromise(callBack) {
            // 维护状态
            this.status = 'pending';
            // 存储回调函数
            this.successArray = [];
            this.failArray = [];

            // 定义resolve和reject方法
            // 成功
            let resolve = (value) => {
                // 改变状态
                this.status = 'resolved';
                // 执行回调函数
                this.successArray.forEach(fn => value = fn(value))
                this.successArray = [];
                this.value = value;
            }
            // 失败
            let reject = (value) => {
                this.status = 'rejected';
                this.failArray.forEach(fn => value = fn(value))
                this.failArray = [];
                this.value = value
            }

            // 执行回调函数
            try {
                callBack(resolve, reject);
            } catch(e) {
                // 有错误就失败了
                reject(e);
            }
        }
        // 原型方法
        MyPromise.prototype.then = function(success, fail) {
            if (this.status === 'pending') {
                success && this.successArray.push(success);
                fail && this.failArray.push(fail);
            } else if (this.status === 'resolved') {
                success && success(this.value);
            } else {
                fail && fail(this.value);
            }

            // 链式调用
            return this;
        }