Изменение части свойства объекта массива в javascript

ProgramBox

Изменение части свойства объекта массива в javascript

Post author:admin
Запись опубликована:14 мая, 2023
Post category:Вопросы по программированию

#javascript #arrays #typescript

#javascript #массивы #typescript

Вопрос:

У меня есть массив объектов, похожих на:

 [
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "e",
  },
  {
    number: 3,
    name: "EE",
  }
]

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

т.е. если я вставлю в местоположение 1 с именем: «F», массив станет:

 [
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "F"
  },
  {
    number: 3,
    name: "e",
  },
  {
    number: 4,
    name: "EE",
  }
]

Я знаю несколько способов, которыми это можно сделать, но ни один из них не выглядит красиво.
Публикую некоторые из своих мыслей здесь:

Для вставки я сделал this.arr.splice(1, 0, newObj) , затем попытался выполнить цикл через это.arr, для любого индекса, большего 2, я сделал number, это работает, но некрасиво.
Чтобы вставить, я сделал this.arr.splice(1, 0, newObj) , затем разделил this.arr на let newArr = this.arr.split(2) , затем newArr.map(a => {...}) используйте splice, чтобы заменить часть исходного arr на newArr.

Новое редактирование: Поделитесь здесь частью моего кода, это работает, но я бы хотел упростить его или сделать красивее, если это возможно. Пожалуйста, поделитесь мыслями.

 const newObj = {
  number: obj.number   1,
  name: 'S',
}
this.arr.splice(obj.number, 0, newObj)
if (this.arr.length > obj.number) {
  const remaining = this.arr.slice(obj.number   1).map( (t) => ({...t, ...{number: t.number   1}}))
  this.arr.splice(newObj.number, remaining.length, ...remaining)
}

1. Какие шаги вы предприняли для достижения различных изменений, которые вы ищете? Что сработало, а что нет? Вы пытались выполнить поиск «вставить объект в массив в определенной позиции» перед публикацией здесь?

2. Равны ли числа индексам элементов, или они вычисляются с помощью какого-то алгоритма?

3. @CharlieSchliesser Я отредактировал исходное сообщение, случайно опубликовал его, не закончив редактирование. Итак, ответ таков: я не просто пытаюсь вставить в определенную позицию, я хочу иметь возможность увеличить количество остальных объектов. Я могу это сделать, но мой код выглядит уродливо. Хотел посмотреть, есть ли какое-либо лучшее решение

4. @Cerberus Я обновил исходное сообщение.

5. Я работаю с аудитом, поэтому я полностью понимаю.

Ответ №1:

Для достижения ожидаемого результата используйте splice(index, deleteCount, item) и используйте index в map для присвоения номера каждому объекту, чтобы получить номера в последовательности после вас и удалить

 let arr = [
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "e",
  },
  {
    number: 3,
    name: "EE",
  }
]

let newObj = {
name: "F",
  }
arr.splice(1,0, newObj)//To add
  //  console.log(arr)

//arr.splice(2,1) //To delete
//console.log(arr);

console.log(arr.map((v,i) => {
  v.number = i;
  return v
}));

Справочная ссылка для массива.splice — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

1. Привет, извините, что мой оригинальный пост был случайно отправлен до завершения редактирования. Но я не просто пытаюсь удалить или вставить в определенную позицию. Пожалуйста, посмотрите на сообщение, я обновил.

2. @user1491987, ты пытаешься выполнить сортировку по имени?

3. Вообще не пытаюсь выполнить сортировку. Я пытаюсь вставить в позицию, затем убедиться, что число находится в последовательном порядке

4. @user1491987, обновил мой ответ, используйте индекс карты и присваивайте номеру, чтобы он автоматически присваивался по порядку

5. Какой же я глупый! Спасибо, это работает. Почему-то я забыл о том, что map также может принимать index.

Ответ №2:

Вы можете использовать ... синтаксис spread и slice.

operation используется для решения, следует ли удалять или добавлять значение.
если operation есть del , то мы разрезаем первое от 0 до индекса, а затем от index 1 до конца массива.
в противном случае мы срезаем from 0 upto index и добавляем желаемое значение, а затем добавляем оставшуюся часть обратно ( from index to end )
Наконец, сопоставьте значения, чтобы соответствующим образом настроить number свойство

 let arr = [{ number: 1,name: "A"},{number: 2,name: "e",  }, {number: 3,name: "EE",}]

let handleArray = (array,operation,index,value) => {
  if(operation === 'del') {
    return [...array.slice(0, index), ...array.slice(index 1,)].map((value,index)=> (value.number = index 1, value))
  } else {
    return [...array.slice(0,index),value,...array.slice(index,)].map((value,index)=> (value.number = index 1,value))
  }
}

console.log(handleArray(arr,'add',0,{a:1}))
console.log(handleArray(arr,'del',0))