# Javascript

# Promise题

# 题目1

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

过程分析：

从上至下，先遇到new Promise，执行其中的同步代码1
再遇到resolve('success')，将promise的状态改为了resolved并且将值保存下来
继续执行同步代码2
跳出promise，往下执行，碰到promise.then这个微任务，将其加入微任务队列
执行同步代码4
本轮宏任务全部执行完毕，检查微任务队列，发现promise.then这个微任务且状态为resolved，执行它。

结果：
1 2 4 3

# 题目2

const promise = new Promise((resolve, reject) => {
  console.log(1);
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

在promise中并没有resolve或者reject
因此promise.then并不会执行，它只有在被改变了状态之后才会执行。

结果： 1 2 4

# 题目3

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

过程分析：

从上至下，先遇到new Promise，执行该构造函数中的代码promise1
碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来
碰到promise1.then这个微任务，将它放入微任务队列
promise2是一个新的状态为pending的Promise
执行同步代码1，同时打印出promise1的状态是resolved
执行同步代码2，同时打印出promise2的状态是pending
宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为resolved，执行它。

结果：

'promise1'
'1' Promise{<resolved>: 'resolve1'}
'2' Promise{<pending>}
'resolve1'

# 题目4

Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('start');

刚开始整个脚本作为第一次宏任务来执行，我们将它标记为宏1，从上至下执行
遇到Promise.resolve().then这个微任务，将then中的内容加入第一次的微任务队列标记为微1
遇到定时器timer1，将它加入下一次宏任务的延迟列表，标记为宏2，等待执行(先不管里面是什么内容)
执行宏1中的同步代码start
第一次宏任务(宏1)执行完毕，检查第一次的微任务队列(微1)，发现有一个promise.then这个微任务需要执行
执行打印出微1中同步代码promise1，然后发现定时器timer2，将它加入宏2的后面，标记为宏3
第一次微任务队列(微1)执行完毕，执行第二次宏任务(宏2)，首先执行同步代码timer1
然后遇到了promise2这个微任务，将它加入此次循环的微任务队列，标记为微2
宏2中没有同步代码可执行了，查找本次循环的微任务队列(微2)，发现了promise2，执行它
第二轮执行完毕，执行宏3，打印出timer2

结果：

'start'
'promise1'
'timer1'
'promise2'
'timer2'

# 题目5

封装一个异步加载图片的方法

function loadImg (url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url
    img.onload = function () {
      resolve(img);
    }
    img.onerror = function () {
      reject(new Error("could not load image at" + url))
    }
  })
}

# 题目6

限制异步操作的并发个数并尽可能快的完成全部

function limitLoad(urls, handler, limit) {
  let sequence = [].concat(urls); // 复制urls
  // 这一步是为了初始化 promises 这个"容器"
  let promises = sequence.splice(0, limit).map((url, index) => {
    return handler(url).then(() => {
      // 返回下标是为了知道数组中是哪一项最先完成
      return index;
    });
  });
  // 注意这里要将整个变量过程返回，这样得到的就是一个Promise，可以在外面链式调用
  return sequence
    .reduce((pCollect, url) => {
      return pCollect
        .then(() => {
          return Promise.race(promises); // 返回已经完成的下标
        })
        .then(fastestIndex => { // 获取到已经完成的下标
         // 将"容器"内已经完成的那一项替换
          promises[fastestIndex] = handler(url).then(
            () => {
              return fastestIndex; // 要继续将这个下标返回，以便下一次变量
            }
          );
        })
        .catch(err => {
          console.error(err);
        });
    }, Promise.resolve()) // 初始化传入
    .then(() => { // 最后三个用.all来调用
      return Promise.all(promises);
    });
}
limitLoad(urls, loadImg, 3)
  .then(res => {
    console.log("图片全部加载完毕");
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

# 题目7

实现mergePromise函数

这道题有点类似于Promise.all()，不过.all()不需要管执行顺序，只需要并发执行就行了。但是这里需要等上一个执行完毕之后才能执行下一个。

解题思路：

定义一个数组data用于保存所有异步操作的结果
初始化一个const promise = Promise.resolve()，然后循环遍历数组，在promise后面添加执行ajax任务，同时要将添加的结果重新赋值到promise上。

function mergePromise (ajaxArray) {
  // 存放每个ajax的结果
  const data = [];
  let promise = Promise.resolve();
  ajaxArray.forEach(ajax => {
   // 第一次的then为了用来调用ajax
   // 第二次的then是为了获取ajax的结果
    promise = promise.then(ajax).then(res => {
      data.push(res);
      return data; // 把每次的结果返回
    })
  })
  // 最后得到的promise它的值就是data
  return promise;
}

# 题目8

使用Promise实现红绿灯交替重复亮

function red() {
  console.log("red");
}
function green() {
  console.log("green");
}
function yellow() {
  console.log("yellow");
}
const light = function (timer, cb) {
  return new Promise(resolve => {
    setTimeout(() => {
      cb()
      resolve()
    }, timer)
  })
}
const step = function () {
  Promise.resolve().then(() => {
    return light(3000, red)
  }).then(() => {
    return light(2000, green)
  }).then(() => {
    return light(1000, yellow)
  }).then(() => {
    return step()
  })
}

step();

# 题目9

头条面试题

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

async1();

new Promise(function(resolve) {
  console.log("promise1");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log('script end')

'script start'
'async1 start'
'async2'
'promise1'
'script end'
'async1 end'
'promise2'
'setTimeout'

# 题目10

Promise.resolve(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    return 3;
  })
  .then(res => {
    console.log(res);
  });

Promise可以链式调用，不过promise 每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用, 它并不像一般我们任务的链式调用一样return this。
上面的输出结果之所以依次打印出1和2，那是因为resolve(1)之后走的是第一个then方法，并没有走catch里，所以第二个then中的res得到的实际上是第一个then的返回值。且 return 2 会被包装成resolve(2)。

const promise = new Promise((resolve, reject) => {
  reject("error");
  resolve("success2");
});
promise
.then(res => {
    console.log("then1: ", res);
  }).then(res => {
    console.log("then2: ", res);
  }).catch(err => {
    console.log("catch: ", err);
  }).then(res => {
    console.log("then3: ", res);
  })

catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
至于then3也会被执行，那是因为catch()也会返回一个Promise，且由于这个Promise没有返回值，所以打印出来的是undefined。

# 题目11

Promise.reject(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    console.log(err);
    return 3
  })
  .then(res => {
    console.log(res);
  });

结果：

1
3

# 手写 Promise

/**
 * 在 myPromise.js 基础上，根据规范实现了 Promise 的全部方法：
 * - Promise.resolve()
 * - Promise.reject()
 * - Promise.prototype.catch()
 * - Promise.prototype.finally()
 * - Promise.all()
 * - Promise.allSettled()
 * - Promise.any()
 * - Promise.race()
 */
class myPromise {
    static PENDING = 'pending';
    static FULFILLED = 'fulfilled';
    static REJECTED = 'rejected';

    constructor(func) {
        this.PromiseState = myPromise.PENDING;
        this.PromiseResult = null;
        this.onFulfilledCallbacks = [];
        this.onRejectedCallbacks = [];
        try {
            func(this.resolve.bind(this), this.reject.bind(this));
        } catch (error) {
            this.reject(error)
        }
    }

    resolve(result) {
        if (this.PromiseState === myPromise.PENDING) {
            this.PromiseState = myPromise.FULFILLED;
            this.PromiseResult = result;
            this.onFulfilledCallbacks.forEach(callback => {
                callback(result)
            })
        }
    }

    reject(reason) {
        if (this.PromiseState === myPromise.PENDING) {
            this.PromiseState = myPromise.REJECTED;
            this.PromiseResult = reason;
            this.onRejectedCallbacks.forEach(callback => {
                callback(reason)
            })
        }
    }

    /**
     * [注册fulfilled状态/rejected状态对应的回调函数] 
     * @param {function} onFulfilled  fulfilled状态时 执行的函数
     * @param {function} onRejected  rejected状态时 执行的函数 
     * @returns {function} newPromsie  返回一个新的promise对象
     */
    then(onFulfilled, onRejected) {
        let promise2 = new myPromise((resolve, reject) => {
            if (this.PromiseState === myPromise.FULFILLED) {
                setTimeout(() => {
                    try {
                        if (typeof onFulfilled !== 'function') {
                            resolve(this.PromiseResult);
                        } else {
                            let x = onFulfilled(this.PromiseResult);
                            resolvePromise(promise2, x, resolve, reject);
                        }
                    } catch (e) {
                        reject(e);
                    }
                });
            } else if (this.PromiseState === myPromise.REJECTED) {
                setTimeout(() => {
                    try {
                        if (typeof onRejected !== 'function') {
                            reject(this.PromiseResult);
                        } else {
                            let x = onRejected(this.PromiseResult);
                            resolvePromise(promise2, x, resolve, reject);
                        }
                    } catch (e) {
                        reject(e)
                    }
                });
            } else if (this.PromiseState === myPromise.PENDING) {
                this.onFulfilledCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            if (typeof onFulfilled !== 'function') {
                                resolve(this.PromiseResult);
                            } else {
                                let x = onFulfilled(this.PromiseResult);
                                resolvePromise(promise2, x, resolve, reject);
                            }
                        } catch (e) {
                            reject(e);
                        }
                    });
                });
                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            if (typeof onRejected !== 'function') {
                                reject(this.PromiseResult);
                            } else {
                                let x = onRejected(this.PromiseResult);
                                resolvePromise(promise2, x, resolve, reject);
                            }
                        } catch (e) {
                            reject(e);
                        }
                    });
                });
            }
        })

        return promise2
    }

    /**
     * Promise.resolve()
     * @param {[type]} value 要解析为 Promise 对象的值 
     */
    static resolve(value) {
        // 如果这个值是一个 promise ，那么将返回这个 promise 
        if (value instanceof myPromise) {
            return value;
        } else if (value instanceof Object && 'then' in value) {
            // 如果这个值是thenable（即带有`"then" `方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；
            return new myPromise((resolve, reject) => {
                value.then(resolve, reject);
            })
        }

        // 否则返回的promise将以此值完成，即以此值执行`resolve()`方法 (状态为fulfilled)
        return new myPromise((resolve) => {
            resolve(value)
        })
    }

    /**
     * Promise.reject()
     * @param {*} reason 表示Promise被拒绝的原因
     * @returns 
     */
    static reject(reason) {
        return new myPromise((resolve, reject) => {
            reject(reason);
        })
    }

    /**
     * Promise.prototype.catch()
     * @param {*} onRejected 
     * @returns 
     */
    catch (onRejected) {
        return this.then(undefined, onRejected)
    }

    /**
     * Promise.prototype.finally()
     * @param {*} callBack 无论结果是fulfilled或者是rejected，都会执行的回调函数
     * @returns 
     */
    finally(callBack) {
        return this.then(callBack, callBack)
    }

    /**
     * Promise.all()
     * @param {iterable} promises 一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入
     * @returns 
     */
    static all(promises) {
        return new myPromise((resolve, reject) => {
            // 参数校验
            if (Array.isArray(promises)) {
                let result = []; // 存储结果
                let count = 0; // 计数器

                // 如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的 Promise
                if (promises.length === 0) {
                    return resolve(promises);
                }

                promises.forEach((item, index) => {
                    // myPromise.resolve方法中已经判断了参数是否为promise与thenable对象，所以无需在该方法中再次判断
                    myPromise.resolve(item).then(
                        value => {
                            count++;
                            // 每个promise执行的结果存储在result中
                            result[index] = value;
                            // Promise.all 等待所有都完成（或第一个失败）
                            count === promises.length && resolve(result);
                        },
                        reason => {
                            /**
                             * 如果传入的 promise 中有一个失败（rejected），
                             * Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成
                             */
                            reject(reason);
                        }
                    )
                })
            } else {
                return reject(new TypeError('Argument is not iterable'))
            }
        })
    }

    /**
     * Promise.allSettled()
     * @param {iterable} promises 一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入
     * @returns 
     */
    static allSettled(promises) {
        return new myPromise((resolve, reject) => {
            // 参数校验
            if (Array.isArray(promises)) {
                let result = []; // 存储结果
                let count = 0; // 计数器

                // 如果传入的是一个空数组，那么就直接返回一个resolved的空数组promise对象
                if (promises.length === 0) return resolve(promises);

                promises.forEach((item, index) => {
                    // 非promise值，通过Promise.resolve转换为promise进行统一处理
                    myPromise.resolve(item).then(
                        value => {
                            count++;
                            // 对于每个结果对象，都有一个 status 字符串。如果它的值为 fulfilled，则结果对象上存在一个 value 。
                            result[index] = {
                                status: 'fulfilled',
                                value
                            }
                            // 所有给定的promise都已经fulfilled或rejected后,返回这个promise
                            count === promises.length && resolve(result);
                        },
                        reason => {
                            count++;
                            /**
                             * 对于每个结果对象，都有一个 status 字符串。如果值为 rejected，则存在一个 reason 。
                             * value（或 reason ）反映了每个 promise 决议（或拒绝）的值。
                             */
                            result[index] = {
                                status: 'rejected',
                                reason
                            }
                            // 所有给定的promise都已经fulfilled或rejected后,返回这个promise
                            count === promises.length && resolve(result);
                        }
                    )
                })
            } else {
                return reject(new TypeError('Argument is not iterable'))
            }
        })
    }

    /**
     * Promise.any()
     * @param {iterable} promises 一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入
     * @returns 
     */
    static any(promises) {
        return new myPromise((resolve, reject) => {
            // 参数校验
            if (Array.isArray(promises)) {
                let errors = []; // 
                let count = 0; // 计数器

                // 如果传入的参数是一个空的可迭代对象，则返回一个 已失败（already rejected） 状态的 Promise。
                if (promises.length === 0) return reject(new AggregateError([], 'All promises were rejected'));

                promises.forEach(item => {
                    // 非Promise值，通过Promise.resolve转换为Promise
                    myPromise.resolve(item).then(
                        value => {
                            // 只要其中的一个 promise 成功，就返回那个已经成功的 promise 
                            resolve(value);
                        },
                        reason => {
                            count++;
                            errors.push(reason);
                            /**
                             * 如果可迭代对象中没有一个 promise 成功，就返回一个失败的 promise 和AggregateError类型的实例，
                             * AggregateError是 Error 的一个子类，用于把单一的错误集合在一起。
                             */
                            count === promises.length && reject(new AggregateError(errors, 'All promises were rejected'));
                        }
                    )
                })
            } else {
                return reject(new TypeError('Argument is not iterable'))
            }
        })
    }

    /**
     * Promise.race()
     * @param {iterable} promises 可迭代对象，类似Array。详见 iterable。
     * @returns 
     */
    static race(promises) {
        return new myPromise((resolve, reject) => {
            // 参数校验
            if (Array.isArray(promises)) {
                // 如果传入的迭代promises是空的，则返回的 promise 将永远等待。
                if (promises.length > 0) {
                    promises.forEach(item => {
                        /**
                         * 如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，
                         * 则 Promise.race 将解析为迭代中找到的第一个值。
                         */
                        myPromise.resolve(item).then(resolve, reject);
                    })
                }
            } else {
                return reject(new TypeError('Argument is not iterable'))
            }
        })
    }
}

/**
 * 对resolve()、reject() 进行改造增强 针对resolve()和reject()中不同值情况 进行处理
 * @param  {promise} promise2 promise1.then方法返回的新的promise对象
 * @param  {[type]} x         promise1中onFulfilled或onRejected的返回值
 * @param  {[type]} resolve   promise2的resolve方法
 * @param  {[type]} reject    promise2的reject方法
 */
function resolvePromise(promise2, x, resolve, reject) {
    if (x === promise2) {
        throw new TypeError('Chaining cycle detected for promise');
    }

    if (x instanceof myPromise) {
        x.then(y => {
            resolvePromise(promise2, y, resolve, reject)
        }, reject);
    } else if (x !== null && ((typeof x === 'object' || (typeof x === 'function')))) {
        try {
            var then = x.then;
        } catch (e) {
            return reject(e);
        }

        if (typeof then === 'function') {
            let called = false;
            try {
                then.call(
                    x,
                    y => {
                        if (called) return;
                        called = true;
                        resolvePromise(promise2, y, resolve, reject);
                    },
                    r => {
                        if (called) return;
                        called = true;
                        reject(r);
                    }
                )
            } catch (e) {
                if (called) return;
                called = true;

                reject(e);
            }
        } else {
            resolve(x);
        }
    } else {
        return resolve(x);
    }
}

myPromise.deferred = function () {
    let result = {};
    result.promise = new myPromise((resolve, reject) => {
        result.resolve = resolve;
        result.reject = reject;
    });
    return result;
}

module.exports = myPromise;

# 实现一个函数，判断输入是不是回文字符串

function isPalindrome(str) {
  if (typeof str !== 'string') {
    return false
  }
  return str.split().reverse().join() === str;
}

# 说说事件流

事件流分为两种，捕获事件流和冒泡事件流。
捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点。
冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点。
DOM事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段。

# 算法题

现在有一个数组[1,2,3,4]，请实现算法，得到这个数组的全排列的数组，如[2,1,3,4]，[2,1,4,3]。。。。你这个算法的时间复杂度是多少

# 什么是深拷贝什么是浅拷贝？

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝：直接赋值、Object.assign(), lodash的_.clone, 扩展运算符…, concat，slice 深拷贝：JSON.parse(JSON.stringify())，_.cloneDeep()

JSON.parse(JSON.stringify(object))

但是该方法有以下几个问题：

会忽略 undefined
会忽略 symbol
不能序列化函数
不能解决循环引用的对象
不能正确的处理 new Date()，会调用 toISOString 方法转成字符串
不能处理正则

function deepClone(obj) {
  var result = Array.isArray(obj) ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key]!==null) {
        result[key] = deepClone(obj[key]); 
      } else {
        result[key] = obj[key];
      }
    }
  }
  return result;
}

# 防抖 & 节流

// 防抖
function debounce(fn,time){
  let timer = null;
  return function(){
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn.apply(this,arguments)
    },time)
  }
}
// 节流
function throttle(fn,time){
  let canRun = true;
  return function(){
    if(!canRun){
      return
    }
    canRun = false;
    setTimeout(() => {
      fn.apply(this,arguments);
      canRun = true;
    },time)
  }
}

# 数组乱序

// 取巧的一种算法，但是每个位置乱序的概率不同
function mixArr(arr){
    return arr.sort(() => {
        return Math.random() - 0.5;
    })
}

//  著名的Fisher–Yates shuffle 洗牌算法
function shuffle(arr){
    let m = arr.length;
    while(m > 1){
        let index = parseInt(Math.random() * m--);
        [arr[index],arr[m]] = [arr[m],arr[index]];
    }
    return arr;
}

# 数组去重

function removeDup(arr){
    var result = [];
    var hashMap = {};
    for(var i = 0; i < arr.length; i++){
        var temp = arr[i]
        if(!hashMap[temp]){
            hashMap[temp] = true
            result.push(temp)
        }
    }
    return result;
}

Array.from(new Set(arr))

[...new Set(arr)]

# 数组展平

//展平多层
function flattenByDeep(array,deep){
    var result = [];
    for(var i = 0 ; i < array.length; i++){
        if(Array.isArray(array[i]) && deep >= 1){
              result = result.concat(flattenByDeep(array[i],deep -1))
        }else{
              result.push(array[i])
        }
    }
    return result;
}

# this

this出现在全局函数中,永远指向window
this出现在严格模式中永远不会指向window, undefined
当某个函数为对象的一个属性时，在这个函数内部this指向这个对象
this出现在构造函数中，指向构造函数新创建的对象
当一个元素被绑定事件处理函数时，this指向被点击的这个元素
this出现在箭头函数中时，this和父级作用域的this指向相同

# 手写 bind、apply、call

Function.prototype.myCall = function(context){ 
    if(typeof this != 'function'){
        throw new TypeError('this is not a function')
    }
    context.fn = this;
    var arr = [];
    for(var i = 1; i< arguments.length; i++){
        arr.push('argument[' + i + ']')
    }
    var result = eval('context.fn(' +arr+ ')');
    delete context.fn;
    return result;
}

Function.prototype.myApply = function(context,arr){ 
    if(typeof this != 'function'){
        throw new TypeError('this is not a function')
    }
    context.fn = this;
    var result= [];
    if(!arr){
        result = context.fn()
    }else{
        var args = [];
        for(var i = 1; i< arr.length; i++){
            args.push('arr[' + i + ']')
        }
        result = eval('context.fn(' +args+ ')');
    }
    delete context.fn;
    return result;
}

Function.prototype.myBind = function(context){
    if(typeof this != 'function'){
        throw new TypeError('this is not a function')
    }
    var self = this;
    var args = Array.prototype.slice.call(arguments,1);
    var F = function(){};
    F.prototype = this.prototype;
    var bound = function(){
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof F ? this: context, args.concat(bindArgs))
    };
    bound.prototype = new F();
    return bound;
}

# 箭头函数和普通函数有什么区别？

1、语法更加简洁、清晰 2、箭头函数不会创建自己的this （它的this指向定义时外层执行环境的this，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。） 3、箭头函数继承而来的this指向永远不变 4、.call()/.apply()/.bind()无法改变箭头函数中this的指向 5、箭头函数不能作为构造函数使用 6、箭头函数没有自己的arguments 7、箭头函数没有原型prototype

# 什么是原型，什么是原型链？

构造函数的 prototype 指向原型对象，原型对象有一个 constructor 属性指回构造函数，每个构造函数生成的实例对象都有一个 proto 属性，这个属性指向原型对象。

# New操作符做了哪些事情？

1.先创建了一个空的对象 2.链接该对象到另一个对象上（将该对象的_proto_指向构造函数的的prototype） 3.把创建的obj作为this的上下文 4.判断构造函数的返回值

手写 new

function myNew (Constr, ...args) {
    // 创建对象
    const obj = {};
    // 链接对象
    obj._proto_ = Constr.prototype;
    // 绑定this
    let res = Constr.call(obj,     ...args);
    // 判断返回类型
    return res instanceof Object ? res : obj;
}

# 说一下eventloop

事件循环事是 js 实现异步的一种方法，也是 js 的执行机制。首先浏览器会把主任务队列中的同步任务挨个执行，然后去执行微任务，微任务执行完再去执行下一次宏任务，如此循环，这种循环叫做事件循环。

浏览器环境下，js引擎维护两种任务，macroTask和microTask

宏任务：script(整体代码)、setTimeout、I/O操作、setInterval、setImmediate、requestAnimationFrame
微任务：Promise.then catch finally、process.nextTick、MutationObserver

Js会先执行同步任务、执行完同步再把异步任务入栈、然后执行微任务、宏任务

注意：async 底层也是 promise

async function a () {
    Await b();
    console.log(1)
}

相当于：

Function a () {
    Return new Promise((resolve, reject) => {
        Resolve(b())
    }).then(() => console.log(1))
}

优先级

setTimeout = setInterval 一个队列
setTimeout > setImmediate
process.nextTick > Promise

# 什么是闭包，闭包的作用

概念：在《你不知道的JavaScript》上卷中明确对闭包的概念：当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

举个例子：

function demo() {
    const a = 1;
    return function () {
        return a;
    }
}
const a = demo();
console.log(a());

闭包的作用：

模拟私有方法，JavaScript 并没有原生的私有方法，可以通过闭包来模拟, 也叫模块模式

function demo () {
    Function a() {}
    Return {
        A: function() {
            a();
        }
    }
}

# promise是什么？

定义：promise 表示一个异步操作的最终结果，是异步编程的一种解决方案，有效解决回调地狱的问题

1.promise 存在三种不同的状态

pending
resolved
rejected

2.promise 的原型对象上有3个方法：

then
catch
finally

3.Promise 构造函数上对外暴露6种方法

all
race
allSettled
any
resolve
reject
try

# set和map有什么区别？

初始化需要的值不一样，Map需要的是一个二维数组，而Set 需要的是一维 Array 数组
Map 和 Set 都不允许键重复
Map的键是不能修改，但是键对应的值是可以修改的；Set不能通过迭代器来改变Set的值，因为Set的值就是键。
Map 是键值对的存在，值也不作为健；而 Set 没有 value 只有 key，value 就是 key；

# for、map和forEach有什么区别

forEach 是遍历，map 是映射 forEach 没有返回值，map 有返回值 for 可以break, forEach不可以break

# Loader和Plugin 有什么区别?

loader是一个转换器，将A文件进行编译成B文件，比如: 将A.less转换为A.css，单纯的文件转换过程。

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不是直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。

# 在地址栏里输入一个地址回车会发生哪些事情

1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。

2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。

3、DNS解析：下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。

4、获取MAC地址：当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。

5、TCP三次握手：下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。

6、HTTPS握手：如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。

7、返回数据：当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。

8、页面渲染：浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。

9、TCP四次挥手：最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃）时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

# 重绘和重排?

常见的引起重排属性和方法任何会改变元素的位置和尺寸大小的操作，都会触发重排。常见的例子如下：

添加或删除可见的DOM元素
元素尺寸改变
内容变化，比如在input框中输入文字
浏览器窗口尺寸改变
计算offsetTop、offsetLeft等布局信息
设置style属性的值
激活CSS伪类，例如 :hover
查询某些属性或调用某些方法

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect()

# Es6常见的语法你知道哪一些?

# 说一下slice splice split 的区别?

# 说一下怎么把类数组转换为数组?

类数组：

arguments
利用querySelectorAll、getElementsByName获取到的NodeList，利用getElementsByTagName、getElementsByClassName获取到的HTMLCollection

区别：类数组上多了一个callee属性，数组上并不存在, 返回正被执行的Function对象类数组不能调用数组的方法, 原型链上没有 Array.prototype

Array.prototype.slice.call(arguments)
Array.from(arguments);
[...arguments]
也可以直接在函数接受参数时使用：function fn(...args) {} 此时在函数内部args就是一个数组了

TIP

类数组上多了一个callee属性，数组上并不存在, 返回正被执行的Function对象, 借用arguments.callee来让匿名函数实现递归:

let sum = function (n) {
    if (n == 1) {
        return 1;
    } else {
        return n + arguments.callee(n - 1); // 5 4 3 2 1
    }
}

# 说一下数组如何去重,你有几种方法?

// 第一种 不能检测 对象
[...new Set(array)];

// 第二种 这个有问题：不能检测 NaN 和 对象
function unique(array) {
  var result = [];
  for (var i = 0; i < array.length; i++) {
    if (result.indexOf(array[i]) === -1) {
      //如 result 中没有 arry[i],则添加到数组中
      result.push(array[i])
    }
  }
  return result;
}

// 第三种 不能检测 对象
function unique(array) {
  var result = [];
  for (var i = 0; i < array.length; i++) {
    if (result.includes(array[i])) {
      //如 result 中没有 arry[i],则添加到数组中
      result.push(array[i])
    }
  }
  return result;
}

// 第四种 Map

function arrayNonRepeatfy(arr) {
  let hashMap = new Map();
  let result = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(hashMap.has(arr[i])) { // 判断 hashMap 中是否已有该 key 值
      hashMap.set(arr[i], true);  // 后面的true 代表该 key 值在原始数组中重复了，false反之
    } else {  // 如果 hashMap 中没有该 key 值，添加
      hashMap.set(arr[i], false);  
      result.push(arr[i]);
    }
  } 
  return result;
}

# 说一下JSON.stringify有什么缺点？

undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略
Date 日期调用了 toJSON() 将其转换为了 string 字符串（Date.toISOString()），因此会被当做字符串处理。
NaN 和 Infinity 格式的数值及 null 都会被当做 null。
其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。
JSON.stringify(value[, replacer [, space]])
- replacer 可选
  - 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理;
  - 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;
  - 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化;
- space 缩进

# 说一下for...in 和 for...of的区别?

for...in 遍历得到 key
for...of 遍历得到 value
遍历对象：for...in可以，for...of 不可以
遍历Map Set: for..of 可以，for..in 不可以
遍历 generator：for...of 可以，for...in 不可以
for...in可以用在可枚举的数据
for...of用于可迭代的数据

# 实现一个批量请求函数, 能够限制并发量?

class FetchWithLimits {
  constructor(limit) {
    this.tasks = [];
    this.limit = limit;
    this.workingNum = 0;
  }
  addTask(task) {
    this.tasks.push(task)
  }
  start() {
    for(let i = 0; i < limit, i ++) {
      this.doNext();
    }
  }
  doNext() {
    if (this.tasks.length < limit) {
      this.workingNum++;
      this.tasks.shift()().then(() => {
        this.workingNum --;
        this.doNext();
      })
    }
  }
}

const getData = (url) => new Promise((resolve, reject) => {
  fetch(url).then(() => {
    resolve();
  })
})

const fetchWithLimits = new FetchWithLimits(2);

fetchWithLimits.addTask(() => { getData(url1) })
fetchWithLimits.addTask(() => { getData(url2) })
fetchWithLimits.addTask(() => { getData(url3) })

fetchWithLimits.start();

# 数组转树结构

// 方法1
function arrayToTree(arr, pid) {
  return arr.filter(item => item.pid === pid).map(item => ({ ...item, children: arrayToTree(arr, item.id) }));
}
const data = arrayToTree(arr, 0);
console.log(JSON.stringify(data));

# 去除字符串中出现次数最少的字符，不改变原字符串的顺序

# 写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字

# 手写柯里化

柯里化是什么：是指这样一个函数，它接收函数 A，并且能返回一个新的函数，这个新的函数能够处理函数 A 的剩余参数

function createCurry(func, args) {
    var argity = func.length;
    var args = args || [];
    return function () {
        var _args = [].slice.apply(arguments);
        args.push(..._args);
        if (args.length < argity) {
            return createCurry.call(this, func, args);
        }
        return func.apply(this, args);
    }
}

# 写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,...,a+nb 的时间，然后写一个 myClear，停止上面的 mySetInterVal

公司：头条

分类：JavaScript

# Javascript

# Promise题

# 题目1

# 题目2

# 题目3

# 题目4

# 题目5

# 题目6

# 题目7

# 题目8

# 题目9

# 题目10

# 题目11

# 手写 Promise

# 实现一个函数，判断输入是不是回文字符串

# 说说事件流

# 算法题

# 什么是深拷贝什么是浅拷贝？

# 防抖 & 节流

# 数组乱序

# 数组去重

# 数组展平

# this

# 手写 bind、apply、call

# 箭头函数和普通函数有什么区别？

# 什么是原型，什么是原型链？

# New操作符做了哪些事情？

# 说一下eventloop

# 什么是闭包，闭包的作用

# promise是什么？

# set和map有什么区别？

# for、map和forEach有什么区别

# Loader和Plugin 有什么区别?

# 在地址栏里输入一个地址回车会发生哪些事情

# 重绘和重排?

# Es6常见的语法你知道哪一些?

# 说一下slice splice split 的区别?

# 说一下怎么把类数组转换为数组?

# 说一下数组如何去重,你有几种方法?

# 说一下JSON.stringify有什么缺点？

# 说一下for...in 和 for...of的区别?

# 实现一个批量请求函数, 能够限制并发量?

# 数组转树结构

# 去除字符串中出现次数最少的字符，不改变原字符串的顺序

# 写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字

# 手写柯里化

# 写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,...,a+nb 的时间，然后写一个 myClear，停止上面的 mySetInterVal

# 介绍防抖节流原理、区别以及应用，并用JavaScript进行实现

# 对闭包的看法，为什么要用闭包？说一下闭包原理以及应用场景

# 实现 lodash 的_.get

# 实现 add(1)(2)(3)

# 实现链式调用

# 类数组和数组的区别，dom 的类数组如何转换成数组

# 介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise

# 实现 Promise.all

# 手写发布订阅

# 手写数组转树

# 手写用 ES6proxy 如何实现 arr[-1] 的访问

# 手写实现 Array.flat()

# 大数计算如何实现

# 什么是深拷贝，和浅拷贝有什么区别，动手实现一个深拷贝

# 实现一个方法判断 html 中的标签是否闭合

# 箭头函数和普通函数的区别

# 写出输出结果

# 手写 dom 操作，翻转 li 标签，如何处理更优

# 怎样判断一个对象是否是数组，如何处理类数组对象

# 是否了解 glob，glob 是如何处理文件的，业界是否还有其它解决方案

# 随便打开一个网页，用 JavaScript 打印所有以 s 和 h 开头的标签，并计算出标签的种类

# 1000*1000 的画布，上面有飞机、子弹，如何划分区域能够更有效的做碰撞检测，类似划分区域大小与碰撞检测效率的算法，说一下大致的思路

# 移动设备安卓与 iOS 的软键盘弹出的处理方式有什么不同

# iPhone 里面 Safari 上如果一个输入框 fixed 绝对定位在底部，当软键盘弹出的时候会有什么问题，如何解决

# 给定一个数组，按找到每个元素右侧第一个比它大的数字，没有的话返回-1 规则返回一个数组

# 说一说 promise，有几个状态，通过 catch 捕获到 reject 之后，在 catch 后面还能继续执行 then 方法嘛，如果能执行执行的是第几个回调函数

# var、let、const 的区别

# 说一下 GC

# 如何实现按需加载

# 讲一下 import 的原理，与 require 有什么不同

# 请实现如下的函数

# 是否用过 restful 接口，和其他风格的有什么区别

# 说一下 get、post、put 的区别

# `1000*1000` 的画布，上面有飞机、子弹，如何划分区域能够更有效的做碰撞检测，类似划分区域大小与碰撞检测效率的算法，说一下大致的思路

# 手写代码实现`kuai-shou-front-end=>KuaiShouFrontEnd`

# 说一下`module.exports`和`exports`的区别，`export`和`export default`的区别

# 说一下对`BigInt`的理解，在什么场景下会使用

# `[] == ![]`为什么

# 请实现`$on,$emit`

# 输入一个日期返回几秒前、几小时前、几天前、几月前

# 数组有哪些方法讲讲区别跟使用场景