Técnicas de uso avanzado para funciones de división y unión en JavaScript

JavaScript tiene dos funciones bastante poderosas y populares entre los desarrolladores: Split and Join. Estas dos funciones pueden intercambiar tipos de cadenas y matrices, es decir, las matrices se pueden serializar en cadenas y viceversa. Podemos jugar completamente estas dos funciones. Exploremos algunas aplicaciones interesantes aquí. Primero, presentemos estas dos funciones:

String.prototype.split (separador, límite)

El separador divide la cadena en una matriz, y el límite de parámetro opcional define la longitud máxima de la matriz generada.

 "85 @@ 86 @@ 53" .split ('@@'); // ['85', '86', '53']; "plátano" .split (); //["banana"]; // (gracias Peter (-:) "Presidente, Senado, Cámara" .Split (',', 2); // ["Presidente", "Senado"] Array.Prototype.Join (Separador)

El separador de parámetros opcional convierte la matriz en una cadena. Si no se proporciona el separador, la coma se utilizará como el valor del parámetro (al igual que la función tostring de la matriz).

 ["Slugs", "Snails", "Puppy Dog's Tails"]. Únete ('y'); // "Babosas y caracoles y colas de Puppy Dog" ['Giants', 4, 'Rangers', 1] .Join (''); // "Giants 4 Rangers 1" [1962,1989,2002,2010] .Join ();

Estas son algunas de las aplicaciones:

reemplazo

Esta función simple no es como la función de reemplazo nativo, puede reemplazarse como una subcadena global sin usar expresiones regulares.

 String.prototype.replaceall = function (find, reemplazar) {return this.split (find) .Join (reemplazarwith); } "El hombre y el plan" .Replaceall ('el', 'a'); // "Un hombre y un plan"

Para cadenas pequeñas, es un poco más débil que las funciones nativas reemplazadas por un solo carácter (aquí se refiere a dos funciones adicionales de una expresión regular), pero bajo Mozilla, si el personaje excede 2 o 3 caracteres, esta función de uso funciona más rápido que la expresión regular.

Ocurrencias

Esta función puede coincidir el número de sustras. Además, este tipo de función es muy directa y no requiere regularidad.

 String.prototype.occurences = function (find, matchcase) {var text = this; Matchcase || (find = find.tolowerCase (), text = text.tolowercase ()); return text.split (buscar) .length-1; } document.body.innerhtml.Octurences ("div"); // La página de inicio de Google tiene 114document.body.innerhtml.Octurences ("/div"); // La página de inicio de Google tiene 57 "Inglaterra involucra a sus ingenieros" .Currences ("Eng", verdadero); // 2REPEAT

Esta función se toma prestada de Prototype.js:

 String.prototype.repeat = function (tiempos) {return new Array (Times+1) .Join (this); } "Go" .repeat (3) + "Giants!"; // "¡Ve Go Giants!"

La belleza de la misma radica en el uso de la función de unión. El enfoque está en este valor del parámetro del separador, y luego esta matriz básica solo contiene algunos valores de valor indefinidos. Para ilustrar esto más claramente, recreemos el ejemplo anterior:

 [indefinido, indefinido, indefinido, indefinido] .Join ("Go") + "Giants

Recuerde que antes de unirse, cada elemento de matriz se convertirá en una cadena (aquí hay una cadena vacía). La aplicación de esta función de repetición es una de las pocas aplicaciones inviable que definen matrices a través de literales de matriz.

Usar el parámetro de límite

Raramente uso el límite de parámetros opcionales de la función dividida. Aquí hay un ejemplo usando este límite:

 var getManain = function (url) {return url.split ('/', 3) .Join ('/');} getDomain ("http://www.aneventapart.com/2010/seattle/slides/"); // "http: //www.anev entapart.com "getDomain (" https://addons.mozilla.org/en-us/firefox/bookmarks/ "); //" https://addons.mozilla.org "

Modificar miembros numéricos

Si mezclamos clientes habituales, unir y dividir pueden modificar fácilmente los miembros de la matriz. Sin embargo, esta función no es tan difícil como se imagina. Su función principal es eliminar la cadena especificada frente a cada miembro de la matriz dada.

 var dec. return arr.Join (). Split (regex) .Slice (1);} // Haga una matriz que contenga solo la parte numérica de los números de vuelo Beadmbers (["BA015", "BA129", "BA130"]; // ["015", "129", "130"]

Desafortunadamente, esta función falla en IE porque eliminan por error al primer miembro vacío de Split. Ahora corrigamos esta función:

 var dec. resultado var = arr.Join (). Split (regex); Resultado de retorno [0] && Result || resultado.slice (1); // es decir, solución alternativa}

¿Por qué utilizamos esta técnica en lugar de la función de mapa de la matriz en emascript 5?

 ["BA015", "BA129", "BA130"]. MAP (function (e) {return e.replace ('ba', '')}); // ["015", "129", "130"]

En uso real, cuando sea factible, generalmente uso la función de mapa nativo (no disponible debajo de IE <9). El siguiente ejemplo solo se usa como herramienta de aprendizaje, pero vale la pena señalar que la sintaxis de llamadas de unión y división es más concisa y directa. Lo más interesante es que también es muy eficiente, especialmente para pequeñas matrices, que es más eficiente en FF y Safari. Para matrices grandes, las funciones de mapas son más adecuadas. (En todos los navegadores), habrá menos llamadas de funciones para unir y dividir las funciones.

 // Prueba 1-usando Join/Splitvar arr = [], x = 1000; while (x--) {arr.push ("ba" + x);} var decaseadMembers = function (arr, regex) {return arr.join (). divis (secex) .slice (1);} var regex = regexp ("[,]?" + 'ba'); vAR = + date, y dat, y dat, y neo dat, y neoT, y neoT, y neo dat, y neoT, y neoT = + dat, y/ + date, y neoT = + dat, y/ + dat, y/ + dat, y neoT, y/ + date, y/ + date, y neoT = + date, y/ + date, y neoT = + date, y neoT = + date, y/ + date, y/ + date, y neoT = + dat. 1000; while (y--) {dradeadMembers (arr, regex);}; +nueva fecha-timer; // ff 3.6 733ms // ch 7 464ms // sa 5 701ms // ie 8 1256ms // prueba 2-usando la función de mapa nativa Arr = [], x = 1000; while (x--) {Arr.push ("Ba" +x); Fecha, y = 1000; while (y--) {arr.map (function (e) {return e.replace ('ba', '' ')});}+nueva fecha-temporizador; // ff 3.6 2051ms // cr 7 732ms // sf 5 1520ms // iE 8 (no admitido)

Coincidencia de patrones

Las matrices deben realizar constantemente la coincidencia de patrones, pero las cadenas no. Las expresiones regulares se pueden usar en cadenas, pero no en matrices. El poder de convertir matrices en cadenas para la coincidencia de patrones está mucho más allá del alcance de este artículo. Echemos un vistazo a una aplicación simple de ella.

Suponga que los resultados de la carrera de la carrera deben salvarse a la matriz. El propósito es colocar a los concursantes y su tiempo de grabación alternativamente en una matriz. Podemos usar expresiones de unión y regulares para verificar si este patrón de almacenamiento es correcto. El siguiente código es descubrir el tiempo de registro perdido buscando dos nombres consecutivos.

 VAR Results = ['Sunil', '23: 09 ',' Bob ', '22: 09', 'Carlos', 'Mary', '22: 59 ']; var BadData = Results.Join (', '). Match (/[A-Za-Z]+, [A-Za-Z]+/G); Baddata; // ["Carlos, Mary"]