В: В чём различия при удалении элемента массива методами undefined и delete ?
О: оператор delete
удаляет пару «ключ-значение».
В: Какие серьёзные и не очень последствия за этим следуют?
О: так как на месте удалённого элемента с помощью delete
остаётся empty
(дырка) - весь второй раздел будет посвящён сравнению поведения
операторов:
и некоторых методов:
- Array.forEach
- Array.map
- Array.filter
- Object.keys
- Object.values
при работе с массивами, содержащими empty
или undefined
.
Сразу хочу сделать заявление:
Здесь будут рассмотрены только массивы Array
!
Здесь не будут рассматриваться типизированные массивы вроде: Int16Array
; и всякие: Set
, NodeList
, ArrayBuffer
(да-да, кое что из этого списка не массив).
И ещё, небольшое замечание: иной раз не помешает убедиться что вы работаете с массивом (если собираетесь его модифицировать) а не с [Symbol.iterator]: function*
, например.
структура:
немного теории
- как оно выглядит в консоле chrome , filefox и stackoverflow
- последняя запятая игнорируется
- функции, используемые мной здесь
- для тех, кто не хочет использовать
empty
и вообще не хочет читать многабукаф ибо
- где ещё почитать
- ищу информацию
много практики
- для иллюстрации "проблемы"
- count
- замеры времени
- персонально для @yar85
- оператор расширения (spread)
1. немного теории
https://learn.javascript.ru/array-methods#удаление-из-массива
оператор delete
удаляет пару «ключ-значение».
да, и в этом месте, в массиве, образуется "дырка" (empty
), если попробовать прочитать значение из этой "дырки", то оно будет undefined
Это – все, что он делает.
на самом деле, оператор delete
сразу освобождает память, а ещё возвращает true/false
но в контексте элементов массива нас это не интересует, т.к. он всегда будет возвращать true
(даже в случае с empty
и undefined
)
Обычно же при удалении из массива мы хотим, чтобы оставшиеся элементы сдвинулись и заполнили образовавшийся промежуток.
Поэтому для удаления используются специальные методы: из начала – shift
, с конца – pop
, а из середины – splice
с shift
и pop
всё как всегда.
а вот при работе со splice
есть небольшой нюанс и, на самом деле, связан он с оператором расширения ( ...
spread
) - с помощью splice
не получится вставить empty
элемент/ы, а spread
превращает empty
в undefined
.
1.1 как оно выглядит в консоле chrome , filefox и stackoverflow
```js
let arr = [0,1,2,3,4,5]
delete arr[1]
delete arr[2]
arr[3] = undefined
arr[4] = undefined
console.log(arr)
// эквивалентно
// console.log([0,,,undefined,undefined,5])
```
в консоле chrome :
[ 0, empty × 2 , undefined, undefined, 5 ]
в консоле filefox :
[ 0, <2 empty slots> , undefined, undefined, 5 ]
в консоле stackoverflow :
[ 0, undefined, undefined, undefined, undefined, 5 ]
как вывести в stackoverflow :
```js
log(() => // "[ 0, empty, empty, undefined, undefined, 1 ]"
arrToString([0,,,undefined,undefined,1,])) // <- запятая в конце
```
1.2 последняя запятая игнорируется
относительно недавно появилась возможность писать в конце запятую, которая игнорируется (что при создании объектов, что при создании массивов)
```js
let a = ['A','B']
let b = ['A','B',] // <- запятая в конце
log(() => Object.keys(a)) // ["0", "1"]
log(() => Object.keys(b)) // ["0", "1"]
log(() => a.length) // 2
log(() => b.length) // 2
```
1.3 функции, используемые мной здесь
let group = _f => {
console.group(_f.name || ((_f.prototype) ? _f : 'anonym'))
try { _f() } catch (_e) { console.log(_e.stack) }
console.groupEnd()
}
let log = (_f) => _f instanceof Function
? console.log(_f,_f())
: console.log(_f)
group(() => {
let hw = () => 'Hello World'
// --> // вывод в консоле хрома
log(hw) // () => 'Hello World' "Hello World"
log(() => 'Hello World 2') // () => 'Hello World 2' "Hello World 2"
// <--
})
group(() => {
// --> // я же буду писать в комментариях только правую часть
log(() => arrToString(['hello','world'])) // "[ hello, world ]"
log(() => arrToString([1,,,undefined,undefined,2])) // "[ 1, empty, empty, undefined, undefined, 2 ]"
// -----------
// ОСТОРОЖНО !
// -----------
// // вывод в консоле хрома
log(() => arrToString([1,[11,,22],,undefined,undefined,2])) // "[ 1, 11,,22, empty, undefined, undefined, 2 ]"
// <--
})
group(() => {
throw new Error('qwa')
})
function arrToString(_arr) {
if (Object.prototype.arrToString.call(_arr) !== "[object Array]") throw new TypeError('_arr !== "[object Array]"')
let res = []
let val = null;
for (var i = 0; i < _arr.length; i++) {
val = _arr[i]
// проверка на `empty`
// эквивалентно if (Object.keys(_arr).indexOf(''+i) !== -1) {
if (i in _arr) {
// проверка на `undefined`
if (val === undefined) {
res.push('undefined')
} else {
// res.push(String(val))
res.push('' + val)
}
} else {
res.push('empty')
}
}
//---
return `[ ${res.join(', ')} ]`
}
1.4. для тех, кто не хочет использовать empty
и вообще не хочет читать многабукаф ибо
неожиданная встрече с empty
в чужом коде может вызвать головную боль
; ) поэтому делаем заметку в голове и кликаем по звёздочке вверху
пример создания массива заданной длинны с помощью конструктора Array
:
```js
let arr1 = Array(5) // == [,,,,,]
log(() => arr1) // [empty × 5]
let arr2 = Array.from({
length: 5
},(_key,_index) => undefined)
log(() => arr2) // [undefined, undefined, undefined, undefined, undefined]
```
для перебора используйте только for (var _i=0; i<arr.length; i++) {let val = arr[i] }
, ну почти, и да, я серьёзно!! посмотрите раздел 2.2
1.5 где ещё почитать
унарные операторы, в частности delete
удаление из массива
оператор spread
управление памятью
1.6 ищу информацию
CanIUse
- final trailing comma - последняя разделительная запятая ( игнорируется )
- empty элементы (по моему с IE11)
2. много практики
мой ответ и так содержит более 500 строк (кто не верит - нажмите править и посмотрите)
поэтому этот раздел будет иметь вид:
log(()=> функция) // результат в консоле
он не охватывает все возможные методы и ситуации, а лишь демонстрирует ключевые моменты
2.1 для иллюстрации "проблемы"
JQuery
http://api.jquery.com/jquery.each/
let arr = [,,,]
let count = null
console.log(`arr.length: ${arr.length}`)
{
console.log('$.each')
count = 0
$.each(arr,_k=>{
count++
})
console.log(`count: ${count}`) // count: 3
}
{
console.log('arr.forEach')
count = 0
arr.forEach(_k=>{
count++
})
console.log(`count: ${count}`) // count: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
underscorejs
http://underscorejs.ru/
Кроме того, Underscore умеет делегировать вызовы, т.е. если код выполняется в современном браузере, который имеет нативные реализации таких методов, как: forEach, map, reduce, filter, every, some и indexOf, то будут вызваны именно они.
ничего не предвещало проблемы - простая функция сложения
дана функция
let sum = (arrOfNumbers) => {
let res = 0
arrOfNumbers.forEach(_number => { res += _number })
return res
}
и массив
let arr = [ 10, 3, 5 ]
проверка с применением delete arr[1]
() => sum(arr) 15
проверка с применением arr[1] = undefined
() => sum(arr) NaN
исходники:
// /*
group(function sum() {
let sum = (arrOfNumbers) => {
let res = 0
arrOfNumbers.forEach(_number => { res += _number })
return res
}
let a = 10,b = 3,c = 5,Arr = () => [a,b,c]
group(function testDelete() {
let arr = Arr(); log(() => arrToString(arr)) // "[ 10, 3, 5 ]"
delete arr[1]
log(() => sum(arr)) // 15
})
group(function testUndefined() {
let arr = Arr(); log(() => arrToString(arr)) // "[ 10, 3, 5 ]"
arr[1] = undefined
log(() => sum(arr)) // NaN
})
})
// */
<script>let group=a=>{let b=console;b.group(a.name||((a.prototype)?a:'anonym'));try { a() } catch (d) { b.log(d) }b.groupEnd()};let log = a => a instanceof Function ? console.log(a,a()) : console.log(a); function arrToString(a) { if ('[object Array]' !== Object.prototype.toString.call(a)) throw new TypeError('_arr !== "[object Array]"'); let b = [],c = null; for (var d = 0; d < a.length; d++)c = a[d],d in a ? void 0 === c ? b.push('undefined') : b.push('' + c) : b.push('empty'); return `[ ${b.join(', ')} ]` }</script>
2.2 count
дано два массива
let a = [,,,'k3']
let b = [undefined,undefined,undefined,'k3']
суть теста - перебрать элементы массива и посчитать "тики"
результат:
count
() => Object.keys(a) ["3"]
() => Object.values(a) ["k3"]
() => Object.keys(b) (4) ["0", "1", "2", "3"]
() => Object.values(b) (4) [undefined, undefined, undefined, "k3"]
test [,,,'k3']
for() => count: 4
for in() => count: 1
for of() => count: 4
_arr.forEach() => count: 1
_arr.map() => count: 1
_arr.filter(_k => true)() => count: 1 перед фильтрацией [ empty, empty, empty, k3 ] после [ k3 ]
test [undefined,undefined,undefined,'k3']
for() => count: 4
for in() => count: 4
for of() => count: 4
_arr.forEach() => count: 4
_arr.map() => count: 4
_arr.filter(_k => true)() => count: 4 перед фильтрацией [ undefined, undefined, undefined, k3 ] после [ undefined, undefined, undefined, k3 ]
исходники:
group(function count() {
let a = [,,,'k3']
let b = [undefined,undefined,undefined,'k3']
log(() => Object.keys(a))
log(() => Object.values(a))
log(() => Object.keys(b))
log(() => Object.values(b))
let o = {
'for'(_arr) {
let count = 0
for (var i = 0; i < _arr.length; i++) {
count++
}
return(`count: ${count}`)
},
'for in'(_arr) {
let count = 0
for (var i in _arr) {
count++
}
return(`count: ${count}`)
},
'for of'(_arr) {
let count = 0
for (var i of _arr) {
count++
}
return(`count: ${count}`)
},
'_arr.forEach'(_arr) {
let count = 0
_arr.forEach(_k => {
count++
});
return(`count: ${count}`)
},
'_arr.map'(_arr) {
let count = 0
_arr.map(_k => {
count++
});
return(`count: ${count}`)
},
'_arr.filter(_k => true)'(_arr) {
let count = 0
let res = []
let before = `перед фильтрацией ${arrToString(_arr)}`
let after = null
_arr = _arr.filter(_k => {
count++
return true
});
res.push(`count: ${count}`)
after = `после ${arrToString(_arr)}`
res.push(before)
res.push(after)
return res.join(' ')
},
// 'for'(){},
}
let o2 = {
"test [,,,'k3']"() {
Object.values(o).forEach(_f => {
log(`${_f.name}() => ${_f(a)}`)
})
},
"test [undefined,undefined,undefined,'k3']"() {
Object.values(o).forEach(_f => {
log(`${_f.name}() => ${_f(b)}`)
})
},
}
Object.values(o2).forEach(group)
})
<script>let group = a => {let b = console;b.group('qwa ' + a.name || ((a.prototype) ? a : 'anonym'));try { a() } catch (d) { b.log(d) }b.groupEnd()};let log = a => a instanceof Function ? console.log(a,a()) : console.log(a); function arrToString(a) { if ('[object Array]' !== Object.prototype.toString.call(a)) throw new TypeError('_arr !== "[object Array]"'); let b = [],c = null; for (var d = 0; d < a.length; d++)c = a[d],d in a ? void 0 === c ? b.push('undefined') : b.push('' + c) : b.push('empty'); return `[ ${b.join(', ')} ]` }</script>
2.3 замеры времени
дано:
две матрицы (двумерный массив) matrixA
и matrixB
ширина = 1366
высота 768
это характеристики моего монитора
каждая из них в самом конце (нижний правый угол монитора) содержит единичку
matrixA
состоит из empty
matrixB
состоит из undefined
задача:
запустить таймер, найти единичку (в самом конце), и остановить таймер.
ответ в миллисекундах:
() => test_for_in(matrixA) 2
() => test_for_in(matrixB) 206
() => test_for_of(matrixA) 122
() => test_for_of(matrixB) 130
() => test_for(matrixA) 122
() => test_for(matrixB) 115
решение:
group(function matrix() {
let width = 1366
let height = 768
let a = _n => Array(_n)
let matrixA = Array.from({ length: height },() => a(width))
setLast(matrixA)
let b = _n => Array.from({ length: _n },() => undefined)
let matrixB = Array.from({ length: height },() => b(width))
setLast(matrixB)
log(() => test_for_in(matrixA))
log(() => test_for_in(matrixB))
log(() => test_for_of(matrixA))
log(() => test_for_of(matrixB))
log(() => test_for(matrixA))
log(() => test_for(matrixB))
function setLast(matrix) {
let lastArr = matrix[matrix.length - 1]
lastArr[lastArr.length - 1] = 1
}
function test_for_in(matrix) {
let start = null
let end = null
start = Date.now()
for (var i in matrix) {
for (var j in matrix[i]) {
if (matrix[i][j] = 1) {
end = Date.now() - start
}
}
}
return end
}
function test_for_of(matrix) {
let start = null
let end = null
start = Date.now()
for (var arr of matrix) {
for (var val of arr) {
if (val = 1) {
end = Date.now() - start
}
}
}
return end
}
function test_for(matrix) {
let start = null
let end = null
start = Date.now()
for (var i = 0; i < matrix.length; i++) {
for (var j = 0; j < matrix[i].length; j++) {
if (matrix[i][j] = 1) {
end = Date.now() - start
}
}
}
return end
}
})
<script>let group=a=>{let b=console;b.group(a.name||((a.prototype)?a:'anonym'));try { a() } catch (d) { b.log(d) }b.groupEnd()};let log = a => a instanceof Function ? console.log(a,a()) : console.log(a); function arrToString(a) { if ('[object Array]' !== Object.prototype.toString.call(a)) throw new TypeError('_arr !== "[object Array]"'); let b = [],c = null; for (var d = 0; d < a.length; d++)c = a[d],d in a ? void 0 === c ? b.push('undefined') : b.push('' + c) : b.push('empty'); return `[ ${b.join(', ')} ]` }</script>
2.4 персонально для @yar85
объект и массив помещённые в массив являются ссылками, операция delete
и присвоения undefined
удаляет только ссылку из массива. такие объекты удаляются из памяти в случае, а об этом читаем тут learn.javascript.ru/memory-management
{
let o = {
'ссылка на объект'() {
let arr = []
let o = { name: 'O' }
arr.push(o)
// delete arr[0] // log(()=>f) // () => o {name: "O"}
// arr[0] = undefined // log(()=>f) // () => o {name: "O"}
log(() => o)
},
'ссылка на массив'() {
let arr = []
let arr2 = ['arr2']
arr.push(arr2)
// delete arr[0] // log(()=>f) // () => arr2 ["arr2"]
// arr[0] = undefined // log(()=>f) // () => arr2 ["arr2"]
log(() => arr2)
},
}
Object.values(o).forEach(group)
}
2.5 Оператор расширения (spread)
group(function spread() {
let arr = [,,,'C']
let arr2 = [...arr]
log(() => arr2) // (4) [undefined, undefined, undefined, "C"]
})
<script>let group = a => {let b = console;b.group('qwa ' + a.name || ((a.prototype) ? a : 'anonym'));try { a() } catch (d) { b.log(d) }b.groupEnd()};let log = a => a instanceof Function ? console.log(a,a()) : console.log(a); function arrToString(a) { if ('[object Array]' !== Object.prototype.toString.call(a)) throw new TypeError('_arr !== "[object Array]"'); let b = [],c = null; for (var d = 0; d < a.length; d++)c = a[d],d in a ? void 0 === c ? b.push('undefined') : b.push('' + c) : b.push('empty'); return `[ ${b.join(', ')} ]` }</script>
= undefined
не высвобождает её поэтому другая программа свои данные туда поместить не может