⽤友前端⾯试题⽬及知识点
前端⾯试题实习
⼀、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出栈返回最后⼀个最后⼀个元素，改变数组。
jquery框架面试题
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请求的状态码。
.get(),.ajax()；三者的区别在于
　jquery中封装了ajax的⽅法有.post(),.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中可以使⽤t来进⾏跨层级的通信。Vue中可以使⽤V2.2.0新增的provide/inject来实现跨层级注⼊数据。
模板渲染的⽅式区别：
React在JSX中使⽤原⽣的JS语法来实现插值，条件渲染，循环渲染等等。
Vue需要依赖指令来进⾏，更加容易上⼿但是封装的程度更⾼，调试成本更⼤，难以定位Bug。
性能差异：
在React中组件的更新渲染是从数据发⽣变化的根组件开始往⼦组件逐层重新渲染，⽽组件的⽣命周期有shouldComponentUpdate()函数供给开发者优化组件在不需要更新的时候返回false
在Vue中是通过watcher监听到数据的变化之后通过⾃⼰的diff算法，在virtualDom中直接到以最低成本更新视图的⽅式。
Vue更适合开发周期更短的相对⼩型的项⽬，React更适合构建稳定⼤型的应⽤，可定制化的能⼒更强。
单向数据流和数据双向绑定的区别还有各⾃的优缺点。
单向数据流：
优点：所有状态更新更易追踪，源头易追溯，更利于维护。
缺点：只能⼿动地编写视图层到数据层的更新，代码量增多。
数据双向绑定：
优点：由框架隐式地帮我实现视图层和数据层互相驱动更新，代码更加简洁。
缺点：⾼度封装的“暗箱操作”增加了debug的难度，内在的数据流⽅向变得难以掌握。
对Redux的理解。
可以⽤ t 来代替redux的功能。
谈谈react组件之间的通信⽅式。
⽗向⼦传值：使⽤props，⽗组件⾏为触发相应的function使得state的改变，props依赖当前⽗组件的state，⼦组件的props也相应的接收到传递来的值。
⼦向⽗传值：⼦组件的props指向⼀个回调函数，⼦组件⾏为触发指定的props的函数，利⽤函数传参传到⽗组件的回调函数接收参数以接收传值。
兄弟传值：到⼀个共同的⼦组件或者共同的⽗组件来借助传值；使⽤t来传值；使⽤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}) 不改变原数组，返回新数组。
duce((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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。