前端 JavaScript 进阶面试题, JavaScript 如何实现对象的深浅拷贝?

QA

Step 1

Q:: JavaScript 如何实现对象的浅拷贝？

A:: JavaScript 实现对象的浅拷贝有多种方式，常见的有以下几种： 1. 使用 Object.assign()：

 
const obj = {a: 1, b: {c: 2}};
const shallowCopy = Object.assign({}, obj);

2. 使用扩展运算符（spread operator）：

 
const shallowCopy = {...obj};

3. 使用浅拷贝函数：

 
function shallowCopy(obj) {
  let copy = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = obj[key];
    }
  }
  return copy;
}

Step 2

Q:: JavaScript 如何实现对象的深拷贝？

A:: JavaScript 实现对象的深拷贝可以使用以下几种方式： 1. 使用 JSON 序列化与反序列化（适用于简单对象）：

 
const obj = {a: 1, b: {c: 2}};
const deepCopy = JSON.parse(JSON.stringify(obj));

2. 递归实现深拷贝：

 
function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  let copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

3. 使用第三方库（如 lodash）：

 
const _ = require('lodash');
const deepCopy = _.cloneDeep(obj);

用途

面试这个内容是为了评估候选人对 JavaScript 的深层次理解，以及在处理复杂对象时的能力。对象的深浅拷贝在实际生产环境中非常常见，比如在处理状态管理（如 Redux）时，需要避免直接修改状态对象，而是创建其副本以确保数据不可变性。此外，深浅拷贝在数据传递和保存时也非常重要，避免意外修改对象的引用。\n

相关问题

🦆

JavaScript 中的原型链是什么?如何工作?▷

原型链是 JavaScript 实现继承的一种机制。每个对象都有一个私有属性（称之为[[Prototype]]），指向它的原型对象。这个原型对象又有自己的原型，层层向上，直到一个对象的原型为 null。查找对象属性时，如果在对象自身没有找到，会沿着原型链向上查找，直到找到或到达原型链的顶端（null）。

 
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
};
const john = new Person('John');
console.log(john.getName()); // 'John'

🦆

JavaScript 中的闭包是什么?有何用途?▷

闭包是指函数能够记住并访问它的词法作用域，即使函数在其词法作用域之外执行。闭包在 JavaScript 中非常有用，常用于数据隐藏和模块化代码。

 
function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}
const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

🦆

JavaScript 中的异步编程是如何实现的?▷

JavaScript 中的异步编程主要通过以下方式实现： 1. 回调函数：

 
setTimeout(() => {
  console.log('Hello, world!');
}, 1000);

2. Promise：

 
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});
promise.then(value => {
  console.log(value); // 'Success'
});

3. async/await：

 
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

JavaScript 如何获得对象非原型链上的属性 asyncawait 对比 Promise 的优势是什么