LabEx
ВходРегистрация

Глубокое клонирование объекта

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы научимся создавать глубокую копию объекта на JavaScript. Мы будем использовать рекурсию для клонирования примитивов, массивов и объектов, исключая экземпляры классов. В конце практического занятия вы сможете создать полную копию объекта без изменения исходного.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 92%. Он получил 100% положительных отзывов от учащихся.

Инструкции по глубокому клонированию объекта

Для глубокого клонирования объекта следуйте шагам:

  1. Создайте новую терминал/экземпляр SSH и введите node, чтобы начать практиковаться в написании кода.
  2. Используйте рекурсию для клонирования примитивов, массивов и объектов, исключая экземпляры классов.
  3. Проверьте, является ли переданный объект null, и если да, верните null.
  4. Используйте Object.assign() и пустой объект ({}), чтобы создать поверхностную копию исходного объекта.
  5. Используйте Object.keys() и Array.prototype.forEach(), чтобы определить, какие пары ключ-значение нужно глубоко скопировать.
  6. Если объект является Array, задайте length клона равным длине исходного и используйте Array.from(), чтобы создать клон.
  7. Используйте следующий код для реализации глубокого клонирования:
const deepClone = (obj) => {
  if (obj === null) return null;
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    (key) =>
      (clone[key] =
        typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key])
  );
  if (Array.isArray(obj)) {
    clone.length = obj.length;
    return Array.from(clone);
  }
  return clone;
};

Используйте следующий код для тестирования вашей функции глубокого клонирования:

const a = { foo: "bar", obj: { a: 1, b: 2 } };
const b = deepClone(a); // a!== b, a.obj!== b.obj

Резюме

Поздравляем! Вы завершили практическое занятие по глубокому клонированию объекта. Вы можете практиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.