共计 11815 个字符，预计需要花费 30 分钟才能阅读完成。
OPTIONS 申请办法及应用场景
OPTIONS 是除了 GET 和 POST 之外的其中一种 HTTP 申请办法。
OPTIONS 办法是用于申请取得由 Request-URI 标识的资源在申请 / 响应的通信过程中能够应用的性能选项。通过这个办法，客户端能够 在采取具体资源申请之前，决定对该资源采取何种必要措施，或者理解服务器的性能。该申请办法的响应不能缓存。
OPTIONS 申请办法的 主要用途 有两个：
- 获取服务器反对的所有 HTTP 申请办法；
- 用来查看拜访权限。例如：在进行 CORS 跨域资源共享时，对于简单申请，就是应用 OPTIONS 办法发送嗅探申请，以判断是否有对指定资源的拜访权限。
说一下常见的 git 操作
git branch 查看本地所有分支
git status 查看以后状态
git commit 提交
git branch -a 查看所有的分支
git branch -r 查看近程所有分支
git commit -am "nit" 提交并且加正文
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上
git remote show origin 显示近程库 origin 里的资源
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联
git checkout --track origin/dev 切换到近程 dev 分支
git branch -D master develop 删除本地库 develop
git checkout -b dev 建设一个新的本地分支 dev
git merge origin/dev 将分支 dev 与以后分支进行合并
git checkout dev 切换到本地 dev 分支
git remote show 查看近程库
git add .
git rm 文件名(包含门路) 从 git 中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看曾经被提交的
git rm [file name] 删除一个文件
git commit -a 提交以后 repos 的所有的扭转
git add [file name] 增加一个文件到 git index
git commit -v 当你用-v 参数的时候能够看 commit 的差别
git commit -m "This is the message describing the commit" 增加 commit 信息
git commit -a - a 是代表 add，把所有的 change 加到 git index 里而后再 commit
git commit -a -v 个别提交命令
git log 看你 commit 的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从 Git 中删除)
git rm -f a.a 强行移除批改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给 push 到一个长期空间中
git stash pop 将文件从长期空间 pop 下来
z-index 属性在什么状况下会生效
通常 z-index 的应用是在有两个重叠的标签，在肯定的状况下管制其中一个在另一个的上方或者下方呈现。z-index 值越大就越是在下层。z-index 元素的 position 属性须要是 relative，absolute 或是 fixed。
z-index 属性在下列状况下会生效：
- 父元素 position 为 relative 时，子元素的 z -index 生效。解决：父元素 position 改为 absolute 或 static；
- 元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；
- 元素在设置 z -index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；
vue 实现双向数据绑定原理是什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<!-- 引入 vue 文件 -->
<div id="box">
<new-input v-bind:name.sync="name"></new-input>
{{name}}
<!-- 小胡子语法 -->
<input type="text" v-model="name" />
</div>
<script>
Vue.component("new-input", { props: ["name"], data: function () { return { newName: this.name,}; }, template: `<label><input type="text" @keyup="changgeName" v-model="newName" /> 你的名字：</label>`, // 模板字符串
methods: {changgeName: function () {this.$emit("update:name", this.newName); }, }, watch: {name: function (v) {this.newName = v;}, }, // 监听
}); new Vue({ el: "#box", // 挂载实例
data: {name: "nick",}, // 赋初始值
}); </script>
</body>
</html>
复制代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" v-mode="msg" />
<p v-mode="msg"></p>
<script>
const data = {msg: "你好",}; const input = document.querySelector("input"); const p = document.querySelector("p"); input.value = data.msg; p.innerHTML = data.msg; // 视图变数据跟着变
input.addEventListener("input", function () {data.msg = input.value;}); // 数据变视图变
let temp = data.msg; Object.defineProperty(data, "msg", { get() {return temp;}, set(value) { temp = value; // 视图批改
input.value = temp; p.innerHTML = temp; }, }); data.msg = "小李"; </script>
</body>
</html>
复制代码八股文我不想写了本人百度去
复制代码v-model 语法糖是怎么实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- v-model 只是语法糖而已 -->
<!-- v-model 在外部为不同的输出元素应用不同的 property 并抛出不同的事件 -->
<!-- text 和 textarea 元素应用 value property 和 input 事件 -->
<!-- checkbox 和 radio 应用 checked property 和 change 事件 -->
<!-- select 字段将 value 作为 prop 并将 change 作为事件 -->
<!-- 留神：对于须要应用输入法 (如中文、日文、韩文等) 的语言，你将会发现 v -model 不会再输入法 组合文字过程中失去更新 -->
<!-- 再一般标签上 -->
<input v-model="sth" /> // 这一行等于下一行
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
<!-- 再组件上 -->
<currency-input v-model="price"></currentcy-input>
<!-- 上行代码是上行的语法糖 <currency-input :value="price" @input="price = arguments[0]"></currency-input> -->
<!-- 子组件定义 -->
Vue.component('currency-input', {
template: `
<span>
<input
ref="input"
:value="value"
@input="$emit('input', $event.target.value)"
>
</span>
`,
props: ['value'],
})
</body>
</html>
复制代码Canvas 和 SVG 的区别
（1）SVG： SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩大标记语言 XML 形容的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，能够为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器可能主动重现图形。
其特点如下：
- 不依赖分辨率
- 反对事件处理器
- 最适宜带有大型渲染区域的应用程序（比方谷歌地图）
- 复杂度高会减慢渲染速度（任何适度应用 DOM 的利用都不快）
- 不适宜游戏利用
（2）Canvas： Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其地位产生扭转，就会从新进行绘制。
其特点如下：
- 依赖分辨率
- 不反对事件处理器
- 弱的文本渲染能力
- 可能以 .png 或 .jpg 格局保留后果图像
- 最适宜图像密集型的游戏，其中的许多对象会被频繁重绘
注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连贯的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具备色彩、形态、轮廓、大小和屏幕地位等属性。
map 和 foreach 有什么区别
foreach()办法会针对每一个元素执行提供得函数, 该办法没有返回值, 是否会扭转原数组取决与数组元素的类型是根本类型还是援用类型
map()办法不会扭转原数组的值, 返回一个新数组, 新数组中的值为原数组调用函数解决之后的值：复制代码DOCTYPE(⽂档类型) 的作⽤
DOCTYPE 是 HTML5 中一种规范通用标记语言的文档类型申明，它的目标是 通知浏览器（解析器）应该以什么样（html 或 xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须申明在 HTML ⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比方，语雀官网的文档类型是CSS1Compat）：
- CSS1Compat：规范模式（Strick mode），默认模式，浏览器应用 W3C 的规范解析渲染页面。在规范模式中，浏览器以其反对的最高规范出现页面。
- BackCompat：怪异模式(混淆模式)(Quick mode)，浏览器应用本人的怪异模式解析渲染页面。在怪异模式中，页面以一种比拟宽松的向后兼容的形式显示。
说一下 slice splice split 的区别?
// slice(start,[end])
// slice(start,[end])办法：该办法是对数组进行局部截取，该办法返回一个新数组
// 参数 start 是截取的开始数组索引，end 参数等于你要取的最初一个字符的地位值加上 1（可选）。// 蕴含了源函数从 start 到 end 所指定的元素，然而不包含 end 元素，比方 a.slice(0,3)；// 如果呈现正数就把正数与长度相加后再划分。// slice 中的正数的绝对值若大于数组长度就会显示所有数组
// 若参数只有一个，并且参数大于 length，则为空。// 如果完结地位小于起始地位，则返回空数组
// 返回的个数是 end-start 的个数
// 不会扭转原数组
var arr = [1,2,3,4,5,6]
/*console.log(arr.slice(3))//[4,5,6] 从下标为 0 的到 3，截取 3 之后的数 console.log(arr.slice(0,3))//[1,2,3] 从下标为 0 的中央截取到下标为 3 之前的数 console.log(arr.slice(0,-2))//[1,2,3,4]console.log(arr.slice(-4,4))//[3,4]console.log(arr.slice(-7))//[1,2,3,4,5,6]console.log(arr.slice(-3,-3))// []console.log(arr.slice(8))//[]*/
// 集体总结：slice 的参数如果是负数就从左往右数，如果是正数的话就从右往左边数，// 截取的数组与数的方向统一，如果是 2 个参数则截取的是数的交加，没有交加则返回空数组
// ps：slice 也能够切割字符串，用法和数组一样，但要留神空格也算字符
// splice(start,deletecount,item)
// start：起始地位
// deletecount：删除位数
// item：替换的 item
// 返回值为被删除的字符串
// 如果有额定的参数，那么 item 会插入到被移除元素的地位上。// splice: 移除，splice 办法从 array 中移除一个或多个数组，并用新的 item 替换它们。// 举一个简略的例子
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');
console.log(a) //['a', 'e', 'f', 'c']
console.log(b) //['b']
var a = [1, 2, 3, 4, 5, 6];
//console.log("被删除的为：",a.splice(1, 1, 8, 9)); // 被删除的为：2
// console.log("a 数组元素：",a); //1,8,9,3,4,5,6
// console.log("被删除的为：", a.splice(0, 2)); // 被删除的为：1,2
// console.log("a 数组元素：", a) //3,4,5,6
console.log("被删除的为：", a.splice(1, 0, 2, 2)) // 插入 第二个数为 0，示意删除 0 个
console.log("a 数组元素：", a) //1,2,2,2,3,4,5,6
// split(字符串)
// string.split(separator,limit)：split 办法把这个 string 宰割成片段来创立一个字符串数组。// 可选参数 limit 能够限度被宰割的片段数量。// separator 参数能够是一个字符串或一个正则表达式。// 如果 separator 是一个空字符，会返回一个单字符的数组，不会扭转原数组。var a="0123456";
var b=a.split("",3);
console.log(b);//b=["0","1","2"]
// 留神：String.split() 执行的操作与 Array.join 执行的操作是相同的。复制代码script 标签中 defer 和 async 的区别
如果没有 defer 或 async 属性，浏览器会立刻加载并执行相应的脚本。它不会期待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
defer 和 async 属性都是去异步加载内部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：
- 执行程序： 多个带 async 属性的标签，不能保障加载的程序；多个带 defer 属性的标签，依照加载程序执行；
- 脚本是否并行执行：async 属性，示意 后续文档的加载和执行与 js 脚本的加载和执行是并行进行的 ，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行) 是并行进行的(异步)，js 脚本须要等到文档所有元素解析实现之后才执行，DOMContentLoaded 事件触发执行之前。
哪些状况会导致内存透露
1、意外的全局变量：因为应用未声明的变量, 而意外的创立了一个全局变量, 而使这个变量始终留在内存中无奈被回收
2、被忘记的计时器或回调函数：设置了 setInterval 定时器，而遗记勾销它，如果循环函数有对外部变量的援用的话，那么这个变量会被始终留在内存中，而无奈被回收。3、脱离 DOM 的援用：获取一个 DOM 元素的援用，而前面这个元素被删除，因为始终保留了对这个元素的援用，所以它也无奈被回收。4、闭包：不合理的应用闭包，从而导致某些变量始终被留在内存当中。复制代码说一下 JSON.stringify 有什么毛病？
1. 如果 obj 外面有工夫对象，则 JSON.stringify 后再 JSON.parse 的后果，工夫将只是字符串的模式，而不是对象的模式
2. 如果 obj 里有 RegExp(正则表达式的缩写)、Error 对象，则序列化的后果将只失去空对象；3、如果 obj 里有函数，undefined，则序列化的后果会把函数或 undefined 失落；4、如果 obj 里有 NaN、Infinity 和 -Infinity，则序列化的后果会变成 null
5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果 obj 中的对象是有构造函数生成的，则应用 JSON.parse(JSON.stringify(obj))深拷贝后，会抛弃对象的 constructor；6、如果对象中存在循环援用的状况也无奈正确实现深拷贝；复制代码三栏布局的实现
三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，三栏布局的具体实现：
- 利用 相对定位，左右两栏设置为相对定位，两头设置对应方向大小的 margin 的值。
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
复制代码- 利用 flex 布局，左右两栏设置固定大小，两头一栏设置为 flex:1。
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
复制代码- 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的 margin 值，留神这种形式，两头一栏必须放到最初：
.outer {height: 100px;}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
复制代码- 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。
.outer {
height: 100px;
padding-left: 100px;
padding-right: 200px;
}
.left {
position: relative;
left: -100px;
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: relative;
left: 200px;
float: right;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
复制代码- 双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。
.outer {height: 100px;}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}
复制代码常见的 CSS 布局单位
罕用的布局单位包含像素（px），百分比（%），em，rem，vw/vh。
（1）像素（px）是页面布局的根底，一个像素示意终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS 像素和物理像素：
- CSS 像素：为 web 开发者提供，在 CSS 中应用的一个形象单位；
- 物理像素：只与设施的硬件密度无关，任何设施的物理像素都是固定的。
（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位能够使得浏览器中的组件的宽和高随着浏览器的变动而变动，从而实现响应式的成果。个别认为子元素的百分比绝对于间接父元素。
（3）em 和 rem绝对于 px 更具灵活性，它们都是绝对长度单位，它们之间的区别：em 绝对于父元素，rem 绝对于根元素。
- em： 文本绝对长度单位。绝对于以后对象内文本的字体尺寸。如果以后行内文本的字体尺寸未被人为设置，则绝对于浏览器的默认字体尺寸(默认 16px)。(绝对父元素的字体大小倍数)。
- rem： rem 是 CSS3 新增的一个绝对单位，绝对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 能够实现简略的响应式布局，能够利用 html 元素中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变动时让元素也随之变动。
（4）vw/vh是与视图窗口无关的单位，vw 示意绝对于视图窗口的宽度，vh 示意绝对于视图窗口高度，除了 vw 和 vh 外，还有 vmin 和 vmax 两个相干的单位。
- vw：绝对于视窗的宽度，视窗宽度是 100vw；
- vh：绝对于视窗的高度，视窗高度是 100vh；
- vmin：vw 和 vh 中的较小值；
- vmax：vw 和 vh 中的较大值；
vw/vh 和百分比很相似，两者的区别：
- 百分比（
%）：大部分绝对于先人元素，也有绝对于本身的状况比方（border-radius、translate 等) - vw/vm：绝对于视窗的尺寸
Vue 通信
1.props 和 $emit
2. 地方事件总线 EventBus(根本不必)
3.vuex(官网举荐状态管理器)
4.$parent 和 $children
当然还有一些其余方法，但根本不罕用，或者用起来太简单来。介绍来通信的形式，还能够扩大说一下应用
场景，如何应用，注意事项之类的。复制代码Set 和 Map 有什么区别？
1、Map 是键值对，Set 是值得汇合，当然键和值能够是任何得值
2、Map 能够通过 get 办法获取值，而 set 不能因为它只有值
3、都能通过迭代器进行 for...of 遍历
4、Set 的值是惟一的能够做数组去重，而 Map 因为没有格局限度，能够做数据存储
复制代码说一下数组如何去重, 你有几种办法?
let arr = [1,1,"1","1",true,true,"true",{},{},"{}",null,null,undefined,undefined]
// 办法 1
let uniqueOne = Array.from(new Set(arr)) console.log(uniqueOne)
// 办法 2
let uniqueTwo = arr => {let map = new Map(); // 或者用空对象 let obj = {} 利用对象属性不能反复得个性
let brr = []
arr.forEach( item => {if(!map.has(item)) {// 如果是对象得话就判断 !obj[item]
map.set(item,true) // 如果是对象得话就 obj[item] =true 其余一样
brr.push(item)
}
})
return brr
}
console.log(uniqueTwo(arr))
// 办法 3
let uniqueThree = arr => {let brr = []
arr.forEach(item => {
// 应用 indexOf 返回数组是否蕴含某个值 没有就返回 -1 有就返回下标
if(brr.indexOf(item) === -1) brr.push(item)
// 或者应用 includes 返回数组是否蕴含某个值 没有就返回 false 有就返回 true
if(!brr.includes(item)) brr.push(item)
})
return brr
}
console.log(uniqueThree(arr))
// 办法 4
let uniqueFour = arr => {
// 应用 filter 返回符合条件的汇合
let brr = arr.filter((item,index) => {return arr.indexOf(item) === index
})
return brr
}
console.log(uniqueFour(arr))
复制代码对line-height 的了解及其赋值形式
（1）line-height 的概念：
- line-height 指一行文本的高度，蕴含了字间距，实际上是下一行基线到上一行基线间隔；
- 如果一个标签没有定义 height 属性，那么其最终体现的高度由 line-height 决定；
- 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
- 把 line-height 值设置为 height 一样大小的值能够实现单行文字的垂直居中；
- line-height 和 height 都能撑开一个高度；
（2）line-height 的赋值形式：
- 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算本身的行高
- 纯数字：会把比例传递给后辈。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
- 百分比：将计算后的值传递给后辈
说一下 for…in 和 for…of 的区别?
for...of 遍历获取的是对象的键值, for...in 获取的是对象的键名;
for...in 会遍历对象的整个原型链, 性能十分差不举荐应用, 而 for...of 只遍历以后对象不会遍历原型链;
对于数组的遍历,for...in 会返回数组中所有可枚举的属性(包含原型链上可枚举的属性),for...of 只返回数组的下标对应的属性值;
总结：for...in 循环次要是为了遍历对象而生, 不实用遍历数组; for....of 循环能够用来遍历数组、类数组对象、字符串、Set、Map 以及 Generator 对象
复制代码正文完