大厂前端面试考什么?

Promise.allSettled = function(promises) {    return new Promise((resolve, reject) => {        if(Array.isArray(promises)) {            if(promises.length === 0) return resolve(promises);            let result = [];            let count = 0;            promises.forEach((item, index) => {                Promise.resolve(item).then(                    value => {                        count++;                        result[index] = {                            status: 'fulfilled',                            value: value                        };                        if(count === promises.length) resolve(result);                    },                     reason => {                        count++;                        result[index] = {                            status: 'rejected'.                            reason: reason                        };                        if(count === promises.length) resolve(result);                    }                );            });        }        else return reject(new TypeError("Argument is not iterable"));    });}

const jsonp = (url, params, callbackName) => {    const generateUrl = () => {        let dataSrc = "";        for(let key in params) {            if(params.hasOwnProperty(key)) {                dataSrc += `${key}=${params[key]}&`            }        }        dataSrc += `callback=${callbackName}`;        return `${url}?${dataSrc}`;    }    return new Promise((resolve, reject) => {        const scriptEle = document.createElement('script');        scriptEle.src = generateUrl();        document.body.appendChild(scriptEle);        window[callbackName] = data => {            resolve(data);            document.removeChild(scriptEle);        }    });}

function typeOf(obj) {-   let res = Object.prototype.toString.call(obj).split(' ')[1]-   res = res.substring(0, res.length - 1).toLowerCase()-   return res// 更好的写法+   return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()}typeOf([])        // 'array'typeOf({})        // 'object'typeOf(new Date)  // 'date'

for (const macroTask of macroTaskQueue) {    handleMacroTask();      for (const microTask of microTaskQueue) {          handleMicroTask(microTask);    }}

1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全

首先说明什么是闭包，闭包简单来说就是函数嵌套函数，内部函数引用来外部函数的变量，从而导致垃圾回收机制没有把当前变量回收掉，这样的操作带来了内存泄漏的影响，当内存泄漏到一定程度会影响你的项目运行变得卡顿等等问题。因此在项目中我们要尽量避免内存泄漏。

// call
Function.prototype.call = function (context, ...args) {  context = context || window;
  const fnSymbol = Symbol("fn");  context[fnSymbol] = this;
  context[fnSymbol](...args);  delete context[fnSymbol];}

// apply
Function.prototype.apply = function (context, argsArr) {  context = context || window;
  const fnSymbol = Symbol("fn");  context[fnSymbol] = this;
  context[fnSymbol](...argsArr);  delete context[fnSymbol];}

// bind
Function.prototype.bind = function (context, ...args) {  context = context || window;  const fnSymbol = Symbol("fn");  context[fnSymbol] = this;
  return function (..._args) {    args = args.concat(_args);
    context[fnSymbol](...args);    delete context[fnSymbol];     }}

Promise.resolve('1')  .then(res => {    console.log(res)  })  .finally(() => {    console.log('finally')  })Promise.resolve('2')  .finally(() => {    console.log('finally2')      return '我是finally2返回的值'  })  .then(res => {    console.log('finally2后面的then函数', res)  })

1finally2finallyfinally2后面的then函数 2

Promise.resolve('1')  .finally(() => {    console.log('finally1')    throw new Error('我是finally中抛出的异常')  })  .then(res => {    console.log('finally后面的then函数', res)  })  .catch(err => {    console.log('捕获错误', err)  })

'finally1''捕获错误' Error: 我是finally中抛出的异常

有五种，分别是 State、 Getter、Mutation 、Action、 Module1、state => 基本数据(数据源存放地)2、getters => 从基本数据派生出来的数据3、mutations => 提交更改数据的方法，同步4、actions => 像一个装饰器，包裹mutations，使之可以异步。5、modules => 模块化Vuex
1、Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。2、每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

实现一个LazyMan，可以按照以下方式调用:LazyMan(“Hank”)输出:Hi! This is Hank!
LazyMan(“Hank”).sleep(10).eat(“dinner”)输出Hi! This is Hank!//等待10秒..Wake up after 10Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出Hi This is Hank!Eat dinner~Eat supper~
LazyMan(“Hank”).eat(“supper”).sleepFirst(5)输出//等待5秒Wake up after 5Hi This is Hank!Eat supper

class _LazyMan {  constructor(name) {    this.tasks = [];    const task = () => {      console.log(`Hi! This is ${name}`);      this.next();    };    this.tasks.push(task);    setTimeout(() => {      // 把 this.next() 放到调用栈清空之后执行      this.next();    }, 0);  }  next() {    const task = this.tasks.shift(); // 取第一个任务执行    task && task();  }  sleep(time) {    this._sleepWrapper(time, false);    return this; // 链式调用  }  sleepFirst(time) {    this._sleepWrapper(time, true);    return this;  }  _sleepWrapper(time, first) {    const task = () => {      setTimeout(() => {        console.log(`Wake up after ${time}`);        this.next();      }, time * 1000);    };    if (first) {      this.tasks.unshift(task); // 放到任务队列顶部    } else {      this.tasks.push(task); // 放到任务队列尾部    }  }  eat(name) {    const task = () => {      console.log(`Eat ${name}`);      this.next();    };    this.tasks.push(task);    return this;  }}function LazyMan(name) {  return new _LazyMan(name);}

function isObject(val) {  return typeof val === "object" && val !== null;}
function deepClone(obj, hash = new WeakMap()) {  if (!isObject(obj)) return obj;  if (hash.has(obj)) {    return hash.get(obj);  }  let target = Array.isArray(obj) ? [] : {};  hash.set(obj, target);  Reflect.ownKeys(obj).forEach((item) => {    if (isObject(obj[item])) {      target[item] = deepClone(obj[item], hash);    } else {      target[item] = obj[item];    }  });
  return target;}
// var obj1 = {// a:1,// b:{a:2}// };// var obj2 = deepClone(obj1);// console.log(obj1);

//vue中购物车逻辑的实现1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性
2. 在vuex中state中添加一个数据 cartList 用来保存这个数组
3. 由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中
4. 加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象
5. 在商品详情页，点击加入购物车按钮的时候，调用vuex提供的addToCart这个mutation将当前的商品信息 （id count）传给addTocart  this.$store.commit("addToCart", {id:  , count：})
// js中购物车逻辑的实现1.商品页点击“加入购物车”按钮，触发事件
2.事件调用购物车“增加商品”的Js程序（函数、对象方法）
3.向Js程序传递传递“商品id”、“商品数量”等数据
4.存储“商品id”、“商品数量”到浏览器的localStorage中
**展示购物车中的商品******
1.打开购物车页面
2.从localStorage中取出“商品Id”、“商品数量”等信息。
3.调用服务器端“获得商品详情”的接口得到购物车中的商品信息（参数为商品Id）
4.将获得的商品信息显示在购物车页面。
**完成购物车中商品的购买******
1.用户对购物车中的商品完成购买流程，产生购物订单
2.清除localStorage中存储的已经购买的商品信息
备注1：购物车中商品存储的数据除了“商品id”、“商品数量”之外，根据产品要求还可以有其他的信息，例如完整的商品详情（这样就不用掉服务器接口获得详情了）、购物车商品的过期时间，超过时间的购物车商品在下次打开网站或者购物车页面时被清除。
备注2：购物车商品除了存储在localStorage中，根据产品的需求不同，也可以存储在sessionStorage、cookie、session中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。

setTimeout(function () {  console.log(1);}, 100);
new Promise(function (resolve) {  console.log(2);  resolve();  console.log(3);}).then(function () {  console.log(4);  new Promise((resove, reject) => {    console.log(5);    setTimeout(() =>  {      console.log(6);    }, 10);  })});console.log(7);console.log(8);

23784561

1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

typeof  其中数组、对象、null都会被判断为Object，其他判断都正确
instanceof 只能判断引用数据类型,不能判断基本数据类型
constructor 它有2个作用 一是判断数据的类型，二是对象实例通过constructor对象访问它的构造函数。需要注意的事情是如果创建一个对象来改变它的原型,constructor就不能来判断数据类型了
Object.prototype.toString.call()