面试之查漏补缺1

1.关于css样式穿透问题

在我们使用UI库组件的时候，scoped会将样式隔离，有时候需要修改组件样式，不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped

外层容器 >>> 组件 { }

外层容器 /deep/ 组件 { }

外层容器 ::v-deep 组件 { }  // 推荐

2.注意sass中 important写法

// 对的写法
overflow:(hidden !important);
text-overflow:(ellipsis !important);
white-space:(nowrap !important) ;
// 错误写法 多一个空格都不行
overflow: (hidden !important);
text-overflow: (ellipsis !important);
white-space: (nowrap !important) ;

3.css变量全局污染问题（CSS-module）

配置方法具体百度

由于css都是全局的，因此在变量className相同时就会发生冲突。
可以在webpack文件中，使用CSS-module可以消除全局污染的问题，只对引用的目录下的样式文件进行编译。

+ 可以使用css module的形式
+ 可以使用css in js的形式
+ css还能像vue组件的形式去写，只不过需要用工具去转化

1.完全内联样式

2. j-vue 
   [j-vue地址](https://github.com/LongTengDao/j-vue/)

3. sass的CSS-BEM 命名规范

4.Vue watch子组件内监听props，父组件第一次渲染触发不到，如何处理

触发不到的，不会回调，第一次
props: {
     name: {
          type: String,
     }
},
watch: {
     'name': function (value) {
           this.getFileInfo(value)
     }
}

写完整就会立即触发
props: {
     name: {
          type: String,
     }
},
watch: {
     'name':{
          immediate:true,
          handler:function(value){
               this.getFileInfo(value)
          }
      }
}

5.谈到forEach和map如何停止循环

1.普通的for循环

1.continue
当程序运行到 continue； 语句时，会终止当前的这一次循环，进入下一次的循环中。
它 适用于所有的循环结构。
2.break
当程序运行到 break; 语句时，会结束当前的循环，执行循环后面（外边）的语句。
如果多层循环，只会退出当前的循环，执行该循环后的语句，外循环不受影响。
一般配合判断语句使用
3.return 终止这个方法，后面的逻辑也不会执行

2.forEach和map区别

• forEach不支持return返回值，他的返回值是undefined，不可以链式调用。
• map返回一个新数组，原数组不会改变。
• 没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();

map和forEach其实可以跳出循环，只不过不是通过自己本身来实现的
而是抛出 new throw error() 通过try catch去捕获这个错误才可以终止循环。

参考大佬博客，具体分析请移步

经典笔试题
["1", "2", "3"].map(parseInt); //结果 [1, NaN, NaN]
　　　
如果想得到[1, 2,3]应该这么做
function returnInt(element){
  return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);　　

这主要是因为　parseInt()默认有两个参数，第二个参数是进制数。当parsrInt没有传入参数的时候，而map()中的回调函数时候，会给它传三个参数，第二个参数就是索引，明显不正确，所以返回NaN了。
 
forEach()和map()是ECMA5新引入的，可能在标准的其他实现中不存在，在使用前可以要Ployfill一下。

$.each()方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。

var myerror = null;  
  try{  
      arr.forEach(function(el,index){  
          if (el==20) {  
              console.log("try中遇到20,能退出吗?");//  
              foreach.break=new Error("StopIteration");  
          }else{  
              console.log(el);  
          }  
      });  
     }catch(e){  
         console.log(e.message);  
         if(e.message==="foreach is not defined") {  
             console.log("跳出来了?");//  
             return;  
         }else throw e;  
     }//可以跳出来

3.替代品

for in 和 for of的区别

• for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for in遍历数组的毛病
	1.index索引为字符串型数字，不能直接进行几何运算
	2.遍历顺序有可能不是按照实际数组的内部顺序
	3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
	所以for in更适合遍历对象，不要使用for in遍历数组。

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

详细请移步

6.深浅拷贝

6.1深拷贝

1.循环赋值
2.JSON.stringify(JSON.parse()),但不能对对象中的Function和undefined 无法拷贝，发现会对get里面的返回值直接转换

 6.浅拷贝

1.Object.assign无法拷贝深层次内容,适用于浅层拷贝。
不能对对象里面的set(),get()和函数进行拷贝
2.Object.create 原型链继承，也可以达到内容浅层拷贝，唯一可以拷贝set和get属性

const ObjA = Object.create(obj)
ObjA.data = 'a'
ObjA.info.d = 'b'

console.log(ObjA) // a
console.log(ObjA.__proto__) //打印的是obj对象

6.3 深拷贝函数

function checkType(any) {
  return Object.prototype.toString.call(any).slice(8, -1)
}
function clone(any){
  if(checkType(any) === 'Object') { // 拷贝对象
    let o = {};
    for(let key in any) {
      o[key] = clone(any[key])
    }
    return o;
  } else if(checkType(any) === 'Array') { // 拷贝数组
    var arr = []
    for(let i = 0,leng = any.length;i<leng;i++) {
      arr[i] = clone(any[i])
    }
    return arr;
  } else if(checkType(any) === 'Function') { // 拷贝函数
    return new Function('return '+any.toString()).call(this)
  } else if(checkType(any) === 'Date') { // 拷贝日期
    return new Date(any.valueOf())
  } else if(checkType(any) === 'RegExp') { // 拷贝正则
    return new RegExp(any)
  } else if(checkType(any) === 'Map') { // 拷贝Map 集合
    let m = new Map()
    any.forEach((v,k)=>{
      m.set(k, clone(v))
    })
    return m
  } else if(checkType(any) === 'Set') { // 拷贝Set 集合
    let s = new Set()
    for(let val of any.values()) {
      s.add(clone(val))
    }
    return s
  }
  return any;
}

7.计算属性中可以写异步吗

computed属性的结果是会被缓存的，并且依赖响应式数据的变化才会发生改变
定义的函数接收return的结果，return属于同步执行的，是没办法拿到异步请求结果的

了解一下事件循环机制JavaScript 运行机制详解：再谈Event Loop

8.浏览器的兼容性写过吗

推荐文章

9.css居中问题

1. flex布局
2. display: table-cell
3. 子绝父相，两种
4. （使用绝对布局) 子绝父相，且子元素要设置以下的样式

.father {
　　width: 500px;
　　height: 500px;
　　position: relative;
　　background-color: red;
}
 
.son {
　　width: 200px;
　　height: 200px;
　　position: absolute;
　　top: 0;
　　right: 0;
　　bottom: 0;
　　left: 0;
　　margin: auto;
　　background-color: black;
}

10.在js中，监听事件的方式的区别

方式一：
window.addEventListener('click', clickHandler, false);

方式二：
window.onclick = clickHandler;

方式一可以指定事件触发的阶段（捕获阶段还是冒泡阶段），方式二不行
方式一可以为每个事件指定多个回调函数；方式二只能为每个事件指定一个回调函数，后指定的回调函数会会覆盖之前的回调函数

仅仅记录一下面试中一些自认为偏僻重要的地方，如有错误欢迎指正！