前端常见面试题(一)

1. 如何合并对象？

Object.assign(obj1,obj2)  {...obj1,...obj2}

2. 说出几个常用的数组方法？

join(),push(),splice(),slice(),concat(),reverse(),sort()

3. ajax步骤？

- 创建XMLHttpRequest异步对象

- 设置请求方式和请求地址

- 用send发送请求

- 监听状态变化

- 接收返回的数据

4. flex布局如何绝对居中？

//父级
.box{
    display:flex;
    justify-content:center;
    align-items:center;
}

5. 普通函数与箭头函数的区别？

- 写法不同

- this指向：箭头函数的this指向不固定window，与父级作用域一致，不能被call、apply、bind改变

                   function定义的函数随调用环境的变化而变化

- 箭头函数不能做构造函数

- 箭头函数没有变量提升

6. 普通函数与构造函数的区别？

- 普通函数：this指向windo；默认返回值是undefined；调用时，没有new；函数名首字母小写；

- 构造函数：this指向实例；用new生成；默认返回值是实例本身；加return：值类型无效，引用类型生效；构造函数首字母大写。

7. 说一下作用域？

js作用域就是变量作用的范围，目的是为了提高程序的可靠性，减少命名冲突。

- 全局作用域：直接编写在script代码中或者一个单独的js文件中的都是全局作用域；全局作用域在页面打开时创建，页面关闭时销毁；

- 局部作用域(函数作用域)：在函数内部就是局部作用域，这个变量只在函数体内部起作用；函数作用域在调用时创建，执行完毕后销毁；每调用一次函数就会创建一个新的函数作用域，他们之间失败相互独立的。

- 块级作用域：被大括号{}包含的就是块级作用域。

拓展：

- 全局变量：在任何一个地方都可以使用，全局变量只有在浏览器关闭的时候才会销毁，比较占用内存资源；

- 局部变量：只能在函数内部使用，当其所在代码块被执行时，会被初始化；当代码块执行完毕就会销毁，因此更节省节约内存空间。

8. 跨域的方式及原理

- jsonp：通过动态创建script标签，请求服务端的php文件，这个文件返回结果是一段js代码(作用：调用我们之前定义好的函数)从而将服务端的数据发送给客户端。优点：简单、兼容性好、可用于解决主流浏览器的跨域数据访问的问题；缺点：仅支持get方法、具有局限性、不安全可能会受到xss攻击。

- nginx：nginx配置一个代理服务器，通过反向代理访问接口。优点：简单、支持所有浏览器、支持session、不会影响服务器性能。

9. 说一下前端都有哪些布局方式？

- 定位布局：position

- 浮动布局：float

- 三列布局：左右宽度固定，中间自适应

- 弹性盒子：flex

- 响应式布局：@media

- 流式布局：bootstrap，移动优先的流式栅格系统（media query float）

- 双飞翼布局：主列嵌套在div后利用主列的左、右外边距定位

10. 模板字符串有哪些优点？

- 可以多行拼接

- 可以在拼接中插入变量

- 可以进行简单的运算

- 可以互相嵌套

- 简单、方便、整洁

11. 如何解决异步回调(回调地域)？

定义：回调地狱指的是多层嵌套的问题，每种任务处理结果都有两种可能性，成功或者失败，那么需要在每种任务执行结束以后分别处理两种可能性。

- promise：promise的状态由pending改为resolved，使用promise的时候，就会自动进入.then的方法中，捕获到成功的数据;promise的状态由pending改为rejected，使用promise的时候，就会自动进入.catch的方法中，返回失败的结果;函数调用，return出去的是一个新的promise对象，作为下次执行时的决定promise状态的主角；

- async、await：async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

12. 什么是微任务和宏任务？

- 微任务：由JavaScript自身发起的；如Promise.then, Object.observe, MutationObserver,process.nextTick(一次性全部执行)

- 宏任务：由浏览器或node发起的。如cript(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering(一次性执行一个)

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

13. class的底层原理：

面向对象【class是基于函数的prototype封装的】

14. JQ对象和原生对象如何转换？

DOM --> JQ：$(DOM)

JQ --> DOM：lis[索引] / lis.get(索引)

15. JQ链式调用的原理？

实例在调用内部方法的时候，返回当前调用这个方法的实例对象this就可以了，因为返回了当前的this就可以继续访问自己的原型了。

16. js的数据类型？

- 基本数据类型 / 值类型 / 原始数据类型：Number，String，Boolean，null，undefined，symbol

- 引用数据类型：Object，Array，Function

17. vue，jQuery，react的区别？

vue：单向数据流，双向数据绑定，以数据驱动视图的响应式框架；

react：单向数据流，单向数据绑定，专注于视图层；

jQuery：操作dom的类库

18. vue的底层原理？

Object.defineProperty()

19. 什么叫SPA(单页面应用)？

单页面：指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进行，页面并没有刷新。【引入后在哪里都能使用，内容的改变不需要重新加载整个页面】