前端基础二

1、使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端？如何避免这种弊端？
使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof)：
let obj = {};
let arr = [];
console.log(typeof obj === 'object'); //true
console.log(typeof arr === 'object'); //true
console.log(typeof null === 'object'); //true
从上面的输出结果可知，typeof bar === "object" 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === "[object Object]" 来避免这种弊端：
let obj = {};
let arr = [];
console.log(Object.prototype.toString.call(obj)); //[object Object]
console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(null)); //[object Null]
2、下面的代码会在 console 输出神马？为什么？
(function(){
var a = b = 3;
})();
console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

这跟变量作用域有关，输出换成下面的：
console.log(b); //3
console,log(typeof a); //undefined

拆解一下自执行函数中的变量赋值：

b = 3;
var a = b;

所以 b 成了全局变量，而 a 是自执行函数的一个局部变量。

3.
var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log("outer func: this.foo = " + this.foo);  // "bar",
console.log("outer func: self.foo = " + self.foo); // "bar",
(function() {
console.log("inner func: this.foo = " + this.foo); // undefined
console.log("inner func: self.foo = " + self.foo); // "bar",
}());
}
};
myObject.func();

可以改写成这样
(function(test) {
console.log("inner func: this.foo = " + test.foo); //'bar'
console.log("inner func: self.foo = " + self.foo);
}(self));

 
 +++++++++ 实现垂直居中的方法
1.margin: 0 auto  //水平居中
position:relative
top:50  // 明显偏下
transform:translateY('-50%') // 基于自身往上偏移一一半

transform的属性包括：  // 使什么变形
rotate() /  旋转
skew() / 倾斜
scale() / 缩小变大 
 translate(,) / 使什么翻译  translateY（-50%） 向上偏移50%
分别还有x、y之分，比如：rotatex() 和 rotatey() 

2.
在父级元素写的属性--- 子元素会居中
display:flex
aligin-items:center     //垂直居中 aligin垂直
justify-content:center  //水平居中
 
==========字符串 15889853286 去重8
1.'15889853286'.split('8').join('')
2.for循环
for(var i =0 ;i<len;i++){
 var new='' 
 if(val[i] !=='8'){
  new+ = var[i]
 }
 return newstring 
}
3.完全去重
for(var i =0 ; i<len ;i++){
 var  newarr =[]
 if(newarr [i].indexOf(new)<0){
 (arr.splice(0,i)
  newarr.push(arr[i])
 })
 return  newarr
} 
==========数组去重复

===========http 302  304  101 表示什么
302重定向  服务器要求再发送一个请求, 服务器返回一个location指向新请求的url地址
304缓存页面 ,通过对比修改时间 发送304响应 , 如果时间相同就显示浏览器自己的缓存页面,如果修改就返回200

==========================Session cookie的区别  session关闭了浏览器就不会有了 
1.session 存在服务器  cookie存在客户浏览器 
2.session能存比较大  cookie 比较小只能存4K最多保存20个cookie
3.安全信息存在session  cookie可以模拟不是很安全

====================
XML sql注入
  input 怎么预防  script 标签转化成其他的输入符

1.把script之类的标签要替换掉
2.一些类似 尖角的标签替换掉< >   或者用其他转码什么的 

===============
Objective .propty.tostring.call（a）判断类型
判断类型有多少种方法
1.typeOf [] = object   typeOf object = object  typeOf null = object  
2.instanceOf() 判断他一个原型链上面的属性 是不是继承
3.Object.propty.toString.call()

============
vue next()的用法 跳登录页面
 beforeRouteLeave (to, from, next) {
        console.log('离开路路由')
       if(to.fullPath==='/home'){
         next();
       }else{
         next('/home')
       }
=============函数怎么设置默认值
function(a=1,b=2,c=3)

==============组件异
路由组件异步
要用的时候才装入需要的组件,有效提高首次装入页面的速度,路由切换的时候也可以用到
const Singer = (resolve) => {
  import('components/singer/singer').then((module) => {
    resolve(module)
  })
}
 
==========... 的用法
es6 扩展运算符  是一个扩展应用符
1输出单个数字....[1,2,3] 输出 1 2 3
2.在函数中使用  
var arr1 = [x,y,z]
function(...arr1)  等同于 function(x,y,z)
3.可以拼接数组
var arr1 = [x,y,z]
var arr2 = [1,2]
[arrr,...arr2] 
4.取数组的最大值
var arr1 = [1,2,3,4]
Math.max(..arr1)   // 输出4

======== vue ref 
组件使用 的时候 ，在组件引用ref 指向的是一个实例  ,  只当前标签使用ref的是dom

=======================
this.$nextTick( 的用法

============深复制和浅复制的区别和用法
浅复制: 浅复制数据不能被shopcart的数据监听主要是复制了一个引用类型,并没有重新开一个新的内存 ,还是指向原有内存
Object.assign({},{a:1})
 
深复制: 使用往上一层一层递归复制, 重新开了一个新的内存空间,指向新的内存

for(i in object){

}
 
====================为什么只能用mutation改变vuex状态
官方文档写的是准确追踪这个状态的变化 ,在大型项目中vuex的状态可以被更好控制

==============
Keep alive的用法
vue2.0提供了一个keep-alive组件
用来缓存组件,避免多次加载相应的组件,减少性能消耗 
<keep-alive><router-view></router-view></keep-alive>

======================如何理解Vue组件中所说的is特性 
因为在 html 标签里面是不可以 使用compment的 所以只能用is标签??

========================怎么解决Ui框架渲染卡顿问题 ,比如我一个地方省份选择器,点击弹起的时候十分卡顿

==============
印象最深刻的问题有哪些??

========
判断自身对象的来源是本身还是来自原型链的
instans of 

======浏览器怪异模式是什么
怪异模式跟标准模式，标准模式就是根据完w3c标准 
怪异浏览器
1.盒子模型， 宽高包括了border，padding
2.图片垂直对齐方式，会导致底部会有间隙  
3.table标签内的字体大小不会继承父元素的属性

====浮动的原理 ,如何清除浮动
原理：浮动的框可以左右移动，不会影响块级元素的布局，只会影响内联元素的排列一边是文本之类. 如果浮动的元素高于他里面的框元素 就会有这种特性就会有高度坍塌的现象， 其他元素高度为0 
如何清除：
1.直接写clear:both; . 
2.。通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }   
.clearfix { *zoom:1; } //为了适配ie6 
在后面加一个伪类，通过content继承一个块级元素

====js实现冒泡排序
将8，4，3，1，4，6，等数字按照从小到大的顺序依次输出；
var arr = [8,4,1,4,6]
var tmp = null ； //作为中间存值 
for(var i =0 ;i<arr.length;i++)｛
for（var j = i+1；i<arr.length;i++）{
     if( arr[i] > arr[j] ){   //前一个大于后一个
    tmp = arr[i]  // 把当前的值放到 tmp 
    arr[j]  =  arr [ i ]  // 把比较大的那个值放到数组的后一位 
    arr[ i ] = tmp   // 把比较小的放到 数组的 前一位 
}
}
｝

===========================  for in 
var  arr  = [1，2，3 ]
var obj = ｛x：1，y：2｝
for（x in arr ）｛
    console. log（x）   // 数组输出下标 
   console.log（arr【x】） // 输出1，2，3
｝
for（x in obj）｛
console.log（x）  // 输出 X ,Y
cosole.log（obj【x】） //输出 1，2
｝
======写一段js 函数 每调用一次就加1  用ES6写
const i = 0
setTime(()=>{
 console.log( i + 1) 
},1000) 

PS: 由于整理得不是很好 而且是由自己的话语组织语言.所以不确保完全正确仅供参考.