面试总结

200 阅读4分钟
  1. 面试官说是经典的数组map题,平时开发真的没在意数组map的特性,主要盲区在于map不会改变原数组,而是返回新数组。

    会改变原来数组的有

    pop()---删除数组的最后一个元素并返回删除的元素。

    push()---向数组的末尾添加一个或更多元素,并返回新的长度。

    shift()---删除并返回数组的第一个元素。

    unshift()---向数组的开头添加一个或更多元素,并返回新的长度。

    reverse()---反转数组的元素顺序。

    sort()---对数组的元素进行排序。

    splice()---用于插入、删除或替换数组的元素。

    不会改变原来数组的有:

    concat()---连接两个或更多的数组,并返回结果。

    every()---检测数组元素的每个元素是否都符合条件。

    some()---检测数组元素中是否有元素符合指定条件。

    filter()---检测数组元素,并返回符合条件所有元素的数组。

    indexOf()---搜索数组中的元素,并返回它所在的位置。

    join()---把数组的所有元素放入一个字符串。

    toString()---把数组转换为字符串,并返回结果。
    lastIndexOf()---返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

    map()---通过指定函数处理数组的每个元素,并返回处理后的数组。

    slice()---选取数组的的一部分,并返回一个新数组。

    valueOf()---返回数组对象的原始值。

let a = [1,2,3]
let b = a.map(i=>i++)
//返回结果a和b的数组内容都没有改变
let a = [1,2,3]
let b = a.map(i=>++i)
//返回结果a没有改变,b每一个都加1了
  1. Promise的题,宏任务微任务,这东西纯考记忆,当年招聘别的前端的时候我也爱出这些题,现在轮到我不记得了。。。但是随便看一眼就能想起来
      setTimeout(() => {
        console.log(0);
      }, 0);
      new Promise(function (resolve, reject) {
        console.log(1);
        resolve();
        console.log(2);
      }).then(function () {
        console.log(3);
      });
      console.log(4);
      //浏览器控制台直接运行会有一个undefined,是promise的返回值。node中和html的script标签中不会出现。
      //1,2,4,3,undefined,0
  1. 单纯知识点,比较薄弱,主要平时不用
{}=={}       =>false
[]==true     =>false
0+'1'        =>'01'
1+'0'        =>'10'
typeof Date  =>function
  1. nextTick哪些地方使用? 当dom有v-if控制的时候,改变的瞬间获取dom元素所用到的值,会得到undefined,使用nexttick保证在下一个事件队列里执行,获取想要的真实值

  2. computed和watch区别,平时开发都是最佳实践,之前没深入考虑 计算属性computed :

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。
在得知 `computed` 属性发生变化之后, Vue 内部并不立即去重新计算出新的 `computed` 属性值,而是仅仅标记为 `dirty` ,下次访问的时候,再重新计算,然后将计算结果缓存起来。


第一次访问 `this.c` 的时候,记录了依赖项 `a``b` ,虽然后续通过 `setInterval` 不停地修改 `this.a` ,造成 `this.c` 一直是 `dirty` 状态,但是**由于并没有再访问 `this.c`** ,所以重新计算 `this.c` 的值是毫无意义的,如果不做无意义的计算反倒会提升一些性能。
      export default {
        data() {
          return { a: 1, b: 2 };
        },
        computed: {
          c() {
            return this.a + this.b;
          },
        },
        created() {
          console.log(this.c);
          setInterval(() => {
            this.a++;
          }, 1000);
        },
      };

侦听属性watch:

1. 不支持缓存,数据变,直接会触发相应的操作;

2.watch支持异步;

3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

4. 当一个属性发生变化时,需要执行对应的操作;一对多;

5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,

  immediate:组件加载立即触发回调函数执行,

  deep: 深度监听,为了发现**对象内部值**的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。