应聘前端面试题总结又要开启找工作模式了，所以想记录一下应聘前端的一些面试题，对自己没有做出来的题目让自己加深印象，也对正

又要开启找工作模式了，所以想记录一下应聘前端的一些面试题，对自己没有做出来的题目让自己加深印象，也对正在找工作的朋友希望有点帮助！！

第一家公司面试题

JavaScript中什么是基本数据类型什么是引用数据类型？

基本数据类型有

Number
String
Boolean
Null
Undefined
Symbol（ES6新增数据类型）
bigInt
引用数据类型统称为Object类型，细分的话有

Object
Array
Date
Function
RegExp

各个数据类型是如何存储的？

基本数据类型的数据直接存储在栈中；而引用数据类型的数据存储在堆中，在栈中保存数据的引用地址，这个引用地址指向的是对应的数据，以便快速查找到堆内存中的对象。

顺便提一句，栈内存是自动分配内存的。而堆内存是动态分配内存的，不会自动释放。所以每次使用完对象的时候都要把它设置为null，从而减少无用内存的消耗

javaScript中有几种声明变量方法

三种
var let const

js 实现一个函数对javascript中json 对象进行克隆

var oldObject ="sdf";
var newObject = JSON.parse(JSON.stringify(oldObject));
console.log(newObject);

js对数组中的数字从小到大排序 sort

function sortNumber(a,b)
{
    return a - b
}
var arr = [1,3,5,10,7,9]
arr.sort(sortNumber)
console.log(arr)  // [1, 3, 5, 7, 9, 10]

第二家公司的前端面试题

React中class创建组件和function创建组件的区别

两种创建组件方式的对比
注意：使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；
注意：使用function创建的组件，只有props,没有自己的私有数据和生命周期函数；

1.用构造函数创建出来的组件：叫做无状态组件【无状态组件用的不多】

2.用class关键字创建出来的组件叫做有状态组件【用的最多】

3.什么情况下使用有状态组件？什么情况下用无状态组件？
如果一个组件需要有自己的私有数据，则推荐使用 ：class创建的有状态组件；
如果一个组件不需要私有的数据，则推荐使用，无状态组件；
React 官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比又状态组件稍微高一些；
有状态组件和无状态组件的本质区别就是：有无state属性和有无生命周期函数

4。组件中的props和state/data之间的区别
props中的数据都是外界传递过来的；
state/data中的数据，都是组件私有的；（通过ajax获取回来的数据一般都为私有数据）
props中的数据都是只读的，不能重新赋值；
state/data中的数据，都是可读可写的；

react中的性能优化有哪些方式？

1）react通过操纵虚拟DOM，不进行节点操作，最大限度的减少与真实DOM的交互，这样可以提高性能；

2）shouldComponentUpdate，在这个生命周期内，我们可以进行新旧两个state和props的对比，如果数据没有发生变化，这个函数就会返回false，这样后面的生命周期就不会执行，render函数也不会重新渲染，这样也可以提升性能；

3）immutable，immutable的特点就是不可修改，改变它的任何数据时，都会重新生成一个新的对象，修改只会在新生成的对象上修改，原数据不会发生改变，这样就可以避免把所有节点都复制一遍，降低性能损耗；immutable的实现原理就是数据结构共享；

react中常用的路由配置项

BrowserRouter 路由根组件，路径不带#号history路由
HashRouter    路由根组件，路径带#号hash路由
withRouter 对非路由渲染的组件组件进行包裹，让其具备三个属性

Route 定义路由
Link 路由跳转，没有动态属性，使用场景，非tabBar
NavLink 路由跳转，有动态属性，使用场景，tabBar
Switch 路由渲染，被其包裹的组件只会被渲染一个，包裹时最好将子组件 放在这个标签之外，父组件放在内部
Redirect 路由重定向

react中路由传递参数的方法有哪些？

动态路由：
定义路由时：采用/:/:这种形式；

路由跳转时：路径+key形式；
接收：this.props.match.params；

query传值：
定义路由时：与正常时相同；
路由跳转时：使用字符串拼接；
接收：this.props.location.search

对象传值：
定义路由时：与正常时相同；
路由跳转时：使用对象，内部包含定义路径的对象和传递参数的对象；
接收：this.props.history.query

编程式导航：
this.props.history.push({路径部分}，{参数部分})

注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；

Vue和react的优缺点

一、Vue.js

     其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。
     Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。
     
     Vue.js的特性如下：
　　    1.轻量级的框架
　　    2.双向数据绑定
　　    3.指令
　　    4.插件化

   优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。
　　　　  2. 快速：异步批处理方式更新 DOM。
　　　　  3. 组合：用解耦的、可复用的组件组合你的应用程序。
　　　　  4. 紧凑：~18kb min+gzip，且无依赖。
　　　　  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
　　　　  6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

　 缺点：  1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
　　　　　 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
　　　　　 3. 不支持IE8：

二、React

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
 
　  React特性如下：　
　　　　1.声明式设计：React采用声明范式，可以轻松描述应用。
　　　　2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
　　　　3.灵活：React可以与已知的库或框架很好地配合。

　　优点： 1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
　　　　　 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
　　　　　 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
　　　　 　4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
　　　　　 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
　　　　　 6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

　　缺点： 1. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

第三家公司面试

ES6新增的数组的方法

forEach、map、filter、every、some、reduce（累丢死）

map 和filter的区别 // map 和filter共同点

map()遍历数组, 可以返回一个新数组, 并且不会改变原数组里的内容.
filter()主要是过滤的, 用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组.

// map 和filter共同点
不会直接改变原数组

一个数组累加用reduce

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
    return a + b;
});
console.log(total);     // 15

javascript中for-in和for-of的区别

简单总结就是，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
for-in总是得到对象的key或数组、字符串的下标。
for-of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set。

遍历数组的四种方式

for 循环

在for循环中还有两个跳出循环的语句：break和continue

for (let index=0; index < someArray.length; index++) {
 const elem = someArray[index];
 // ···
}
// break 它如果i等于5的时候停止循环
for(var i=1; i<=10; i++) {
    if(i==5) {brack}
}
// continue i等于5时写上continue，意思就是跳过i=5的循环
for(var i=1; i<=10; i++) {
    if(i==5) {continue}
}

for-in 循环

for-in 不是循环遍历数组的好方法：它访问的是属性键，而不是值。作为属性键，数组元素的索引是字符串，而不是数字。它访问的是所有可枚举的属性键（自己的和继承的），而不仅仅是 Array 元素的那些。 for-in 访问继承属性的实际用途是：遍历对象的所有可枚举属性。

for (const key in someArray) {
 console.log(key);
}

forEach()

someArray.forEach((elem, index) => {
 console.log(elem, index);
});

for-of 循环

for (const elem of someArray) {
 console.log(elem);
}

应聘前端面试题总结