Обсуждение и ответ

Прежде чем перейти к ответу, давайте сначала рассмотрим следующий сценарий:

Таким образом, объект (под объектом я подразумеваю непримитивные типы данных в JavaScript) в JavaScript по умолчанию копируется по ссылке, а не по значению. Изменение значения вновь назначенной переменной также меняет значение исходного объекта, то есть спорт.

Теперь вернемся к нашему вопросу выше,

Когда мы используем оператор расширения, он копирует исходное содержимое объекта. Но основная идея здесь заключается в том, чтобы понять, каким образом копируется содержимое, т. е. поверхностное копирование, глубокое копирование… или частичное?

Чтобы понять это, давайте перенесем (Что такое Transpile?) наш код оператора спреда ES6 в ES5. Вы можете сделать это, посетив https://es6console.com/ и выбрав пресеты для ES2015 с этапами 0/1/2 (см. здесь, чтобы понять этапы).

Из приведенного выше транспилированного кода мы можем увидеть альтернативную реализацию Spread Operator. Попробуем понять это.

Строка 3, var _extends = Object.assign || функция (цель) {

Здесь мы проверяем, поддерживает ли наш браузер или движок Object.assign или нет. Давайте предположим, что это не так, и проанализируем функцию вперед.

Строка 22, var cloneSports = _extends({}, sports);

_extends берет здесь целевой объект, то есть пустой объект, в который мы будем копировать содержимое наших исходных объектов. Остальные аргументы после него действуют как источник, из которого мы собираемся скопировать содержимое, то есть исходный объект (ы).

Из строк 4 и 5 видно, что мы перебираем все исходные объекты. Наконец, в строке 6 мы выбираем каждый ключ из исходного объекта и копируем его в целевой объект. Самая важная часть здесь,

Строка 8, цель[ключ] = источник[ключ];

Как видите, мы копируем значение из source[key] в target[key]. Теперь, вспоминая нашу первую суть, мы понимаем, что когда мы копируем объекты, мы обращаемся к одному и тому же адресу памяти. Таким образом, когда мы копировали sportsс помощью оператора Spread, он копировал примитивные типы данных по значению, тогда как Объекты копируются как Ссылка.

Вывод

Таким образом, из приведенной выше задачи JavaScript #1 мы поняли, что оператор расширения ES6 выполняет частичное глубокое копирование, при этом глубоко копируется только первый уровень. . Принимая во внимание, что дальнейшие уровни неглубоко скопированы. Таким образом, изменение значения элементов Shallow Copied также изменяет исходный объект.

Поэтому ответ — второй вариант.

Спасибо

Для прилипания до сих пор. Если вам понравился мой контент, вы можете следить за мной в LinkedIn и YouTube, где вы можете найти последние обновления о программной инженерии и методах, а также другие новые задачи!