interviewWorktile面试

Posted 2020-12-18 mailyuan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了interviewWorktile面试相关的知识，希望对你有一定的参考价值。

1. 区别 == 和 ===

== 比较的是两个变量的值

=== 比较两个变量的类型和值

基本数据类型（undefined，boolean，number，string，null）

存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问。

基本数据类型的比较是值的比较

引用数据类型（object）

放在堆中，其引用就是内存地址

引用类型的比较是引用的比较

2. 浅拷贝和深拷贝

（拿一个对象来说，当然也可以是数组。非基本类型的拷贝，才会有深拷贝、浅拷贝的区别）

只要不是层层拷贝，就是浅拷贝（Shallow Copy 老变量的改变，影响到了新的变量）。分为

（1）仅仅拷贝变量（变量的赋值）

这样的简单复制，拷贝的就是对象的引用，即拷贝了对象在内存空间中的地址，在内存中始终只有一个对象

var obj1 = {
    ‘name‘ : ‘zhangsan‘,
    ‘age‘ :  ‘18‘,
    ‘arr‘ : [1,[2,3],[4,5]],
};

var obj2 = obj1;

（2）一层拷贝

function shallowCopy(src) { // 一层浅拷贝
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

/**** test ****/
var obj = {
    a:1,
    arr: [2,3]
};
var shallowObj = shallowCopy(obj);

造成的坏处就是：obj.arr[0] = 0; console.log(shallowObj.arr[0]); // obj 的里 arr 的改变，会影响到 shallowObj.arr

数组的 slice()、concat() 也是浅拷贝
对象的 Object.assign() 也是浅拷贝

let a = {
    name: "muyiy",
    book: {
        title: "You Don‘t Know JS",
        price: "45"
    }
}

let b = Object.assign({}, a); // 将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
a.name = "change";
a.book.price = "55";
console.log(a.name, ‘
 ---- 
‘, b.name); // 第一层的基础类型不会互相影响
console.log(a.book, ‘
 ---- 
‘, b.book); // 但是第一层的复杂数据类型，即第二层 互相影响了

扩展运算符的拷贝也是浅拷贝

let a = {
    name: "muyiy",
    book: {
        title: "You Don‘t Know JS",
        price: "45"
    }
}

let b = {...a};// 将所有可枚举属性展开，放到一个新对象中
a.name = "change";
a.book.price = "55";
console.log(a, ‘
 ---- 
‘, b);
console.log(a.book, ‘
 ---- 
‘, b.book);

会发现和 Object.assign() 的效果一模一样。只是实现了第一层的拷贝，第二层更深层会互相影响

深拷贝是层层拷贝（老变量与新变量，互不影响）

完全改变变量 a 之后对 b 没有任何影响，这就是深拷贝的魔力

（1）const b = JSON.parse(JSON.stringify(a));

原理：

利用 JSON.stringify() 将原始数据转换成字符串（string 是基本数据类型存放在栈）
然后用 JSON.parse() 解析字符串为一个对象（这时会在内存中新建一个对象）

缺点：

对于undefined、symbol 和函数这三种情况，会直接忽略
不能解决循环引用的对象（循环引用：就是一个对象有一个属性，这个属性等于这个对象）

let obj = {
    a: 1,
    b: {
        c: 2,
           d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;

let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON

不能正确处理new Date()

// 木易杨
new Date();
// Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)

JSON.stringify(new Date());
// ""2018-12-24T02:59:25.776Z""

JSON.parse(JSON.stringify(new Date()));
// "2018-12-24T02:59:41.523Z"

解决方法转成字符串或者时间戳就好了。

// 木易杨
let date = (new Date()).valueOf();
// 1545620645915

JSON.stringify(date);
// "1545620673267"

JSON.parse(JSON.stringify(date));
// 1545620658688

不能处理正则

// 木易杨
let obj = {
    name: "muyiy",
    a: /‘123‘/
}
console.log(obj);
// {name: "muyiy", a: /‘123‘/}

let b = JSON.parse(JSON.stringify(obj));
console.log(b);
// {name: "muyiy", a: {}}

（2）三方库 jQuery.extend().

（3）原生三方库 lodash.cloneDeep()

var objects = [{ ‘a‘: 1 }, { ‘b‘: 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); // => false

（4）自己写思路就是递归调用刚刚的浅拷贝，把所有属于对象的属性类型都遍历赋给另一个对象即可

 // 内部方法：用户合并一个或多个对象到第一个对象
    // 参数：
    // target 目标对象  对象都合并到target里
    // source 合并对象
    // deep 是否执行深度合并
    function extend(target, source, deep) {
        for (key in source)
            if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
                // source[key] 是对象，而 target[key] 不是对象， 则 target[key] = {} 初始化一下，否则递归会出错的
                if (isPlainObject(source[key]) && !isPlainObject(target[key]))
                    target[key] = {}

                // source[key] 是数组，而 target[key] 不是数组，则 target[key] = [] 初始化一下，否则递归会出错的
                if (isArray(source[key]) && !isArray(target[key]))
                    target[key] = []
                // 执行递归
                extend(target[key], source[key], deep)
            }
            // 不满足以上条件，说明 source[key] 是一般的值类型，直接赋值给 target 就是了
            else if (source[key] !== undefined) target[key] = source[key]
    }

    // Copy all but undefined properties from one or more
    // objects to the `target` object.
    $.extend = function(target){
        var deep, args = slice.call(arguments, 1);

        //第一个参数为boolean值时，表示是否深度合并
        if (typeof target == ‘boolean‘) {
            deep = target;
            //target取第二个参数
            target = args.shift()
        }
        // 遍历后面的参数，都合并到target上
        args.forEach(function(arg){ extend(target, arg, deep) })
        return target
    }

以上是 Zepto 中深拷贝的代码

3. 如何合并两个对象

利用扩展运算符（浅拷贝第一层）

const obj1 = {a: 0, b: 1, c: 2};
const obj2 = {c: 3, d: 4, e: 5};
const obj = {...obj1, ...obj2};
// obj => {a: 0, b: 1, c: 3, d: 4, e: 5}

for in 遍历对象一步一步手写一个深拷贝（参考： https://juejin.im/post/5d6aa4f96fb9a06b112ad5b1#heading-3）
第一步，写一个浅拷贝

// 创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性依次添加到新对象上，返回
function clone(target) {
    let cloneTarget = {};
    for (const key in target) {
        cloneTarget[key] = target[key];
    }
    return cloneTarget;
};

第二步，如果是深拷贝的话，考虑到我们要拷贝的对象是不知道有多少层深度的，我们可以用递归来解决问题，稍微改写上面的代码

function clone(target) {
    if (typeof target === ‘object‘) { // 只考虑了普通的 object
        let cloneTarget = {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

测试下上述代码

const oldObject = {
    field1: 1,
    field2: undefined,
    field3: ‘ConardLi‘,
    field4: {
        child: ‘child‘,
        child2: {
            child2: ‘child2‘
        }
    }
};
const newObject = clone(oldObject);
console.log(newObject);

技术图片

这个基础版本，还有很多不足，比如，还没有考虑数组

第三步，上面只考虑了普通的 object，下面我们只需要把初始化代码稍微一变，就可以兼容数组了

module.exports = function clone(target) {
    if (typeof target === ‘object‘) {
        let cloneTarget = Array.isArray(target) ? [] : {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

/**** test ****/
const oldOne = {
    field1: 1,
    field2: undefined,
    field3: {
        child: ‘child‘
    },
    field4: [2, 4, 8]
};

const newOne = clone(oldOne);
console.log(newOne);

技术图片

第四步，上面的代码还存在一个循环引用的问题，我们解决它（循环引用：对象的属性间接或直接的引用了自身的情况）

解决循环引用问题：

我们可以额外开辟一个存储空间，来存储当前对象和拷贝对象的对应关系

当需要拷贝当前对象时，先去存储空间中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝

这样就巧妙化解的循环引用的问题

这个存储空间，需要可以存储 key-value 形式的数据，且 key 可以是一个引用类型，我们可以选择 Map 这种数据结构

检查map中有无克隆过的对象
有 - 直接返回
没有 - 将当前对象作为key，克隆对象作为value进行存储
继续克隆

function clone(target, map = new Map()) {
    if (typeof target === ‘object‘) {
        let cloneTarget = Array.isArray(target) ? [] : {};
        if (map.get(target)) {
            return map.get(target);
        }
        map.set(target, cloneTarget);
        for (const key in target) {
            cloneTarget[key] = clone(target[key], map);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

第五步，接下来，我们可以使用，WeakMap 替代 Map来使代码达到画龙点睛的作用

WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。

什么是弱引用呢？

在计算机程序设计中，弱引用与强引用相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。

一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。

我们默认创建一个对象：const obj = {}，就默认创建了一个强引用的对象，
我们只有手动将obj = null，它才会被垃圾回收机制进行回收
如果是弱引用对象，垃圾回收机制会自动帮我们回收。

还有的优化就是 for、while、for in 中 while 的效率是最好的
如何写出一个惊艳面试官的深拷贝?

4. 改变对象的一个属性

例如 const a = {index: 1, name: ‘kjf‘};

需要把 index 改成 2

```
a = {...a, index: 2};
```

5. react 数据流以及 vue 数据流

都是组件化编程

每个组件都有自己的 state 状态

react 的 state 发生变化会触发重新 render 渲染组件

vue 的 state 发生变化会尽量少的页面渲染，先是在内存的虚拟dom 进行逻辑处理，然后批量的更新组件

6. 原型链

作用域链找变量
原型链对象找属性

每个函数都有一个 prototype 显示原型属性 ---- 原型对象

每个实例对象都有一个 __proto__ 隐式原型属性 ---- 指向其构造函数的原型对象

对象找属性时，会先在自身查找

如果没有就沿着 __proto__属性一层一层的向上查找

直到查找到 Object.prototype.__proto__ === null 如果还没找到，就是 undefined

7. 计算机网络体系结构分几层、http 在哪一层

计算机网络体系结构分层：（有两种常见的模型）

osi 7层模型

ing

TCP/IP 五层概念层模型

应用层： HTTP、DNS、Telnet、FTP、SNMP、SMTP、TFTP

传输层： TCP/UDP

网络层： IP

数据链路层

物理层

8. 前后端联调 RESTful API，请求类型、作用以及区别

参考： https://www.cnblogs.com/tianxiaxuange/p/13324857.html

9. Object.defineProperty() 劫持属性的缺点，vue3 是如何解决的

参考： https://juejin.im/post/5bf3e632e51d452baa5f7375

Object.defineProperty() 劫持属性的缺点：
（1）Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应

所以 vue 提供了 hack 处理过的八种方法 push()、pop()、shift()、unshift()、splice()、sort()、reverse()方法修改数组，可以触发渲染页面

（2）无法检测到对象属性的新增或删除

this.$delete(target, propertyName/index) 避开 Vue 不能检测到 property 被删除的限制

this.$set( target, propertyName/index, value ) 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新

vue3.0 采用了基于 Proxy 的观察者机制，消除了以前存在的警告，使速度加倍，并节省了一半的内存开销
用 Proxy 取代了 Object.defineProperty 这部分
Proxy 是 es6 提供的新特性，兼容性不好，最主要的是这个属性无法用 polyfill 来兼容（目前 Proxy 并没有有效的兼容方案，所以 vue3.0 是大概会是3.0和2.0并行）
babel 只负责语法转换，比如将ES6的语法转换成ES5。
但如果有些对象、方法，浏览器本身不支持，比如 Promise、WeakMap 等等，此时，需要引入 babel-polyfill 来模拟实现这些对象、方法
Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式
Proxy 可以理解成，Proxy 直接代理整个对象而非对象属性，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
正是因为这层拦截，可以劫持整个对象，并返回一个新对象
Proxy 定义的 13种的trap/13种代理操作方法：

handler.get 获取对象的属性时拦截
handler.set 设置对象的属性时拦截
handler.has 拦截propName in proxy的操作，返回boolean
handler.apply 拦截proxy实例作为函数调用的操作，proxy(args)、proxy.call(...)、proxy.apply(..)
handler.construct 拦截proxy作为构造函数调用的操作
handler.ownKeys 拦截获取proxy实例属性的操作，包括Object.getOwnPropertyNames、Object.getOwnPropertySymbols、Object.keys、for...in
handler.deleteProperty 拦截delete proxy[propName]操作
handler.defineProperty 拦截Objecet.defineProperty
handler.isExtensible 拦截Object.isExtensible操作
handler.preventExtensions 拦截Object.preventExtensions操作
handler.getPrototypeOf 拦截Object.getPrototypeOf操作
handler.setPrototypeOf 拦截Object.setPrototypeOf操作
handler.getOwnPropertyDescriptor 拦截Object.getOwnPropertyDescriptor操作

Proxy代理目标对象，是通过操作上面的13种trap来完成的

Proxy 基本用法

// p 是代理后的对象。当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法

// target 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
// handler 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数
// hander 是一个对象包含4个方法 {
    get：读取
    set：修改
    has：判断对象是否有该属性
    construct：构造函数
}

let p = new Proxy(target, handler);

let obj = {};
let handler = {
    get(target, property) {
        console.log(`${property} 被读取`);
        return property in target ? target[property] : 3;
    },
    set(target, property, value) {
        console.log(`${property} 被设置为 ${value}`);
        target[property] = value;
    }
}
 
let p = new Proxy(obj, handler);
p.name = ‘tom‘ //name 被设置为 tom
p.age; //age 被读取 3

10. 前后端分离与前后端不分离的区别

前后端不分离：
优点：
动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
从服务器端获取的结果已经是解析渲染完成的了，不需要客户端再去解析渲染了，所以页面加载速度快（前提是服务器端处理的速度够快，能够处理过来）

所以类似于京东，淘宝这些网站，首屏数据一般都是由服务器端渲染的

缺点：
如果页面中存在实时更新的数据，每一次想要展示最新的数据，页面都要重新刷新一次，这样肯定不行，非常耗性能
都交给服务器端做数据渲染，服务器端的压力太大，如果服务器处理不过来，页面呈现的速度更慢（所以像京东和淘宝这类的网站，除了首屏是服务器端渲染的，其他屏一般都是客户端做数据渲染绑定的）
不利于开发，（开发效率低）

前后端分离：
优点：
可以根据需求，任意修改页面中的某一部分内容（例如实时刷新），整体页面不刷新，性能好，体验好（所有表单验证，需要实时刷新的等需求都要基于AJAX实现）
有利于开发，提高开发效率
后台不需要考虑前端如何实现，前端也不需要考虑后台用什么技术，真正意义上实现了技术的划分
可以同时进行开发：项目开发开始，首先制定前后端数据交互的接口文档（文档中包含了，调取哪个接口或者哪些数据等协议规范），后台把接口先写好（目前很多公司也需要前端自己拿NODE来模拟这些接口），客户端按照接口调取即可，后台再去实现接口功能即可
缺点：
不利于SEO优化：第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于SEO收录

后期通过JS添加到页面中的内容，并不会写在页面的源代码中（是源代码不是页面结构）

交由客户端渲染，首先需要把页面呈现，然后在通过JS的异步AJAX请求获取数据，在进行数据绑定

浏览器再把动态增加的部分重新渲染，无形中浪费了一些时间，没有服务器端渲染页面呈现速度快

11. vue seo 以及 vue 性能优化

https://juejin.im/post/5f0f1a045188252e415f642c

（1）v-for 的优先级其实是比 v-if 高的

（2）v-for 尽量不使用 index 去作为 key，而是使用唯一值如 id

（3）及时释放资源，如 setInterval

（4）路由懒加载（使得 Vue 服务在第一次加载时的压力就能够相应的小一些）

// require法
component: resolve=>(require([‘@/components/HelloWorld‘], resolve))

// import
component: () => import(‘@/components/HelloWorld‘)

（5）webpack 处理打包的 javascript 文件，图片文件

（6）使用 Tree-Shaking 插件可以将一些无用的沉淀泥沙代码给清理掉

（7）使用CDN的方式引入一些依赖包，在正式环境下，通过CDN，确实有了一些明显的提升

12. seo 做了哪些优化

（1）控制首页链接数量（不宜过多，也不宜过少）

（2）扁平化的目录层次（尽量让“蜘蛛爬虫”只要跳转3次，就能到达网站内的任何一个内页）

（3）导航优化 <img> 标签必须添加 “alt” 和 “title” 属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字

<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。

而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了

（4）良好的网站的结构布局，头部、主体（正文、热门）、底部

（5）突出重要内容---合理的设计title、<meta description>和 <meta keywords>

（6）语义化书写 html 代码，符合 W3C 标准

h1-h6 是用于标题类的

<nav> 标签是用来设置页面主导航

列表形式的代码使用 ul 或 ol

重要的文字使用 strong 等

（7）h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面

如首页的 logo 上可以加 H1 标签。副标题用 <h2> 标签, 而其它地方不应该随便乱用 h 标题标签

（8）

（9）

13. 源码解读及收获

一步步解析jQuery源码

（1）闭包结构封装：

jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界，尽量的避开变量冲突

（2）为什么要传入window？

根据函数作用域链，若没有传入window，就会一层一层向上查找window，而window对象是最顶层的对象，查找速度就会非常慢，传入后，只需要查找参数即可。

（3）jQuery 无 new 构造？

因为封装在了里面，jQuery 里面进行了 new 实例化

（4）链式调用（对象的方法，返回值还是这个对象）

（）

14. typescript 的功能及优势

（1）学习路线

（2）发展：

TypeScript 是 2012 年由 Microsoft 推出的一门工具

（3）功能：

@types 智能提示
JSDoc 函数注释

/**
 * 方法：foo
 * @param {string} name
 */
function foo (name) {
    console.log(name)
    return name
}

JSDoc 里@param的这个标记，在{}中间代表的就是一个 TS 的 type 类型

```
/**
 * 方法：foo
 * @param {{firstname: string, nameLength: number}} name
 */
function foo (name) {
    console.log(name)
    return name
}
```
这时函数内的 name 就不是一个string了，而是一个自定义的object类型。当然，当我们访问 name 时，会得到 firstname 和 nameLength 两个属性

/**
 * ajax方法
 *
 * @example `ajax(‘url‘, options)`
 *
 * @typedef {Object} IAjaxOptions
 * @property {boolean} [jsonp] 是否jsonp
 * @property {boolean} [async] 是否async
 * @property {‘GET‘|‘POST‘} [methods] 请求方法
 * @property {(options: any)=>void} [success] 成功回调函数
 *
 * @param {string} url url
 * @param {IAjaxOptions} [options] 参数
 * @param { Promise }
 */
function ajaxNew (url, options) {}

其中 @typedef 的效果是声明一个 type 类型(或者理解为将一个类型起个别名)，比如这里就是object类型，名为IAjaxOptions。而@property的作用是声明上面类型里面包含的属性，用法和@param一致

（4）优势：

静态类型化，检测错误。查找并修复错误