Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes

Clase 18 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

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).

Christopher Andrés Guano Valencia

student•

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

Jonathan Barzola

student•

Muy buen aporte!

Teo Zavala

student•

no me lo sabia, gracias por el aporte

Irving Caamal

student•

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! 🤯

Kevin Salazar

student•

Lo que pasa es que el familyEmoji está conformado por muchos emojis.

Nina Herrera

student•

true true true :)

Yuli Alexandra Pulido Castañeda

student•

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"))

Laura Roa

student•

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'));

Nestor Rios Garcia

student•

Buen aporte

Christopher Andrés Guano Valencia

student•

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

Nestor Rios Garcia

student•

Buena esa

Christopher Andrés Guano Valencia

student•

🙌

Oscar Humberto Godínez Paiz

student•

"no 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.

Willie David Roa Hidalgo

student•

Si llegaste hasta acá, vas por la mitad del curso. 😊 ¡No te rindas! 😎

David Betancur Gaviria

student•

A Javascript no le falta sino tener baño incorporado

Carlos Andrade

student•

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

Andrés Soret Chacin

student•

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: "I love freeCodeCamp". Queremos saber si la palabra "love" está incluida en esa oración.

En el código, str sería igual a la cadena "I love freeCodeCamp" y la palabra a buscar, contenida en search-string, sería "love".

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

Dado que la palabra "love" sí está incluida dentro de la cadena str, entonces el código retorna el valor true.

Luis Alfredo Suarez

student•

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 "includes" 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 "includes" 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 "includes" 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! 👨‍💻

Porfirio González López

student•

Apunte en Notion

Link: https://pogolo.notion.site/15-ES7-exponentiation-operator-y-array-includes-6bc87642b97d479eb429759ebe8884cd

Miguel Angel Reyes Moreno

student•

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

Edgar López Laynez

student•

Hector Rodriguez

student•

let numbers = [1, 2, 3, 4, 7, 8, 9]

numbers.includes(10) ? 
console.log('Si se encuentra el num') : 
console.log('No se encuentra el num')

John Jairo Orjuela Espinosa

student•

Alguien me puede aclarar por que esta respuesta esta mal?

Creative Artisan

student•

String.prototype.incudes() se añadió en ES6 (2015), Array.prototype.includes() se añadio en ES7 (2016).

Su función es similar pero uno esta enfocado unicamente para Arrays.

La respuesta correcta seria ES6 para esa pregunta.

Abigail Nahomi Chávez Lozano

student•

El método includes(), se implementó en ES7👍. Pero en el exámen marca como incorrecta esa opción(ES7), pero si seleccionas ECMAScript 6, es correcta. Hay dos includes() en cada versión? A alguien le pasó?

Jerson Mosquera Pretelt

student•

Encontré lo mismo!!. Revisando las notas aparece en ES7 pero en el examen la respuesta supuestamente correcta es ES6. Revisando más detalladamente en la web me encuentro que en ES6 se implemento para strings y en ES7 se implemento para arrays.

Cristian Acalo

student•

🦄✨Un 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 "Pedro" 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.

Sebastián Groselj Pausic

student•

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

Edgar Geovani Xuc Xol

student•

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

Maria Gabriela Rodriguez Cuevas

student•

📋 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
*/