No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES7: exponentiation operator y array includes

18/35
Recursos

La siguiente versi贸n de ECMAScript fue publicada en 2016. Las siguientes caracter铆sticas de ES7 o ES2016 que aprender谩s son: el m茅todo includes de arrays y el operador de potenciaci贸n.

Operador de potenciaci贸n

El operador de potenciaci贸n (exponential operator) consiste en elevar una base a un exponente utilizando el doble asterisco (**).

base ** exponente

Por ejemplo, el cubo de 2 es igual a 8, matem谩ticamente expresado ser铆a: $2^3=8$.

const potencia = 2**3

console.log(potencia) // 8

M茅todo includes

El m茅todo includes determina si un array o string incluye un determinado elemento. Devuelve true o false, si existe o no respectivamente.

Este m茅todo recibe dos argumentos:

  • El elemento a comparar.
  • El 铆ndice inicial desde donde comparar hasta el 煤ltimo elemento.

脥ndices positivos y negativos

Los 铆ndices positivos comienzan desde 0 hasta la longitud total menos uno, de izquierda a derecha del array.

[0,1,2,3, ...., lenght-1]

Los 铆ndices negativos comienzan desde -1 hasta el negativo de la longitud total del array, de derecha a izquierda.

[-lenght, ...,  -3, -2, -1]

Ejemplos utilizando el m茅todo includes

El m茅todo includes se utiliza para arrays y strings. El m茅todo es sensible a may煤sculas, min煤sculas y espacios.

//Utilizando strings
const saludo = "Hola mundo"

saludo.includes("Hola") // true
saludo.includes("Mundo") // false
saludo.includes(" ") // true
saludo.includes("Hola", 1) // false
saludo.includes("mundo", -5) // true
// Utilizando arrays
const frutas = ["manzana", "pera", "pi帽a", "uva"]

frutas.includes("manzana") // true
frutas.includes("Pera") // false
frutas.includes("sand铆a") // false
frutas.includes("manzana", 1) // false
frutas.includes("pi帽a", -1) // false
frutas[0].includes("man") // true

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 25

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Includes, pero en objetos

馃敆 En objetos tambi茅n existen formas para saber si existe una propiedad. Estos son:

  • La palabra reservada in
  • El m茅todo de objetos hasOwnProperty
  • El m茅todo Object.hasOwn, que recibe el objeto y la propiedad a evaluar.
const letras = { a: 1, b: 2, c: 3 }

"a" in letras // true
letras.hasOwnProperty("a") // true
Object.hasOwn(letras, "a") // true

.
Se diferencian en que in eval煤a todas las propiedades del objeto y del prototipo.
.
El m茅todo hasOwnProperty eval煤a solamente las propiedades del objeto. Sin embargo puede que colisione con alguna otra propiedad en el prototipo, por lo que la 煤ltima versi贸n de ECMAScript lanz贸 Object.hasOwn y se recomienda utilizar este si el navegador en el que trabajas lo soporta: Can I use?.

const letras = { a: 1, b: 2, c: 3 }

"toString" in letras // true
letras.hasOwnProperty("toString") // false
Object.hasOwn(letras, "toString") // false

Retomando el ejemplo que puse en la clase de spread operators, cual crees que sea el resultado de esto:

let familyEmoji = [..."馃懆鈥嶐煈┾嶐煈︹嶐煈"]
console.log(
	familyEmoji.includes("馃懆"),
	familyEmoji.includes("馃懇"),
	familyEmoji.includes("馃懄")
);

Respondelo y luego compruebalo en tu consola! 馃く

Hola Chic@s 馃槂

**ES7: **

  • Exponentiation operator
const data = 3 ** 4;
console.log(data);
  • Array includes
let numbers = [1, 3, 4, 6, 7, 8];
console.log(numbers.includes(9))

const list = ["oscar", "David", "Ana"]
console.log(list.includes("Oscar"))

Por si a alguno le quedo la duda hice el ejercicio para pasar a lowercase el array usando .map 馃槂 (No se si .map salio en una nueva version mas adelante de la es7, pero pueden ver el curso de arrays de platzi de la ruta de JS! Ahi los explican muy bien!)

const list = ["Oscar", "Pedro", "Jose"];
const newList = list.map(item => item.toLowerCase());
console.log(newList);
console.log(newList.includes('oscar'));

Asignaci贸n de potencia

馃巿 Tambi茅n puedes utilizar el operador de potencia para volver a asignar un valor a una variable.

let a = 3

a = a ** 2 // 9
// lo mismo que
a **= 2 // 9

鈥渘o hay tanto inconveniente, imaginemos que esto es algo que de alguna manera estamos teniendo, y ahora queremos hacer algo, en este caso queremos preguntar si est谩 ah铆.鈥 Esto es tan ambiguo, ser铆a mejor si llamas a cada cosa por su nombre espec铆ficamente, as铆 sabremos de qu茅 estas hablando.

18/35 ES7: exponentiation operator y array includes

En ECMAScript 2016 o ES7 se imprementaron dos caracter铆stica como lo son:

  • el opertador de potenciaci贸n
  • el metodo includes para arrays y strings

El operador de potenciaci贸n se utiliza para elevar una base a un exponente utilizando el doble aster铆sco (**), mientras que el m茅todo includes se utiliza para determinar si un array o string incluye un elemento espec铆fico, devolviendo true o false seg煤n sea el caso.

En este m茅todo recibe dos argumentos: el elemento a comparar y el 铆ndice inicial desde donde comparar hasta el 煤ltimo elemento. Los 铆ndices positivos comienzan desde 0 hasta la longitud total menos uno, de izquierda a derecha del array, mientras que los 铆ndices negativos comienzan desde -1 hasta el negativo de la longitud total del array, de derecha a izquierda.

// Operador de potenciaci贸n
const cubo = 2**3; // 8
const raizCuadrada = 16**(1/2); // 4

// M茅todo includes con arrays
const frutas = ['manzana', 'pera', 'uva'];
const tieneManzana = frutas.includes('manzana'); // true
const tieneSandia = frutas.includes('sandia'); // false
const desdeIndice1 = frutas.includes('pera', 1); // true
const desdeIndice2 = frutas.includes('manzana', 2); // false

// M茅todo includes con strings
const saludo = 'Hola mundo';
const tieneHola = saludo.includes('Hola'); // true
const tieneMundo = saludo.includes('Mundo'); // false
const desdeIndice1 = saludo.includes('Hola', 1); // false
const desdeIndiceNegativo = saludo.includes('mundo', -5); // true
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12];

console.log(numbers.includes(4)) // true
console.log(numbers.includes(445)) // false

let names = ['mike', 'oscar', 'DAVID']
console.log(names.includes('david')) // false


A Javascript no le falta sino tener ba帽o incorporado

ES7: Operador de Exponenciaci贸n y Array Includes

Vamos a ver estas implementaciones en ES7, que son m谩s faciles de leer en nuestro c贸digo.


Operador de Exponenciaci贸n (**)


El operador de exponenciaci贸n (**), introducido en ES7, te permite elevar un n煤mero a una potencia de una manera m谩s concisa y legible. Antes de la introducci贸n de este operador, se sol铆a realizar el c谩lculo de la potencia utilizando la funci贸n Math.pow(). Veamos un ejemplo comparativo:

// Antes de ES7
const resultadoAntes = Math.pow(2, 3); // 2 elevado a la 3, es decir, 8

// Con el operador de exponenciaci贸n en ES7
const resultadoAhora = 2 ** 3; // Tambi茅n es 8


Como puedes ver, el operador de exponenciaci贸n simplifica la sintaxis y hace que el c贸digo sea m谩s directo.


M茅todo 鈥渋ncludes鈥 en Arrays

Antes de ES7


Antes de la introducci贸n del m茅todo includes en JavaScript, la forma m谩s com煤n de verificar si un elemento estaba presente en un arreglo era utilizando el m茅todo indexOf. El m茅todo indexOf devuelve el 铆ndice del primer elemento encontrado en el arreglo, y si no encuentra el elemento, devuelve -1. Pod铆as utilizar esta caracter铆stica para determinar si un elemento estaba en el arreglo o no. Aqu铆 tienes un ejemplo:

const frutas = ["manzana", "banana", "pera", "naranja"];

const contieneBanana = frutas.indexOf("banana") !== -1; // Retorna true
const contieneSandia = frutas.indexOf("sandia") !== -1; // Retorna false


Este enfoque, aunque funcional, ten铆a algunas limitaciones. Primero, necesitabas comparar el resultado de indexOf con -1 para determinar si el elemento estaba presente o no, lo que pod铆a ser menos intuitivo que simplemente obtener un valor booleano. Adem谩s, si necesitabas verificar si un elemento estaba en el arreglo varias veces, ten铆as que repetir el c贸digo de indexOf.

El m茅todo includes aborda estas limitaciones al proporcionar una sintaxis m谩s clara y directa para verificar la presencia de elementos en un arreglo, sin la necesidad de comparar expl铆citamente con -1 y con una sola llamada al m茅todo.
\


Includes en ES7


El m茅todo 鈥渋ncludes鈥 es una forma conveniente de verificar si un elemento existe dentro de un arreglo. Retorna un valor booleano (true o false) basado en si el elemento se encuentra en el arreglo o no. Aqu铆 tienes otro ejemplo:

const frutas = ["manzana", "banana", "pera", "naranja"];

const contieneBanana = frutas.includes("banana"); // Retorna true
const contieneSandia = frutas.includes("sandia"); // Retorna false


Este m茅todo es 煤til cuando necesitas saber si un valor en particular est谩 presente en un arreglo sin tener que recorrer manualmente cada elemento del arreglo.

En resumen, el operador de exponenciaci贸n simplifica el c谩lculo de potencias en JavaScript, y el m茅todo 鈥渋ncludes鈥 te permite verificar f谩cilmente si un elemento se encuentra en un arreglo, mejorando la legibilidad y la eficiencia de tu c贸digo.


Espero sea de utilidad! 馃懆鈥嶐煉

Si llegaste hasta ac谩, vas por la mitad del curso. 馃槉 隆No te rindas! 馃槑

馃鉁║n uso interesante

Que le podemos dar a includes() es el de comprobar si existe un elemento duplicado en un array.
Esto debido a la opci贸n que nos da includes() de comprobar la existencia de un elemento a partir de una determinada posici贸n. Ejemplo:
Supongamos que tenemos el array:

 const names = ['Cris', 'Juan', 'Pedro', 'Hermenehildo', 'Sazu', 'Pedro'];

Y deseo comprobar si el nombre de 鈥淧edro鈥 se encuentra repetido.
Puedo usar includes() con un argumento extra que indique a partir de que posici贸n quiero realizar la b煤squeda.

 console.log(names.includes('Pedro', 3)); //True

Comprobando as铆 que el nombre de Pedro est谩 duplicado.

En JavaScript, tambi茅n puedes usar el m茅todo聽.includes()聽para ver si una cadena (string) existe dentro de otra.

C贸digo de ejemplo para el m茅todo聽.includes()

En este primer ejemplo tenemos una oraci贸n: 鈥淚 love freeCodeCamp鈥. Queremos saber si la palabra 鈥渓ove鈥 est谩 incluida en esa oraci贸n.

En el c贸digo,聽str聽ser铆a igual a la cadena 鈥淚 love freeCodeCamp鈥 y la palabra a buscar, contenida en聽search-string, ser铆a 鈥渓ove鈥.

"I love freeCodeCamp".includes("love")

Dado que la palabra 鈥渓ove鈥 s铆 est谩 incluida dentro de la cadena聽str, entonces el c贸digo retorna el valor聽true.

ES7

Junio 2016, nueva actualizacion. Junto al ES6 tenemos cambios constantes.

Esta update agrega:

  • Operador exponencial
  • includes en un array

Operador Exponencial

Permite calcular la exponencial matematico (base ** exponente).

const data = 2 ** 3;
console.log("2**3 = ",data);

Includes in arrays

Permite trabajar con un array y saber si tiene un elemento. Es duro con los tipos y las minusculas y mayusculas.

let numbers = [1, 2, 3, 4, 5];

console.log('4? ',numbers.includes(4)); // 4? true
console.log('6? ',numbers.includes(6)); // 6? false

o sea que la funcion de includes es buscar algo si esta declarado en el array

馃搵 Archivos del Proyecto 馃搵


Pasos 馃搶


鈥 Crear la carpeta: es7.
鈥 Dentro de la carpeta es7, crear el archivo llamado: 00-exponential.js
鈼 El c贸digo queda:

//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const data = 3**4;
console.log(data);

/*output:
81
*/
  • 鈥 Dentro de la carpeta es7, crear el archivo llamado: 01-array-includes.js
      • 鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
let numbers = [1, 3, 4, 6, 7, 8];

console.log(numbers.includes(4));

/*output:
true
*/

console.log(numbers.includes(9));

/*output:
false
*/

//Ejercicio #2
const list = ['Oscar', 'David', 'Ana'];

console.log(list.includes('Oscar'));

/*output:
true
*/

console.log(list.includes('oscar'));

/*output:
false
*/

Ahora solo falta la ra铆z incluida 馃槢

Mi resumen:

Resumen de la clase

Resumen de la clase en una imagen.

  • Operador exponenciaci贸n
const miPow   = (base,potencia) => base**potencia;

Mis apuntes de las clases hasta ahora:

Links