2024 前端面试题 附录2

这里记录的是今天原篇的知识点补充

原篇地址：2024 前端面试题（GPT回答 + 示例代码 + 解释）No.21 - No.40

---

---

27补. JavaScript中如何检测一个变量是什么类型？

通过 Object.prototype.toString.call() 方法，可以得到以下类型的变量信息：

1. 对象类型：返回 "[object Object]"。这包括自定义的对象、数组、函数等。
2. 数组类型：返回 "[object Array]"。
3. 字符串类型：返回 "[object String]"。
4. 数字类型：返回 "[object Number]"。
5. 布尔类型：返回 "[object Boolean]"。
6. 函数类型：返回 "[object Function]"。
7. 正则表达式类型：返回 "[object RegExp]"。
8. 日期类型：返回 "[object Date]"。
9. 错误类型：返回 "[object Error]"。
10. Map 类型：返回 "[object Map]"。
11. Set 类型：返回 "[object Set]"。
12. Symbol 类型：返回 "[object Symbol]"。
13. Promise 类型：返回 "[object Promise]"。
14. ArrayBuffer 类型：返回 "[object ArrayBuffer]"。
15. DataView 类型：返回 "[object DataView]"。
16. Int8Array 类型：返回 "[object Int8Array]"。
17. Uint8Array 类型：返回 "[object Uint8Array]"。
18. Uint8ClampedArray 类型：返回 "[object Uint8ClampedArray]"。
19. Int16Array 类型：返回 "[object Int16Array]"。
20. Uint16Array 类型：返回 "[object Uint16Array]"。
21. Int32Array 类型：返回 "[object Int32Array]"。
22. Uint32Array 类型：返回 "[object Uint32Array]"。
23. Float32Array 类型：返回 "[object Float32Array]"。
24. Float64Array 类型：返回 "[object Float64Array]"。

这些字符串表示了各种不同类型的变量。通过使用 Object.prototype.toString.call(variable)，我们可以根据返回的结果来确定变量的类型。

typeof 是 JavaScript 内置的一个操作符，用于检测给定变量的数据类型。它返回一个字符串，表示变量的数据类型。

typeof 操作符可以返回以下几种数据类型：

1. "undefined"：如果变量未定义或未声明时返回该类型。
2. "boolean"：如果变量是布尔值( true 或 false)，返回该类型。
3. "number"：如果变量是数字(包括整数、浮点数、负数、正数等)，返回该类型。
4. "string"：如果变量是字符串，返回该类型。
5. "object"：如果变量是一个对象 (不包括 null) 或数组，返回该类型。
6. "function"：如果变量是一个函数，返回该类型。

需要注意的是，typeof 返回的类型都是字符串类型，而非实际的数据类型。在使用 typeof 进行类型检测时，应该将返回值作为字符串进行比较。

例如：

let x;

console.log(typeof x); // 输出 "undefined"

x = true;

console.log(typeof x); // 输出 "boolean"

x = 42;

console.log(typeof x); // 输出 "number"

x = "Hello, world!";

console.log(typeof x); // 输出 "string"

x = {};

console.log(typeof x); // 输出 "object"

x = [];

console.log(typeof x); // 输出 "object"

x = function() {};

console.log(typeof x); // 输出 "function"

上述示例展示了 typeof 操作符返回的各种数据类型。需要注意的是，在某些情况下，typeof 操作符返回的类型可能与实际数据类型不太相符。例如，typeof null 返回 “object”，而不是 “null”。

---

37补. 浅拷贝 与 深拷贝 手写实现

浅拷贝

function shallowCopy(obj) {
  var target = {};

  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      target[prop] = obj[prop];
    }
  }

  return target;
}

var source = { name: "Alice", age: 25 };
var target = shallowCopy(source);

console.log(target); // 输出 { name: "Alice", age: 25 }

深拷贝

function deepCopy(obj) {
  // 处理 null 和 undefined
  if (obj === null || typeof obj !== "object") {
    return obj;
  }

  // 处理日期对象
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  // 处理正则表达式对象
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }

  // 处理数组对象
  if (Array.isArray(obj)) {
    var newArr = [];

    for (var i = 0; i < obj.length; i++) {
      newArr.push(deepCopy(obj[i]));
    }

    return newArr;
  }

  // 处理其他对象
  var newObj = {};

  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      newObj[prop] = deepCopy(obj[prop]);
    }
  }

  return newObj;
}

var source = { name: "Alice", age: 25, hobbies: ["reading", "swimming"] };
var target = deepCopy(source);

console.log(target); // 输出 { name: "Alice", age: 25, hobbies: ["reading", "swimming"] }

target.hobbies.push("running");
console.log(source.hobbies); // 输出 ["reading", "swimming"]
console.log(target.hobbies); // 输出 ["reading", "swimming", "running"]

---