Почему игнорируется строчка перезаписи поля объекта?

Question

[historydev]

Доброй ночи. Скажите пожалуйста почему я не могу перезаписать поле? Спасибо!

export default function getNavigationTablet(navItems) {

    navItems = navItems.slice(0, 4); // Работает

    navItems.push(
        {
            id: 5,
            title: 'ещё',
            children: []
        }
    ); // Работает

    navItems.find(item => item.id === 5).children = navItems.slice(5, navItems.length); // Не работает

    return navItems

}

Answer 1

[Aetae]

Всё работает:

var navItems = Array.from({length: 10}, (_, id) => ({
  id,
  title: 'ещё',
  children: []
}));
navItems.find(item => item.id === 5).children = navItems.slice(5, navItems.length);
console.log(navItems)

Возможно объекты у вас в получаемом navItems заморожены или просто свойство children имеет запрет на запись, проверьте:

var item = navItems.find(item => item.id === 5);
console.log(
  Object.isFrozen(item), 
  Object.getOwnPropertyDescriptor(item, 'children').writable, 
  Object.isFrozen(item.children)
)

Если заморожен только item или ограничена запись, но сам children не заморожен, то вместо замены children вы можете просто изменить его содержимое:

var children = navItems.find(item => item.id === 5).children;
children.splice(0, children.length, ...navItems.slice(5, navItems.length));

Если заморожено всё, то только грязные хаки с подменой Object.freeze. Но перед этим стоит подумать: если объекты заморожены, наверное для этого была какая-то причина?

Comments

[historydev]

Сейчас попробую, спасибо.

[historydev]

false,true,false

[historydev]

это тоже не сработало

children = navItems.find(item => item.id === 5).children;
children.splice(0, children.length, ...navItems.slice(5, navItems.length))

Возможно проблема в объекте?

import { sortItemsInOrder } from '../help_functions';

export let navigationItems = sortItemsInOrder([
    {
        id: 3,
        title: 'Пункт 3',
        children: [
            {
                id: 3.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 2,
        title: 'Пункт 2',
        children: [
            {
                id: 2.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 1,
        title: 'Пункт 1',
        children: [
            {
                id: 1.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 4,
        title: 'Пункт 1',
        children: [
            {
                id: 4.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 5,
        title: 'Пункт 1',
        children: [
            {
                id: 5.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 6,
        title: 'Пункт 1',
        children: [
            {
                id: 6.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 7,
        title: 'Пункт 1',
        children: [
            {
                id: 7.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 8,
        title: 'Пункт 1',
        children: [
            {
                id: 8.1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 9,
        title: 'Пункт 1',
        children: [
            {
                id: 9.1,
                title: 'Пункт 1'
            }
        ]
    }
]);

[historydev]

Вот залил, тут ошибка bind click

[historydev]

Весь прикол в том, что даже такая запись выдаёт пустой объект :/

navItems = navItems.slice(0, 4);

    navItems.push(
        {
            id: 5,
            title: 'ещё',
            children: navItems.slice(5, navItems.length)
        }
    );

[historydev]

У меня пустой этот момент:

navItems.slice(5, navItems.length) = []

Массив в консоли:

(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: 1, title: "Пункт 1", children: Array(1)}
1: {id: 2, title: "Пункт 2", children: Array(1)}
2: {id: 3, title: "Пункт 3", children: Array(1)}
3: {id: 4, title: "Пункт 1", children: Array(1)}
4:
id: 5
title: "ещё"
children: []

[historydev]

Я там опечатку допустил в индексах, элементов 5, а счёт идёт с 0 по индексу, вот, а теперь приложение зависает, вот этот код ломает всё:

function getNavigationTablet(navItems) {

    navItems = navItems.slice(0, 4);

    navItems.push(
        {
            id: 5,
            title: 'ещё',
            children: []
        }
    );

    navItems.find(item => item.id === 5).children = navItems.slice(4, navItems.length);

    return navItems

}

[historydev]

Ого, тут какой-то треш, он бесконечно создаёт новый объект с собой в children.

Тык

[Aetae]

Код делает именно то, что вы написали, всё правильно.
Чего именно вы хотите?

[historydev]

Aetae, допустим пунктов 15, мне нужно вывести 4 пукта, 5-ым вывести "ещё", а в его последователей превратить урезанные пункты.

[Aetae]

Вот тут navItems = navItems.slice(0, 4); вы во внутренний navItems кладёте первые 4. Всё, никаких 15 дальше внутри функции уже нет.
Соответственно в navItems.slice(4, navItems.length); попадает только то что вы сами выше добавили:

navItems.push(
        {
            id: 5,
            title: 'ещё',
            children: []
        }
    );

Не экономьте переменные.

function getNavigationTablet(navItems) {
  const navItemsNew = navItems.slice(0, 4);

  navItemsNew.push({
    id: 5,
    title: 'ещё',
    children: navItems.slice(4, navItems.length)
  });

  return navItemsNew
}

[historydev]

Aetae, да, согласен, решил сэкономить, а сделал проблему, сейчас попробую поправить, спасибо