Как правильно удалить объект из массива?

Question

[username555]

Есть массив с объектами

var data = [
    {text: 'College', id: 1},
    {text: 'University', id: 2},
    {text: 'School', id: 3}
];

Как правильно удалить объект из массива по его id?
Да, можно создать пустой массив и пробежаться по объектам в массиве data, если id у объекта не совпадает с id, который я пропишу, тогда добавляем массив и в итоге получится новый массив без одного объекта. Но может можно как-то ещё сделать?

Comments

[everliving]

data = data.filter( function(e) { return e.id !== id });

Answer 1

[Иван Соломенников]

Как вам уже правильно подсказали, проще воспользоваться унарным оператором delete.

var data = [
    {text: 'College', id: 1},
    {text: 'University', id: 2},
    {text: 'School', id: 3}
];

data.map(function (elt, index) {
    if(elt.id === 2) {
        delete data[index];
    }
});

Comments

[Николай]

Нельзя так делать.

var data = [
    {text: 'College', id: 1},
    {text: 'University', id: 2},
    {text: 'School', id: 3}
];

console.log(data.length);  // 3

data.map(function (elt, index) {
    if(elt.id === 2) {
        delete data[index];
    }
});

console.log(data.length);  // 3

Лучший способ изменить массив - создать новый.

[Иван Соломенников]

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

[Kovalsky]

Иван Соломенников: wuuut? Парень бы вроде дал вам понять о чем идет речь и почему ему не нравится ваше решение, даже показал, что именно в этом самом итоге ему не нравится. А в итоге получается вполне себе sparse array. И чем же лучше иметь дырявый массив?

[Иван Соломенников]

Никита Полевой: >>> И чем же лучше иметь дырявый массив?
Я не понимаю что вы имеете ввиду под словом "дырявый".
Разреженный массив теряет последовательность индекса и для него не вызывается колбэк в ES5, так в чём же его избыточность?!

[Kovalsky]

Иван Соломенников: про избыточность ни слова не было.

Под словом "дырявый" я имею ввиду то, что обычно имееют ввиду говоря слово "дырявый" - в нем есть дырки: если обратиться к массиву по индексу удаленного элемента - получишь undefined, что не всегда будет удобно.

А плохого в таком массиве то, что с точки зрения итератора это уже не массив, а dictionary, который перебирается в среднем всего-то в 20-25 раз медленнее, фигня-то какая. Лишние дыры всегда имеют значение.

Зачем лишаться возможности использовать простейшие циклы без лишних проверок, если можно этой возможности не лишаться?

[Иван Соломенников]

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

И теперь отталкиваемся от запроса ТС и видим что он хотел, чтобы не создавался новый массив, а из существующего удалялся объект под соответствующим id.

>>> Да, можно создать пустой массив и пробежаться по объектам в массиве data, если id у объекта не совпадает с id, который я пропишу, тогда добавляем массив и в итоге получится новый массив без одного объекта. Но может можно как-то ещё сделать?

[Kovalsky]

Не очень понимаю, к чему вы вспоминаете про метод, которым изначально прошлись по элементу, если я говорю о том, что после такого грубого удаления элемента итерироваться движком ваш дырявый массив будет уже как dictionary, таким образом использование базовых циклов будет затруднено лишними проверками и замедлено (в ~50 раз), а использование методов типа forEach будет сильно замедлено (в ~20 раз). Убедитесь сами

Чувак спрашивает, как правильно удалить элемент. Если один способ настолько замедляет дальнейшую работу с массивом, он точно не может считаться верным, ибо простой проход по вашему массиву по длительности переплюнет даже временные затраты на slice()

[Иван Соломенников]

Никита Полевой: Скорость !== Правильно, так что давайте не будет утрировать и взглянем правде в глаза, ТС просил без определения нового массива, он получил, попросил бы новый массив с учётом скорости, писался бы код совершенно другой.

[Kovalsky]

Иван Соломенников: Почему это правильно не значит быстро? Если б мы говорили о музыке или о еще каком искусстве, то да. А тут, мне кажется, другое дело. И уж точно не тот правильный вариант, который делает использование простейших циклов до смешного медленным.

Ну так и напишите другой вариант тоже, хотя бы для энциклопедичности.

[Иван Соломенников]

Никита Полевой: >>>ибо простой проход по вашему массиву по длительности переплюнет даже временные затраты на slice()
>>>таким образом использование базовых циклов будет затруднено лишними проверками и замедлено (в ~50 раз), а использование методов типа forEach будет сильно замедлено (в ~20 раз)

Ещё раз, ещё много-много раз. Вы либо не читаете что я пишу, либо ваши слова сарказм.
1) Есть методы которые появились в ES5, поэтому для обхода массивов разумнее использовать их, циклы оставим для других задач.
2) Выделю жирным часть подстроки чтобы уже наверняка. Колбэк функция не будет вызываться для несуществующих элементов массива.
3) По ссылкам не ходил, я читаю спецификацию. Скорость может не только зависеть от циклов, а ещё и от железа, от среды относительно чего выполняется код, от задач которые поставлены перед кодом и т.п.

[Иван Соломенников]

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

Так что там писать, не смешите, его уже написали за меня, заменив map на filter с присваиванием в массив, или для вас это задача?!

[Kovalsky]

Иван Соломенников: Да нет же, это вы как-будто шутите, отвечая.

1. Если простейшие циклы выполняются быстрее методов ES5, то именно первые и являются разумным выбором,

2. Понять не могу, при чем тут это и какое это отношение имеет к делу? Я на это уже отвечал. Я знаю, что колбэк не будет вызываться для этих элементов. В моем тесте так и происходит. Да даже если б вызывался, я бы сильно не расстроился потому что в вашем варианте производительность и так не составляет 10-и процентов той, от которой вы отказываетесь,

3. Раз вы читаете спецификацию, я вас бесконечно уважаю. Вы правы, я сам их не читал, тут ничего не могу сказать. Но jsperf - это реальная информация о производительности. Не вижу ничего постыдного в том, чтобы замерить реальное время выполнения кода, реализовывающего какой-то гипотетический случай, имеющий спорные моменты. Все же гляньте, демонстрация того что производительность ES5 методов в случае с разреженными и полными массивами ничтожна, по сравнению с производительностью простых циклов,

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

[Иван Соломенников]

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

Интересное утверждение что методы класса Array будут работать медленнее чем обычные циклы, но спорить не буду так как реализацию их на С++ не смотрел.

Например я использую метод forEach после выборки из документа ссылок и косвенного вызова относительно класса Array, делаю по ним проход и в зависимости от свойства hash объекта location добавляю класс active, или удаляю класс active например вот так:

var buttons = document.querySelectorAll("#buttons a");

function handler() {
    var sel = location.hash.slice(1);
    location.hash = sel || "#home";
    [].slice.call(buttons).forEach(function (elt){
        elt = elt.getAttribute("href").slice(1) === sel
            ? elt.classList.add("active")
            : elt.classList.remove("active");
        
    });
}

window.addEventListener("hashchange", handler);
window.addEventListener("load", handler);

UPD
Это примитивный конечно же пример, лучше реализовать c помощью метода history.pushState() и события "popstate". Но это наглядный пример показывающий более простое решение, когда на лету обращаемся к методу forEach и выполняем поставленные задачи.

[Kovalsky]

Иван Соломенников: "Интересное утверждение что методы класса Array будут работать медленнее чем обычные циклы, но спорить не буду так как реализацию их на С++ не смотрел." - ну так они потому и обычные, что больше ничем не заняты, кроме перебора индексов, и потому же они быстрей. Методы класса Array имеют чуть более сложную логику, учитывающую структурные особенности массивов. О том и велась речь с самого начала: создавая в массиве дырки вы обрекаете себя на использование этих самых методов, ибо если вы все же хотите использовать простые циклы, вам придется вводить соответствующие проверки, что значительно уменьшит их преимущество в производительности. К слову, ES5 методы тоже намного (в ~30 раз) быстрее выполн...; таким образом они тоже не очень любят разреженные массивы, независимо от того вызывается колбэк или нет.

Вообще смотря на ваш код, я вижу почему мы с вами не сходимся во мнениях. Вы абсолютно для каждого действия выбираете более лаконичный код, чем более производительный: если нужно вызвать Array.prototype.slice, вы создаете для этого новый массив; для того чтоб выбрать нужные элементы, вы пользуетесь querySelectorAll, вместо того чтоб сначала выбрать контекст, а потом запустить поиск ...

Если переписать ваш пример, прирост производительности будет ~0-20%. А если переделать его, чтобы массив был разреженным, тогда ваш вариант будет работать в ~30% медленнее. В целом, это все конечно мелочи и большого внимания они не заслуживают, особенно при учете что эта ваша функция выполняется onhashchange и onload, и особенно производительной ее можно не делать. Но все же - если мы имеем возможность упростить код, сделав его менее лаконичным, но более производительным, разве это не стоило бы сделать?

[Иван Соломенников]

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

Но, если говорить уж прямо о производительности работая с "массивами" и если эти массивы предполагаются быть только числовыми, то актуальнее использовать типизированные массивы, где прирост скорости будет достаточно хороший, а также память будет не так течь как при использовании обычных массивов. Пример "Решето Эратосфена", который как говорит Дэвид Флэнеган в своей книге, работает в 23 раза быстрее если использовать типизированные массивы, чем с применением к примеру обычных массивов.

Пример:

function sieve(n) {
    var a = new Array(n+1), // Тут нужно заменить на Int8Array чтобы увидеть разницу
        max = Math.floor(Math.sqrt(n)),
        p = 2,
        i;
    while (p <= max) {
        for (i = 2 * p; i <= n; i += p) {
            a[i] = 1;
        }
        while (a[++p]){}
    }
    while (a[n]) {
        n--;
    }
    return n;
}

С помощью примитивной функции, можно посмотреть в консоли результат:

function speed(callback, arg) {
    var start = Date.now();
    callback(arg);
    console.log("Заняло:", Date.now() - start, "ms");
}

speed(sieve, 500000);

При передаче небольших значений, разница будет не существенна, а вот если как в моём примере, разница уже ощутимая. С Array в Chrome - от 10 до 32 мс, тогда как с Int8Array - от 5 до 9 мс. В Firefox - Int8Array от 3 до 7 мс, Array от 133 до 139 мс. В других браузерах не смотрел.

Вот это действительно классная весчь.

[Иван Соломенников]

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

И не комильфо использовать несколько инструкций объявлений, оптимальнее использовать "шаблон единственной инструкции объявления".

Также по части фигурных скобок, ай-ай-ай, jslint будет очень сильно и долго ругаться.

Переменная i++, тоже лучше так не делать, а использовать i += 1.

[Иван Соломенников]

Никита Полевой: >>>Не очень понял, ну и что?

Всё потому, что этот код Single Page Application, это не полный кусок, а вообщем он ещё делает ajax запрос, подгружает нужный контент и делает активной кнопку.

>>>Все как доктор, то бишь Илья Кантор, прописал
>>>ну это уже вообще какая-то соционика) Это-то почему не правильно?

Почитайте по этому поводу Стояна Стефанова "Шаблоны" и погуглите кто такой лингвист языка js Дуглас Крокфорд, Илья не панацея. Также посмотрите если будет желание канал на ютубе "Sorax", вы поймёте о чём тогда говорю.

[Kovalsky]

"У вас во втором примере по последней ссылке, переменная location объявляется в глобальной области видимости, а она там не нужна до возникновения события." - как и в остальных. Не очень понял, ну и что? Я-то другие вещи тестировал.

"Также по части фигурных скобок, ай-ай-ай, jslint будет очень сильно и долго ругаться." - а что с ними не так? Все как доктор, то бишь Илья Кантор, прописал

"Переменная i++, тоже лучше так не делать, а использовать i += 1" - ну это уже вообще какая-то соционика) Это-то почему не правильно? (upd: и результаты тестов вторят вам, правда разница в производительности маленькая, но все таки. Кааак? Кааак, Карл?)

[Kovalsky]

Иван Соломенников: там же все читаемо, чего ж еще?

Наша с вами переписка занимает ~9300 символов без кода и цитат. Добавьте же еще каких-нибудь 100-150, расскажите мне что не так со скобками и почему унарный инкремент это плохо.

[Иван Соломенников]

Никита Полевой: Предлагаю погуглить, потому что так на пальцах не смогу рассказать. Или ещё проще нагуглите инструмент jslint и всё увидите.

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

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

По части инкремента, автор объясняет что с помощью него легче достичь ошибку.

[Иван Соломенников]

Никита Полевой: Вот можно на хабре почитать по части того что говорил выше https://habrahabr.ru/post/175283/

Но это часть, а так советую почитать Стояна Стефанова - Шаблоны программирования и проектирования высококачественных приложений. Книга на 265 листов, но она того стоит.

Потом можно и Дугласа Крокфорда почитать.

[Kovalsky]

Иван Соломенников: а чо мне смотреть на jslint, на такие вещи он говорит "ошибка" или "не надо так делать", и все, никакой информации.

По части инкремента Стоян Стефанов, описывая причины по которым стоит избегать ++, пишет "причина заключается в том, что операторы ++ и -- проявляют «излишнюю хитрость»", а в следующем же абзаце показывает примеры высокопроизводительного итерирования массивов как раз с использованием этих унарных операторов. Так что он не очень последовательный товарищ) Ничего не объяснил

И да, говоря "Стоян Стефанов - Шаблоны программирования и проектирования высококачественных приложений" вы имели ввиду книгу "JavaScript. Шаблоны" ?

[Иван Соломенников]

Никита Полевой: 1) Говорит, нужно читать лог ошибок.
2) По части инкремента я писал "автор", который в своей книге описывает про него вкратце с чем связанно его не желательно использование. Стоян Стефанов инкремент также считает "антишаблоном".
3) Да.

Answer 2

[kstyle]

delete data[i]; не нравится?
а data.splice()?

Comments

[username555]

ну мне же не попорядку их удалять, id не обязательно будут 1,2,3 . Могут быть и 2312 и лежать 3 по счёту в массиве.

[kstyle]

username555: так найдите нужный i по id . это получше, чем копию создавать

[kstyle]

username555: по-моему, вы путаете id объекта и индекс i элемента массива

Answer 3

[Николай]

var data = [
    {text: 'College', id: 1},
    {text: 'University', id: 2},
    {text: 'School', id: 3}
];

data = data.filter(function (item) {
  return item.id !== 2;
});

Comments

[Alexey]

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

function delById(arr, id) {
for (var i = 0; i < arr.length; i++) if (arr[i].id === id) {
arr.splice(i, 1);
return i;
}
return -1;
}

[Николай]

Согласен.