前端面试题

m0_38022543

已于 2022-10-25 10:03:47 修改

阅读量243

点赞数 1

文章标签：哈希算法散列表算法

于 2022-10-21 15:38:31 首次发布

本文链接：https://blog.csdn.net/m0_38022543/article/details/125989695

版权

1、hash和history的区别
https://www.jianshu.com/p/ab085ae33ee5

最明显的区别是hash带有一个#号
hash的特点
- hash变化会触发网页跳转，即浏览器的前进和后退。
- hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面。也就是说，所有页面的跳转都是在客户端进行操作。因此，这并不算是一次 http 请求，所以这种模式不利于 SEO 优化。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url 。
- hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。
- hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）。
再一个是hash不需要向服务端发送请求，history访问一个页面会发送一个get请求，服务端需要配置返回需要的index.html，如果没有返回就会出现404

2、深拷贝和浅拷贝

浅拷贝与深拷贝 - 掘金

1、区别

浅拷贝针对引用数据类型指向某个对象的指针，而不是复制对象本身，新旧对象共享的是同一块内存

深拷贝是重新开辟一块内存空间，新旧对象互不干扰

2、赋值和深浅拷贝区别

赋值：赋的是对象在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，两个对象互相联动，一个改另一个也会被修改
浅拷贝：重新再堆中创建内存，拷贝前后基本数据类型互不影响，但引用数据类型还是共享同一个内存，会互相干扰
深拷贝：从堆内存中开辟一个新的区域存放新对象，对象中的数据是递归拷贝的，两个对象互不影响

3、实现浅拷贝的方式

Object.assign()

函数库lodash的_.clone方法

展开运算符...

Array.prototype.concat()

Array.prototype.slice()

4、实现深拷贝的方式

JSON.parse(JSON.stringify())

函数库lodash的_.cloneDeep方法

jQuery.extend()方法

手写递归方法

5、手动实现一个深拷贝

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 是对象的话就要进行深拷贝
  if (hash.get(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}
let obj = { name: 1, address: { x: 100 } };
obj.o = obj; // 对象存在循环引用的情况
let d = deepClone(obj);
obj.address.x = 200;
console.log(d);

作者：浪里行舟
链接：https://juejin.cn/post/6844904197595332622
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3、事件循环

事件循环详解

4、new操作符做了什么

1、首先创建一个新对象

2、设置原型，讲对象的原型设置为函数的prototype对象

3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）

4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象

5、什么是闭包，闭包的作用是什么

当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。

闭包作用：局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

引申问题：

1、

6、 Promise是什么?

Promise 是异步编程的一种解决方案：

从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态) ；
状态一旦改变，就不会再变。
创造promise实例后，它会立即执行。

7、 Set 和 Map有什么区别？

1、Map是键值对，Set是值得集合，当然键和值可以是任何得值

2、Map可以通过get方法获取值，而set不能因为它只有值

3、都能通过迭代器进行for...of 遍历

4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储

8、map和foreach有什么区别

forEach是针对每一个元素执行提供的函数，该方法没有返回值，是否会改变原数组取决于数组元素的类型是基本数据类型还是引用数据类型

map方法不会改变原数组，返回一个新数组，新数组的值是原数组调用函数处理之后的值

9、 localStorage sessionStorage cookies 有什么区别?

10、typeof instanceof 等相关

问题汇总

1、typeof能正确区分原始值吗

2、typeof的返回值有哪些

3、typeof function 会显示什么

4、typeof为什么对null错误的显示

5、typeof('abc')和 typeof 'abc'都是 string, 那么 typeof 是操作符还是函数

1、typeof

优点：能够快速区分基本数据类型缺点：不能将Object、Array和Null区分，都返回object

typeof的作用？

区分数据类型，可以返回7种数据类型：number、string、boolean、undefined、object、function ，以及 ES6 新增的 symbol
typeof 能正确区分数据类型吗？

不能。对于原始类型，除 null 都可以正确判断；对于引用类型，除 function 外，都会返回 "object"
typeof 注意事项
- typeof 返回值为 string 格式，注意类似这种考题: typeof(typeof(undefined)) -> "string"
- typeof 未定义的变量不会报错，返回 "undefiend"
- typeof(null) -> "object": 遗留已久的 bug
- typeof无法区别数组与普通对象: typeof([]) -> "object"
- typeof(NaN) -> "number"

2、instanceof

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象缺点：Number，Boolean，String基本数据类型不能判断

instanceof 判断对象的原型链上是否存在构造函数的原型。只能判断引用类型。
instanceof 常用来判断 A 是否为 B 的实例

3、Object.prototype.toString.call()

优点：精准判断数据类型缺点：写法繁琐不容易记，推荐进行封装后使用

toString.call(()=>{})       // [object Function]
toString.call({})           // [object Object]
toString.call([])           // [object Array]
toString.call('')           // [object String]
toString.call(22)           // [object Number]
toString.call(undefined)    // [object undefined]
toString.call(null)         // [object null]
toString.call(new Date)     // [object Date]
toString.call(Math)         // [object Math]
toString.call(window)       // [object Window]

4、typeof null为什么出错

这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object

5、typeof('abc')和 typeof 'abc'都是 string, 那么 typeof 是操作符还是函数

typeof('abc')和 typeof 'abc'都是 string, 那么 typeof 是操作符还是函数？(2020.01.12)

分析：typeof 在以前学习时，老师就讲过 typeof 是操作符，但是问题在于它还能使用函数调用的方式进行使用，那到底是不是函数那？如果不是，为什么？

解答：
1. typeof 的返回值之一为'function'，如果 typeof 为 function，那么 typeof(typeof) 会返回'function'，但是经测试，上述代码浏览器会抛出错误。因此可以证明 typeof 并非函数。
2. 既然 typeof 不是函数，那 typeof 后面的括号的作用是？
  
  括号的作用是进行分组而非函数的调用。—— 《javascript 高级程序设计》
```
// 举个例子
typeof (((func))); // is equal to typeof func
```

11、== 的隐式转换规则

undefined、null 自身相等且互相相等

12、数据类型

基本数据类型有哪几种
null是对象吗
基本数据类型和复杂数据类型存储有什么区别

基本数据类型有6中。为Undefined、Null、String、Number、Boolean、Sysbol（ES6新增）。另外ES10新增一个BigInt数据类型
null不是对象，属于基本数据类型，虽然typeof返回的是object，那是因为最初的设计遗留的bug，null用二进制表示都是0，而typeof判断对象的方法就是前三位是否为0，所以，typeof null返回的是object
基本数据类型存储在栈内存中，存储的是值，而复杂数据类型存储在堆内存中，地址存在栈内存中，当我们复制对象时，复制的是地址，指向的是同一个内存空间，也就是两个对象会一起变化