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

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

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

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

Как убрать часть верхней границы блока?

Ну да, а надо было как-то по-другому?

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

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

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

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

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

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

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

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

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

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

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

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

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

Что мне необходимо сделать, чтобы поисковая система Yandex стала выдавать мой сайт на первой странице поисковой выдачи?

Насчет вашего послесловия: думаю это как-то связано с персонифицированной выдачей и количеством визитов ifour.ru через Яндекс в определенном браузере.

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

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

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

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

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

Круг с точек, как сделать?

Всмысле "из точек"?

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

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

Как сделать анимированый прогресс бар?

Ну вот - workshop.rs/demo/progress-bar-in-4-lines/#jquery-u...

Он же анимированный

Как захватить цвет?

Захват цвета это вроде бы дико сложная задача, вот гляньте на попытку реализации - https://html2canvas.hertzen.com/documentation.html, а это реализация захвата цвета из одной картинки - jsfiddle.net/thirtydot/9SEMf/869

В данный момент наверное нет реально работающих сервисов способных такое сделать.

Что это за синтаксис?

Ну, видать PHPStorm не умеет в ECMAScript 2015 на должном уровне, Игорь вам скинул пример аналогичного кода использующего классический синтаксис, такой конечно без ошибок везде пройдет; а если будете передавать стрелочные функции как аргументы, наверное всегда будет такой warning в PHPStorm.

Как настроить событие на элемент отслеженный getElementsByClassName???

По ошибке все просто: весь ваш код выполняется сразу же, ни одна из частей кода не ждет другую. А поскольку ваш скрипт завершает работу только спустя некоторое время, в последней части кода вы пытаетесь выбрать селектором элементы которых еще нет, а именно document.getElementsByClassName("section-span") не находит нужных элементов, потому что в момент его выполнения структура элемента body такая:

<body>
	<div id="block">
		...
		<div class="section" id="section-%number%">

		</div>
		...
	</div>
</body>

То есть в момент вызова функции document.getElementsByClassName("section-span") на странице есть только div#block с пустыми секциями; заполнены элементами span.section-span они будут позже.
Исправить это не исправляя основной код можно добавив лишнюю проверку к функции intervalOutputing, а именно после того, как колонка заполнена, проверять последняя ли это колонка, и если да, то выполнять ваш код. Вот рабочий пример.

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

Для начала раскидайте ваш код так, как этого хочет jsfiddle: весь css код - в окошко CSS, весь html код - в html, и js - в js.
Получится так.

У вас в функции setContent опечатка: вы присваиваете значение this.innerHTMl, когда у элемента this нет такого свойства. Этому элементу будет добавлено свойство innerHTMl. Зато у этого элемента есть свойство innerHTML xD То есть вы ошиблись в последнем символе, а поскольку JS регистрозависим, то это критический логический баг.

У вас есть переменная makingColumsInterval, вы в нее кладете идентификатор, который вам возвращает функция setTimeout(). В том же месте у вас объявлена именованная функция rekurs() в которой столько ошибок, что работоспособность вашего кода я назвал бы чудом) Эта функция просто нерабочая. Вот эта часть кода:

var makingColumsInterval = setTimeout(function rekurs(){
 	 	if(randNumbersArray.length === columQty){
    	    clearTimeout(makingColumsInterval);
	    }
		var randomNum = getRandomNum(1, columQty);

		if(randNumbersArray.indexOf(randomNum) === -1) {
			randNumbersArray.push(randomNum);
			outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
		}
		var makingColumsInterval = (rekurs(),100);
},100);

1. В строке "var makingColumsInterval = (rekurs(),100);" туча ошибок: для начала вы объявляете переменную makingColumsInterval через ключевое слово var, таким образом делая ее видимой только внутри функции rekurs() во время её выполнения. А ведь ваша функция рассчитана на то, чтоб использовать внешнюю переменную makingColumsInterval. Потом в этой же строке вы пропустили 'setTimeout': хотели написать 'setTimeout(rekurs(),100)', а написали '(rekurs(),100)' (кстати, даже если бы вы не пропустили 'setTimeout', все равно все бы обрушилось, ибо скобки после имени функции означают ее немедленный вызов, а тогда функция setTimeout первым аргументов бы получила undefined, что привело бы к ошибке). Таким образом запись в переменную makingColumsInterval уже начата (то есть ссылка на внешнюю переменную makingColumsInterval уже стерта), но не закончена, т.к. rekurs() никогда не завершается. То есть завершается, но принудительно браузером. Поэтому rekurs() не видит внешнюю переменную makingColumsInterval, зато видит недоделанную внутреннюю, которая ввиду своей недоделанности равна undefined. Если бы вы заглянули в консоль, вы бы увидели, что ваш скрипт выполняется больше хрентиллиона раз, а потом аварийно вырубается.

Читайте эту статью про области видимости.

2. Теперь об этой части кода:

if(randNumbersArray.length === columQty){
	clearTimeout(makingColumsInterval);
}

Видимо предполагалось, что этот if должен остановить выполнение функции, но по факту происходит вот что: сравниваются значения переменных randNumbersArray.length и columQty, если они равны - чистится таймаут и продолжается выполнение функции, а если не равны, то чистка таймаута пропускается, а функция продолжает выполняться. Блок, который выполняется условным оператором if, никак не влияет на ход функции, и в итоге функция выполняется пока браузер не остановит ее, выдав ошибку too much recursion. Исправить это можно добавив после чистки таймаута инструкцию 'return;'

В целом ваша функция использует странную логику - она выполняется, потом создает еще раз отложенный вызов самой себя и так до тех пор, пока randNumbersArray.length не станет равен columQty. Вместо setTimeout можно использовать setInterval - первый аргумент у него это функция которая будет выполняться каждый промежуток времени, заданный вторым аргументов. Если бы вы использовали setInterval, вам бы пришлось создать и очистить интервал всего раз.

После исправлений ваша функция стала выглядеть вот так:

makingColumnsInterval = setInterval(function (){
    if(randNumbersArray.length === columQty){
        clearInterval(makingColumnsInterval);
        return;
    }
    var randomNum = getRandomNum(1, columQty);

    if(randNumbersArray.indexOf(randomNum) === -1) {
      randNumbersArray.push(randomNum);
      outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
    }
}, 100);

Далее: в функции intervalOutputing когда количество добавленных span'ов равно пятидесяти, вы вызываете функцию afterOutput, которая в свою очередь выполняет сама себя каждые десять секунд, и не чистит за собой таймаут.
Функция afterOutput судя по логике общего и своего собственного алгоритма (и даже по ее названию) рассчитана на то, что она будет вызвана не после того, как заполнится колонка, а после того, как будут заполнены все колонки, то есть вызвана она будет всего раз. Таким образом 1) можно смело удалять из нее setTimeout, 2) можно было бы исключить ее из intervalOutputing, но ввиду того что на заполнение колонки уходит время (следовательно заполнение цифрами можно считать оконченным не когда алгоритм приступит к заполнению последней колонки, а когда последняя колонка будет заполнена) придется ее оставить там и выполнять только когда myI === 50 и randNumbersArray.length === columQty.

Вот вам исправленная версия.

Как настроить событие на элемент отслеженный getElementsByClassName???

Umid:
Если вы имеете ввиду зачем вписывать false если useCapture и так по дефолту будет равен false, то да, в некоторых случаях можно обойтись без него, т.к. вызов addEventListener('click', handler) аналогичен вызову addEventListener('click', handler, false). Но в некоторых случаях из удобства (и не только) этот аргумент не опускается. Например, у меня в примере: чтобы вешать обработчики я использую и true, и false значения useCapture, поэтому чтобы снимать обработчики, мне нужно различать обработчики на те которые используют capture, и те которые не используют, ибо если на элемент повешены обработчики обоих типов:

el.addEventListener('click', handler, false);
el.addEventListener('click', handler, true);

...то снять все обработчики с useCapture=true можно будет только явно указав useCapture=true в функции removeEventListener, и например такой код не уберет все обработчики:

el.removeEventListener('click', handler);
el.removeEventListener('click', handler);

...зато такой уберет:

el.removeEventListener('click', handler, false);
el.removeEventListener('click', handler, true);

А если вы имеете ввиду что не видите смысла в использовании capture режима, то тут я могу сказать только то, что если вы не видите как можно применить фичу, то она для вас наверное и впрямь бесполезна, и станет полезной только тогда, когда вы наткнетесь на необходимость использовать ее. Не знаю, какой пример вам дать, чтоб вы убедились в том, что эта фича полезна. Ну например если при клике на какие-то элементы нам сначала нужно вызвать обработчик родительского элемента, то у родителя useCapture должен быть true, а у элементов внутри него - false.

Как получить ключ объекта в js?

obj = { 'key': [ 1, 2, 3, 4, 5 ], 0: 'somevalue', 1: 564}

keys = Object.keys(obj)

for (var i = 0, l1 = keys.length; i < l1; i++) {
	if ( isNaN(parseInt(keys[i])) ) {
		for (var j = 0, arr = obj[keys[i]], l2 = arr.length; j < l2; j++) {
			console.log(arr[j]);
		}
	}
}

То есть если у вас в объекте есть элементы имеющие и числовые и текстовые ключи, то вы можете выбрать те, у которых ключи текстовые, и работать только с ними.

Как настроить событие на элемент отслеженный getElementsByClassName???

Umid:
Функции jQuery рассчитанные на модификацию элементов DOM умеют автоматически определять что в них передано - один элемент или массив. На самом деле все не так просто, но сильно упрощенно это выглядело бы так:

function on(arg, function_to_apply)  {
	if (Array.ifArray(arg)) {
		for (i = 0; i < arg.length; i++ ) {
			function_to_apply( arg[i] );
		}
	} else {
		function_to_apply( arg );
	}
}

Если в функцию передан один элемент, то эта функция выполняется только для него, а если передан массив элементов, то функция выполняется для каждого элемента в массиве. Конструкция $('.asd').on('click', handler) вешает обработчик на все элементы, найденные селектором '.asd', будь их 100, 1 или 0, и конечно же она все равно использует цикл для того чтоб это сделать, по-другому быть не может. Скорее всего jQuery функция будет даже дольше выполняться ввиду сложности внутренней логики jQuery.

По поводу третьего аргумента addEventListener: да, это называется "всплытие событий", но объяснить на словах у меня не получится. Я попробую: если у вас есть 5 вложенных друг в друга элементов и на каждом висит on('click'), то при нажатии на самый верхний выполнятся все обработчики, начиная с того, на какой непосредственно элемент кликнул пользователь: 5, 4, 3, 2, 1.

Если например на третий элемент обработчик повешен с атрибутом useCapture=true (вот так - addEventListener('click', handler, true)), то при клике на самый верхний элемент, последовательность вызовов будет такая: 3, 5, 4, 2, 1.

Также порядок выполнения обработчиков, которые используют capture mode, обратный, то есть если обработчики всех элементов используют capture mode, при клике на самый верхний элемент последовательность будет такая: 1, 2, 3, 4, 5, сначала выполнится обработчик родительского элемента.

Я сделал маленькую демку, можете поиграться с режимами. При клике на строку "useCapture attribute of..." режим обработчика для соответствующего элемента меняется и отображается в этой же строке. По клику на разноцветные блоки появится надпись, отражающая последовательность вызовов, например если средний элемент будет использовать capture mode, а остальные - нет, то последовательность будет выведена такая: two + three + one

Как масштабировать уже загруженные изображения после загрузки новых (JavaScript)?

Кхм, что-то я не подумал о том, что за ником MargeSimpson будет не парень. Картинки ведь именно на это рассчитаны были, извините)

Вот пример HTML-документа с подключением внешнего стилевого файла, который находится в том же каталоге (в той же папке), что и этот файл .html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Если у вас стили лежат в папке css, то чтобы подключить один из них, атрибут href должен быть такой: css/styles.css

Почему шторка JS не работает?

Этого Виталия все видят кроме меня? XD

Почему шторка JS не работает?

А кто такой Виталий? 0_о

Есть 3 таблицы. Поставщик,Товар.Ордер. Как найти все ордеры поставщика?

Тогда логичней было бы вместо "У этого поставщика было сделано заказов на такую-то сумму" говорить "У этого поставщика было куплено товаров на такую-то сумму"

Я мало связан с миром бд, но мне кажется если есть возможность избежать ненужных вычислений (таких как сумма всех ордеров через select с двойным join'ом), лучше попытаться их избежать и, как вы сказали, использовать поле с суммой товаров для каждого поставщика.