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

Z时代
2024-01-10
分类：综合

react

一、HTML5面试题

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如何保持用户持续登录

（一）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 的方式一样增加了请求量

简述src和href的区别?

href 时指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

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

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

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

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

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

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

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

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

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

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

防抖和节流的区别

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

实现动画的几种方式

答案查看链接：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方面)

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

具体代码实现判断一个对象的属性是原型属性还是实例属性

/**
 * 
 * 检测一个属性是实例属性还是原型属性
 * 检测完成以后，再来作操作
 * 
 */
function Person(password) {
    this.password = password;
}
Person.prototype.username = 'luohao';
let person = new Person(123);
/**
 * 可以访问到实例中的对象，也可以访问到原型中的的对象。
 */
console.log('password' in person);
console.log('username' in person);
console.log(person.hasOwnProperty('username'));
console.log(person.hasOwnProperty('password'));
/**
 * 可以通过hasOwnProperty判断一个属性是否是实例的属性
 * 但是无法判断一个实例是原型的属性，因为原型的属性在实例中可以访问到
 */
function hasOwnProperty(obejct, prop) {
    if (prop in obejct) {
        if (obejct.hasOwnProperty(prop)) {
            console.log(prop + '是实例的属性');
        } else {
            console.log(prop + '是原型的属性');
        }
    } else {
        console.log('不存在' + prop + '这个属性');
    }
}
hasOwnProperty(person, 'username');hasOwnProperty(person, 'password');

fetch与ajax的区别

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

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

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

你都解决过哪些兼容问题

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

同步和异步的区别?

同步：阻塞的

-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭

=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

-张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃

=浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

git与svn的区别

git是分布式的，svn不是。

git跟svn一样有自己的集中式版本库或服务器。但git更倾向于被使用于分布式模式，克隆版本库后即使没有网络也能够commit文件，查看历史版本记录，创建项目分支等，等网络再次连接上Push到服务器端。

git把内容按元数据方式存储，而svn是按文件。

所有的资源控制系统都是把文件的元信息隐藏在一个类似.svn,.cvs等的文件夹里。

git目录是处于你的机器上的一个克隆版的版本库，它拥有中心版本库上所有的东西，例如标签，分支，版本记录等。

git没有一个全局的版本号，svn有。

git的内容完整性优于svn。因为git的内容存储使用的是SHA-1哈希算法。

git可以有无限个版本库，svn只能有一个指定中央版本库。

当svn中央版本库有问题时，所有工作成员都一起瘫痪直到版本库维修完毕或者新的版本库设立完成。

每一个git都是一个版本库，区别是它们是否拥有活跃目录（Git Working Tree）。如果主要版本库（例如：置於GitHub的版本库）有问题，工作成员仍然可以在自己的本地版本库（local repository）提交，等待主要版本库恢复即可。工作成员也可以提交到其他的版本库！

前端存储

1cookie

2sessionStorage

3localStorage

4websqlindexeddb

具体答案见链接：https://segmentfault.com/a/1190000005927232

具体答案见链接：http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.htmlhttps://www.zhihu.com/question/28433480如何实现浏览器内多个标签页之间的通信

方法一：使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){
        $("#name").val(event.key+”=”+event.newValue);});

方法二、使用cookie+setInterval

HTML代码

<inputid="name"><input type="button" id="btnOK"value="发送">

JS代码-页面1

 $(function(){
        $("#btnOK").click(function(){
            varname=$("#name").val();
            document.cookie="name="+name;
        });    });

JS代码-页面2

    //获取Cookie天的内容
    function getKey(key) {
        return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
    }
    //每隔1秒获取Cookie的内容
    setInterval(function(){
        console.log(getKey("name"));     },1000);

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：a、b、span、img、input、span、select、label、em、button、textarea块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

请简述下px、rem和em有什么区别？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

rem特点

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子：

p {font-size:14px; font-size:.875rem;}

浏览器的内核分别是什么？

（1）Trident内核：代表作品是IE（2）Gecko内核：代表作品是Firefox（3）Webkit内核：代表作品是Safari（4）Presto内核：代表作品是Opera（5）Blink内核： Chrome内核是Blink

iframe的优缺点

iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：1.会产生很多页面，不容易管理。2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

HYML5中如何嵌入音频、视频（请编制相关代码）

<!-- 嵌入视频 -->
<video id="player"
       src="xxx.ogg"
       poster="mymovie.jpg"
       width="300" height="200">
    Video player not available.
</video>
<!-- 嵌入音频 --><audio src="xxx.mp3" id="myAudio">Audio player not available.</audio>

<!-- 嵌入视频 -->
<video id="player">
    <source src="xx.webm" type="video/webm; codecs='vp8, vorbis'">
    <source src="xx.ogv" type="video/ogg; codecs='theora, vorbis'">
    Video player not available.
</video>
<!-- 嵌入音频 -->
<audio id="myAudio">
     <source src="xx.ogg" type="audio/ogg">
     <source src="xx.mp3" type="audio/mpeg">Audio player not available.</audio>

除了audio和video，HTML5还有哪些多媒体标签（请编制相关代码）

HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，还支持以下标签：
<embed> 标签定义嵌入的内容，比如插件。
<embed type=” video/quicktime ” src= ” Fishing.mov ” >
<source> 对于定义多个数据源很有用。
<video width=” 450 ″ height= ” 340 ″ controls>
     <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
     <source src=” jamshed.ogg ” type= ” video/ogg ” >
</video>
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
<video width=” 450 ″ height= ” 340 ″ controls>
     <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
     <source src=” jamshed.ogg ” type= ” video/ogg ” >
     <track kind=” subtitles ” label= ” English ” src= ” jamshed_en.vtt ” srclang= ” en ” default></track>
      <track kind=” subtitles ” label= ” Arabic ” src= ” jamshed_ar.vtt ” srclang= ” ar ” ></track>
</video>据源很有用。标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

HTML5中什么是输出元素

<output>输出元素

6、HTML5存储类型有什么区别？

HTML5有哪些新增的表单元素

我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用

email 类型用于验证email的格式，当提交表单时会自动验证email域的值

url 类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值

number 类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持

range 类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100

日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

search 类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标

tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持

color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

<input type="url" name="url" value="" placeholder="个人主页" required>

HTML5提供了哪些新的API？

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

HTML5应用程序缓存和浏览器缓存的区别？

应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存

缩进2个中文字符

text-indent:2em

HTTP和HTTPS

HTTP 缺省工作在TCP协议80端口，HTTPS缺省工作在TCP协议443端口

NaN !== NaN returns true. NaN is the only JavaScript value unequal to itself.

NaN === false => false

typeof NaN==="number"=> true

清除浮动有哪些方式？比较好的方式是哪一种？

(Q1)

（1）父级div定义height。

（2）结尾处加空div标签clear:both。

（3）父级div定义伪类:after和zoom。

（4）父级div定义overflow:hidden。

（5）父级div定义overflow:auto。

（6）父级div也浮动，需要定义宽度。

（7）父级div定义display:table。

（8）结尾处加br标签clear:both。

(Q2)比较好的是第3种方式，好多网站都这么用。

box-sizing常用的属性有哪些？分别有什么作用？

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

Doctype作用？标准模式与兼容模式各有什么区别?

(Q1)<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

页面导入样式时，使用link和@import有什么区别？

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别

1 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.

3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

html5有哪些新特性？移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

(Q1)1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件，calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation

(Q2)1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

2. 对可用性产生负面影响的元素：frame，frameset，noframes；

(Q3)支持HTML5新标签：

IE8/IE7/IE6支持通过document,createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式

(Q4)HTML5和HTML的区别：

　　1、在文档类型声明上

　　HTML声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　HTML5声明：<!doctype html>

　　上面的两种声明,HTML5声明简洁方便人们的记忆，HTML声明太长了并且很难记住这段代码。

　　2、在结构语义上

　　HTML:没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。

　　HTML5:在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。

二、js相关问题

数组去重

方法一：

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }
    return res}

方法二：

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        let flag = true
        for (let j = 0; j < res.length; j++) {
            if (arr[i] === res[j]) {
                flag = false;
                break
            }
        }
        if (flag) {
            res.push(arr[i])
        }
    }
    return res
}

请解释this对象

答案见链接：http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

说说对js中闭包的理解

具体答案见链接：https://zhuanlan.zhihu.com/p/22486908

有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。这就是一个闭包：「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

        function close() {
            let my = "my name is ";
            function introduce() {
                let name = "alisa"
                let all = my + name;
                console.log(all)
                return all
            }
            return introduce
        }
        var func = close()        func();

请介绍一下js的基本数据类型

JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) ！

除过上面的 6 种基本数据类型外，剩下的就是引用类型了，统称为 Object 类型。细分的话，有：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型等。

在JavaScript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){
      var args = Array.prototype.slice.call(arguments);  
//为了使用unshift数组方法，将argument转化为真正的数组
      args.unshift('(app)');
      console.log.apply(console, args);};

实现一个函数clone，可以对JavaScript中的5中主要的数组类型（包括Number、String、Object、Array、Boolean）进行值复制。

/** 对象克隆 
* 支持基本数据类型及对象 
* 递归方法 */ 
function clone(obj) { 
    var o; 
    switch (typeof obj) { 
        case "undefined": 
        break; 
        case "string": o = obj + ""; 
        break; 
        case "number": o = obj - 0; 
        break; 
        case "boolean": o = obj; 
        break; 
        case "object": // object 分为两种情况 对象（Object）或数组（Array） 
            if (obj === null) { 
                o = null; 
            }else{ 
                if(Object.prototype.toString.call(obj).slice(8,-1) === "Array") { 
                    o = []; 
                    for (var i = 0; i < obj.length; i++) { 
                        o.push(clone(obj[i])); 
                    } 
                }else{
                    o = {}; 
                    for (var k in obj) { 
                        o[k] = clone(obj[k]); 
                    } 
                } 
            } 
            break; 
            default: o = obj; 
        break; 
    } 
    return o; 
}
var m1 = clone([1,2,3]);
var m2 = clone({1:'1', 'hello': 32});
console.log(m1);  //[ 1, 2, 3 ]console.log(m2);  //{ '1': '1', hello: 32 }

为什么用Object.prototype.toString.call(obj)检测对象类型?

答案见链接：http://www.cnblogs.com/youhong/p/6209054.html

js使用闭包和继承，自我介绍

    var text = '我是'
    function introduce() {
        this.show = function (name) {
            console.log(text + name);
        }
    }
    function me() {
    }
    me.prototype = new introduce();
    var newMe = new me();
    newMe.show('某某');
    text = '我不是';
    newMe.show('某某');

手写选择排序

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

js冒泡查找出最大的值

var arr=[1,6,3,5,8,200,9,8,1000,1]
for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
      //交换位置
      if(arr[j]>arr[j+1]){
　　　　　var temp=arr[j];
　　　　　arr[j]=arr[j+1];
　　　　　arr[j+1]=temp;
　　  }
  }
}  
console.log(arr)console.log('最大值：'+arr[arr.length-1])

简述js的事件系统，并分析事件捕获与事件冒泡的区别

　　1.事件系统：JavaScript和HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口之间发生的一些交互瞬间。可以使用侦听器（或处理程序）来监听事件，以便事情发生时执行相应的代码。事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字，典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

　　一个完整的事件系统，通常存在以下三个角色：

事件对象，用于储存事件的状态。

事件源对象，当前事件在操作的对象，如元素节点，文档对象，window对象，XMLHttpRequest对象等。

事件监听器，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。在IE中，事件对象恒为全局属性window.event的分身。

2.区别：

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera's 和 iCab两种都不支持。

事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

js有哪些内置对象？

时间对象date，字符串对象string，数学对象Math，数值对象Number，数组对象Array，函数对象function,函数参数集合arguments,布尔对象Boolean，错误对象Error,基础对象Object

DOM怎样添加、移除、移动、复制、创建和查找节点

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

null和undefined的区别？

null表示"没有对象"，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

call和apply得作用是什么？区别是什么？

答案见链接：https://juejin.im/entry/58d0a7b22f301e007e5a15ae

new操作符具体干了什么呢?

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

JSON 的了解？

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

如何获取UA

<!DOCtype html>
<html>
<head>
    <title></title>
</head>
<body onload="whatBrowser()">
    <script> 
        function whatBrowser() {
            document.Browser.Name.value = navigator.appName;
            document.Browser.Version.value = navigator.appVersion;
            document.Browser.Code.value = navigator.appCodeName;
            document.Browser.Agent.value = navigator.userAgent;
        }  
    </script> 
    <table> 
        <form name="Browser"> 
            <tr> 
                <td> 浏览器名称: </td> 
                <td> <input type="txt" name="Name" size="110%"></td> 
            </tr> 
            <tr> 
                <td> 版本号:</td> 
                <td> <input type="txt" name="Version" size="110%"></td> 
            </tr> 
            <tr> 
                <td> 代码名称: </td> 
                <td> <input type="txt" name="Code" size="110%"></td> 
            </tr> 
            <tr> 
                <td> 用户代理标识:</td> 
                <td> <input type="txt" name="Agent" size="110%"></td> 
            </tr> 
        </form> 
    </table> 
</body></html>

浅拷贝深拷贝原理，以及实现方法；

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

深拷贝是怎么做的，是拷贝引用类型吗

答案见链接：https://www.kancloud.cn/ljw789478944/interview/397319

引用类型与基本数据类型的区别

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

三、react相关问题

react生命周期

初始化：

1、getDefaultProps()

设置默认的props，也可以用dufaultProps设置组件的默认属性.

2、getInitialState()

设置默认状态

3、componentWillMount()

类似于Vue中的created + beforeMount ,获取数据，获取不到DOM.整个生命周期只调用一次，此时可以用this.setState修改state。

4、 render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5、componentDidMount()

组件渲染之后调用，只调用一次。类似于Vue中的Mounted（渲染真实DOM）

运行中：

6、componentWillReceiveProps(nextProps)

属性更改时触发，接受参数this.props

7、shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候.简单的说，就是判断数据更改后要不要更新DOM.

8、componentWillUpdata(nextProps, nextState)

组件初始化时不调用，只有在组件将要更新时才调用，相当于Vue中的beforeUpdate , 不可以更改state ,否则惠造成死循环，

9、render()

组件渲染

10、componentDidUpdate()

组件初始化时不调用，组件更新完成后调用，可以拿到更新后的数据和DOM，还可以操作DOM , 相当于Vue中的updated

销毁：

11、componentWillUnmount()

组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

React(或Vue)中key的作用

Key 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

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

ref打标记

父组件与子组件通信

1. 父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变

2. 父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法.

子组件与父组件通信

1. 父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。

兄弟组件通信

在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系

复杂的非父子组件通信在react中很难处理，多组件间的数据共享也不好处理，所以我们会使用flux、redux来实现这样的功能，解决这个问题

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;

为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异,把记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。

使用 React 有何优点

只需查看 render 函数就会很容易知道一个组件是如何被渲染的JSX 的引入，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何互相引用的支持服务端渲染，这可以改进 SEO 和性能易于测试。

React 只关注 View 层，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用

四、redux相关问题

状态管理，说说使用过的状态管理库（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

redux的工作流程：

redux是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是view调用store的dispatch接收action传入store，reducer进行state操作，view通过store提供的getState获取最新的数据

在什么时候需要使用redux

需要使用redux的项目:

* 用户的使用方式复杂

* 不同身份的用户有不同的使用方式（比如普通用户和管理员）

* 多个用户之间可以协作

* 与服务器大量交互，或者使用了WebSocket

* View要从多个来源获取数据

四、移动端开发

flex有那些属性，列出一个，说出作用

答案见链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

五、接口

接口描述：

单个产品总览

请求方式：

Get

接口地址：

/api/user-pro-overviews/capital

请求参数：

Param Long productId 产品id

Param LocalDate from 开始时间

Param LocalDate to 截至时间

返回格式：

Param BigDecimal totalAsset 总资产

Param BigDecimal netAsset 净资产

Param BigDecimal todayEndIncome; 当日可用头寸（万）

Param BigDecimal leverRatio; 杠杆率;

Param BigDecimal currNetAssetValue; 单位净值

Param BigDecimal annualYield; 年化收益

Param BigDecimal dayTotalDebt; 当日负债成本

Param BigDecimal dayProfit; 当日收益

Param BigDecimal totalDebt; 总负债成本

Param BigDecimal achieveProfit; 累计实现收益

Param BigDecimal paidUpCapital; 实收资本

Param BigDecimal dayProfitAate; 当日收益率

Param BigDecimal maxDynamicRetreat; 最大回撤

{

"success": true,

"data": {

"totalAsset": 15051000.415,

"netAsset": 4995869.8671,

"todayEndIncome": 15045105.439,

"leverRatio": 3.0127,

"currNetAssetValue": 1,

"annualYield": 0,

"dayTotalDebt": 1376.8493,

"dayProfit": 0,

"totalDebt": 9637.94510411,

"achieveProfit": -4128.3945,

"paidUpCapital": 5000000,

"dayProfitAate": 0.0001,

"maxDynamicRetreat": 0

"code": 200

}

接口描述：

用户账号产品总览

请求方式：

Get

接口地址：

/api/user-pro-all-overviews/capital

请求参数：

返回格式：

Param BigDecimal totalAsset; 总资产

Param BigDecimal netAsset 净资产

Param BigDecimal liabilities; 总负债

Param BigDecimal achieveProfit; 累计实现收益

Param BigDecimal dayProfit; 当日收益

Param BigDecimal leverRatio; 杠杆率

Param BigDecimal dayTotalDebt; 当日负债成本

Param BigDecimal todayEndIncome; 当日可用头寸（万）

Param BigDecimal totalDebt; 总负债成本

{

"success": true,

"data": {

"totalAsset": 1694.48166981,

"netAsset": 4994493.1547,

"liabilities": -4992798.67303019,

"achieveProfit": 63.21549124,

"dayProfit": -1376.1315,

"leverRatio": 2.46250844,

"dayTotalDebt": 1376.8493,

"todayEndIncome": 15045105.439,

"totalDebt": 9637.94510411

"code": 200

}

六、选择题

七、其他

常见http状态码

（一）1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。

100 （继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分

101 （切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。

（二）2xx （成功）表示成功处理了请求的状态代码。

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

201 （已创建）请求成功并且服务器创建了新的资源。

202 （已接受）服务器已接受请求，但尚未处理。

203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 （无内容）服务器成功处理了请求，但没有返回任何内容。

205 （重置内容）服务器成功处理了请求，但没有返回任何内容。

206 （部分内容）服务器成功处理了部分GET 请求。

（三）3xx （重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者(user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对GET 或HEAD请求的响应）时，会自动将请求者转到新位置。

302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置）请求者应当对不同的位置使用单独的GET 请求来检索响应时，服务器返回此代码。

304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容，即取的缓存。

305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

（四）4xx（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求）服务器不理解请求的语法。

401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。

403 （禁止）服务器拒绝请求。

404 （未找到）服务器找不到请求的网页。

405 （方法禁用）禁用请求中指定的方法。

406 （不接受）无法使用请求的内容特性响应请求的网页。

407 （需要代理授权）此状态代码与401（未授权）类似，但指定请求者应当授权使用代理。

408 （请求超时）服务器等候请求时发生超时。

409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。

410（已删除）如果请求的资源已永久删除，服务器就会返回此响应。

411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。

412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的URI 过长）请求的URI（通常为网址）过长，服务器无法处理。

415 （不支持的媒体类型）请求的格式不受请求页面的支持。

416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

（五）5xx（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误）服务器遇到错误，无法完成请求。

501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。

502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。

503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持）服务器不支持请求中所用的HTTP 协议版本。

哪些常见操作会造成内存泄漏？

答案见链接：https://jinlong.github.io/2016/05/01/4-Types-of-Memory-Leaks-in-JavaScript-and-How-to-Get-Rid-Of-Them/

线程与进程的区别

进程和线程都是一个时间段的描述，是CPU工作时间段的描述，不过是颗粒大小不同。

具体答案见链接：http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html

八、开放性问答

平时有看一些视频吗，在哪看的

你最近用的是什么技术栈

你用这个技术栈写的是哪个项目。这个项目的流程是什么

关于项目流程细节

进入公司以后一般项目经理或者前端部门leader会给刚入职的人员分发一个git账号和密码，当我们有了账号密码以后，leader会给我一个项目git地址，然后我们需要去git clone这个地址的代码，然后代码拉下来以后npm install安装必要的开发依赖。安装完毕就可以运行了。

1：对接业务，我们需要和对应的前端部门负责人对接相应的业务，确认自己需要负责什么模块开发。

2：浏览设计稿和设计文档，当一个项目开始开发的时候，产品经理会给对应的前端后端发送一份ERP文件，就是所说的原型图，原型图确立了我们需要开发的内容，以及开发时必要的逻辑，然后大部分公司需要前端后端一起开会讨论一下实现这个原型图的技术方案，还有定义对应的字段名，同时分配确立一下哪些前端可以做，哪些需要后端配合。

3：原型图确认后，产品会将这个原型图也发送一份给我们的UI设计师，然后UI设计师就需要按照原型图来设计画出页面实际效果，当UI设计画完以后会发给前端开发人员。

4：当我们拿到UI稿的时候就可以开始开发了，按照UI设计的进行页面开发，构建所需要的页面。遇到逻辑问题，需求问题，需要和产品经理进行讨论商议解决方案。

5：当页面构建结束以后，后端会给我们一个rap地址或者其他的接口文档，文档里面详细的介绍了哪个模块调用哪个接口，需要传什么参数，以及请求数据的方式是post还是get方式等等。（有的公司前后端同步开发，写完一个接口就给前端发一个接口）。前端可以使用postman工具进行接口测试是不是正常通讯，如果正常就可以开始调用接口获取接口数据了。

6：前后端联调。联调是开发中非常常见的词语。联调的意思是前端和后端针对接口进行调试，看看这个接口是不是正常，数据是否完整，字段名是否缺少。

7：测试，当一个项目开发完成以后，我们需要前端后端一起部署代码到测试环境。测试人员就可以在测试环境进行测试了，当测试人员发现一个bug的时候，对应的测试会在禅道里面发起一个bug任务，（禅道是一个工具，百度可以查到，就理解成给我们提bug，分bug的地方）。然后将这个bug指给对应的前端后端，以便于前端后端进行修改bug。当前端后端被分配这个bug后，我们需要在里面估时，稍微评价一下大概修改这个bug需要花费多少时间，然后就可以去修改bug了。当对应bug解决完成以后，我们需要把这个禅道的bug任务重新指给对应提出bug的测试人员，这样测试人员就可以再次测试这个bug了。

8：当测试人员测试验证没有bug的时候，测试人员会发送邮件给项目经理确认后前端后端就可以发版到预生产环境了，当预生产环境发版完成后，需要产品经理在预生产环境再次验证，确认是否和原型想要的一致，能否满足产品需求。产品验证完预生产环境以后就可以准备发布正式的生产环境（也就是上线）了。

关于环境名称

Dev：就是常见的开发环境简写

Test：测试环境简写

Pre：预生产环境简写

Pord: 生产环境简写

跟我说说你的一些业务都用了哪些技术点。怎么去实现的

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

你在项目中负责的模块

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

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

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

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

重点问题:

1.自我介绍一下.

2.上家公司是做什么的?公司多少人?属于哪个部门?部门几个人?

3.怎么和产品(测试)沟通的?

4.为什么从上家离职?

5.你对加班有什么看法？

6.希望待遇多少？你最低的薪金要求是多少？

7.上家公司待遇多少?税后多少?

8.哪个项目做的最好?描述一下,这个项目的亮点是什么?难点是什么?几个人做的?

9.能接受外派吗?

10.你有什么问题要问吗？

11.我可以跟你的前任上司联系一下吗？

12.何时可以到职？

13.3-5年职业规划?

14.上保险了吗?

选问问题:

1．我们为什么要雇请你呢？

2．你认为自己最大的弱点(优点)是什么？－试着列出四个优点和一个非常非常小的缺点。

3．你大学都学什么课程??你最喜欢的大学课程是什么？为什么？

4．你最不喜欢的大学课程是什么？为什么？

5．你在大学期间最喜欢的老师是谁？

6．你能为我们公司带来什么呢？

7．最能概括你自己的三个词是什么？

8．你为什么来应聘这份工作？（或为什么你想到这里来工作？）

9．你对我公司有什么认识？

10．你是怎么知道我们招聘这个职位的呢？

11．除了工资，还有什么福利最吸引你？

12．你参加过什么业余活动？

13．你参加过义务活动吗？现在就着手作一些义务活动，不仅仅是那些对社会有贡献的.　　

14．你心目中的英雄是谁？

15．你过去的上级是个什么样的人？

16．你为什么还没找到合适的职位呢？

17．你最近看过的电影?你最近在看什么书?

18．你的业余爱好是什么？

19 ．怎么看待要向比你年轻的人或女性的汇报呢？

20．你现在能把过去做过的工作做得更好吗？

21．作为被面试者给我打一下分？

22．告诉我三件关于本公司的事情。

23．请告知工作上成功与失败的地方？

24．选择从事开发的动机？

25．你认为这份工作最重要的是什么？

26．你认为这个h5的现在就业怎样？

27．有取得什么资格吗？

28．现在最热衷的是什么？

29．放假的时候，做什么消遣？

30．之前的薪水有多少？

31．对自己工作的评价如何？

32．为什么选择来公司应征？

32．除了本公司外，还应征了那些公司？

33．担任过什么领导职务？怎样管理下级？怎样与同事协作？影响你工作的主要因素是什么？

34．喜欢这份工作的哪一点？

35．家庭中的情况如何？有没有相关的转业背景？在你过去的经历中得过何种奖励？取得过那些成果和荣誉？

我的父母都是知识分子，他们从小就教导我学习要努力、做事要勤奋、待人要诚恳。我爱我的父母，也很感谢他们给予我的栽培。

36．你工作中曾受到那些挫折？谈谈在工作上接受挫败的经验。

37．你参加过高校哪些实践活动？你的自学能力怎样？哪位老师对你影响最大？你喜欢读哪一类课外读物？为什么？　　

38．培训过吗?　　

39．你现在的上司或同事会怎样评价你？

40．描述一下你的学习态度？你的学术、成就？

41．你最喜欢的事物或菜肴是什么？

　　据发现喜欢吃辛辣食物和敢作敢当地创造之间有某种相关性，他们对拌着肉汁的土豆泥不满足。而喜欢清淡食物的人比较胜任稳定的、重复性工作。

42．怎样处理在工作中遇到的困难？　

43．你对接受新的知识有何认识？你是否有信心做好今后的工作，为什么？

44．什么是你感觉最有成就感的事儿?　　

45．你还希望在应聘单位得到什么培训？

以上是 react两年经验，常见面试题（自己整理中）的全部内容，来源链接： utcz.com/z/383439.html

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

其他人也看了：