Почему splice и / или findIndex не позволяют изменить первый элемент массива / индекса 0? - PullRequest
Новая
       46

Почему splice и / или findIndex не позволяют изменить первый элемент массива / индекса 0?

1 голос
/ 01 марта 2020

Моя цель здесь - создать функцию, которая будет принимать текстовое значение, l oop через массив объектов и удалять соответствующий элемент. Однако я обнаружил, что этот код не удаляет элемент, если это первый экземпляр (индекс 0), а в экземпляре, который он выполняет, удаляет только первое совпадающее значение, а не другие. 

const cats = [{
    name: `catOne`,
    color: `orange`
}, {
    name: `catTwo`,
    color: `Grey-white`
}, {
    name: `catThree`,
    color: `Grey-white`
}] 

const deleteColor = function (arrayOfObjects, clr){

    const index = arrayOfObjects.findIndex(function(e, i){

              if (e.color.toLowerCase() === clr.toLowerCase()){   
                return i;   
              } 
          })
          if (index >= -1 ){ 
          arrayOfObjects.splice(index,1)  
          }
  }

deleteColor(cats,'grey-white')

cats.forEach(function(e, i) {
   console.log(e, i) })

Вывод: 

{ name: 'catOne', color: 'orange' } 0
{ name: 'catThree', color: 'Grey-white' } 1

Но если я изменю ввод текста на «оранжевый», вывод будет: 

{ name: 'catOne', color: 'orange' } 0
{ name: 'catTwo', color: 'Grey-white' } 1
{ name: 'catThree', color: 'Grey-white' } 2

Если я изменю if (index >= -1 ), вывод будет таким же, как ввод 'grey-white' в качестве текстового значения.

Может кто-нибудь объяснить, почему первый элемент не удаляется, даже если это индекс 0? и почему индекс -1 приводит к удалению индекса 1?

Я попытался найти это, но не смог найти то, что искал. Я только начал изучать ваниль JS. Спасибо за вашу помощь.

1 Ответ

1 голос
/ 01 марта 2020

Способ работы метода .findIndex() заключается в возврате первого индекса, для которого функция обратного вызова возвращает значение истинное . Другими словами, ваша функция должна возвращать true или false всякий раз, когда она вызывается, а не индекс, в котором она появляется. Когда true возвращается из вашей функции, .findIndex() приведет к индексу элемента, для которого вы вернули true. В вашем случае ваша функция обратного вызова неявно возвращает undefined (то есть значение fast ) или индекс, по которому появляется объект. В случае "orange" этот объект появляется с индексом 0, поэтому вы возвращаете 0. Ноль считается ложным значением, поэтому findIndex продолжит поиск. Если он не найдет никаких значений, он вернет -1 (что происходит при вводе «оранжевого», поэтому .splice(-1, 1) удалит последний элемент в массиве). 

const cats = [{
  name: `catOne`,
  color: `orange`
}, {
  name: `catTwo`,
  color: `Grey-white`
}, {
  name: `catThree`,
  color: `Grey-white`
}]

const deleteColor = function(arrayOfObjects, clr) {
  const index = arrayOfObjects.findIndex(function(e, i) {
    return e.color.toLowerCase() === clr.toLowerCase(); 
  });
  
  if (index > -1) { // check object was found (Using > not >=)
    arrayOfObjects.splice(index, 1);
  }
}

deleteColor(cats, 'orange')

console.log(cats);

Если вы хотите удалить всех кошек данного цвета, вы можете использовать .filter(). Каждый вызов функции обратного вызова, которая возвращает true, будет сохранять объект, каждый вызов, который возвращает false, будет удалять объект: 

const cats = [{ name: `catOne`, color: `orange` }, { name: `catTwo`, color: `Grey-white` }, { name: `catThree`, color: `Grey-white` }];

const deleteColor = function(arrayOfObjects, clr) {
  return arrayOfObjects.filter(e => e.color.toLowerCase() !== clr.toLowerCase());
}

console.log(deleteColor(cats, 'grey-white'));
...