小白面试记录

2021-08-19

1、数组的方法（splice，slice的区别）？

        Slice() 截取指定位置的数组，并返回截取的数组，不会改变原数组，含头不含尾。

        Splise()向数组中增加、删除、替换元素，然后返回被删除替换的元素，改变原数组。

2、怎么区分数组和对象？

        typeof判断数据类型（判断数组跟对象都返回object）

        instanceof判断对象的原型链是否是指向构造函数的prototype

　　        var arr = [1,2,3,1];

　　        console.log(arr instanceof Array)//true

        对象的constructor属性 

　　        var arr = [1,2,3,1];

　　        console.log(arr.constructor === Array)//true

        Object.prototype.toString.call(arr)

        es6的方法——Array.isArray(arr) 

3、用什么方法循环字符串？

        for循环

4、深拷贝和浅拷贝的区别？

        深拷贝：新增了一个指针并且申请了一个新的内存，使新增的指针指向新的内存。

         浅拷贝：只新增了一个指针指向已存在的内存。

//封装深拷贝方法
function cloneDeep (obj){
  // 1.判断是否为null 或undefined
  if (typeof obj == null ) return obj;
  // 2.判断是否为日期Date
  if (obj instanceof Date) return new Date(obj);
  // 3.判断是否为正则 typeof /\d+/ === 'object'
  if (obj instanceof RegExp) return new RegExp(obj);
  // 4.如果不是数组或对象，返回该值
  if (typeof obj !== 'object') return obj;
  // 接下来，要么是对象，要么是数组 可以用 new obj.constructor得到它类型的空值
  let cloneObj = new obj.constructor;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 递归深拷贝
      cloneObj[key] = cloneDeep(obj[key]);
    }
  }
  return cloneObj;
}

5、JSON.parse(JSON.stringify)有什么bug？

let obj = {
      name: '小明',
      age: 18,
      birthday: new Date('1996/01/01'), // Date日期自动转成了字符串
      inf: Infinity, // NaN和Infinity格式的数值会被当做是null
      NaN: NaN,
      love: undefined, // undefined、Symbol类型、函数会被丢失
      sym: Symbol('小红同学'),
      bye() {
        console.log('再见')
      },
      objIn: { a: 1, b: 2 },
      reg: /(0-9)/ // 正则会转成空对象 {}
    }

使用JSON.parse(JSON.stringify)

{
    "name": "小明",
    "age": 18,
    "birthday": "1995-12-31T16:00:00.000Z",
    "inf": null,
    "NaN": null,
    "objIn": {"a": 1,"b": 2},
    "reg": {}
}

如果对象中没有时间日期对象、NAN、Infinity、undefined、Symbol、函数、正则，可以使用JSON.parse(JSON.stringify)，否则使用 _.cloneDeep(obj)。

let obj1 = _.cloneDeep(obj)

6、基本类型和引用类型的区别？

        基本类型：null、undefined、string、number、boolean

• 基本类型的值不可变
• 基本类型的比较是值的比较（== 会隐式转换； === 值和数据类型都要相同）
• 基本类型的变量是存在栈区的（栈区指内存里的栈内存）
• 简单赋值：会在该变量上创建一个新值，再把该值复制到为新变量分配的位置上，两个值互不影响。

        引用类型：Function、Array、Object

• 引用类型的值可变，可动态添加、删除属性
• 引用类型的值是同时保存栈内存和堆内存的对象，栈区保存变量标示符和对应堆区地址
• 引用类型比较是引用的比较
• 对象引用赋值：同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中，但保存的变量为对象堆内存中的指针，赋值操作后，两个对象保存了同一个对象地址，指向同一个对象。因此，改变其中任何一个变量，都会相互影响。

7、for in 和 for of 的区别？

        for...in：只能获得对象的键名，不能获得键值；主要是为了遍历对象，不适用于遍历数组

        for...of：允许遍历获得键值；可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象

8、怎么反转字符串？

1. str.split("").reverse().join("");
2. 使用for循环，从最后一位开始，将每位字符倒序拼接到新字符串上。

   function strReverse(str) {
       var newStr = ''
       for (var i= str.length - 1; i >= 0; 1--){
           newStr +=str[i]
       }
       return newStr
   }
   var res = strReverse('asdfgh')

9、ES6怎么改变this指向？

https://blog.csdn.net/qq_37467034/article/details/78311591

10、call和apply有什么区别，具体怎么改变this指向？

https://blog.csdn.net/qq_37467034/article/details/78311591

11、浏览器怎么渲染页面？

        1.根据html文件构建DOM树和CSSOM树。

        2.构建渲染树。

        3.页面的重绘与重排（回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

12、渲染页面时会遇到哪些问题？

• FOUC : 样式闪烁问题。即CSS加载之前，先加载了HTML，则出现了“先展示无样式内容，然后再突然呈现样式”的现象。原因是：CSS加载时间过长、CSS放在文档底部
• 白屏：浏览器迟迟未渲染页面。有的浏览器需要先构建DOM树和CSSOM树，构建完成再渲染。有可能因为CSS放在HTML尾部，CSS未加载完成，则就不能构建完成，从而不能渲染而白屏；也有可能是JS放在了头部，阻塞了DOM的解析。
• 构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载完JS文件后，再继续构建DOM树及CSSOM树。可将js放在body后，或给script标签设置defer或async解决。

13、渲染页面时怎么监控js请求呢？

• DOMContentLoaded：DOM结构加载完
• load：所有资源都加载完 （晚于DOMContentLoaded触发的）

14、promise有哪些API？

• Promise.all()用于将多个promise实例包装成一个新的promise实例；

  Promise.all([p1, p2, p3]).then(function (results) {
    //results [p1Res,p2Res,p3Res]
  }).catch(function(reason){
    // ...
  });

• Promise.race();

15、promise.all()的传参是什么？

数组，包含多个promise实例的数组。

16、高阶函数？

一个函数就可以接收另一个函数作为参数，就被称为高阶函数。

map()：根据传如的函数对数据每一项做出计算，return的是什么，数组某一项就是什么

reduce()：接受一个函数作为累加器，数组中每个值开始缩减，最终变成一个值。

filter()：把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

https://www.cnblogs.com/goloving/p/8361705.html

17、原型链了解过吗？

18、怎么处理跨域问题？

19、处理过兼容性问题吗？

        1.获取行外样式

                IE：dom.currentStyle.xxx

                Chrome： getComputedStyle(dom,false)

兼容两个浏览器的写法:
if(oDiv.currentStyle){
    alert(oDiv.currentStyle.width);
}else{
    alert(getComputedStyle(oDiv,false).width);
}

        2.用“索引”获取字符串的某个字符

var str = "nihao";
for(var i = 0; i < str.length; i++){
    console.log(str[i]); //低版本的浏览器IE6,7不兼容
    console.log(str.charAt(i));  //全部浏览器都兼容
}

        3.同一个元素绑定多个相同事件

        IE8以下用: attachEvent('事件名',fn);
        FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false); //true代表捕获阶段处理， false代表冒泡阶段处理，默认false。

        4.获取滚动条距离出现的问题
        IE,Chrome: document.body.scrollTop
        FF: document.documentElement.scrollTop
        兼容处理:var scrollTop=document.documentElement.scrollTop || document.body.scrollTop

20、做过调优吗？js方向

1. 重复获取的变量应该提取出来
2. 多使用卫语句

vue

1、v-for 和 v-if 可以一起用吗？为什么？

v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。

2、说下v-model

3、组件通信

4、vuex的数据传递流程

5、在组件A中新加功能，不能影响其他组件。