高级前端一面面试题（附答案）

//vue中购物车逻辑的实现
1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性


在vuex中state中添加一个数据 cartList 用来保存这个数组


由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中


加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象


在商品详情页，点击加入购物车按钮的时候，调用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中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。

const getJSON = function (url) {

return new Promise((resolve, reject) => {

const xhr = new XMLHttpRequest();

xhr.open("GET", url, false);

xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {

if (xhr.readyState !== 4) return;

if (xhr.status === 200 || xhr.status === 304) {

resolve(xhr.responseText);

} else {

reject(new Error(xhr.responseText));

}

};

xhr.send();

});

};

1.读取缓存：

搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)

2.DNS 解析:将域名解析成 IP 地址

3.TCP 连接：TCP 三次握手，简易描述三次握手

客户端：服务端你在么？

服务端：客户端我在，你要连接我么？

客户端：是的服务端，我要链接。

连接打通，可以开始请求来

4.发送 HTTP 请求

5.服务器处理请求并返回 HTTP 报文

6.浏览器解析渲染页面

7.断开连接：TCP 四次挥手

关于第六步浏览器解析渲染页面又可以聊聊如果返回的是html页面

根据 HTML 解析出 DOM 树

根据 CSS 解析生成 CSS 规则树

结合 DOM 树和 CSS 规则树，生成渲染树

根据渲染树计算每一个节点的信息

根据计算好的信息绘制页面

<!-- link元素中的CSS媒体查询 -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->

<style>

@media (max-width: 600px) {   .facet_sidebar {     display: none;   } }

</style>

// 用法如下:

function fn1(x) {

return x + 1;

}

function fn2(x) {

return x + 2;

}

function fn3(x) {

return x + 3;

}

function fn4(x) {

return x + 4;

}

const a = compose(fn1, fn2, fn3, fn4);

console.log(a(1)); // 1+4+3+2+1=11

function compose(...fn) {

if (!fn.length) return (v) => v;

if (fn.length === 1) return fn[0];

return fn.reduce(

(pre, cur) =>

(...args) =>

pre(cur(...args))

);

}

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(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

// 区别

computed 计算属性：依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。

watch 侦听器：更多的是观察的作用,无缓存性,类似与某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作

//运用场景

当需要进行数值计算,并且依赖与其它数据时,应该使用computed,因为可以利用computed的缓存属性,避免每次获取值时都要重新计算。

当需要在数据变化时执行异步或开销较大的操作时,应该使用watch,使用watch选项允许执行异步操作（访问一个API),限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

const async1 = async () => {

console.log('async1');

setTimeout(() => {

console.log('timer1')

}, 2000)

await new Promise(resolve => {

console.log('promise1')

})

console.log('async1 end')

return 'async1 success'

}

console.log('script start');

async1().then(res => console.log(res));

console.log('script end');

Promise.resolve(1)

.then(2)

.then(Promise.resolve(3))

.catch(4)

.then(res => console.log(res))

setTimeout(() => {

console.log('timer2')

}, 1000)

script start

async1

promise1

script end

1

timer2

timer1

function add(a, b, c) {

return a + b + c

}

add(1, 2, 3)

let addCurry = curry(add)

addCurry(1)(2)(3)

function curry(fn) {

let judge = (...args) => {

if (args.length == fn.length) return fn(...args)

return (...arg) => judge(...args, ...arg)

}

return judge

}

1.ES6引入来严格模式

变量必须声明后在使用

函数的参数不能有同名属性, 否则报错

不能使用with语句 (说实话我基本没用过)

不能对只读属性赋值, 否则报错

不能使用前缀0表示八进制数,否则报错 (说实话我基本没用过)

不能删除不可删除的数据, 否则报错

不能删除变量delete prop, 会报错, 只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.caller (说实话我基本没用过)

不能使用arguments.callee (说实话我基本没用过)

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈 (说实话我基本没用过)

增加了保留字（比如protected、static和interface）

2.关于let和const新增的变量声明
3.变量的解构赋值
4.字符串的扩展

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

5.数值的扩展

Number.isFinite()用来检查一个数值是否为有限的（finite）。

Number.isNaN()用来检查一个值是否为NaN。

6.函数的扩展

函数参数指定默认值

7.数组的扩展

扩展运算符

8.对象的扩展

对象的解构

9.新增symbol数据类型
10.Set 和 Map 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。
Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

11.Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问

都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

Vue3.0使用了proxy

12.Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

特点是：

对象的状态不受外界影响。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。

13.async 函数

async函数对 Generator 函数的区别：

（1）内置执行器。

Generator 函数的执行必须靠执行器，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

14.Class

class跟let、const一样：不存在变量提升、不能重复声明...

ES6 的class可以看作只是一个语法糖，它的绝大部分功能

ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

15.Module

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

import和export命令以及export和export default的区别

Function.prototype.myCall = function (context, ...args) {

if (!context || context === null) {

context = window;

}

// 创造唯一的key值  作为我们构造的context内部方法名

let fn = Symbol();

context[fn] = this; //this指向调用call的函数

// 执行函数并返回结果 相当于把自身作为传入的context的方法进行调用了

return contextfn;

};

// apply原理一致  只是第二个参数是传入的数组

Function.prototype.myApply = function (context, args) {

if (!context || context === null) {

context = window;

}

// 创造唯一的key值  作为我们构造的context内部方法名

let fn = Symbol();

context[fn] = this;

// 执行函数并返回结果

return contextfn;

};
//bind实现要复杂一点  因为他考虑的情况比较多 还要涉及到参数合并(类似函数柯里化)
Function.prototype.myBind = function (context, ...args) {

if (!context || context === null) {

context = window;

}

// 创造唯一的key值  作为我们构造的context内部方法名

let fn = Symbol();

context[fn] = this;

let _this = this;

//  bind情况要复杂一点

const result = function (...innerArgs) {

// 第一种情况 :若是将 bind 绑定之后的函数当作构造函数，通过 new 操作符使用，则不绑定传入的 this，而是将 this 指向实例化出来的对象

// 此时由于new操作符作用  this指向result实例对象  而result又继承自传入的_this 根据原型链知识可得出以下结论

// this.proto === result.prototype   //this instanceof result =>true

// this.proto.proto === result.prototype.proto === _this.prototype; //this instanceof _this =>true

if (this instanceof _this === true) {

// 此时this指向指向result的实例  这时候不需要改变this指向

this[fn] = _this;

this[fn](...[...args, ...innerArgs]); //这里使用es6的方法让bind支持参数合并

} else {

// 如果只是作为普通函数调用  那就很简单了 直接改变this指向为传入的context

context[fn](...[...args, ...innerArgs]);

}

};

// 如果绑定的是构造函数 那么需要继承构造函数原型属性和方法

// 实现继承的方式: 使用Object.create

result.prototype = Object.create(this.prototype);

return result;

};
//用法如下
// function Person(name, age) {

//   console.log(name); //'我是参数传进来的name'

//   console.log(age); //'我是参数传进来的age'

//   console.log(this); //构造函数this指向实例对象

// }

// // 构造函数原型的方法

// Person.prototype.say = function() {

//   console.log(123);

// }

// let obj = {

//   objName: '我是obj传进来的name',

//   objAge: '我是obj传进来的age'

// }

// // 普通函数

// function normalFun(name, age) {

//   console.log(name);   //'我是参数传进来的name'

//   console.log(age);   //'我是参数传进来的age'

//   console.log(this); //普通函数this指向绑定bind的第一个参数 也就是例子中的obj

//   console.log(this.objName); //'我是obj传进来的name'

//   console.log(this.objAge); //'我是obj传进来的age'

// }
// 先测试作为构造函数调用

// let bindFun = Person.myBind(obj, '我是参数传进来的name')

// let a = new bindFun('我是参数传进来的age')

// a.say() //123
// 再测试作为普通函数调用

// let bindFun = normalFun.myBind(obj, '我是参数传进来的name')

//  bindFun('我是参数传进来的age')

function flatten(arr) {

let result = [];

for (let i = 0; i < arr.length; i++) {

if (Array.isArray(arr[i])) {

result = result.concat(flatten(arr[i]));

} else {

result = result.concat(arr[i]);

}

}
return result;

}
const a = [1, [2, [3, 4]]];

console.log(flatten(a));