JZTXT

面试题第一录

发布时间 2023-03-26 00:04:33作者: 公主殿下大人

1.为什么学习前端？

我其实大学学的专业是网络工程，然后自己的专业也不太适合女生，在学校的时候，经常听老师说起前端，然后就很好奇，后来偶然间接触到了前端，发现所有的页面都是前端来写的，就很感性，而且前端不仅仅可以写页面，还有很多有趣的东西，而且感觉也很适合自己，再加上姐姐也是学后端的，学得很溜，所以我也想学一门适合自己的技术，然后就来学习了前端，也希望在未来十年自己的工作也是前端，虽然说前端这几年不太好找工作，但是，我觉得很喜欢某一样东西，就可以去深入接触。

2.怎么学习前端？

我觉得首先得有学习前端的思维，知道什么是前端，我们可以用前端做些什么，然后最基础学习前端三件套，熟练记得常用标签和css样式，懂js的原理和用法，特别是要多敲代码，将常用标签和css样式多练几遍，记住它们的原理，而不是死记硬背，然后用三件套实现页面和基本的功能后，再去学习框架和小程序，比较好。像我自己，刚开始学习前端的时候，真的很痛苦，因为没有编程的思想，特别是在学习js的时候，也是自己将代码敲了很多很多遍，只要有时间就是在敲代码，所以前端虽说很多人说简单，但其实要真正学好学精，不是一件很容易的事。

3.js的数据类型

基本数据类型：Btring(字符串)、Bumber(数字)、Boolean(布尔)、null、undefined

引用数据类型(对象类型)：Array(数组)、Function(函数)、Object(对象)、还有两个特殊的对象：RegExp(正则)、Date(日期)

ES6新增的Symbol

4.写一个判断数据类型的函数

function getType(data) {
   let originType = Object.prototype.toString.call(data); // 获取内部属性值
   let index = originType.indexOf(' '); // 以空格分割 空格的位置在哪儿 并返回下标
   let type = originType.slice(index + 1, -1); // 截取
   return type.toLowerCase();
}
console.info(getType("小猪课堂")); // string
console.info(getType(123)); // number
console.info(getType(true)); // boolean
console.info(getType(null)); // null
console.info(getType(undefined)); // undefined
console.info(getType({
    name: "小猪课堂"
})); // object
console.info(getType([1, 3, 2])); // array
console.info(getType(Promise.resolve())); // promise
console.info(getType(new Set())); // set
console.info(getType(new WeakMap())); // weakmap
console.info(getType(new Date())); // date
console.info(getType(() => {})); // function
console.info(getType(new Map)); // map
console.info(getType(BigInt(100))); // bigint
console.info(getType(new RegExp(''))); // regexp
console.info(getType((Symbol()))); // symbol

5.手写深浅拷贝

深拷贝：

方法一：递归的方式实现

let o1 = {
        a: 1,
        b: 2,
        c: 3,
        e: [1, 2, 3],
        d: {
            d1: 'aaa',
            d2: 'bbb',
        },
};
function deepClone(target, option) {
    for (let key in option) {
        console.log(option[key].constructor);
        if (option[key].constructor === Object) {
            target[key] = {};
            deepClone(target[key], option[key]);
        } else if (option[key].constructor === Array) {
            target[key] = [];
            deepClone(target[key], option[key]);
        } else {
            target[key] = option[key];
        }
    }
}
let o2 = {};
deepClone(o2, o1);
console.log(o2);
console.log(o1);
View Code 
let o1 = {
        a: 1,
        b: 2,
        c: 3,
        e: [1, 2, 3],
        d: {
            d1: 'aaa',
            d2: 'bbb',
        },
    };
function deepClone(target, origin) {
    for (let key in origin) {    //遍历原始对象
        console.log(origin[key].constructor);
        if (origin[key].constructor === Object) {  //如果原始对象的属性值的构造函数是对象 那么就将新的对象的属性值也赋值为对象 然后再次调用deepClone
            target[key] = {};
            deepClone(target[key], option[key]);
        } else if (origin[key].constructor === Array) {  //如果原始对象的属性值的构造函数是数组，那么就将新的对象的属性值赋值为数组，然后再次调用deepClone
            target[key] = [];
            deepClone(target[key], origin[key]);
        } else {　　　　　　　　　　　　　　//其他情况，一律直接将原始对象的属性值赋值给新的对象
            target[key] = origin[key];
        }
    }
}
let o2 = {};
deepClone(o2, o1);
console.log(o2);
console.log(o1);

 

方法二：JSON.parse(JSON.stringify(obj)）

这是最常用的一种深拷贝的方式，一般大部分深拷贝都可以用JSON的方式解决，本质上JSON对自己构建新的内存来存放新对象。

注意：

（1）会忽略undefined和symbol；

（2）不可以对Function进行拷贝，因为JSON格式字符串不支持Function；

（3）诸如Map、Set、RegExp、Date、ArrayBuffer和其它内置类型在进行序列化时会丢失；

（4）不支持循环引用对象的拷贝

方法三：lodash的_.cloneDeep()

这是最最完美的深拷贝的方式，他已经将出现问题的各种情况都考虑在内了，所以日常开发中，建议使用这种成熟的解决方案。

var _ = require('lodash')  //lodash库 需要进行下载  官网Lodash 简介 | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)
var obj1 = {
   a:1,
   b: {f:{g:1}},
   c:[1,2,3]        
}
var obj2 = _.cloneDeep(obj1)
console.log(obj1.b.f===obj2)

浅拷贝：

 1.Object assign(新对象，原始对象)

又两个参数，第一个参数是新的对象，第二个参数是原始对象。

2.for..in遍历

var obj = [1,2,3,[4,5,6],{a:1}]

var obj1 = {}

for(var key in obj){

 obj1[key] = obj[key]

}

3.展开运算符

obj1={...obj}