react两年经验，常见面试题（自己整理中）

一、面试题汇总

webpack和gulp的区别

gulp

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

PS：简单说就一个Task Runner

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

PS：webpack is a module bundle

gulp与webpack可以实现一些相同功能，如下（列举部分）：
文件合并与压缩（css）、文件合并与压缩（js）、sass/less预编译、启动server、版本控制
两者区别：
虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

总结

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。

如何阻止冒泡

防止冒泡和捕获:e.stopPropagation()

取消默认事件:e.preventDefault()

如何阻止a链接默认跳转

e.preventDefault(); href="javascript:void(0);"

移动端如何适配以及测试

样式多使用百分比，或者使用bootstrap等适配框架，媒体查询进行适配

测试通过chrome浏览器控制台的模拟手机进行测试，或者通过不同型号的真机测试

vue路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

了解ES6吗？有哪些API分别有什么作用？和ES5比较有哪些不同？

ES6：

let const的命令：ar是可以变量提升的。而let和const是必须声明后才能调用的。对于let和const来说，这里就是暂缓性死区。const为常量，不能修改值。let可以修改值。

数组

let array = [1,2,3,4,5];
//map
let mapResult = array.map(num => num + 1);
console.log(array); // [ 1, 2, 3, 4, 5 ]
console.log(mapResult);// [ 2, 3, 4, 5, 6 ]

//filter
let filterResult = array.filter(num => num === 4);
console.log(array); // [ 1, 2, 3, 4, 5 ]
console.log(filterResult); // [4]

// ...
let functionResult = (...array) => console.log(arguments); // 1,2,3,4,5

map: map函数是循环数组每个元素，增删查改后，怼到一个新数组内。

filter：filter函数也是循环数组的每个元素，后续代码为真的元素怼到一个新的数组内。

Object的新增方法
Object.assign()
这个新增的方法作用是把对象的枚举元素都复制到第一个参数对象里。大家一般都用来做浅拷贝。

let a = {
        url: '996'
}
let b  = {
        name: '阿珍',
        url: a
}

let c = Object.assign({}, b)
a.url = a.url + '.icu'

Class
es6新增的Class其实也是语法糖，js底层其实没有class的概念的，其实也是原型继承的封装。

API：

parseFloat：字符串转float；parseInt：字符串转int；isNaN判断是不是数字,true是非数字,false是数字；toFixed()方法可把Number四舍五入为指定小数位数的数字,最后一位四舍五入,位数不够就补0,返回的是字符串；JSON.parse和JSON.stringify：JSON对象和字符串相互转换

区别：见链接https://blog.kdchang.cc/2016/04/04/react-react-native-es5-es6-cheat-sheet/

原声纯函数

纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。

例一
var a = 5;
function A(b) {
  return a + b;
}
A(5);
复制代码
A函数是一个纯函数吗？显然非常不纯，在程序执行的过程中，变量a很容易被修改，这就会导致每次调用A(5)的返回值改变。

例二
对例一稍作修改
const a = 5;
function A(b) {
  return a + b;
}
A(5);
复制代码
这是纯函数，确定的输入，确定的输出。

原声函数缓存

JS 利用高阶函数实现函数缓存(备忘模式)

const memorize = function(fn) {
  const cache = {}
  return function(...args) {
    const _args = JSON.stringify(args)
    return cache[_args] || (cache[_args] = fn.apply(fn, args))
  }
}
const add = function(a) {
  return a + 1
}
const adder = memorize(add)
adder(1)    // 2    cache: { '[1]': 2 }
adder(1)    // 2    cache: { '[1]': 2 }
adder(2)    // 3    cache: { '[1]': 2, '[2]': 3 }

Xss攻击

答案查看链接：https://tech.meituan.com/2018/09/27/fe-security.html

webpack搭建单页面

答案查看链接：https://zhuanlan.zhihu.com/p/40373319

get和post有什么区别。还有哪些请求方式

1. GET使用URL或Cookie传参，而POST将数据放在BODY中。

2. GET方式提交的数据有长度限制，则POST的数据则可以非常大。

3. POST比GET安全，因为数据在地址栏上不可见。

GET和POST最大的区别主要是GET请求是幂等性的，POST请求不是。这个是它们本质区别，上面的只是在使用上的区别。

HTTP请求方法：GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE

cookie和session区别

cookie保存在客户端，session保存在服务器端，
cookie目的可以跟踪会话，也可以保存用户喜好或者保存用户名密码
session用来跟踪会话

localstorage和sessionsorage的区别

答案见链接：https://juejin.im/post/5b3a0fd4e51d4555c3022a61

react生命周期

答案见链接：https://juejin.im/post/5a062fb551882535cd4a4ce3

手写选择排序

function select(array){
    var len=array.length;
    for(var i=0;i<len-1;i++){  //这里之所以是len-1，是因为到最后两个元素，交换位置，整个数组就已经排好序了。
        var minnum=array[i];
        for(var j=i+1;j<len;j++){ // j=i+1是把与自己比较的情况给省略掉
            if(array[j]<minnum){
              var c;
              c=minnum;
              minnum=array[j];    //交换两个值
              array[j]=c;
            }
        }
        array[i]=minnum;      
    }
    return array;

}

手写一个函数，返回数组的第二大值

主要思路：

设置两个变量a，b；数组在arr[]中，假设arr[0]最大，记为a；arr[1]第二大，记为b；若a小于b，则交换值。遍历数组，若元素大于a，则a的值赋给b，最大值赋给a；若元素小于a，大于b，则元素赋值给b，遍历完毕，b为次大值，时间复杂度为O（n）！

var arr = [2,4,14,20,8,3,15];
var a = arr[0],b = arr[1];
if (a > b) {
    var temp = a;
    a = b;
    b = temp;
};
for(var i = 2;i < arr.length;i ++){
    if(arr[i] > a){
        b = a;
        a = arr[i];
    }
    else if(arr[i] < a && arr[i] > b){
        b = arr[i];
    }
}
console.log('最大值为：' + a + '\n次大值为' + b);

输出结果为：
最大值为：20
次大值为：15

如何保持用户持续登录

（一）session机制保持会话
存在的问题
高并发情况下，会占用服务器大量内存
分布式（一个业务分成几个子业务，部署在多个服务器）或者集群（一个业务部署在多个服务器）的时候，session不能共享。
解决方案
高并发的时候可以将session存储到redis，如果用户长时间没有访问，将session存储到redis，就减少了服务器的压力。
分布式或者集群的时候，先通过redis来判断用户状态也可以实现session共享.
（二）cookie机制保持会话
使用的方法
登录验证后，创建登录凭证（比如：用户id+登录时间+过期时间），将登录凭证进行加密（为了避免暴露信息），加密后写到浏览器的cookie，以后，每次请求都发送cookie，服务器根据对应的解密算法对其进行验证（或者将加密过的cookie内容存储到数据库，请求服务器的时候，服务器在数据库进行查找）。
存在的问题
每次访问都提交cookie，增加请求量
其他访问可能需要cookie（比如说购物车的信息存放在cookie），浏览器对每个域存储的cookie的大小有限制，那么需要控制加密后的凭证。
（三）token机制保持会话
使用方法
cookie 和session依赖于浏览器，如果客户端不是浏览器，那么需要手动添加token（和cookie类似，也是登录凭证），将token添加到http header或者做为参数添加到url。
存在的问题
每次访问的时候手动添加token
和cookie 的方式一样增加了请求量

数组去重

答案见链接：https://juejin.im/post/5aed6110518825671b026bed

简述src和href的区别?

href 时指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src 时指向外部的资源位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。** 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕 **，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

描述浏览器输入url到页面展示的过程？

答案见链接：https://segmentfault.com/a/1190000006879700

说说对js中闭包的理解

答案见链接：https://zhuanlan.zhihu.com/p/25774820

介绍事件代理原理和优缺点

答案见链接：https://blog.csdn.net/qi1271199790/article/details/53458043

尽可能多的列举前端性能优化的方式

答案见链接：https://juejin.im/post/5b0bff30f265da08f76cc6f0

React(或Vue)中key的作用

key的作用主要是用来减少没必要的diff算法对比，因为对于一个组件或者节点来说，只要父节点状态或者属性发生变化，该组件就会进行diff对比，即使该组件没变化，而如果为组件引入了key值，就可以在diff对比前先做一个校验，判断该组件是否需要diff对比，即使是diff对比，也可以判断该组件是直接更新操作还是销毁或者新建操作，从而提高了diff算法的效率；

特别在渲染同级同结构的组件们时，key可以为它们加上了身份的标志，在rerender时，可以通过key来判断该组件是否已经存在，是否需要跟新或者销毁，新建等操作，提高了diff算法在同级节点上的操作。

水平垂直居中实现（至少写两种）

绝对定位+margin:auto；绝对定位+负margin；

答案见链接：https://segmentfault.com/a/1190000014116655

防抖和节流的区别

答案见链接：https://www.jianshu.com/p/b73c2acad696

React(或Vue)中父子组件通信方式

1.父组件传值，子组件接收值
父组件传值

import IframeComponent from "./iframe";
import React, { Component } from "react";
class Iframe extends Component {
  render() {
    return (
      <IframeComponent iframeurl={iframeUrl} />
    );
  }
}
export default Iframe;

子组件接收

import ReactIframeResizer from "react-iframe-resizer-super";
import React, { Component } from "react";
class Iframe extends Component {
  render() {
    const iframeResizerOptions = { checkOrigin: false };
    console.log("props", this.props.iframeurl);
    return (
      <ReactIframeResizer
        src={this.props.iframeurl}
        iframeResizerEnable={true}
        ref="frame"
        iframeResizerOptions={iframeResizerOptions}
      />
    );
  }
}
export default Iframe;

2.子组件传值，父组件接收值
子组件

import React, { Component } from "react";
import Calendar from "react-calendar";
class UserStatus extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }
  onChange = date => {
    this.state.date = date;
    this.props.handleChild(this.state.date);
  };
  render() {
    return (
            <Calendar
              onChange={this.onChange}//传值
              onClick={this.props.returnHome}//传函数
              value={this.state.date}
              minDetail="month"
              locale="en"
              style={{ height: "340px" }}
            />
    );
  }
}
export default UserStatus;

父组件

import React, { Component } from "react";、
import Calendar1 from "./calendar";
class UserStatus extends Component {
  constructor(props) {
    super(props);
    this.state = {
      calendarDate: new Date()
    };
  }
  handleChild(value) {
    this.setState({ calendarDate: value });
  }
  returnHome = () => {
    this.setState({
      activeStep: 0
    });
  };
  render() {
    console.log("this.state.calendarDate", this.state.calendarDate);
    return (
       <Calendar1
           handleChild={this.handleChild.bind(this)}
           returnHome={this.returnHome.bind(this)}
       />
    );
  }
}
export default UserStatus;

实现动画的几种方式

答案查看链接：https://ranranra.github.io/%E5%89%8D%E7%AB%AF/2016/09/16/CSS3%E5%87%A0%E7%A7%8D%E5%AE%9E%E7%8E%B0%E5%8A%A8%E7%94%BB%E7%9A%84%E6%96%B9%E5%BC%8F

k0a2中间件原理?用过哪些中间件？

答案见链接：https://juejin.im/post/59dc7e43f265da4332268906
seo优化(js方面)
如何判断一个对象的属性是原型属性还是实例属性，具体代码怎么实现的
fetch与ajax的区别
深拷贝是怎么做的，是拷贝引用类型吗
引用类型与基本数据类型的区别
flex有那些属性，列出一个，说出作用

二、开放性问答
平时有看一些视频吗，在哪看的

1.你最近用的是什么技术栈
2.你用这个技术栈写的是哪个项目。这个项目的流程是什么
3.跟我说说你的一些业务都用了哪些技术点。怎么去实现的

4.聊聊状态管理，说说使用过的状态管理库（Flux,Redux,Vuex,Mobx任一）基本原理？

目前我用的redux，

1，首先，View 通过 dispatch 触发事件 Action
2，然后，Reducer 根据 Action 来修改数据
3，接着，Store 保存 Reducer 新数据，并触发 subscribe 订阅事件
4，最后，View 通过 subscribe 订阅获取最新数据，进行展示
5，重复以上步骤

从流程图可看出 Redux 的特点：
1，单数据流向 View -> Action -> Reducer -> Store -> View

5.当我有十几个接口需要去请求不同的状态。你是怎么去写actions的

9.你在项目中负责的模块

11.用过那些框架，react相关的还有一些项目相关的

你怎么实现w3c标准页面制作的

为页面添加正确的DOCTYPE；设定一个名字空间（Namespace）；用小写字母书写所有的标签；为图片添加alt属性；给所有的属性值加引号；声明你的编码语言；关闭所有的标签
你都解决过哪些兼容问题

答案见链接：https://juejin.im/post/59a3f2fe6fb9a0249471cbb4

你在项目中负责什么
平时做过什么优化

你平常看什么书，逛什么论坛

7、你是如何和测试进行沟通的

给测试写一个测试文档，详细说明每一个功能如何测试，期待效果

react两年经验，常见面试题（自己整理中）

猜你喜欢