数组排序
桶、堆、冒泡、基数、归并、插入、快速、选择
1：桶排序
var a=[1,2,89,23,79,45,33];
var brr=[];
for(var i=0;i<a.length;i++){
brr[a[i]]=0
}
var crr=[]
brr.forEach(function(arr,index){
crr.push(index)
})
2：冒泡排序
var arr=[5,123,333,99992,21,]
console.log(arr)
var len=arr.length
for(var j=0;j<len;j++){
//len-j还剩下多少个没有排，每次都把最大放在len-i-1位
for(var i=1;i<len-j;i++){
if(arr[i-1]>arr[i]){
min=arr[i]
arr[i]=arr[i-1]
arr[i-1]=min
}
}
}
console.log(arr)
3：选择排序
思想：把最小的放在第一位
选择剩下的：把最小的放在第一位
var arr=[5,4,3,2,1,0]
for(var i=0;i<arr.length;i++){
var minIndex=i
for(var j=i+1;j<arr.length;j++){
if(arr[j]<arr[minIndex]){
minIndex=j;//找到i后面位置的索引
}
}
temp = arr[i];//存储当前i对应的值arr[i]
arr[i] = arr[minIndex];//将剩下的最小的值复制给arr[i]
arr[minIndex] = temp;//不改数组的值
}
4、快速排序
原理：
（1）在数据集之中，选择一个元素作为"基准"（pivot）。
（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。
（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
var a=[2,4,7,1,2,0,1111,54]
function sort(arr){
if (arr.length <= 1) { return arr; }//必须的，如果数组只剩一位就没有必要了
var pivotIndex = Math.floor(arr.length / 2) ;
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
if(arr[i]>pivot){
right.push(arr[i])
}
else{
left.push(arr[i])
}
}
return sort(left).concat([pivot],sort(right))
}
5、基数排序
radixSort.gif
var a = [5, 4, 13, 2, 1, 0]
function radivSort(arr) {
var digits = (Math.max.apply(null, arr) + '').length
var arr1;
for (var l = 1; l < digits+1; l++) {
console.log('最大位数为：'+l)
var b = []
for (var i = 0; i < 10; i++) { //初始化b的值
b[i] = []
}
for (var i = 0; i < arr.length; i++) {
if ((arr[i] + '').length - l < 0) {
b[0].push(arr[i])
} else {
k = (arr[i] + '')
k = k[k.length - l]
for (var j = 0; j < b.length; j++) {
if (k == j) {
b[j].push(arr[i])
}
}
}
}
var arr=[]
for(var i=0;i<b.length;i++){
for(var j=0;j<b[i].length;j++){
arr.push(b[i][j])
}
}
arr1=arr
}
return arr1
}
radivSort(a)
/*
var b=[]//记录某位的数字（比如记录个位的数值）
for(var i=0;i<10;i++){
b[i]=[]
}
for(var i=0;i<a.length;i++){
k=(a[i]+'')
k=k[k.length-1]
for(var j=0;j<b.length;j++){
if(k==j){
b[j].push(a[i])
}
}
}
var a1=[]
for(var i=0;i<b.length;i++){
for(var j=0;j<b[i].length;j++){
a1.push(b[i][j])
}
}
var b1=[]
for(var i=0;i<10;i++){
b1[i]=[]
}
for(var i=0;i<a1.length;i++){
if((a1[i]+'').length-2<0){
b1[0].push(a1[i])
}
k=(a1[i]+'')
k=k[k.length-2]
//console.log(k)
for(var j=0;j<b1.length;j++){
if(k==j){
b1[j].push(a1[i])
}
}
}
var a2=[]
for(var i=0;i<b1.length;i++){
for(var j=0;j<b1[i].length;j++){
a2.push(b1[i][j])
}
}
var b2=[]
for(var i=0;i<10;i++){
b2[i]=[]
}
for(var i=0;i<a2.length;i++){
if((a2[i]+'').length-3<0){
b2[0].push(a2[i])
}
k=(a2[i]+'')
k=k[k.length-3]
//console.log(k)
for(var j=0;j<b2.length;j++){
if(k==j){
b2[j].push(a1[i])
}
}
}
var a3=[]
for(var i=0;i<b2.length;i++){
for(var j=0;j<b2[i].length;j++){
a3.push(b2[i][j])
}
}
var b3=[]
for(var i=0;i<10;i++){
b3[i]=[]
}
for(var i=0;i<a3.length;i++){
if((a3[i]+'').length-4<0){
b3[0].push(a3[i])
}
k=(a3[i]+'')
k=k[k.length-4]
//console.log(k)
for(var j=0;j<b3.length;j++){
if(k==j){
b3[j].push(a1[i])
}
}
}
var a4=[]
for(var i=0;i<b3.length;i++){
for(var j=0;j<b3[i].length;j++){
a4.push(b3[i][j])
}
}
console.log(a)
console.log(b)
console.log(a1)
console.log(b1)
console.log(a2)
console.log(b2)
console.log(a3)
console.log(b3)
console.log(a4)
*/
面试题
6000 档
1、说说 CSS 盒模型
在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色，背景，边框方面 --- 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。
box-sizing
content-box：默认值，标准盒子模型。 width 与 height
只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box：width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
padding-box： width 和 height
属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除
margin 合并/折叠
定义：块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
发生外边距塌陷的三种基本情况:
1、相邻的兄弟姐妹元素
毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如：
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。
2、块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的，若块级父元素的 margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的 border、padding、inline content、height、min-height、max-height 分隔时，就会发生 下外边距合并 现象。
空块元素
如果存在一个空的块级元素，其 border
、padding
、inline content、height
、min-height
都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p><div style="margin-top: 20px; margin-bottom: 20px;"></div><p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
如何给未知宽高的图片垂直居中对齐
JS 变量声明提升是什么意思
JS 有哪些数据类型
JSON 是什么
call 和 apply 的区别
jQuery 的链式操作是什么
你常用的 jQuery API 有哪些
DOMContentReady 事件是什么
常见网站性能优化手段
优化手段1：合并请求
合并请求的主要目的是减少浏览器对服务器发起的请求数，从而减少在发起请求过程中花费的时间。
优化手段2：域名拆分
域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求
域名拆分为3到5个比较合适，过多的域名会带来DNS解析时间的损耗，可能会降低性能
优化手段3：开启Gzip
Gzip是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。
化手段4：开启KeepAlive
开启KeepAlive能够减少浏览器与服务器建立连接的次数，从而节省建立连接时间。
优化手段5：MinifyMinify
指的是将JS和CSS等文本文件进行最小化处理，一般对于CSS来说就是去除空格去除换行去除注释等，对于JS，除了上述方法外，还可以进行变量名替换，将长变量名替换为短变量名。目前有很多用户做Minify的工具，例如uglifyjs等。
其他：
请求数量——合并脚本和样式表，CSS Sprites，拆分初始化负载，
划分主域
请求带宽——开启Gzip，精简JavaScript，移除重复脚本，
图像优化
缓存利用——使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，
使Ajax可缓存
页面结构——将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出代码校验——避免CSS表达式，避免重定向
10000 档
cookie, localStorage 区别是什么
7KMQJ)W}O1)9C(D4@A8I)UP.png
如何做数组去重
方法1
function unique(array){
var n = [];//临时数组
for(var i = 0;i < array.length; i++){
if(n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}
方法2
Array.from(new Set(arr));
var arr = [1,3,1,4,1,5,6,3,1,2];
Array.from(new Set(arr));//[1, 3, 4, 5, 6, 2]
Set
基本用法
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成 Set 数据结构。
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
下面是一个类似数组的对象，Array.from将它转为真正的数组。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
call 和 bind 的区别
AJAX 是什么，GET 和 POST 的区别是什么
Promise 怎么用
var, let, const区别
JSONP 是什么
封装过哪些组件？有自己写过 UI 组件吗？
常见网站性能优化手段
cookie, session, localStorage, sessionStorage 区别是什么
1.png
Promise 怎么用？遇到并行请求怎么办？
JSONP 是什么，CORS 是什么
dom是什么‘
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
浏览器常见内核
助记WB（我不要） TGP，开了tgp英雄联盟会卡，经验。。。
浏览器的内核是分为两个部分的，一是渲染引擎，另一个是JS引擎。现在JS引擎比较独立，内核更加倾向于说渲染引擎。
1、Trident内核：代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。
代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，
存在很多的兼容性问题。
2、Gecko内核：代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主
要操作系统中使用。
Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战
3、Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。
4、Presto内核：代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了
Presto
5、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了
XSS 是什么，XSRF 是什么
什么是 MVVM , 和 MVC 是什么区别, 原理是什么?
组件通信？生命周期
常见网站性能优化手段
数组去重
深拷贝
网友评论