面试题2020最新8月
借用望眼镜的一段话 共勉 加油
从一个简单的输入验证器发展成为一门强大的编程语言，万全出乎人们的意料。
它既是一门非常简单的语言，又是一门非常复杂的语言。
说它简单，是因为学会使用它只需要片刻功夫；
而说它复杂，是因为要真正掌握它则需要数年的时间。
想要全面理解和掌握 ，关键在于弄清楚它的本质、历史和局限性。
补充一句。 很多东西，不需要说出全部方法，能说几个就行
第一套
1、说一下flex布局。
2、数组的方法。
3、二维数组转成一维数组的方法。 ES6的方法。 ES5的方法。
4、 react 生命周期
5、 react中 子组件向父组件传递消息。
6、 讲一下ts么？
7、 了解promise函数吗？
8、react-motion了解过么？
9、 跨域介绍一下。
第二套
1、node为什么是单线程的？
2、 为什么是单线程的？ 讲一下异步 同步。
3、serTimeout(, 0) 后面跟着同步语句， 哪个先执行。
4、场景题： 十个 promise 。 其中一个 promise执行错误，返回一个空数组。
5、react中的 hook有用过么？
6、说一下 原型链？
7、说一下 class ?
8、闭包场景，什么是闭包。
9、 key 出现唯一值得方法？
10、 react 生命周期中的render()，为什么必须有？
11、 说一下虚拟dom。
第三套
1、 get 和 post 的区别？
2、 post的参数？
3、 讲一下原型链？ 说一下prototype ？
4、 http是什么？
5、 url的过程？
6、 url的几步需要注意哪些问题？
6、 什么是对象？
7、 数组是对象么？
8、 为什么数组是对象？
9、 node 和 react 的区别？
10、 react组件写过么？ 怎么管理数据的？
11、场景提。 一个页面 有100张 图表， 每一个图表 都需要发送一个http请求。怎么样优化？
12、 打算以后怎么提升自己？
第四套
1、new的过程是什么？
2、 事件机制。（他们的顺序）
3、 flex 里面盒子 放在两个button，两侧排列。不留空白。（面试官说题比较偏，可以不回答）
4、var a if (a == false ) a的类型都有什么？
5、sass 和 lass区别？
6、ES6 中 class实现原理 (就是经过babel转码之后是什么？)
7、git 是用代码上传的么？ 有没有其他方式？
8、redux流， redux都知道什么？ 实现原理。 除了组件通信，还能用来干什么？
9、axios如何实现同步。 （ 就是说需要得到 axios 的 答案，才能继续代码）
10、数组里面取第二大的数。
11、vue获得原声dom元素。 除了 ref, 选择器获得，还有哪些方法？
12、 promise 中 的 api 说一下？
13、java 类有多继承么？
14、抽象类和接口的区别？
15、文件上传做过没有?
16、redux 除了组件通信还用来做什么？
17、组件通信， 除了 redux , props。 还有什么方法可以实现？
18、if( Boolean == ‘string’) 过程是什么？
19、 ajax和axios、fetch的区别
20、 抽象类中的非抽象方法可以有方法体吗？
我自己的理解 以及网上查找的答案 仅供参考
第一套
1、说一下flex布局。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2、数组的方法。
https://blog.csdn.net/qq_35898059/article/details/107839703
3、二维数组转成一维数组的方法。 ES6的方法。 ES5的方法。
方法1
arr1.reduce(function (a, b) { return a.concat(b)} ); 遍历每一项直接 concat拼接。
方法2
先把二维数组 变成字符串 arr.toString() arr.join() 然后通过 str.split(',') 把字符串变成数组。
方法3 mdn（ 官网） 说的 flat()方法
4、 react 生命周期（出现三次）
// 创建
constructor() //组件挂载之前，会调用它的构造函数
static getDerivedStateFromProps() // 在初始挂载及后续更新时都会被调用
render() // 不负责渲染 ， 负责返回dom元素，并不是与浏览器交互
componentDidMount() // 上树完成
static getDerivedStateFromProps() // 在初始挂载及后续更新时都会被调用
shouldComponentUpdate() // 应该更新
render() // 调用创建期的render方法
getSnapshotBeforeUpdate() // 更新之前
componentDidUpdate() // 更新完成
componentWillUnmount() // 从DOM中删除组件时，将调用此方法：
5、 react中 子组件向父组件传递消息。
通过 修改父组件的状态数据。
第一步 在父组件中，为子组件传递方法，并绑定父组件 .bing(this)绑定作用域
{/*1 传递方法，绑定父组件 */}
{/* 6、 讲一下ts么？
https://www.tslang.cn/docs/home.html
7、 了解promise函数吗？
Es6 提供的 将异步操作队列化
8、react-motion了解过么？
用react-motion实现react动画
9、 跨域介绍一下。
协议、端口、路径、hash 不同 属于跨域
浏览器跨域， 如果不设置跨域 会有安全问题。
如果没有跨域限制，是怎么样的危险的呢？
用户登录了一个网站，服务器向用户的cookie添加了标识。然后用户访问了其他网站。其他网站恶意发送ajax请求。这样的cookie被携带过去。其他网站就可以代替你做操作了。
还有以前经常用的一种方式盗取账号密码。 使用ifame嵌套一个 正规网站。 ifame放在头部。用户输入账号密码，我们通过主网站访问dom节点。就可以得到他的账号密码。 零几年的时候，最常用的盗号手段。
跨域的解决方案
onp
nginx代理跨域
node 中间件代理跨域
h5 提供的 postMessage()
第二套
1、node 为什么是单线程的？
node 构建在chrome的V8上的JavaScript的运行环境。
我觉得单线程 是因为 JavaScript 就是单线程的。 他是 的运行环境。自然也是单线程的了。
这样回答之后，面试官问， 为什么是单线程的。
2、 为什么是单线程的？ 讲一下异步 同步。
https://blog.csdn.net/baidu_24024601/article/details/51861792
https://www.cnblogs.com/Yellow-ice/p/10433423.html
是单线程是和 他的作用 有关系。
通常用于浏览器，使开发者能通过DOM来操纵网页内容、或透过AJAX与IndexedDB来操作数据，所以他只能是单线程。同一时间只能执行一件事。为了保证DOM操作是 能看到的。
因为JavaScript的单线程，因此同个时间只能处理同个任务，所有任务都需要排队，前一个任务执行完，才能继续执行下一个任务，但是，如果前一个任务的执行时间很长，比如文件的读取操作或ajax操作，后一个任务就不得不等着，拿ajax来说，当用户向后台获取大量的数据时，不得不等到所有数据都获取完毕才能进行下一步操作，用户只能在那里干等着，严重影响用户体验
因此，JavaScript在设计的时候，就已经考虑到这个问题，主线程可以完全不用等待文件的读取完毕或ajax的加载成功，可以先挂起处于等待中的任务，先运行排在后面的任务，等到文件的读取或ajax有了结果后，再回过头执行挂起的任务，因此，任务就可以分为同步任务和异步任务
（2）同步任务
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务
（3）异步任务
异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务
3、serTimeout( , 0) 后面跟着同步语句， 哪个先执行。
异步任务是指不进入主线程，而进入任务队列的任务。 所以同步先执行。
4、场景题： 十个 promise 。 其中一个 promise执行错误，返回一个空数组。
十个都执行。 放多个的方法
有 promise.all（） 返回数组，每一项 是 每一个promise的 数据。 全部成功执行， success方法
有 promise.race() 返回数据， 有一项成功执行， 就往下执行 success方法。
在所有的 promise 进行判断。
if(NaN == NaN) {
}else {
return resolve([]);
}
5、react中的 hook有用过么？
为了解决函数式组件，不能像基于类的组件一样，可以使用state以及React的其他特性。
usestate 把函数组件转换成 类组件。 参数是 state。返回值是一个数组，
数组第一个值是state名称，第二值是更新state函数。
用法 const [count,setCount]=useState(0)
例如给一个 count 绑定在 函数组件上。 const [count,setCount]=useState(0) 这种方式。
每次点击， 都需要执行 didMount Didupdate() 这两个生命周期，在生命周期中修改数据。修改数据的代码是一样的。
这个时候就引入了 useEffect();
useEffect() 参数是fn。 直接写 生命周期中修改数据的方法。
6、说一下 原型链？
每个对象都有一个指向它的原型（prototype）对象的内部链接。
这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。
7、说一下 class ?
没有类的概念，通过class 定义类。
class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法
constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法
8、闭包场景，什么是闭包。
闭包就是 一个函数引用另外一个函数的变量，当这个函数没有执行，那个被引用变量的函数不会被销毁，从而达到保存数据的目的。
工作中遇到的闭包说一下。。。。。。
https://blog.csdn.net/qq_35898059/article/details/107550006
9、 key 出现唯一值得方法？
10、 react 生命周期中的render()，为什么必须有？
因为React组件的父类React.Component类对除了render之外的生命周期都有默认实现
render 函数并不做实际的渲染动作
生命周期中的render 不是渲染的render。
他返回虚拟dom。
然后 react-dom 中提供的 render方法渲染虚拟dom。
11、 说一下虚拟dom。
第三套
1、 get 和 post 的区别？
1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
4. Get执行效率却比Post方法好。Get是form提交的默认方法。
2、 post的参数？
action：url 地址，服务器接收表单数据的地址
method：提交服务器的http方法，一般为post和get
name：最好好吃name属性的唯一性
headers: 请求头
enctype: 表单数据提交时使用的编码类型，默认使用"pplication/x-www-form-urlencoded"，如果是使用POST请求，则请求头中的content-type指定值就是该值。如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，才能完成传递文件数据。
3、 讲一下原型链？ 说一下prototype ？
prototype 属性使您有能力向对象添加属性和方法。
prototype 是原型对象。
构造函数 ---`prototype`---> 原型对象
实例（通过new构造函数产生的对象）----`__proto__`-------->原型对象
原型对象------`constructor`----->构造函数
4、 http是什么？
称为 超文本传输协议。 是无状态的。
5、 url的过程？
1、 浏览器先解析服务器主机名
2、 浏览器发个请求到本地dns服务器，本地dns服务器去缓存dns中找，缓存有，返回ip地址，没有就去做一个次递归查询，到根dns返回权威dns服务器ip地址，再去权威dns服务器返回顶级域dns服务器ip地址，再去顶级域dns服务器返回主机ip地址。
3、解析端口号
4、在建立tcp连接，经过三次握手。
5、客户端发送请求报文。
6、服务器响应报文。
7、通过四次挥手关闭连接。
6、 url的几步需要注意哪些问题？
7、 什么是对象？
存储在 内存空间。
是以键值对的形式存的
8、 数组是对象么？
是对象的子类型。 存储的方式 和 对象的方式 都是键值对的方式。 所以可以说 数组是对象。
9、 node 和 react 的区别？
node 是 运行环境。
react 是一个框架
10、 react组件写过么？ 怎么管理数据的？
11、场景提。 一个页面 有100张 图表， 每一个图表 都需要发送一个http请求。怎么样优化？
意思是： 前端页面有大量请求需要发送，如果优化？
首先先说接口的时候 为什么page不和列表一起返回？再说数据大情况下。 可以做本地缓存、radis缓存。做接口请求合并、node合并请求等。 使用二级域名突破请求最大次数限制，也可以做请求的预解析等等等等。非强关联的可以延迟请求 先给首屏加载出来
请求委托， 合并请求。
12、 打算以后怎么提升自己？
第四套
1、new的过程是什么？
1、申请了一块内存空间
2、
2、改变this的指向，将this指向了要生成的对象
3、为this指向的对象赋值
4、返回this指向的对象
2、 事件机制。（事件冒泡和捕获顺序）
点击button 。哪个先输出。
冒泡： 从下到上， 从里到外。
捕获： 从上到下。 从外到里。
3、 flex 里面盒子 放在两个button，两侧排列。不留空白。
主轴对齐方式：。。。
justify-center: space-between;
4、var a if (a == false ) a的类型都有什么？
a == NaN是不可以。
1: false
2: null
3:undefined
4:"" 空字符串
5:0
5、sass 和 lass区别
Less和Sass的相同之处：
1.变量：可以单独定义一系列通用的样式，在需要的时候进行调用。
2.混合（Mixins）：class中的class（讲一个class引入到另一个class，实现class与class之间的继承），还可以带参数的混合，就像函数一样。
3.嵌套：class中嵌套class，从而减少代码的重复。
4.运算：提供了加减乘除四则运算，可以做属性值可颜色的运算。
Less和Sass之间的区别：
1. 编译环境不一样。 Sass 需要Ruby环境，是在服务器端处理的。而less需要引入less. 来处理。
2. 变量名不一样。 Less中使用@ , Sass中使用 $
3. 插值语法不同， Less 中 @{key} ,Sass 中使用 #{$key}
4. Sass的混合相当于Less的方法， Sass的继承相当于 Less的混合。
5. 输出设置不同。 Less 没有输出设置。 Sass 提供4种输出选项： nested、compact、compressed 和 expanded。
nested: 用于嵌套缩进的CSS代码。
compact: 显示简洁格式的CSS代码。
compressed: 显示压缩后的CSS代码。
expanded: 用于展开多行的CSS代码。
6. sass支持条件语句。 如 if...else、 for循环等。
7. 引用外部CSS条件方式不同。 Sass 引用外部文件必须以 ‘_’开头。如果以_命名，Sass 会认为改文件是一个引用文件，不会编译成CSS。
8. Sass 和 Less 的工具库不同。 Sass 有工具库 Compass。 Less 有UI组件库Bootstrap。
6、ES6 中 class实现原理 (就是经过babel转码之后是什么？)
class Parent {
constructor(name,age){
this.name = name;
this.age = age;
}
speakSomething(){
console.log("I can speek chinese");
}
}
// 转码之后：
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Parent = function () {
function Parent(name, age) {
_classCallCheck(this, Parent);
this.name = name;
this.age = age;
}
_createClass(Parent, [{
key: "speakSomething",
value: function speakSomething() {
console.log("I can speek chinese");
}
}]);
// 形成了闭包。
return Parent;
}();
7、git 是用代码上传的么？ 有没有其他方式
TortoiseGit git小乌龟
tortoisesvn svn小乌龟
8、redux流， redux都知道什么？ 实现原理。 除了组件通信，还能用来干什么？
redux 由四部分组成
components 组件视图
actions 组件或者用户发布的消息
store 存储数据
reduers 捕获消息，处理消息
redux特点
redux 有三个特点
1 单一数据源
在一个应用程序中，有且只有一个 store 对象。
2 state 是只读的
state 是只读的，不能修改，只能读取
即使在 reducers 中，也不能修改数据
3 函数式编程 （函数优先 函数作为变量传入，只用"表达式（返回值）"，不用"语句（没有返回值）"）
高阶函数： 参数是函数 或者 返回值是函数。
redux 为了简化我们开发，让我们使用函数式编程。
在 redux 中，reduer 就是函数，定义 reducer 就是定义一个函数。
除了组件通信。
10、axios如何实现同步。 （ 就是说需要得到 axios 的 答案，才能继续代码）
ajax 实现同步， 直接设置 async:false 即可。
vue中 可以使用 jquery 。使用jquery中的async属性。 不推荐
vue中 可以使用 es7 异步特性async / await。 await等待异步完成。 await that.$api.scheduleApi
自己认为： 通过 generator 可以实现同步ajax。
实现： 函数中包含ajax。
然后generator 中 同步 包含ajax的函数。
补充： generator定义
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
11、flex实现横竖。
flex-direction: row。 flex-direction:column
12、数组里面取第二大的数。
第一种方法： 将数组从大到小排序然后找第二个。
第二种方法： 定义两个变量max min循环遍历分别存储当前最大和第二大的数然后输出第二大的数min；
先定义两个变量：一个变量用来存储数组的最大数，初始值为数组首元素，另一个变量用来存储第二大的数，初始值为最小负整数，然后遍历数组元素，如果数组元素的值比最大数变量还大，更新最大数；若数组元素的值比最大值还小，则与第二大的数比较，若该数比第二大数大，则更新第二大的数。
13、vue获得原声dom元素。 除了 ref, 选择器获得，还有哪些方法？
this.$el.querySelector('#id')
16、java 类有多继承么
类不支持多继承。 通过接口间接实现多继承。
17、抽象类和接口区别
抽象类要被子类继承，接口要被类实现。
接口只能做方法声明，抽象类中可以作方法声明，也可以做方法实现。
接口里定义的变量只能是公共的静态的常量，抽象类中的变量是普通变量.
接口是设计的结果，抽象类是重构的结果。
抽象类和接口都是用来抽象具体对象的，但是接口的抽象级别最高。
抽象类可以有具体的方法和属性，接口只能有抽象方法和不可变常量。
抽象类主要用来抽象类别，接口主要用来抽象功能。
18、文件上传做过没有?
第一种：经典的form和input上传。
设置form的aciton为后端页面，enctype="multipart/form-data"，type=‘post’。
第二种：使用formData上传。
用 构造form表单的数据，简单高效，但最低只兼容IE10，所以需要兼容IE9的童鞋们就略过这个方法吧。
第三种：使用fileReader读取文件数据进行上传。
19、redux 除了组件通信还用来做什么？
20、组件通信， 除了 redux , props。 还有什么方法可以实现？
localstorage sessionstorage 也可以，就是麻烦一些
21、if( Boolean == ‘string’) 过程是什么？
非严格比较 == ，
当比较的两个数据类型不同时，对于一些非number类型进行数据转化再比较。
类型为boolean,string将转化为number再进行比较。
类型为object，先调用 .valueOf 方法获取结果。 如果没定义，再尝试调用 .toString方法获取结果进行比较。
null 与 undefined 比较返回true。
其他不同类型比较返回false.
22、 ajax和axios、fetch的区别
axios 是一个基于Promise 用于浏览器和 node 的 HTTP 客户端，本质上也是对原生XHR的封装
23、 抽象类中的非抽象方法可以有方法体吗？
可以有，这样的方法就不是抽象方法了，前面也不能再加abstract修饰，继承它的子类的也不必非要去实现它。
24、this对象的理解
1、this 总是指向函数的直接调用者
2、如果有new关键字，this指向new出来的那个对象。
3、在事件中，this指向触发这个事件的对象，特殊的是， IE 中 attachEvent 中 this总是指向全局对象window
19、redux 除了组件通信还用来做什么？
20、组件通信， 除了 redux , props。 还有什么方法可以实现？
localstorage sessionstorage 也可以，就是麻烦一些
21、if( Boolean == ‘string’) 过程是什么？
非严格比较 == ，
当比较的两个数据类型不同时，对于一些非number类型进行数据转化再比较。
类型为boolean,string将转化为number再进行比较。
类型为object，先调用 .valueOf 方法获取结果。 如果没定义，再尝试调用 .toString方法获取结果进行比较。
null 与 undefined 比较返回true。
其他不同类型比较返回false.
22、 ajax和axios、fetch的区别
axios 是一个基于Promise 用于浏览器和 node 的 HTTP 客户端，本质上也是对原生XHR的封装
23、 抽象类中的非抽象方法可以有方法体吗？
可以有，这样的方法就不是抽象方法了，前面也不能再加abstract修饰，继承它的子类的也不必非要去实现它。
24、this对象的理解
1、this 总是指向函数的直接调用者
2、如果有new关键字，this指向new出来的那个对象。
3、在事件中，this指向触发这个事件的对象，特殊的是， IE 中 attachEvent 中 this总是指向全局对象window