前端面试题精选

时间 2019-11-21

标签端面试题精选繁體版

原文原文链接

javascript

有一个全局变量 a，有一个全局函数 b，实现一个方法bindData，执行后，a的任何赋值都会触发b的执行。javascript

vue简单的双向绑定原理css

function bindData(target, event){
	for(var key in target) {
		if(target.hasOwnProperty(key)) {
			(function(){
				var v = target[key];
				Object.defineProperty(target, key, {
					get: function() {
						return v;
					},
					set: function(_value) {
						v = _value;
						event.call(this)
					}
				})
			})()
		}
	}
}
复制代码

将数字转换成中文大写的表示，处理到万级别，例如 12345 -> 一万二千三百四十五 CodePenhtml
react生命周期参考答案前端
闭包vue
v8引擎区别浏览器作的优化java
编译型和解释型语言的区别node
跟缓存相关的配置react
如何提升webpack打包的速度webpack
nginx 转发的配置css3
node 的一些特色
node对于字节流的控制
如何处理js的错误:eslint。
node垃圾回收
js内存溢出
if([]) 是true，可是[]==false,由于任何类型跟bool比较都会先转化为数值型。[]是object ,if的时候不是false。
()=>{} 箭头函数的区别
- 更短的语法糖
- 不绑定this，没有本身的this
- 没有arguments
- 不能够做为构造函数，不能用new
- 没有prototype
实现一个function 输入字符串，验证其字符串是合法的html标签，只要开闭合理就能够。使用栈来解决。
setTimeout(function(){},0)和process.nextTick()的区别
红黑树
promise，原生写一个
取得body下全部元素的tagname，并去重输出。
前端国际化
react组件，如何更换主题
setImmediate
flex布局 ie10 11不支持
css选择器优先级：developer.mozilla.org/zh-CN/docs/…
事件驱动
viewport有几种
prerender
[]==[] false 基本数据类型是值的比较，引用类型是地址的比较。

__proto__和prototype

Object.prototype.__proto__=null  
Object.__proto__=== Function.prototype 
Function.__proto__===Function.prototype 
Function.__proto__.__proto__=== Object.prototype 
复制代码

事件过程事件捕获-》目标-》事件冒泡

阻止冒泡方法

// 阻止冒泡
stopPropagation() //chrome
event.cancelBubble() //IE
// 阻止默认事件
preventDefault() //chrome 
event.returnValue() //IE

//JQuery 提供了两种方式来阻止事件冒泡。
$("#div1").mousedown(function(event){
    event.stopPropagation();
});
$("#div1").mousedown(function(event){
    return false;
});
复制代码

断点续传，断点下载
array的基本方法
arguments转化为真正的数组Array.prototype.slice.call(arguments)

js数组去重

//for循环时，每次取出一个元素与对象///进行对比，若是这个元素不重复，则把//它存放到结果数组中，同时把这个元素的内容做为对象的一个属性，并赋值为1，存入到第2步创建的对象中。
Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
复制代码

深拷贝 CodePen

var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}
复制代码

闭包

闭包是指有权访问另外一个函数做用域中的变量的函数. 建立闭包常见方式,就是在一个函数内部建立另外一个函数.
- 应用场景 设置私有变量和方法
- 不适合场景 返回闭包的函数是个很是大的函数
- 闭包的缺点 常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。
为何会出现闭包这种东西，解决了什么问题

受JavaScript链式做用域结构的影响，父级变量中没法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。

交换两个变量的值，但不产生新的变量

var a=1;
var b=2;
a=a+b;
b=a-b;
a=a-b;
复制代码

函数防抖和函数节流

函数防抖 频繁触发的状况下，只有足够的空闲时间，才执行代码一次

var timer = false
document.getElementById("debounce").onScroll = function() {
        clearTimeout(timer)  
        timer = setTimeout(function(){
                console.log(‘函数防抖’) 
        }, 300)     
}
复制代码

函数节流 声明一个变量当标志位，记录当前代码是否在执行

var canScroll = true;
document.getElementById('throttle').onScroll = function() {
               if (!canScroll) {
                return;
               }
                canScroll = false;
                setTimeout(function(){
                   console.log('函数节流');
                   canScroll = true;
                },300)       
}
复制代码

js继承理解JS的6种继承方式
call 和apply 详解call和apply

node延迟函数执行顺序是什么？

setTimeout(()=>{
console.log(3)
},0);
setImmediate(()=>{
console.log(2)
});
process.nextTick(()=>{
console.log(4)
})

// 4 2 3

以上代码的执行顺序为：
 
1. process.nextTick
2. setImmediate
3. setTimeout
复制代码

严格模式: "use strict"
数据类型: 6种，Undefined,Null,Boolean,Number,String,Object.注意数据不是哈，数组被归于object
使用typeof操做符，可能返回如下六种结果:undefined,boolean,string,number,object,function.
typeof null=object
函数不是一种数据类型。
虽然null==undefined ，但null指的是一个空的对象引用。undefined 代表变量没有被赋值或者未定义。
永远不要测试某个特定的浮点数
NaN是一种数值，NaN与任何数都不等，包括他自己。
Number() 能够转换任何数据类型，parseInt()和parseFloat()只能字符串转数值
Number(true)=1,Number(false)=0,Number(null)=0,Number("")=0
其余类型转化为字符串，.toString()方法，String(),区别在于null和undefined没有toSting()方法，必需要用String()
判断一个值是哪一种基本类型使用typeof ,是哪一种引用类型用instanceof
让js启动变量的回收，var a=121,a=null

JavaScript的新标准

await
symbol
async
reflect
proxy

webpack

webpack babel配置中的stage-0是什么意思？
webpack 打包构建速度优化
- 缩小文件的搜索范围
- 私用DllPlugin减小基础模块的编译次数
- 使用happyPack开启多进程Loader转换
- 使用ParallelUglifyPlugin开启多进程压缩JS 文件
webpack 开发体验优化
- 监听文件修改并自动刷新
- 开启模块热替换HMR
优化输出质量，减少输出代码体积
- 区分环境，减少生产环境代码体积
- 压缩JS ES CSS
- 使用Tree Shaking 踢出JS死代码
优化输出质量，加速网络请求
- CDN加速
- HTTP2
- 公共代码提取
- 按需加载
提高代码运行效率
- 使用Prepack提早求值
- 使用Scope Hoisting，做用域提高
使用输出分析工具
- 官方工具Webpack Analyse
- webpack-bundle-analyzer
其余TIPs
- use: ['babel-loader?cacheDirectory']，缓存babel编译结果结果。
- profile:true 展现webpack构建性能信息
- cache:true 经过缓存提高构建速度
- 使用url-loader将小图片用base64加到css或者js中。
- 经过imagemin-webpack-plugin压缩图片，经过webpack-spritesmith制做雪碧图
- 开发环境下将devtool设置为cheap-module-eval-source-map，由于生成这种source map的速度最快，能加速构建。在生产环境下将devtool设置为hidden-source-map

模块化

AMD requirejs 依赖前置
CMD seajs 就近依赖
commonjs node
ES6模块化：export import

前端安全

XSS（跨站脚本攻击）
CSRF跨站请求伪造

伪形成合法用户发起请求。一个网站中有一个a标签href是删除用户信息的url，若是是post能够模拟表单提交。
HTTP劫持，
界面操做劫持，
错误的内容推断（使用X-Content-Type-OptionsHTTP:nosniff）
保护cookies httpOnly为true，阻止js调用该cookies属性。

vue

vue 更新机制，双向绑定。
react 更新机制，diff算法。
事件机制 emit和 on实现。

React

React高阶组件

HTML5离线存储和本地缓存

离线存储

localStorage 和 sessionStorage方法 不一样域下就算key相同取不到的值也不一样，如localhost和127.0.0.1

localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
复制代码

css

实现图片边框和渐变边框

border-image:url()   linear-gradient(red, yellow) 10;
复制代码

多背景设置

background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
复制代码

文字省略样式：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
复制代码

文字波浪下划线

text-decoration:green wavy underline
复制代码

清除浮动方法 CodePen
等高布局 CodePen
- 最完美的解决方式：等高布局有几种不一样的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就仍是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增长了，则父容器的高度被撑到它里面最高那列的高度，其余比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。由于背景是能够用在padding占用的空间里的，并且边框也是跟随padding变化的，因此就成功的完成了一个障眼法。

盒子模型 box-sizing

content-box = width （content的宽）
border-box = width + border + padding 
复制代码

垂直水平居中 CodePen
自适应居中 CodePen
css3实现正方形

css3新特性（举几个例子）

Text-decoration：文字和边界能够填充颜色

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
复制代码

border-radius和rgba透明度支持

Gradient 渐变效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
复制代码

阴影（Shadow）和反射（Reflect）效果

flex布局
Transitions, Transforms 和 Animation CodenPen
css 预编译
- less
- stylus
- post css
- css module

正则表达式

写一个简单的模板引擎（字符串和正则）

var tem="我爱你，${0},${1}"
var a="小吴"
var b="小刘"
function tempFunc(template){
var reps=template.match(/\${[\d]+}/g)
for(let i=0;i<reps.length;i++){
	var ar=arguments[i+1]
	if(ar){
		template=template.replace(reps[i],ar)	 
	}else{
		template=template.replace(reps[i],"")
	}
}
	return template
}

var t=tempFunc(tem,a,b)
复制代码

12345678.22 转化为 12,345,678.22

'1234567891'.replace(/(\d+?)(?=(\d{3})+$)/g, '$1,')
复制代码

12,345,678.20 转化为 12345678.20

new Number(string.replace(/[^0-9.]/g,''))
复制代码

网络

DNS
- dig www.baidu.com 能够查看DNS解析过程
- 域名总长度则不能超过253个字符
- ICANN 管理 WHOIS 数据库
http1和http2区别
- 新的二进制格式
- 多路复用
- header压缩
- 服务端推送：server push
https 的过程和服务器搭建
http 的无状态

web 新技术

Web Assembly
PWA
Houdini：自定义css属性
web socket
service work

项目经验

选择你最引觉得傲的项目，细细聊。

欢迎访问个人我的网站:yondu.vip