Удаление элементов с помощью Array.map в JavaScript

Question

Я хотел бы отфильтровать массив элементов, используя map() функция.Вот фрагмент кода:

var filteredItems = items.map(function(item)
{
    if( ...some condition... )
    {
        return item;
    }
});

Проблема в том, что отфильтрованные элементы по-прежнему занимают место в массиве, и мне хотелось бы полностью их удалить.

Есть идеи?

РЕДАКТИРОВАТЬ:Спасибо, я забыл про filter(), то, что я хотел, на самом деле filter() затем map().

РЕДАКТИРОВАТЬ2:Спасибо, что указали на это map() и filter() реализованы не во всех браузерах, хотя мой конкретный код не предназначен для запуска в браузере.

Answer 1

Вам следует использовать filter метод, а не карту, если только вы не хотите изменять элементы массива в дополнение к фильтрации.

например.

var filteredItems = items.filter(function(item)
{
    return ...some condition...;
});

[Редактировать:Конечно, вы всегда можете сделать sourceArray.filter(...).map(...) и фильтровать, и мутировать]

Answer 2

Я написал ответ некоторое время назад, и мое мнение изменилось.Рекомендую посмотреть мой Сообщение блога который расширяет эту тему и объясняет ее намного лучше.В конце альтернатив также приводится сравнение JSperf.

Доктор таков:Чтобы выполнить то, о чем вы просите (фильтрация и сопоставление в рамках одного вызова функции), вы должны использовать Array.reduce().Однако более читаемый и обычно быстрее² подход заключается в том, чтобы просто использовать фильтр и карту, соединенные вместе:

[1,2,3].filter(num => num > 2).map(num => num * 2)

Далее следует описание того, как Array.reduce() работает и как его можно использовать для выполнения фильтра и сопоставления за одну итерацию.Если это слишком сжато, я настоятельно рекомендую просмотреть сообщение в блоге, указанное выше, которое представляет собой гораздо более дружелюбное введение с четкими примерами и развитием событий.

Вы даете сокращение аргумента, который является (обычно анонимной) функцией.

Эта анонимная функция принимает два параметра: один (как и анонимные функции, передаваемые в map/filter/forEach) является итератором, с которым нужно работать.Однако существует еще один аргумент для анонимной функции, передаваемой в сокращение, который эти функции не принимают, а именно: значение, которое будет передаваться между вызовами функций, часто называемое памятка.

Обратите внимание: хотя Array.filter() принимает только один аргумент (функцию), Array.reduce() также принимает важный (хотя и необязательный) второй аргумент:начальное значение для «memo», которое будет передано в эту анонимную функцию в качестве ее первого аргумента, а затем может быть изменено и передано между вызовами функций.(Если он не указан, то «memo» в первом вызове анонимной функции по умолчанию будет первым итератором, а аргумент «итерируемый» фактически будет вторым значением в массиве)

В нашем случае для начала мы передаем пустой массив, а затем решаем, вводить ли нашу итерацию в наш массив или нет, в зависимости от нашей функции — это процесс фильтрации.

Наконец, мы будем возвращать наш «выполняющийся массив» при каждом вызове анонимной функции, а сокращение возьмет это возвращаемое значение и передаст его в качестве аргумента (называемого memo) при следующем вызове функции.

Это позволяет выполнять фильтрацию и сопоставление за одну итерацию, сокращая количество необходимых итераций вдвое.:)

Более полное объяснение см. МДН или ссылку выше.:)

Базовый пример вызова сокращения:

let array = [1,2,3];
const initialMemo = [];

array = array.reduce((memo, iteratee) => {
    // if condition is our filter
    if (iteratee > 1) {
        // what happens inside the filter is the map
        memo.push(iteratee * 2); 
    }

    // this return value will be passed in as the 'memo' argument
    // to the next call of this function, and this function will have
    // every element passed into it at some point.
    return memo; 
}, initialMemo)

console.log(array) // [4,6], equivalent to [(2 * 2), (3 * 2)]

более сжатая версия:

[1,2,3].reduce((memo, value) => value > 1 ? memo.concat(value * 2) : memo, [])

Обратите внимание, что первая итерация была не больше единицы и поэтому была отфильтрована.Также обратите внимание на начальныйMemo, названный просто для того, чтобы прояснить его существование и привлечь к нему внимание.И снова оно передается как «памятка» при первом вызове анонимной функции, а затем возвращаемое значение анонимной функции передается в качестве аргумента «памятка» следующей функции.

Другим примером классического варианта использования memo может быть возврат наименьшего или наибольшего числа в массиве.Пример:

[7,4,1,99,57,2,1,100].reduce((memo, val) => memo > val ? memo : val)
// ^this would return the largest number in the list.

Пример того, как написать собственную функцию сокращения (я считаю, что это часто помогает понять подобные функции):

test_arr = [];

// we accept an anonymous function, and an optional 'initial memo' value.
test_arr.my_reducer = function(reduceFunc, initialMemo) {
    // if we did not pass in a second argument, then our first memo value 
    // will be whatever is in index zero. (Otherwise, it will 
    // be that second argument.)
    const initialMemoIsIndexZero = arguments.length < 2;

    // here we use that logic to set the memo value accordingly.
    let memo = initialMemoIsIndexZero ? this[0] : initialMemo;

    // here we use that same boolean to decide whether the first
    // value we pass in as iteratee is either the first or second
    // element
    const initialIteratee = initialMemoIsIndexZero ? 1 : 0;

    for (var i = initialIteratee; i < this.length; i++) {
        // memo is either the argument passed in above, or the 
        // first item in the list. initialIteratee is either the
        // first item in the list, or the second item in the list.
        memo = reduceFunc(memo, this[i]);
    }

    // after we've compressed the array into a single value,
    // we return it.
    return memo;
}

Реальная реализация позволяет получить доступ, например, к индексу, но я надеюсь, что это поможет вам несложно понять суть этого.

Answer 3

Это не то, что делает карта.Вы действительно хотите Массив.фильтр.Или, если вы действительно хотите удалить элементы из исходного списка, вам придется сделать это в обязательном порядке с помощью цикла for.

Answer 4

Однако вы должны отметить, что Array.filter поддерживается не во всех браузерах, поэтому вам необходимо создать прототип:

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.filter)
{
    Array.prototype.filter = function(fun /*, thisp*/)
    {
        var len = this.length;

        if (typeof fun != "function")
            throw new TypeError();

        var res = new Array();
        var thisp = arguments[1];

        for (var i = 0; i < len; i++)
        {
            if (i in this)
            {
                var val = this[i]; // in case fun mutates this

                if (fun.call(thisp, val, i, this))
                   res.push(val);
            }
        }

        return res;
    };
}

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

Answer 5

Я размещаю этот ответ здесь, потому что полифилы, представленные на этой странице, ужасны.

function reduce(f, y, xs, context) {
  var acc = y;
  for (var i = 0, len = xs.length; i < len; i++)
    acc = f.call(context, acc, xs[i], i, xs);
  return acc;
}

function reduce1(f, xs, context) {
  if (xs.length === 0)
    throw Error('cannot reduce empty array without initial value');
  else
    return reduce(f, xs[0], xs.slice(1), context);
}

function map(f, xs, context) {
  return reduce(function(acc, x, i) {
    return acc.concat([
      f.call(context, x, i, xs)
    ]);
  }, [], xs);
}

function filter(f, xs, context) {
  return reduce(function(acc, x, i) {
    if (f.call(context, x, i, xs))
      return acc.concat([x]);
    else
      return acc;
  }, [], xs);
}

расширять прототипы

if (Array.prototype.reduce === undefined) {
  Array.prototype.reduce = function(f, initialValue, context) {
    if (initialValue === undefined)
      return reduce1(f, this, context);
    else
      return reduce(f, initialValue, this, context);
  };
}

if (Array.prototype.map === undefined) {
  Array.prototype.map = function(f, context) {
    return map(f, this, context);
  };
}

if (Array.prototype.filter === undefined) {
  Array.prototype.filter = function(f, context) {
    return filter(f, this, context);
  };
}

Answer 6

var arr = [1,2,'xxx','yyy']

arr = arr.filter(function(e){ return e != 'xxx' });

arr  // [1, 2, "yyy"]