【测试】一些面试题目和需要补足之处

网络码、promise状态、var同名变量和函数的区别、盒模型中居中、sass中定义一个全局变量（例如定义一个颜色，进行全局使用）、限制css格式仅在本页面内、window.onload和document.ready的区别、select的数据绑定、link引入外部css格式用哪个标签、阻止冒泡、点击绑定多个事件、优化页面、递归、this的指向、es6新特性、深浅拷贝、setInterval和setTimeout的区别、三元式、数组去重。

 

1.网络码

状态码的第一个数字代表了响应的五种状态之一。

（以下均为个人理解，如需要较官方解释请访问——HTTP 状态码 | 菜鸟教程 (runoob.com)）

1XX：表示服务端已收到请求，需要客户端继续操作。（除实验条件下，服务器禁止客户端发送1XX响应）

2XX：表示请求已经成功被服务器接收并处理。

3XX：（重定向）表示还需要客户端进一步操作才能完成请求。（可以理解为，和所请求的资源相关出现了问题）

4XX：客户端的请求出现了错误。（可以理解为，前端出现了错误）

5XX：表示服务器在处理请求过程中有错误。（可以理解为，前端没有问题，是后端出现了问题）

常用：

200——请求成功。（标准成功返回）

301——资源（网页）等被永久转移到其他地址

404——请求的资源（网页）不存在

500——内部服务器错误

 

2.promise状态

promise有三种状态：

pennding——初始状态；fulfilled——成功；rejected——失败。

一个完成的例子

new Promise(function (resolve,reject){
      .....
}).then(function(){
      .....
}).catch(function(){
      .....
});

 

3.var同名变量和函数的区别

考点——变量提升

例如，

var x
var x = function（）{...}

则函数会覆盖变量

 

4.盒模型中居中

已经有前辈写的非常详细非常好了，参考——盒模型居中方法总结_hui_style的博客-CSDN博客_盒模型上下居中

在flex中我常用的就是如下：

justify-content: center;/*设置水平方向*/
align-items: center;/*设置垂直方向*/

 

5.sass中定义一个全局变量（例如定义一个颜色，进行全局使用）

$defaultColor: #3f3f3f;

/* flex布局 */
@mixin flex($justify:space-between, $align: center, $wrap: nowrap) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

通过$定义一个变量，之后在要用到的页面中进行外部引入就可以进行使用了。

参考—— sass 配置全局变量_learning_H的博客-CSDN博客_sass全局变量

 

6.限制css格式仅在本页面内

这个超级常见基础简单

<style lang="scss" scoped>
</style>

scoped就实现了

 

7.window.onload和document.ready的区别

简单来理解，

window.onload，即页面加载，必须要页面内所有东西都加载完成后才能执行；

$(document).ready()是DOM执行完成后执行，不必须等到网页资源加载完毕。

其次，他们的可编写方法个数也不同：

 $(document).ready()可以同时编写多个，并且都可以得到执行；
 window.onload不能同时编写多个，如果有多个window.onload方法，只会其中执行一个

另外，关于简化写法两者也不同：

window.onload没有简化写法；
$ (document).ready(function(){ })可以简写成$(function(){方法体 });又因为JQuery的默认参数是document，则还可以写成$().ready(function{ })

 

 

8.select的数据绑定

这个也超级简单的，需要注意的是他的数据绑定直接在select标签上进行数据绑定

 

9.link引入外部css格式用哪个标签

这个可以总结为——url和herf以及src都在什么时候进行使用

url不是属性，浏览器通过url从web服务器请求页面

src是属性，src的路径是元素加载的路径。常用的标签有：img、script、iframe

herf是属性，src的路径是要跳转和引用资源的路径。常用的标签有：a、link

 

10、阻止冒泡

最常用基础的——event.stopPropagation()

参考： JS中阻止冒泡事件的三种方法_LeungZhenPang的博客-CSDN博客_js阻止事件冒泡的方法

 

11、点击绑定多个事件

最常用基础的——addeventlistener

 

12、优化页面

这个方法很多啦，参考：前端页面性能优化 - 简书 (jianshu.com)

在这里简单写一下：从请求、操作、资源、加载等方面考虑

请求：减少网络请求次数和大小

操作：减少DOM操作，减少重绘和回流的发生

资源：外部引入CSS和JS，减小引入图片等资源的大小，减少代码量

加载：多使用懒加载，减少页面重定向

 

13、递归

递归是一种解决问题的有效方法，在递归过程中，函数将自身作为子例程调用。

需要注意的地方，如果写出死循环，就要电脑风扇呜呜转了。

 

14、this的指向

参考： this指向（全）_MiemieWan的博客-CSDN博客_this 指向

简单描述几个：

箭头函数：指向外层函数的作用域的this指向

构造函数：指向实例

setInterval（）指向window

 

15、es6新特性

参考：ES6 新特性 - 前端杂货 - 博客园 (cnblogs.com)    ECMAScript 6 简明教程 | 菜鸟教程 (runoob.com)

let、block、const作用域

箭头函数

函数参数默认值

spread/rest操作符

对象词法扩展

二进制和八进制字面量

对象和数组的结构

对象超类

模板语法和分隔符

for..of VS for...in

Map VS WeakMap

Set VS WeakSet

类

Symbol

迭代器

Generators

Promise

Proxy与Reflect

字符串

模块

asyn/await

 

16、深拷贝和浅拷贝

参考：浅拷贝与深拷贝 - 知乎 (zhihu.com)

简单的个人理解：浅拷贝只复制地址，深拷贝会在内存里真实克隆一份

实现方法：

浅拷贝

Object.assign()

Arrary.prototype.concat()

Arrary.prototype.slice()

深拷贝

JSON.PARSE(JSON.stringify())

手写递归

函数库lodash

 

17、setInterval和setTimeout的区别

setTimeout只执行一次，而setInterval是循环执行的

定时器的清除：

setTimeout()对应的是 clearTimeout();

setInterval()对应的是 clearInterval();

 

18、三元式

例如：a？b：c

a是一个返回值为true或false的判断式，若为true则执行冒号前（此处为b），false则执行冒号后（此处为c）

 

19、数组去重

最常用的——es6中的set去重

双for循环，然后splice去重

indexOf去重

includes

filter

Map（）

利用对象

详细参考：JS数组去重的方式详细总结（7种） - 掘金 (juejin.cn)

标签：function,题目,请求,面试,window,ready,拷贝,补足,页面
来源： https://www.cnblogs.com/TitiAndCow/p/16425743.html