经历了上次面试，我觉得遇到不会的点还是要踏踏实实的落实一遍，just do it！

1、CSS居中的方法有哪些

• 水平居中

  • 行内元素

    把行内元素放在一个属性块（display:block）元素中，然后设置父层元素属性居中：

    .test{
    	text-align:center;
    }

  • 块内元素

    .test{
    	margin: 10px auto
    }

  • 多个块状元素

    • 把块状元素属性（display:inline-block）,然后设置父层元素属性居中：

    .test{
    	text-align:center
    }

    • flexbox布局实现：把块状元素的父元素属性display:flex和justify-content:center

    .test{
            display:flex
            justify-content:center
        	text-align:center;
        }

• 垂直居中

  • 多行的行内元素

    .test{
    	display:table-cell;
    	vertical-align:middle;
    }

  • 已知高度的块状元素

    .test{
    	top: 50%;
    	margin-top: -50px;  /* margin-top值为自身高度的一半*/
    	position:absolute;
    	padding:0;
    }

• 水平垂直居中

  • 已知高度和宽度的元素

  方法一：
  .test{
  	position:absolute;
  	margin:auto;
  	left:0;
  	top:0;
  	right:0;
  	bottom:0;
  }
  
  方法二：
  .test{
  	position:absolute;
  	top:50%;
  	left:50%;
  	margin-top:-75px;	/*设置margin-left、margin-top为自身高度和宽度的一半*/
  	margin-left:-75px;
  }

  • 未知高度和宽度元素

    方法一：
    .test{
    	position:absolute:
    	top:50%
    	left:50%
    	transform:translate(-50%,-50%)	/*使用css3的tranform来实现*/
    }
    
    方法二：
    .test{
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }

2、JS的基本数据类型

• undefined

• null

• string

  • 常用操作方法：

    方法	描述
    charAt( index)	返回在指定位置的字符。
    charCodeAt(index)	返回指定的位置的字符的Unicode编码。
    concat(str2……)	连接两个或更多字符串，并返回新的字符串。
    fromCharCode(codeNumber)	将Unicode编码转为字符
    indexOf(str)	返回某个指定的字符串值在字符串中首次出现的位置
    includes(str)	查找字符串是否包含指定的字符串。
    lastIndexof(str)	从后向钱搜索字符串，并从起始位置开始计算在字符串中出现的位置。
    match(reg)	查找找到一个或多个正则表达式的匹配
    repeat(Count)	复制字符串指定次数，并将它们连接在一起返回
    replace(oriStr,repStr)	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串
    search(str)	查找与正则表达式匹配的值
    slice(startN,endN)	提取字符串的片段，并在新的字符串中返回被提取的部分。
    split(str)	把字符串分割为字符串数组
    startsWith(str)	查看字符串是否以指定的字符串开头
    substr(start,length)	从起始索引提取字符串中指定数目的字符
    substring(start,end)	提取字符串中两个指定的索引号之间的字符
    toLowerCase()	把字符串转换为小写
    toUpperCase()	把字符串转换为大写
    trim()	去除字符串两边的空白
    toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写
    toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写
    valueOf()	返回某个字符串对象的原始值
    toString()	返回一个字符串

• boolean

• number

  方法	描述
  isFinite	检测指定参数是否为无穷大
  toExponential()	把对象的值转换为指数计数法
  toFixed(num)	把数字转换为字符串，结果的小数点后有指定位数的数字
  toPrecision()	把数字格式化为指定的长度
  toString()	把数字转换为字符串
  valueOf()	返回一个Number对象的基本数字值

  ES6新增Number方法

  • Number.isInteger(Num):用来判断给定的参数是否为整数

  • Number.isSafeInteger(Num):判断传入的参数值是否是一个“安全整数”

    安全整数范围为 -($2^{53}$ - 1)到 $2^{53}$ - 1 之间的整数，包含 -($2^{53}$ - 1)和 $2^{53}$ - 1。

• symbol(ES6)

  ES5的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin模式），新方法的名字就又可能与现有方法产生冲突。如果有一种机制，保证有一种机制，保证每个属性的名字都是独一无二的就好了，这样就根本上防止属性名的冲突。这就是ES6引入Symbol的原因。

  加了参数之后，就易于区分。不利于区分。如果参数是一个对象，就会调用该对象的toString方法，将其转换为字符串，然后菜生产一个Symbol值。

• object

3、数组有哪些方法

方法	描述
concat(Arr1……)	连接两个或者更多的数组，并返回结果
copyWithin(target,start,end)	从target开始，换成后面的start到end
entries()	返回一个数组的迭代对象
every(function)	如果数组中检测到元素是否满足条件，如果一个不满足就不检测，返回false
fill(value,start,end)	从开始到结束用value填充
filter(function)	返回满足条件的全部元素，如果都不满足返回空数组
find(function)	可以返回第一个满足条件的元素
findIndex(function)	返回满足条件的第一个元素位置的下标
forEach(function(item,index))	方法用于调用数组的每个元素，并将该元素传给回调函数
from(obj)	将字符串生成一个数组
includes(SearchEle,start)	从指定位置开始查找需要查找的元素值，可以省略，从0 开始
indexOf(item,start)	返回数组中某个指定的元素的下标
isArray()	判断一个对象是否为数组
join(sep)	将数组变成字符串，然后插入sep分割
keys()	从数组中创建一个可迭代的对象，该对象包含数组的键（下标）
lastIndexOf(item,start)	指定元素子数组中出现的最后位置
map(function)	返回一个新数组，将数组中的元素为原始数组元素调用函数处理的值
pop()	删除数组的最后一个元素，并返回删除元素
push()	在数组末尾添加一个或多个元素，并返回新的长度
reduce(function（total,currentIndex）,initialValue)	接收一个函数作为累加器，数组中的每个值（从左往右开始缩减）
reduceRight()	和reduce一样，从右往左
reverse()	将数组中元素的顺序倒置
shift()	用于数组的第一个元素从中删除，并返回第一个元素的值
slice(start,end)	从start到end-1的选中元素
some(function(currentValue))	找到是否存在满足条件的元素，找到一个满足就返回true
sort(sortfuction) sortfunciton(a,b){return a-b}小到大，return b-a 从大到小	按字母或数字的顺序按升序或降序排列
splice(index,howmany,item,itemX)	从index开始删除howmany个字符，可为0，插入item，itemX
toString()	将数组用，隔开
unshift(item,itemx)	向数组开头添加一个或者更多的元素，返回新的长度
valueOf()	返回Array对象的原始值

4、for……in和for……of的区别

• for……in是ES5的标准，遍历key(属性名)，并且原型链上的所有属性也会被遍历。过滤原型链上的属性可以用hasOwnProperty()方法过滤。同时for……in遍历并不能保证顺序

• for……of是ES6的标准，遍历value(属性值)，但是只能对数组使用，不可以对对象使用

5、数组去重

var arr1 = [1,1,1,2,2,2,3,3,3,4,4,4,1,1,5,5,6,6,6,7,7,7]
console.log(arr1)
var arr2 = [];
arr1.forEach(function(val){
	if(arr2.indexOf(val) === -1){
		arr2.push(val)
	}
})
console.log(arr2)

//方法2
var arr = [1,1,1,2,3,3,2,1,1,1]
Array.prototype.unique2 = function () {  
            var hash = [],
            n = [];//hash 哈希表，n 为临时数组
            for(var i = 0; i < this.length; i ++){
                if(!hash[this[i]]){
                    hash[this[i]] = true;//存入哈希表
                    n.push(this[i]);//当前元素push到数组中
                }
            }
            return n
        }
        console.log(arr.unique2())

6、使用闭包有什么问题

• 闭包的官方解释
  一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

• 闭包的定义
  1、闭包就是能够读取其他函数内部变量的函数；
  2、在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“；
  3、在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

• 闭包的用途
  1、能够读取函数内部的变量；
  2、让这些变量的值始终保持在内存中。

• 闭包需要注意什么
  1、闭包会使函数中的变量保存在内存中，内存消耗很大。所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄漏。解决办法是，在退出函数之前，将不使用的局部变量删除。
  2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果把父函数当做对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时要注意不要随便改变父函数内部变量的值。

• 闭包的应用场景
  1、保护函数内部变量的安全；
  2、通过保护变量安全实现JS私有属性和私有方法不能被外部访问；
  3、使用闭包代替全局变量，防止变量污染。

• 闭包的优点
  1、变量长期驻扎在内存中；
  2、避免全局变量的污染；
  3、私有成员的存在。

• 闭包的缺点
  1、常驻内存中，会增大内存的使用量；

7、原生的dom操作

方法	描述
document.createElement(TagName)	创建新元素
document.getElementById(“Id”)	按照ID查询
element.getElementsByClassName() ie9+	按照Class查询
element.querySelectorAll() ie8	按照Class查询
element.getElementsByTagName() ie6+	按照Tag查询
element.parentNode()	获取父节点
element.childNode()	获取子节点
parentElement.appendChild(child)	添加到最后面
parentElement.insertBefore(newElement,Element)	newElement添加到elemnt前面
element.style.css	修改css
element.setAttribute()
element.removeAtrribute()
element.lacssNam

8、inline-block和inline和block区别

• inline：使元素变成行内元素（内联），拥有行内元素的特性，即

1. 与其他行内元素共享一行
2. 不能修改width、height属性，大小由内容撑开
3. padding属性 top、right、botto、left设置都有效；margin属性只有left、right设置有效

• block： 使元素变成块级元素，拥有块级的特性，即

1. 独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
2. 可以修改width、height属性
3. padding、margin四个方向的值设置均有效

• inline-block： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即

1. 与其他行内元素共享一行
2. 可以修改width、height属性
3. padding、margin四个方向的值设置均有效

注意：当多个inline-block的元素写在一起时，是否换行效果不同（换行后两者中间会有间距），如img、button标签，这也是代码经过压缩后效果与开发版本不同的原因之一，解决方案是去除换行

9、什么是非对称加密

• 非对称加密：加密算法需要两个密钥进行加密和解密，这两个密钥是公开密钥和私有密钥
• 加密和解密使用的是同一个密钥

10、CSS3动画

Css3可以创建动画，它可以取代许多页面动画图像、Flash动画和JavaScript实现的效果

CSs3 @Keyframes规则

• @Keyframes的规则是创建动画：当在@Keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器。

  • 规定动画的名称

  • 规定动画的时长

    div
    {
    	animation: myfirst 5s	/*您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0*/
    	-webkit-animation:myfirst 5s; /*Safari与Chrome*/
        
    }

• @Keyframes规则内指定一个Css样式和动画将逐步从目前的样式更改为新的样式。

  • Css3动画是什么？动画是使元素从一种样式逐渐变化为另一种样式的效果。

  您可以改变任意多的样式任意多的次数。

  请用百分比来规定发生的时间,或用关键词“from”和”to“，等同于0%和100%

  0%是动画的开始，100%是动画的完成。

  为了得到最佳的浏览器支持，您应该始终定义0%和100%的选择器

  @keyframes myfirst
  {
  	0% {background:red; left:0px; top:0px;}
  	25%{background:yellow; left:200px; top:0px;}
  	50%{background:blue; left:200px; top:200px;}
  	100%{background:green; left:0px; top:0px;}
  }
  
  @-webkit-keyframes myfirst /*Safari与Chrome*/
  {
  	0% {background:red; left:0px; top:0px;}
  	25%{background:yellow; left:200px; top:0px;}
  	50%{background:blue; left:200px; top:200px;}
  	100%{background:green; left:0px; top:0px;}
  }

@keyframes规则和所有动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性。
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒
animation-timing-function	规定动画的速度曲线。默认是”ease“
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时）元素的样式
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数。默认是1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是”normal“。
animation-play-state	规定动画是否正在运行或暂停。默认是”running“

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

12、transition属性

transition属性设置元素当过渡效果，四个简写属性为：

• transition-property 指定Css属性的name,transition效果
• transition-duration transition效果需要指定多少秒或毫秒才能完成
• transition-timing-function 指定transition效果的转速曲线
• transition-delay 定义transition效果开始的时候