javascript - trabajar - Insertar elementos de matriz en otra matriz
matriz bidimensional javascript (15)
Investigación y resultados
Para los hechos, se realiza una prueba de rendimiento en jsperf y se comprueban algunas cosas en la consola. Para la investigación, se utiliza el sitio web irt.org . A continuación se muestra una colección de todas estas fuentes juntas y una función de ejemplo en la parte inferior.
╔═══════════════╦══════╦═════════════════╦═══════════════╦═════════╦══════════╗
║ Method ║Concat║slice&push.apply ║ push.apply x2 ║ ForLoop ║Spread ║
╠═══════════════╬══════╬═════════════════╬═══════════════╬═════════╬══════════╣
║ mOps/Sec ║179 ║104 ║ 76 ║ 81 ║28 ║
╠═══════════════╬══════╬═════════════════╬═══════════════╬═════════╬══════════╣
║ Sparse arrays ║YES! ║Only the sliced ║ no ║ Maybe2 ║no ║
║ kept sparse ║ ║array (1st arg) ║ ║ ║ ║
╠═══════════════╬══════╬═════════════════╬═══════════════╬═════════╬══════════╣
║ Support ║MSIE 4║MSIE 5.5 ║ MSIE 5.5 ║ MSIE 4 ║Edge 12 ║
║ (source) ║NNav 4║NNav 4.06 ║ NNav 4.06 ║ NNav 3 ║MSIE NNav ║
╠═══════════════╬══════╬═════════════════╬═══════════════╬═════════╬══════════╣
║Array-like acts║no ║Only the pushed ║ YES! ║ YES! ║If have ║
║like an array ║ ║array (2nd arg) ║ ║ ║iterator1 ║
╚═══════════════╩══════╩═════════════════╩═══════════════╩═════════╩══════════╝
1 If the array-like object does not have a Symbol.iterator property, then trying
to spread it will throw an exception.
2 Depends on the code. The following example code "YES" preserves sparseness.
function mergeCopyTogether(inputOne, inputTwo){
var oneLen = inputOne.length, twoLen = inputTwo.length;
var newArr = [], newLen = newArr.length = oneLen + twoLen;
for (var i=0, tmp; i !== oneLen; ++i) {
tmp = inputOne[i];
if (tmp !== undefined || inputOne.hasOwnProperty(i)) newArr[i] = tmp;
}
for (var i=0, tmp; i !== oneLen; ++i) {
tmp = inputOne[i];
if (tmp !== undefined || inputOne.hasOwnProperty(i)) newArr[i] = tmp;
}
return newArr;
}
Como se vio anteriormente, yo diría que Concat es casi siempre el camino a seguir tanto para el rendimiento como para la capacidad de conservar la escasez de matrices de repuesto. Luego, para los arreglos tipo "me gusta" (como DOMNodeLists como document.body.children ), recomendaría usar el bucle for, ya que es el segundo método más eficaz y el único otro que conserva arreglos dispersos. A continuación, repasaremos rápidamente lo que se entiende por matrices dispersas y arrays para aclarar la confusión.
El futuro
Al principio, algunas personas pueden pensar que esto es una casualidad y que los proveedores de navegadores finalmente optimizarán Array.prototype.push para ser lo suficientemente rápido como para vencer a Array.prototype.concat. ¡INCORRECTO! Array.prototype.concat siempre será más rápido (al menos, en principio) porque es una simple copia y pega sobre los datos. A continuación se muestra un diagrama visual simplificado de cómo podría ser una implementación de matriz de 32 bits (tenga en cuenta que las implementaciones reales son MUCHO más complicadas)
Byte ║ Data here ═════╬═══════════ 0x00 ║ int nonNumericPropertiesLength = 0x00000000 0x01 ║ ibid 0x02 ║ ibid 0x03 ║ ibid 0x00 ║ int length = 0x00000001 0x01 ║ ibid 0x02 ║ ibid 0x03 ║ ibid 0x00 ║ int valueIndex = 0x00000000 0x01 ║ ibid 0x02 ║ ibid 0x03 ║ ibid 0x00 ║ int valueType = JS_PRIMITIVE_NUMBER 0x01 ║ ibid 0x02 ║ ibid 0x03 ║ ibid 0x00 ║ uintptr_t valuePointer = 0x38d9eb60 (or whereever it is in memory) 0x01 ║ ibid 0x02 ║ ibid 0x03 ║ ibid
Como se vio anteriormente, todo lo que necesita hacer para copiar algo así es casi tan simple como copiarlo byte por byte. Con Array.prototype.push.apply, es mucho más que un simple copiar y pegar sobre los datos. El ".apply" tiene que verificar cada índice en la matriz y convertirlo en un conjunto de argumentos antes de pasarlo a Array.prototype.push. Luego, Array.prototype.push tiene que asignar adicionalmente más memoria cada vez, y (para algunas implementaciones de navegadores) puede incluso recalcular algunos datos de búsqueda de posición para la dispersión.
Una forma alternativa de pensar en esto es esta. La matriz de origen uno es una gran pila de papeles grapados juntos. La matriz de origen dos es también otra gran pila de papeles. Sería más rápido para ti
- Vaya a la tienda, compre el papel necesario para obtener una copia de cada matriz de origen. Luego, coloque las pilas de papel de cada fuente en una máquina copiadora y engrape las dos copias resultantes.
- Vaya a la tienda, compre suficiente papel para una sola copia de la primera matriz de origen. Luego, copie la matriz de origen en el nuevo papel a mano, asegurándose de rellenar los espacios dispersos en blanco. Luego, vuelva a la tienda, compre suficiente papel para la segunda matriz de origen. Luego, vaya a través de la segunda matriz de origen y cópiela, asegurándose de que no haya espacios en blanco en la copia. Luego, engrapa todos los papeles copiados juntos.
En la analogía anterior, la opción # 1 representa Array.prototype.concat mientras que # 2 representa Array.prototype.push.apply. Probemos esto con un JSperf similar que se diferencie solo en que éste prueba los métodos sobre matrices dispersas, no matrices sólidas. Uno puede encontrarlo aquí mismo .
Por lo tanto, confío en que el futuro del rendimiento para este caso de uso particular no está en Array.prototype.push, sino en Array.prototype.concat.
Aclaraciones
Arreglos de repuesto
Cuando ciertos miembros de la matriz simplemente faltan. Por ejemplo:
// This is just as an example. In actual code,
// do not mix different types like this.
var mySparseArray = [];
mySparseArray[0] = "foo";
mySparseArray[10] = undefined;
mySparseArray[11] = {};
mySparseArray[12] = 10;
mySparseArray[17] = "bar";
console.log("Length: ", mySparseArray.length);
console.log("0 in it: ", 0 in mySparseArray);
console.log("arr[0]: ", mySparseArray[0]);
console.log("10 in it: ", 10 in mySparseArray);
console.log("arr[10] ", mySparseArray[10]);
console.log("20 in it: ", 20 in mySparseArray);
console.log("arr[20]: ", mySparseArray[20]);
Alternativamente, javascript le permite inicializar arrays de repuesto fácilmente.
var mySparseArray = ["foo",,,,,,,,,,undefined,{},10,,,,,"bar"];
Array-Likes
Un array-like es un objeto que tiene al menos una propiedad de length , pero no se inicializó con un new Array o [] ; Por ejemplo, los siguientes objetos se clasifican como de tipo matriz.
{0: "foo", 1: "bar", length:2}
document.body.children
new Uint8Array(3)
- Esto es similar a una matriz porque, aunque es una matriz (escrita), al forzarla a una matriz cambia el constructor.
(function(){return arguments})()
Observe lo que sucede utilizando un método que coacciona los arreglos de "me gusta" en matrices como slice.
var slice = Array.prototype.slice;
console.log(slice.call({0: "foo", 1: "bar", length:2}));
console.log(slice.call(document.body.children));
console.log(slice.call(new Uint8Array(3)));
console.log(slice.call( function(){return arguments}() ));
- NOTA: es una mala práctica dividir el argumento de la función debido al rendimiento.
Observe lo que sucede utilizando un método que no obliga a los arreglos de "me gusta" a formar matrices como concat.
var empty = [];
console.log(empty.concat({0: "foo", 1: "bar", length:2}));
console.log(empty.concat(document.body.children));
console.log(empty.concat(new Uint8Array(3)));
console.log(empty.concat( function(){return arguments}() ));
Tengo una matriz de datos dataArray que deseo introducir en una nueva matriz newArray . Excepto que no quiero que newArray[0] sea dataArray . Quiero introducir todos los elementos en la nueva matriz:
var newArray = [];
newArray.pushValues(dataArray1);
newArray.pushValues(dataArray2);
// ...
o mejor:
var newArray = new Array (
dataArray1.values(),
dataArray2.values(),
// ... where values() (or something equivalent) would push the individual values into the array, rather than the array itself
);
Así que ahora la nueva matriz contiene todos los valores de las matrices de datos individuales. ¿Hay alguna taquigrafía como pushValues disponibles para que no tenga que dataArray cada dataArray individual, agregando los elementos uno por uno?
Agregaré una respuesta más "a prueba de futuro"
En ECMAScript 6, puede utilizar el operador de propagación :
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
El operador de propagación aún no está incluido en todos los principales navegadores. Para la compatibilidad actual, vea esta tabla de compatibilidad (continuamente actualizada).
Sin embargo, puede utilizar el operador de propagación con Babel.js .
editar:
Vea la respuesta de Jack Giffin a continuación para obtener más comentarios sobre el rendimiento. Parece que concat es aún mejor y más rápido que el operador de propagación.
Con JavaScript ES6, puede usar el operador ... como un operador de difusión que esencialmente convertirá la matriz en valores. Entonces, puedes hacer algo como esto:
const myArray = [1,2,3,4,5];
const moreData = [6,7,8,9,10];
const newArray = [
...myArray,
...moreData,
];
Si bien la sintaxis es concisa, no sé cómo funciona esto internamente y cuáles son las implicaciones de rendimiento en matrices grandes.
Encontré una manera elegante de MDN
var vegetables = [''parsnip'', ''potato''];
var moreVegs = [''celery'', ''beetroot''];
// Merge the second array into the first one
// Equivalent to vegetables.push(''celery'', ''beetroot'');
Array.prototype.push.apply(vegetables, moreVegs);
console.log(vegetables); // [''parsnip'', ''potato'', ''celery'', ''beetroot'']
O puede utilizar la función de spread operator de ES6:
let fruits = [ ''apple'', ''banana''];
const moreFruits = [ ''orange'', ''plum'' ];
fruits.push(...moreFruits); // ["apple", "banana", "orange", "plum"]
Este es un código de trabajo y funciona bien:
var els = document.getElementsByTagName(''input''), i;
var invnum = new Array();
var k = els.length;
for(i = 0; i < k; i++){invnum.push(new Array(els[i].id,els[i].value))}
Hay varias respuestas que hablan sobre MDN . Aquí hay un claro ejemplo:
var dataArray1 = [1, 2];
var dataArray2 = [3, 4, 5];
var newArray = [ ];
Array.prototype.push.apply(newArray, dataArray1); // newArray = [1, 2]
Array.prototype.push.apply(newArray, dataArray2); // newArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(newArray)); // Outputs: [1, 2, 3, 4, 5]
Si tienes sintaxis ES6:
var dataArray1 = [1, 2];
var dataArray2 = [3, 4, 5];
var newArray = [ ];
newArray.push(...dataArray1); // newArray = [1, 2]
newArray.push(...dataArray2); // newArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(newArray)); // Outputs: [1, 2, 3, 4, 5]
La siguiente función no tiene problemas con la longitud de los arreglos y se desempeña mejor que todas las soluciones sugeridas:
function pushArray(list, other) {
var len = other.length;
var start = list.length;
list.length = start + len;
for (var i = 0; i < len; i++ , start++) {
list[start] = other[i];
}
}
desafortunadamente, jspref se niega a aceptar mis envíos, así que aquí están los resultados usando benchmark.js
Name | ops/sec | ± % | runs sampled
for loop and push | 177506 | 0.92 | 63
Push Apply | 234280 | 0.77 | 66
spread operator | 259725 | 0.40 | 67
set length and for loop | 284223 | 0.41 | 66
dónde
para loop y push es:
for (var i = 0, l = source.length; i < l; i++) {
target.push(source[i]);
}
Presione Aplicar:
target.push.apply(target, source);
operador de propagación:
target.push(...source);
y, finalmente, el ''conjunto de longitud y bucle'' es la función anterior
Lo siguiente me parece más simple:
var newArray = dataArray1.slice();
newArray.push.apply(newArray, dataArray2);
Como "push" toma un número variable de argumentos, puede usar el método de apply de la función push para empujar todos los elementos de otra matriz. Construye una llamada para empujar usando su primer argumento ("newArray" aquí) como "esto" y los elementos de la matriz como los argumentos restantes.
La slice en la primera declaración obtiene una copia de la primera matriz, por lo que no la modifica.
Actualizar Si está utilizando una versión de javascript con una porción disponible, puede simplificar la expresión de push para:
newArray.push(...dataArray2)
Más sencillo:
var newArray = dataArray1.slice(0);
Siempre que sus arreglos no sean enormes (vea la advertencia a continuación), puede usar el método push() del arreglo al que desea agregar valores. push() puede tomar múltiples parámetros, por lo que puede usar su método apply() para pasar el conjunto de valores que se enviarán como una lista de parámetros de función. Esto tiene la ventaja de usar concat() para agregar elementos a la matriz en lugar de crear una nueva matriz.
Sin embargo, parece que, para arreglos grandes (del orden de 100,000 miembros o más), este truco puede fallar . Para tales matrices, usar un bucle es un mejor enfoque. Consulte https://.com/a/17368101/96100 para obtener más información.
var newArray = [];
newArray.push.apply(newArray, dataArray1);
newArray.push.apply(newArray, dataArray2);
Es posible que desee generalizar esto en una función:
function pushArray(arr, arr2) {
arr.push.apply(arr, arr2);
}
... o agregarlo al prototipo de Array :
Array.prototype.pushArray = function(arr) {
this.push.apply(this, arr);
};
var newArray = [];
newArray.pushArray(dataArray1);
newArray.pushArray(dataArray2);
... o emule el método original push() permitiendo múltiples parámetros usando el hecho de que concat() , como push() , permite múltiples parámetros:
Array.prototype.pushArray = function() {
this.push.apply(this, this.concat.apply([], arguments));
};
var newArray = [];
newArray.pushArray(dataArray1, dataArray2);
Aquí hay una versión basada en bucle del último ejemplo, adecuada para matrices grandes y todos los principales navegadores, incluido IE <= 8:
Array.prototype.pushArray = function() {
var toPush = this.concat.apply([], arguments);
for (var i = 0, len = toPush.length; i < len; ++i) {
this.push(toPush[i]);
}
};
Tenemos dos matrices a y b. el código que hizo aquí es una matriz, un valor se inserta en la matriz b.
let a = [2, 4, 6, 8, 9, 15]
function transform(a) {
let b = [''4'', ''16'', ''64'']
a.forEach(function(e) {
b.push(e.toString());
});
return b;
}
transform(a)
[ ''4'', ''16'', ''64'', ''2'', ''4'', ''6'', ''8'', ''9'', ''15'' ]
Usa la función concat , así:
var arrayA = [1, 2];
var arrayB = [3, 4];
var newArray = arrayA.concat(arrayB);
El valor de newArray será [1, 2, 3, 4] ( arrayA y arrayB permanecen sin cambios; concat crea y devuelve una nueva matriz para el resultado).
en lugar de la función push () use la función concat para IE. ejemplo,
var a=a.concat(a,new Array(''amin''));
Aquí está la manera ES6
var newArray = [];
let dataArray1 = [1,2,3,4]
let dataArray2 = [5,6,7,8]
newArray = [...dataArray1, ...dataArray2]
console.log(newArray)
var a=new Array(''a'',''b'',''c'');
var b=new Array(''d'',''e'',''f'');
var d=new Array(''x'',''y'',''z'');
var c=a.concat(b,d)
¿Eso resuelve tu problema?