En este art\u00edculo, cubriremos en profundidad arrays<\/strong>, strings<\/strong> y objetos<\/strong> de JavaScript para que pueda beneficiarse de algunos de los m\u00e9todos est\u00e1ticos y de instancia m\u00e1s efectivos que ofrece el lenguaje.<\/p>\n\n\n JavaScript es un lenguaje fuertemente orientado a objetos. Sigue un modelo basado en prototipos, pero tambi\u00e9n ofrece una sintaxis de clase para permitir paradigmas t\u00edpicos de programaci\u00f3n orientada a objetos (POO).<\/p>\n\n\n\n En JavaScript, los strings y los arrays son objetos, y cada objeto en JavaScript es una plantilla que tiene sus m\u00e9todos y propiedades. Cada objeto hereda m\u00e9todos y propiedades de su prototipo. En JavaScript, cada objeto tiene acceso al prototipo de objeto.<\/p>\n\n\n\n Los m\u00e9todos est\u00e1ticos son m\u00e9todos que est\u00e1n disponibles en el nivel de clase, por ejemplo, el m\u00e9todo Object.freeze()<\/span>. Los m\u00e9todos de instancia est\u00e1n disponibles en el nivel de instancia; por ejemplo, una instancia creada a partir de un objeto Array tiene acceso a los m\u00e9todos de instancia como .join()<\/span>, pero no a los m\u00e9todos est\u00e1ticos.<\/p>\n\n\n Los strings se utilizan para contener datos que se pueden representar en forma de texto. Para crear un string, puede usar el constructor String()<\/strong> o un literal de cadena. Aqu\u00ed hay un ejemplo de ambas formas:<\/p>\n\n\n\n Ahora aprendamos m\u00e1s sobre los m\u00e9todos de instancia. Hay muchos m\u00e9todos de instancia, pero aqu\u00ed se mostraran siete m\u00e9todos que son los m\u00e1s importantes.<\/p>\n\n\n Muchas veces, cuando trabajamos con strings, queremos acceder a un car\u00e1cter en un cierto \u00edndice del string. Puede hacer esto con el m\u00e9todo charAt()<\/strong> o con la indexaci\u00f3n, de la misma manera que tratamos una array.<\/p>\n\n\n\n En JavaScript, el sistema de indexaci\u00f3n comienza en 0; por ejemplo, el primer car\u00e1cter de una cadena tiene un \u00edndice de 0 y as\u00ed sucesivamente.<\/p>\n\n\n Ahora digamos que queremos poner en may\u00fasculas o min\u00fasculas un string. Puede hacer esto utilizando los m\u00e9todos de instancia toUpperCase() y toLowerCase().<\/p>\n\n\n\n Puede usarlos para ver si dos strings contienen la misma palabra, por ejemplo, ‘Sam’ y ‘sam’. En realidad, ‘sam’ === ‘Sam’<\/span> se eval\u00faa como falso, mientras que ‘sam’.toLowerCase() ===<\/span> ‘Sam’.toLowerCase()<\/span> se eval\u00faa como verdadero.<\/p>\n\n\n A menudo es necesario unir strings en un programa para crear una nueva cadena de texto. Esto se llama concatenaci\u00f3n<\/strong>.<\/p>\n\n\n\n Ahora, para la concatenaci\u00f3n de strings, podemos usar el m\u00e9todo concat()<\/strong>. Se parece a lo siguiente. Una nota importante es que este m\u00e9todo devuelve una nueva cadena sin mutar la original.<\/p>\n\n\n\n Ahora, para encontrar el \u00edndice de un determinado car\u00e1cter o un conjunto de caracteres de un string, podemos usar el m\u00e9todo indexOf()<\/strong>. Esto devolver\u00e1 el primer \u00edndice donde aparece el car\u00e1cter o conjunto de caracteres pasados.<\/p>\n\n\n\n Un substring es un subconjunto o parte de otra cadena, o es una secuencia contigua de caracteres dentro de un string. Por ejemplo, \u00abSubstring\u00bb es un substring de \u00abSubstring en JavaScript\u00bb.<\/p>\n\n\n\n Ahora digamos que queremos obtener una substring de una cadena dada. Podemos usar el m\u00e9todo slice()<\/strong>. Slice es en realidad uno de los m\u00e9todos de String m\u00e1s importantes. Se usa para obtener substrings y tambi\u00e9n para copiar strings.<\/p>\n\n\n\n Slice toma dos par\u00e1metros opcionales: el primero es donde queremos comenzar a cortar y el segundo es donde queremos terminar la operaci\u00f3n de corte.<\/p>\n\n\n\n Supongamos que pasamos 1 y 10 como par\u00e1metros para el m\u00e9todo Slice. Luego, el m\u00e9todo devolver\u00e1 un substring que comienza en el \u00edndice 1 y termina en el \u00edndice 9.<\/p>\n\n\n\n Esto significa que el substring nunca incluye el car\u00e1cter en el \u00edndice final. Una nota importante es nunca pasar un \u00edndice final m\u00e1s alto que la longitud del string.<\/p>\n\n\n\n El \u00faltimo m\u00e9todo de string que cubriremos es el m\u00e9todo split()<\/strong>. Este m\u00e9todo toma un patr\u00f3n como argumento y divide el string en varios substrings. El patr\u00f3n describe d\u00f3nde se producen las divisiones. Este m\u00e9todo devuelve un array de estos substrings.<\/p>\n\n\n\n Es posible que utilice este m\u00e9todo para analizar una URL o ciertos strings.<\/p>\n\n\n\n Hay muchos m\u00e1s m\u00e9todos sobre string de los que se puede aprender, pero estos son con los que trabajar\u00e1 m\u00e1s. Puede obtener m\u00e1s informaci\u00f3n leyendo los documentos web oficiales de MDN<\/a>.<\/p>\n\n\n Al igual que otros lenguajes de programaci\u00f3n, los arrays de JavaScript le permiten almacenar una colecci\u00f3n de datos en una variable. Pero a diferencia de C o C++, los arrays se pueden devolver a partir de llamadas a funciones.<\/p>\n\n\n\n Los arrays de JavaScript son din\u00e1micos, por lo que puede agregar o eliminar elementos de un array. Tambi\u00e9n puede tener elementos de m\u00faltiples tipos de datos en un solo array.<\/p>\n\n\n\n Hablemos de c\u00f3mo crear arrays en JavaScript. Puede crear f\u00e1cilmente un array asignando una variable a corchetes vac\u00edos [] o utilizando el constructor Array()<\/strong>.<\/p>\n\n\n\n Ahora hablemos de siete m\u00e9todos de clase e instancia de array que se consideran los m\u00e1s \u00fatiles.<\/p>\n\n\n Para obtener el primer \u00edndice de un array dada donde aparece un elemento, podemos usar el m\u00e9todo indexOf()<\/strong>. Se ver\u00e1 as\u00ed. Si el argumento pasado a este m\u00e9todo no aparece en el array, devolver\u00e1 -1.<\/p>\n\n\n\n Como se mencion\u00f3 anteriormente, los arrays de JavaScript son din\u00e1micas. Entonces podemos agregar elementos usando el m\u00e9todo push()<\/strong> y eliminar el \u00faltimo elemento usando el m\u00e9todo pop()<\/strong>. Una nota importante es que ambos m\u00e9todos mutan el array original.<\/p>\n\n\n\n Ahora discutiremos algunos m\u00e9todos m\u00e1s avanzados, los introducidos por la actualizaci\u00f3n ES6.<\/p>\n\n\n Primero, supongamos que desea crear un array utilizando datos de otr array existente, por ejemplo, si tiene un array de objetos que representan a los empleados.<\/p>\n\n\n\n Cada objeto empleado tiene una propiedad de nombre. Y desea crear un array donde cada elemento sea el valor de la propiedad de nombre del objeto empleado en el mismo \u00edndice del array.<\/p>\n\n\n\n Aqu\u00ed es donde entra en juego el m\u00e9todo map()<\/strong>. Toma una funci\u00f3n callback. Map crea un nuevo array y nunca muta el array original, y la funci\u00f3n callback expresa lo que desea hacer con los datos del array original. Se ver\u00e1 as\u00ed:<\/p>\n\n\n\n \u00bfEst\u00e1 cansado de las habituales iteraciones for<\/span> ? Son un poco aburridos, ciertamente. Afortunadamente, el m\u00e9todo forEach()<\/strong> est\u00e1 aqu\u00ed para ayudar.<\/p>\n\n\n\n Este m\u00e9todo toma una funci\u00f3n callback como argumento y no devuelve nada. Itera sobre el arreglo y ejecuta una determinada tarea en cada elemento del arreglo. La funci\u00f3n callback expresa la tarea. El c\u00f3digo para esto se ver\u00e1 as\u00ed:<\/p>\n\n\n\n Ahora digamos que tenemos un array de n\u00fameros y que queremos crear un array de solo los n\u00fameros que pasan una determinada condici\u00f3n.<\/p>\n\n\n\n En este caso, podemos usar el m\u00e9todo filter()<\/strong> que tambi\u00e9n toma una funci\u00f3n callback como argumento. La funci\u00f3n callback devuelve un booleano: verdadero si el elemento pasa la prueba; de lo contrario, falso. Solo los elementos que pasen estar\u00e1n en el array generado y la funci\u00f3n callback expresa la prueba. As\u00ed es como funciona:<\/p>\n\n\n\n Ahora digamos que tenemos un aray y queremos verificar si hay al menos un n\u00famero que pasa una determinada prueba. Aqu\u00ed viene el m\u00e9todo some().<\/p>\n\n\n\n Este m\u00e9todo toma una funci\u00f3n callback como argumento y devuelve un valor booleano que es verdadero si al menos un elemento del array pasa la prueba y, de lo contrario, es falso. La funci\u00f3n callback expresa la prueba y se ver\u00e1 de la siguiente manera:<\/p>\n\n\n\n La ordenaci\u00f3n es el proceso de organizar los datos en un orden significativo para que pueda analizarlos de manera m\u00e1s efectiva.<\/p>\n\n\n\n Cuando hablamos de arrays, tenemos que mencionar la ordenaci\u00f3n. En JavaScript, el m\u00e9todo sort() ordena los arrays en su lugar y devuelve la referencia al mismo array. Este m\u00e9todo muta el array, el orden de ordenaci\u00f3n predeterminado es ascendente.<\/p>\n\n\n\n Puede implementar su propia l\u00f3gica de ordenaci\u00f3n pasando una funci\u00f3n callback que exprese una comparaci\u00f3n entre dos elementos y devuelva un n\u00famero. Si el n\u00famero devuelto es positivo, el primero de los dos elementos comparados aparecer\u00e1 primero en el array ordenado.<\/p>\n\n\n\n Hay muchos m\u00e9todos de arrays interesantes que no se mencionaron y vale la pena invertir tiempo en aprenderlos. Si quiere hacerlo, puede visitar los documentos oficiales de MDN<\/a>.<\/p>\n\n\n Si desea ser un buen desarrollador de JavaScript, realmente debe tener una comprensi\u00f3n decente de los objetos y la forma en que funcionan.<\/p>\n\n\n\n Casi todos los objetos que se crean en JavaScript heredan m\u00e9todos del prototipo de objeto global<\/span> que est\u00e1 disponible globalmente para cada objeto en JavaScript. Una excepci\u00f3n son los objetos prototipo nulos de los que no vamos a hablar. Todos los m\u00e9todos de los que vamos a hablar son en su mayor\u00eda est\u00e1ticos.<\/p>\n\n\n\n Primero, hablemos sobre c\u00f3mo crear objetos usando un conjunto de llaves { } o el constructor<\/strong> de objetos. Esto es lo que parece:<\/p>\n\n\n\n Ahora digamos que queremos copiar un objeto. Aqu\u00ed viene el m\u00e9todo est\u00e1tico assign()<\/strong> para ayudarnos a hacer esto. Te mostrar\u00e9 c\u00f3mo funciona esto y una mejor manera de hacerlo. Tambi\u00e9n hablar\u00e9 sobre algunos errores comunes que cometen muchos desarrolladores cuando intentan copiar objetos.<\/p>\n\n\n\n Un error com\u00fan es asignar una variable a un objeto directamente. El problema con esto es que los objetos se asignan por referencia y no por valor. Entonces, cualquier cambio mutar\u00e1 el objeto original.<\/p>\n\n\n\n Digamos ahora que queremos hacer un objeto inmutable. Para esto podemos usar el m\u00e9todo est\u00e1tico freeze()<\/strong> que hace imposible agregar propiedades, modificar o eliminar cualquiera de los prototipos, m\u00e9todos y propiedades del objeto congelado.<\/p>\n\n\n\n Para ver si un objeto est\u00e1 congelado, podemos usar el m\u00e9todo est\u00e1tico isfrozen().<\/p>\n\n\n\n Ahora, para obtener una lista de ciertas propiedades del objeto, podemos llamar al m\u00e9todo est\u00e1tico keys()<\/strong>. Para obtener una lista de los valores correspondientes a sus propiedades, podemos llamar al m\u00e9todo est\u00e1tico values()<\/strong>. Una nota importante es que la lista es un array<\/p>\n\n\n\nEsto es lo que cubriremos en esta gu\u00eda:<\/h2>\n
\n
\nM\u00e9todos de instancia y de clase<\/h2>\n\n\n
\nC\u00f3mo usar strings en JavaScript<\/h2>\n\n\n
\/\/ Usando un constructor\n\nlet string1 = String('String Creation');\n\n\/\/ Usando un string literal\n \nlet string2 = 'String Creation';<\/code><\/pre><\/div>\n\n\n\nEl m\u00e9todo .charAt()<\/h3>\n\n\n
\/\/ Digamos que queremos acceder al primer caracter de un string\n \nlet string = 'Hello World';\n \n\/\/ usando indexaci\u00f3n\n \nlet first1 = string[0]; \/\/ output 'H' (la indexaci\u00f3n comienca en el 0)\n \n\/\/ usando el m\u00e9todo charAt()\n \nlet first2 = string.charAt(0); \/\/ output 'H'<\/code><\/pre><\/div>\n\n\n\nLos m\u00e9todos .toUpperCase() y .toLowerCase()<\/h3>\n\n\n
let string = 'Hello';\n \n\/\/ Pasar string a min\u00fasculas\n \nlet lowerCase = string.toLowerCase(); \/\/ output 'hello'\n \n\/\/ Pasar el string a may\u00fasculas\n \nlet upperCase = string.toUpperCase(); \/\/ output 'HELLO'<\/code><\/pre><\/div>\n\n\n\nEl m\u00e9todo .concat()<\/h3>\n\n\n
let string = 'Hello';\n\n\/\/ Concatenaci\u00f3n de strings usando el m\u00e9todo concat\n \nlet string1 = string.concat(' World'); \/\/ output 'Hello World'<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .indexOf()<\/h3>\n\n\n
let string = 'Hello World';\n\n\/\/ Encontrar el \u00edndice donde 'H' ocurre por primera vez\n \nlet firstH = string.indexOf('H'); \/\/ output 0\n\n\/\/ Encontrar el primer \u00edndice donde 'World' ocurre por primera vez\n \nlet firstWorld = string.indexOf('World'); \/\/ output 6\n\n\/\/ En el caso en el que un caracter o un set de caracteres\n\/\/ no ocurra en el string el m\u00e9todo retorna -1\n \nlet notThere = string.indexOf('Z'); \/\/ output -1<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .slice()<\/h3>\n\n\n
let string = 'Hello World';\n\n\/\/ para chequear el largo del string podemos usar\n\/\/ la propiedad de instancia length\n \nlet length = string.length; \/\/ output 11\n\n\/\/ cortar par obtener el substring desde el index 1 -> 9\n \nlet string1 = string.slice(1 , 10); \/\/ output 'ello Worl'\n\n\/\/ si no pasamos ning\u00fan par\u00e1metro se generar\u00e1 \n\/\/ una copia del string original sin ninguna mutaci\u00f3n\n \nlet copy = string.slice(); \/\/ output 'Hello World'<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .split()<\/h3>\n\n\n
let string = 'Hello World';\n\n\/\/ Dividir un string en palabras\n\/\/ Esto se puede hacer cuando el patr\u00f3n pasado en un espacio\n \nlet words = string.split(' '); \/\/ output ['Hello' , 'World']\n\n\/\/ Cuando el par\u00e1metro pasado es un string vaci\u00f3, el arreglo\n\/\/ de salida contendr\u00e1 cada uno de los caracteres del \n\/\/ string original\n \nlet chars = string.split(''); \n\n\/\/ output ["H","e","l","l","o"," ","W","o","r","l","d"]<\/code><\/pre><\/div>\n\n\n
\n\n\n
\nC\u00f3mo usar arrays en JavaScript<\/h2>\n\n\n
\/\/ Creando un array con el constructor\n \nlet arr1 = Array();\n \n\/\/ M\u00e9todo preferido\n \nlet arr2 = [];<\/code><\/pre><\/div>\n\n\n\nEl m\u00e9todo .indexOf()<\/h3>\n\n\n
let array = [1, 2, 3];\n\n\/\/ Encontrar el \u00edndice donde 1 ocurre por primera vez\n \nlet first1 = array.indexOf(1); \/\/ output 0\n\n\/\/ Encontrar 4 en el array\n \nlet first4 = array.indexOf(4); \/\/ output -1<\/code><\/pre><\/div>\n\n\nLos m\u00e9todos .push() y .pop()<\/h3>\n\n\n
let array = [1, 2, 3];\n\n\/\/ Agregar 4 al array\n \narray.push(4)\n\nconsole.log(array) \/\/ output [1, 2, 3, 4]\n\n\/\/ Volver al array original\n \nlet removedElement = array.pop() \/\/ output 4\n\nconsole.log(array) \/\/ output [1, 2, 3]<\/code><\/pre><\/div>\n\n\n\nEl m\u00e9todo .map()<\/h3>\n\n\n
let arr= [{name : 'joe'} , {name : 'john'}];\n\n\/\/ Lo preferible es usar una funci\u00f3n arrow\n\nlet namesArr = arr.map(elem => elem.name); \/\/ output ['joe' , 'john']<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .forEach()<\/h3>\n\n\n
let arr= [1, 2, 3];\n\n\/\/ mostrar cada elemento en consola\n \narr.forEach(elem => console.log(elem));\n\n\/\/ output \n\/\/ 1\n\/\/ 2\n\/\/ 3<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .filter()<\/h3>\n\n\n
let arr = [1, 2, 3, 4, 5];\n\n\/\/ Crear un array de n\u00fameros mayores a 3\n \nlet filteredArray = arr.filter(elem => elem > 3); \/\/ output [4, 5]<\/code><\/pre><\/div>\n\n\nEll m\u00e9todo .some()<\/h3>\n\n\n
let arr = [1, 2, 3, 4, 5];\n\n\/\/ Verificar si al menos un elemento es mayor a 4\n \nlet bool = arr.some(elem => elem > 4); \/\/ output true<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .sort()<\/h3>\n\n\n
let arr = [1, 2, 4, 3];\n\n\/\/ ordenando en orden ascendente\n \narr.sort();\n\nconsole.log(arr); \/\/ [1, 2, 3, 4]\n\n\/\/ usando un orden customizado para ordenar\n\/\/ de manera descendente\n \narr.sort((elem1 , elem2) => elem2 - elem1);\n\nconsole.log(arr); \/\/ output [4, 3, 2, 1]<\/code><\/pre><\/div>\n\n\n
\n\n\n
\nC\u00f3mo usar objetos en JavaScript<\/h2>\n\n\n
\/\/ Creando un objeto con el constructor\n \nlet obj1 = Object();\n\n\/\/ Creando un objeto con un conjunto de llaves\n \nlet obj2 = {};<\/code><\/pre><\/div>\n\n\nEl m\u00e9todo .assign()<\/h3>\n\n\n
let obj = {age : 18};\n\n \/\/ Copiando usando el m\u00e9todo assign\n \nlet new1 = {};\n\nObject.assign(new1 , obj);\n\nconsole.log(new1); \/\/ output {age : 18}\n\n\/\/ Se puede hacer lo mismo con el spread operator\n \nlet new2 = {...obj}; \/\/ output {age : 18}<\/code><\/pre><\/div>\n\n\n\nlet obj = {age : 18};\n\nlet obj1 = obj;\n\nobj1.age = 17;\n\nconsole.log(obj); \/\/ output {age : 17}<\/code><\/pre><\/div>\n\n\nLos m\u00e9todos .freeze() y .isFrozen()<\/h3>\n\n\n
let obj = {age : 18};\n\nObject.freeze(obj);\n\n\/\/ Tratar de mutar el objeto\n \nobj.age = 17; \/\/ Devuelve error en strict mode\n\nlet isFrozen = Object.isFreezed(obj); \/\/ output true<\/code><\/pre><\/div>\n\n\nLos m\u00e9todos .keys() y .values()<\/h3>\n\n\n
let obj = {name : 'John Doe' ,age : 45};\n\nlet keys = Object.keys(obj); \/\/ output ['name', 'age']\n\nlet values = Object.values(obj); \/\/ output ['John Doe', 45]<\/code><\/pre><\/div>\n\n\n
\n\n\n