Заменить элемент в массиве, если он совпадает с элементом из другого массива

Question

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

В одном случае я сделал это, но с использованием for...of что-то пошло не так - я не понимаю, почему.

//source array
let arr = ['one', 'two', 'three', 'four', 'five', 'six'];

//array to compare
let arrForChange = ['one', 'four', 'six'];

изменить одноэлемент из исходного массива прост

let changedArr = arr.map(el => { if( el === 'four'){ 
  return el = 4;
  } else { 
  return el = el}  }         
);
// console.log(changedArr); // one,two,three,4,five,six

Замена в списке немного интереснее. Здесь я использую .includes()

//This variant work 
let cahngedArrFromList = arr.map(el => {
  if(arrForChange.includes(el)){
    return 'A';
  } else {
    return el;
  }  
});
// console.log(cahngedArrFromList); // A,two,three,A,five,A

Более интересно искать разные варианты. Здесь я использую for...of и что-то идет не так, результат не тот, который я ожидал - заменяется только первое значение.

//This variant do not work  =(
let cahngedArrFromListTwo = arr.map(el => { 
  for (const item of arrForChange){
    if (item === el){
      return 'A';
    } else {
      return el;
    }
  }
});
// console.log(cahngedArrFromListTwo); // A,two,three,four,five,six

Если вы удалите условие else, тогда, похоже, все работает. .. но нет

let cahngedArrFromListThree = arr.map(el => { 
  for (const item of arrForChange){
    if (item === el){
      return 'A';
    } /* else {
      return el;
    } */
  }
});
// console.log(cahngedArrFromListTree); // A,,,A,,A

Можете ли вы объяснить мне, что с for...of поведение? Или я его неправильно использую?

Answer 1

Самый простой способ сделать это - объединить поиск индекса с картой замены.

Если текущий элемент в массиве находится в списке фильтров, найдите его значение в качестве ключа в замене. карта и вернуть его значение. Если ключ не существует на карте, вернуть исходное значение.

const replacements = {
  'one'   : 1,
  'two'   : 2,
  'three' : 3,
  'four'  : 4,
  'five'  : 5,
  'six'   : 6
};

let filter = [ 'one', 'four', 'six' ],
    input  = [ 'one', 'two', 'three', 'four', 'five', 'six' ];

console.log(replaceArrayItem(input, filter, replacements));

function replaceArrayItem(arr, filterArr, replMap) {
  return arr.map(item => filterArr.indexOf(item) > -1 ? replMap[item] || item : item);
}

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

Я думаю, это потому, что когда вы делаете первую проверку, вы сравниваете

"one" === "one" // will return 'A'

Вы больше не проверяете «одну», как вы вернулись.

Тогда "one" === "two" // will return el

Поскольку вы возвращаетесь в этот момент снова, вы никогда не проверяете, если "four" === "two" и т. Д.

Это то же самое для каждой проверки после. Поскольку вы возвращаетесь после первой проверки, вы никогда не найдете других совпадений. Удаляя 2-е возвращение, вы продолжаете поиск по всему массиву, чтобы найти совпадения.

Если вы работаете без 2-го возврата

let changedArrFromListThree = arr.map(el => {
  for (const item of arrForChange) {
    console.log("doesMatch? " + item + " " + el);
    if (item === el) {
      console.log("MATCH");
      return "A";
    } else {
      // return el;
    }
  }
});

Выходное значение равно

doesMatch? one one 
MATCH
doesMatch? one two
doesMatch? four two
doesMatch? six two
doesMatch? one three
doesMatch? four three
doesMatch? six three
doesMatch? one four
doesMatch? four four
MATCH
doesMatch? one five
doesMatch? four five
doesMatch? six five
doesMatch? one six
doesMatch? four six
doesMatch? six six
MATCH
[ 'A', undefined, undefined, 'A', undefined, 'A' ]

Когда вы работаете со вторым возвратом

let changedArrFromListThree = arr.map(el => {
  for (const item of arrForChange) {
    console.log("doesMatch? " + item + " " + el);
    if (item === el) {
      console.log("MATCH");
      return "A";
    } else {
      return el;
    }
  }
});

Вывод равен

doesMatch? one one
MATCH
doesMatch? one two
doesMatch? one three
doesMatch? one four
doesMatch? one five
doesMatch? one six
[ 'A', 'two', 'three', 'four', 'five', 'six' ]

Это проясняет происходящее.