牛客网|前端试题练习一

目录

1.跨域

2.BFC

3.vuex

4.javascript几种方法判断变量的类型

5.样式有限级的规则

6. js实现异步的方法

7.vue2.0双向绑定的原理和缺陷

8.数组去重有哪些方法

9. null和undefined的区别。如何让一个属性变成null

10. 浮动

11. 箭头函数

12.call apply bind的区别和作用

13.this的指向

14.让元素水平和垂直都居中的方法

15.historyRouter和hashRouter的区别

16.map和forEach的区别

17.时间循环Event loop,宏任务和微任务

18.vue3.0实现数据双向绑定的方法

19.diff算法

20. 三栏布局的实现方案

21.浏览器垃圾回收机制

22.keep-alive的用法

23.commonJs和es6模块化的区别

24.防抖和节流

25. CSRF(cross site request forgery)

26. XSS攻击

27. js的继承方式

28. defer和async的区别

29.浏览器是如何渲染页面的

---

1.跨域

1）跨域：当前页面请求的接口跟该页面的域名，协议，端口有任意一个不同时，产生跨域

2）跨域产生的原因：浏览器为了保证网页的安全，出的同源政策

3）跨域的解决方案：

a.node中间件，nginx反向代理

拦截请求发给代理服务器，代理服务器再发送给后台，代理服务器和后台之间不存在同源政策

b.JSONP

使用scrpt标签将回调函数的参数拼接在url中。后端收到请求，调用该函数，并将数据作为参数返回回去。

c.postmessage

H5新增API，通过发送和接收API实现跨域接口

2.BFC

1)BFC:块格式化上下文，是web一块独立渲染的空间，内部元素的渲染不会影响外部

2)产生BFC:display:flex,inline-block | overflow:hidden,scroll,auto | position:absoulte,fixed | float:left,right

3)常用的清除浮动的BFC方法：overflow:hidden

3.vuex

vuex用于管理项目公共数据。

vuex中包括state，mutation，getters，moudle，actions

state用于保存数据属性

actions用于发送异步请求

mutation用于处理数据

getters是state的计算属性

moudle用于分割store，每个store都有自己的state，mutation，getters，actions

使用方法：store.dispatch,store.commit,store.getters

4.javascript几种方法判断变量的类型

1）typeof ：用于判断基本数据类型，对于引用数据类型，除了function，其他返回obj

2) instanceof：用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上

3) Object.prototype.toString.call： 检测各种类型的数据

4) constructor：用于检测引用数据类型，检测方法是获取当前实例的构造函数判断和某个类是否相同，如果相同的话，就说明是符合那个数据类型的

5.样式有限级的规则

1）！important优先级最大，但是要谨慎使用

2）根据引入类型：内联样式>嵌入样式>外链样式

3）根据选择器优先级：id>类选择器 | 伪类选择器 | 属性选择器 > 后代选择器 | 伪元素选择器 > 子选择器 | 相邻选择器 > 通配符选择器

4） 继承样式优先级较低

5） 浏览器默认样式优先级最低

6. js实现异步的方法

1） 回调函数,优点：简单，容易理解和实现，缺点：不利于代码的阅读和维护

2） generators ：可暂停函数，yield暂停，next继续

3） promise：解决了地狱回调的问题，有三个状态：pendding,fullfilled,rejected,then回调之后，将结果传给promise的函数参数，缺点：不能中途停止promise

4)   async await：await用于等待一个异步任务的完成，async函数就会返回一个promise

7.vue2.0双向绑定的原理和缺陷

vue2使用数据劫持和发布者-订阅者模式实现双向绑定的，数据劫持使用Object.defineProperty来劫持getter和setter，检测数据的改变，当数据发生变化的时候，通知订阅者，订阅者做出相应的变动。缺点：1.一次性递归开销很大，大量递归导致栈溢出 2.不能监听对象的新增和删除属性 3.无法监听数组的方法，当数组对应下标的数据发生变化时

8.数组去重有哪些方法

1）new Set()

2) forEach+indexOf

forEach遍历数组中的每一个元素，indexOf判断该元素后面还有没有重复的元素，没有的话，将该元素推入数组中

9. null和undefined的区别。如何让一个属性变成null

undefined是全局对象的一个属性，当一个函数没有返回值 | 变量没有赋值 | 访问一个对象不存在的属性 | 函数定义了形参但没有传递实参

null表示一个变量被认为地设置为空对象，而不是初始状态，直接赋值为null即可

 undefined typeof 是 undefined；null  typeof 是 obj

原因：js底层保存数据类型是二进制， typeof 判断数据类型是二进制的前三位， null二进制都是0，所以被判断为obj

10. 浮动

浮动的作用：实现文字环绕图片

特点：1）设置了浮动，不占位置

           2）浮动让盒子脱离文档流，如果父盒子没有设置高度，就会发生高度坍塌

           3）浮动元素的兄弟元素布局也会收到影响

清楚浮动：1）伪元素清楚浮动

                  2）新增标签

                  3）overflow：hidden

11. 箭头函数

特点：1）没有this，this从外部获取

           2）不能作为构造函数，同时通过call（）和apply（）调用一个函数时，只能传递参数，第一个参数会被忽略

          3）没有原型和super

使用场景：1）简单的函数表达式

                  2）this与外层函数一致时

12.call a