用友前端面试题目及知识点

前端面试题实习

一、push方法：是向数组末尾添加一个或者多个元素，并返回新的长度
二、pop方法：删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回undefine值
三、unshift()方法：是向数组的开头添加一个或多个元素，并且返回新的长度
四、shift()方法和unshift()方法恰恰相反。该方法用于把数组的第一个元素从其中删除，并返回被删除的值。如果数组是空的，shift()方法将不进行任何操作，返回undefined的值。
五、join()方法：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

关于浮动元素：
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
浮动元素会尽可能地向顶端对齐、向左或向右对齐。
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素。
行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上。
块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上。

设置visibility:hidde后的元素只会导致浏览器重绘而不会重排。
设置元素opacity:0之后，也可以触发点击事件。
visibility:hidden的元素无法触发其点击事件。

Linux系统中命令：
chmod 赋权限
more 类似于cat，内容较多时可一页一页的翻看
cp 复制
touch 可创建文件

call和apply的作用：都是改变this作用域，在特定作用域中调用函数。当一个对象没有某个方法，而其他对象有，我们就可以使用call或apply实现某个方法的复用。
call和apply使用方法基本相同，唯一不同之处就是它们的参数规则：call方法接受一个参数列表，而apply方法接受一个包含多个参数的数组。

concat连接数组但是不改变原数组。、
splice删除数据会改变数组。
sort排序会改变数组。
pop出栈返回最后一个最后一个元素，改变数组。

javascript 模块化描述：
AMD和CMD都是浏览器端的js模块化规范，分别由require.js和sea.js实现。 CommonJS是服务器端的js模块化规范，由NodeJS实现。
AMD推崇依赖前置，CMD推崇依赖就近。
主流的模块化包括CommonJS,AMD,CMD等。
模块化有利于管理模块间的依赖，更依赖模块的维护。

js中只有驼峰命名的backgroundColor，而css中使用background-color这个拓展接口。

onchange：用户改变域的内容
onkeypress：某个键盘的键被按下或按住
onmousedown：某个鼠标按键被按下
onfocus：获取焦点时触发
Onblur：用于表单输入框

块级元素实际占用的宽度与它的width、border、padding属性有关。

HTML5缓存技术主要分为两类：
本地缓存技术与离线缓存技术。
　　本地缓存技术有sessionStorage和localStorage，它们都是客户端存储技术。localStorage存储的数据，只要用户没有手动清理，就一直存在，同一浏览器之间localStorage可以实现共享。sessionStorage时会话级别的存储技术，浏览器关闭，客服端存储的数据自动销毁。
　　离线缓存技术通过创建cache manifest文件来对web应用的静态页面进行缓存，让web应用在没有网络的情况下也可以正常使用。

typeof的作用是：判断变量的数据类型；
instanceof的作用是：判断左边对象是否为右边构造函数的实例。

怎样判断一个对象的方法是自己定义的方法而不是继承而来？
　.hasOwnPropertyOf()返回true，表示为对象自身定义的方法，false表示继承而来的方法。

浏览器缓存：指浏览器在本地磁盘对用户最近访问过的页面进行存储，当用户再次访问页面时，浏览器就可以直接从本地磁盘加载文档。

**选择器：**id > class = 伪类 > 标签

js中this的指向实在程序实际运行时确定的，this的最终指向是那个最终调用它的对象。

jquery中事件绑定与事件代理怎么写，要写出来哦，给所有li加点击事件利用事件代理怎么写？
　事件绑定的方法主要有bind(),live(),on()，推荐使用on()
　事件委托的方法主要有delegate(),
　$(‘ul’).delegate(‘li’,click，fun)

隐藏元素不删除解构用什么？
visibility:hidden

301 (永久重定向）；
302（暂时重定向）；
304（请求资源未修改，取缓存内容）；
400（客户端请求语法错误，服务器无法理解）；
404（服务器无法根据客户端的请求获取资源）；
500（服务器内部错误，无法完成请求）。

ajax的作用？
　ajax是与服务器交换数据的方式，它在不重载全部页面的情况下，实现了对网页的部分刷新。
　ajax的实现基于XMLHttpRequest对象，onreadystatechange用于监听事件，readyState代表请求的变化（0,1,2,3,4），status代表http请求的状态码。
　jquery中封装了ajax的方法有$.get(),$.post(),$.ajax();三者的区别在于$.ajax()方法可以进行多种状态事件。

行内元素在一条直线上排列，默认宽度只与内容有关，在同一行水平排列； 行内元素设置宽高无用，设置margin上下及padding上下无效。
　 块内元素各占一行，默认宽度是它本身父容器的100%，垂直方向排列，块级元素从新行开始，结束接着一个断行。

闭包的理解：闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰；
　　创建：在一个函数中嵌套另外一个函数，将被嵌套的函数return出去，将return出的函数保存在一个变量中，就创建了一个闭包。
　　作用：在函数外部访问到函数的内部变量；使一个函数长久的存在于内存当中。

有关匿名函数：
　　匿名函数无法直接使用；
　　匿名函数可以依附于一个变量，并且这个变量名就是匿名函数的名字；
　　匿名函数在绑定事件中的时候，当这个事件执行的时候这个匿名函数就会被执行；
　　如果将匿名函数放入到函数表达式中并且后面加上小括号会自动执行这个函数；
　　匿名函数不能加括号自动执行，除非依附于变量或者函数表达式；

js中的回收机制：
　　js中定义的全局变量不会被销毁；
　 函数中定义的变量的生命周期在执行完这个函数之后就销毁，但是有时候需要用到函数执行结束之后的变量值，因此js需要判断是否要保存上次执行结束后的变量值，当函数中的变量存在外部引用时，这个值就不会被销毁，这也是闭包可以访问函数内部变量的原因；
总结：如果一个对象不被引用，那么这个对象就会被回收；
　　　如果两个对象相互引用，但没有被第三个对象所引用，那么这两个相互引用的对象也会被回收。

js中的静态属性与原型属性：
　　实例对象不能调用静态属性，但是可以调用原型属性，当前实例对象上若不存在某一属性，会在它的原型属性上去查找；
　　实例对象的私有属性>this上定义的属性>prototype上的属性

callee的意义在于使用匿名函数时可以调用函数本身arguments.callee();
coller()的作用在于能够知道函数的调用者是谁。

数组去重的方法？
　　双重循环判断；
　　利用Set对象，Set中的值是不能重复的；
　　利用对象key/value，一个对象不能有多个同名属性，如果相同最后一个会覆盖前边的一个。

怎样判断一个方法是对象自身的，而不是从原型链上继承的？
　　利用hasOwnProperty()方法，返回true表示对象自身定义的方法，false为原型链上的方法。

for in与for of的区别？
　for in的使用方法为let key in obj;
　for of的使用方法为let key of Object.keys(obj);
　for in遍历时不会过滤对象的原型属性；
　for of方法会过滤原型属性。

Vue和React两个框架之间的区别，各自的优缺点。
从原理上讲：
Vue的数据绑定依赖数据劫持Object.defineProperty()中的getter和setter以及发布订阅模式（eventEmitter）来监听值的变化，从而让virtual DOM驱动Model层和View层的更新。
利用v-model这一语法糖能够轻易地实现双向的数据绑定。这种模式被称为MVVM: M <=> VM <=> V。
但其实质还是State->View->Actions的单向数据流，只是使用了v-model就不需要显式地编写从视图层到Model层更新。

React则需要依赖onChange()/setState()模式来实现数据的双向绑定，因为它在诞生之初就是被设计成单向的数据流

组件通信的区别：
父子之间：两者都可以通过props绑定data或state来进行传值，又或者通过绑定回调函数来传值。
兄弟组件之间：都可以通过使用发布订阅模式写一个EventBus来监听值的变化。
跨层级：React中可以使用React.context来进行跨层级的通信。Vue中可以使用V2.2.0新增的provide/inject来实现跨层级注入数据。

模板渲染的方式区别：
React在JSX中使用原生的JS语法来实现插值，条件渲染，循环渲染等等。
Vue需要依赖指令来进行，更加容易上手但是封装的程度更高，调试成本更大，难以定位Bug。

性能差异：
在React中组件的更新渲染是从数据发生变化的根组件开始往子组件逐层重新渲染，而组件的生命周期有shouldComponentUpdate()函数供给开发者优化组件在不需要更新的时候返回false
在Vue中是通过watcher监听到数据的变化之后通过自己的diff算法，在virtualDom中直接找到以最低成本更新视图的方式。
Vue更适合开发周期更短的相对小型的项目，React更适合构建稳定大型的应用，可定制化的能力更强。

单向数据流和数据双向绑定的区别还有各自的优缺点。
单向数据流：
优点：所有状态更新更易追踪，源头易追溯，更利于维护。
缺点：只能手动地编写视图层到数据层的更新，代码量增多。

数据双向绑定：
优点：由框架隐式地帮我实现视图层和数据层互相驱动更新，代码更加简洁。
缺点：高度封装的“暗箱操作”增加了debug的难度，内在的数据流方向变得难以掌握。

对Redux的理解。
可以用 React.context 来代替redux的功能。

谈谈react组件之间的通信方式。
父向子传值：使用props，父组件行为触发相应的function使得state的改变，props依赖当前父组件的state，子组件的props也相应的接收到传递来的值。
子向父传值：子组件的props指向一个回调函数，子组件行为触发指定的props的函数，利用函数传参传到父组件的回调函数接收参数以接收传值。
兄弟传值：找到一个共同的子组件或者共同的父组件来借助传值；使用React.context来传值；使用Redux
5说react的生命周期。
mount -> update -> unmount
根据生命周期顺序调用的生命周期函数：

挂载：constructor()
componentWillMount() 首次渲染前调用
render()
componentDidMount() 渲染后调用
更新：
shouldComponentUpdate() 返回布尔值，接收到新的props或state的时候被调用
componentWillUpdate() 渲染前调用
render()
componentDidUpdate() 组件完成更新后调用，初始化时不调用

卸载：componentWillUnmount() 组件在DOM中被移除的时候调用

怎么优化一个react组件的性能：
使用缓存，减少http请求，使用雪碧图，减少不必要的DOM操作，css和js的文件压缩… 感觉都没有回答到点子上，实际上针对react的组件有一套性能优化的方法。

箭头函数和普通函数的区别：
（1）箭头函数相当于匿名函数，不能作为构造函数，不能使用new。
（2）箭头函数没有arguments，所以用扩展运算符解决。
（3）箭头函数不会根据调用它的对象而改变this的指向，会始终指向当前所在的上下文的this。

对闭包的理解：
js的变量作用域有全局变量和局部变量。
函数内部可以直接读取全局变量。
函数外部无法读取到函数内部的局部变量，因为函数在执行完之后，函数内部的环境就被销毁了。
如果函数内部没有使用var声明一个变量则实际上是声明为全局变量。
而闭包就是能够读取外部函数内部变量的函数，并且最终外部函数return这个内部函数，这时就生成了闭包。

关于内存泄漏：
js的垃圾回收机制是根据引用计数来实现的。会自动把一个函数运行之后内部的变量给销毁掉，而产生闭包之后其外部函数中的局部变量的引用就变成了循环引用，则不会被垃圾回收机制捕获并销毁，所以这就造成了内存泄漏，除非人工把该闭包函数=null将其引用解除并内存释放，此部分将一直留存在runtime的内存中。

对原型链的理解：
访问一个对象的属性，如果对象的内部不存在这个属性则会访问其__proto__的属性，如果还是找不到就再继续访问它的__proto__的属性，知道null为止。

js字符串截取的方法和区别：
String.prototype.substr()
参数1：startIndex
参数2：length
String.prototype.substring()
参数1：startIndex
参数2：endIndex
String.prototype.slice()
参数1：startIndex
参数2：endIndex
均不改变原字符串，均返回修改后的字符串。

数组遍历的方法和区别：
for循环
Array.prototype.forEach((element)=>{…}) 不改变原数组，无返回值。
Array.prototype.map((element)=>{…}) 不改变原数组，返回新数组。
Array.prototype.filter((element)=>{condition}) 不改变原数组，返回新数组。
Array.prototype.reduce((previousValue,currentValue,currentIndex)) 不改变原数组，返回最后一次执行回调函数的返回值。

跨域解决方案：
JSONP
CORS
利用NGINX反向代理转发请求
document.domain + iframe 跨域
location.hash + iframe 跨域
window.name + iframe 跨域
postMessage
nodejs作为中间件代理跨域
WebSocket协议跨域

Link 和 @import 的区别：
（1）link是从html引入的，import是从css引入的
（2）link会在浏览器加载页面时同步加载css；页面加载完成后再加载import的css
（3）优先级link > import
（4）import是CSS2.1加入的语法，只有IE5+才可识别，Link无兼容性问题
（5）权重!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

async 和 promise 的区别：
（1）使用了async的函数始终返回一个promise对象
（2）await需要搭配async函数使用
（3）await需要跟在promise前面使用，将会使promise返回resolve的参数
（4）使用async,await包裹Promise后，异步的过程就变成同步了
（5）使用场景：在几个Promise之间有前后的依赖关系的情况下可以使用async,await
（6）被await的Promise可以在包裹其的async函数后.catch()来处理错误

git的使用，合并冲突如何解决：
（1）通过git diff查看两个分支之间的差异
（2）merge conflict产生后通过手动比较文件中冲突的部分选择删除或保留冲突的代码再重新merge并commit
（3）使用图形化工具处理如Githup Desktop，Git GUI.

git rebase和merge的区别：
（1）两个命令殊途同归，最终都是为了合把自己新提交的代码合并到更新的分支上。
（2）过程中的处理方式大不相同：
rebase会更变当前分支的基线，先找到合并目标的分支与当前开发者分支的最近公共节点，然后把当前分支的新commit撤销，并把改动保存到.git/rebase中，并从当前分支更新到目标分支，之后再把新的commit改动内容应用到当前的分支上。
merge则会产生一个新的merge commit。

HTML5中新增的标签：()
新增header，footer，nav，article，section，aside，datalist，audio，video，embed，input属性

哪些情况会导致reflow发生：
字体大小改变（font size change） 窗口大小改变（screen change）
样式表添加或者删除（add/delete stylesheets） JS更改DOM元素（js changing dom）
hover动作（:hover） 位置计算（offset cats）
用户输入（user input） 改变样式属性（changing class attribute）

哪些情况会产生BFC:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

对this对象的理解 ()
this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象， 特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
this是函数运行时自动生成的一个内部对象，只能在函数内部使用。

JS里的function能访问它们的（）
参数、局部变量或函数、全局变量、外部函数的变量或函数

对闭包（closure）理解 （）
闭包是指有权访问另一个函数作用域中变量的函数；
函数内再嵌套函数；
内部函数可以引用外层的参数和变量；
参数和变量不会被垃圾回收机制回收。

continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内，在其它地方使用都会引起错误！

盒子模型包括四部分：内容、填充、边框、边界

HTML 指的是超文本标记语言（Hyper Text Markup Language）
可以打开新窗口
可以插入图片

可以插入背景图

span是行内元素、img是行内块标签、ol和ul是块级元素

HTML 中哪个可以添加背景颜色？ ()

属于html5新增规范的有（）
sessionStorage、localStorage、WebSocket

p {font-weight:bold}可以使字体变粗。
a {text-decoration:none}可以使超链接没有下划线。
text-transform:capitalize使首字母变为大写。
border-width:10px 1px 5px 20px可以使容器的上边框。
10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素

css3新增特性：
1、CSS3选择器
2、CSS3边框(Borders)
3、CSS3背景
4、CSS3渐变
5、CSS3文本效果
6、CSS3字体(@font-face规则)
7、CSS3转换和变形：
1）2D转换方法
2）3D转换属性
8、CSS3过度（transition属性）
9、CSS3动画（@keyframes规则 animation属性）
10、CSS3多列
11、CSS3盒模型
12、CSS3伸缩布局盒模型(弹性盒子)（flexbox）
13、CSS3多媒体查询（@media）

基本数据类型（原始数据类型）：Number,String, Null, Undefined, Boolean，Symbol（es6新增）
引用数据类型：Object，Function

html5正确的doctype为：