¿Cómo puedo acceder y procesar objetos anidados, matrices o JSON?

Objetos y matrices tiene muchos métodos integrados que pueden ayudarlo con el procesamiento de datos.

Nota: en muchos de los ejemplos estoy usando funciones de flecha . Son similares a las expresiones de función , pero vinculan el thisvalor léxicamente.

Object.keys(), Object.values() (ES 2017) and Object.entries() (ES 2017)

Object.keys()devuelve una matriz de claves de objeto, Object.values()devuelve una matriz de valores de objeto y Object.entries()devuelve una matriz de claves de objeto y valores correspondientes en un formato [key, value].

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

console.log(Object.keys(obj)) // ['a', 'b', 'c']
console.log(Object.values(obj)) // [1, 2, 3]
console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]

Object.entries()con un bucle for-of y asignación desestructurante

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

for (const [key, value] of Object.entries(obj)) {
  console.log(`key: ${key}, value: ${value}`)
}

Es muy conveniente iterar el resultado Object.entries()con un bucle for-of y una asignación desestructurante .

El bucle For-of le permite iterar elementos de una matriz. La sintaxis es for (const element of array)(podemos reemplazar constcon varo let, pero es mejor usarla constsi no pretendemos modificar element).

La asignación de desestructuración le permite extraer valores de una matriz o un objeto y asignarlos a variables. En este caso const [key, value]significa que en lugar de asignar la [key, value]matriz a element, asignamos el primer elemento de esa matriz a keyy el segundo elemento a value. Es equivalente a esto:

for (const element of Object.entries(obj)) {
  const key = element[0]
       ,value = element[1]
}

Como puede ver, la desestructuración hace que esto sea mucho más sencillo.

Array.prototype.every()yArray.prototype.some()

El every()método regresa truesi la función de devolución de llamada especificada regresa truepara cada elemento de la matriz. El some()método regresa truesi la función de devolución de llamada especificada regresa truepara algún (al menos uno) elemento.

const arr = [1, 2, 3]

// true, because every element is greater than 0
console.log(arr.every(x => x > 0))
// false, because 3^2 is greater than 5
console.log(arr.every(x => Math.pow(x, 2) < 5))
// true, because 2 is even (the remainder from dividing by 2 is 0)
console.log(arr.some(x => x % 2 === 0))
// false, because none of the elements is equal to 5
console.log(arr.some(x => x === 5))

Array.prototype.find()yArray.prototype.filter()

Los find()métodos devuelven el primer elemento que satisface la función de devolución de llamada proporcionada. El filter()método devuelve una matriz de todos los elementos que satisfacen la función de devolución de llamada proporcionada.

const arr = [1, 2, 3]

// 2, because 2^2 !== 2
console.log(arr.find(x => x !== Math.pow(x, 2)))
// 1, because it's the first element
console.log(arr.find(x => true))
// undefined, because none of the elements equals 7
console.log(arr.find(x => x === 7))

// [2, 3], because these elements are greater than 1
console.log(arr.filter(x => x > 1))
// [1, 2, 3], because the function returns true for all elements
console.log(arr.filter(x => true))
// [], because none of the elements equals neither 6 nor 7
console.log(arr.filter(x => x === 6 || x === 7))

Array.prototype.map()

El map()método devuelve una matriz con los resultados de llamar a una función de devolución de llamada proporcionada en los elementos de la matriz.

const arr = [1, 2, 3]

console.log(arr.map(x => x + 1)) // [2, 3, 4]
console.log(arr.map(x => String.fromCharCode(96 + x))) // ['a', 'b', 'c']
console.log(arr.map(x => x)) // [1, 2, 3] (no-op)
console.log(arr.map(x => Math.pow(x, 2))) // [1, 4, 9]
console.log(arr.map(String)) // ['1', '2', '3']

Array.prototype.reduce()

El reduce()método reduce una matriz a un único valor llamando a la función de devolución de llamada proporcionada con dos elementos.

const arr = [1, 2, 3]

// Sum of array elements.
console.log(arr.reduce((a, b) => a + b)) // 6
// The largest number in the array.
console.log(arr.reduce((a, b) => a > b ? a : b)) // 3

El reduce()método toma un segundo parámetro opcional, que es el valor inicial. Esto es útil cuando la matriz a la que llama reduce()puede tener cero o un elemento. Por ejemplo, si quisiéramos crear una función sum()que tome una matriz como argumento y devuelva la suma de todos los elementos, podríamos escribirla así:

const sum = arr => arr.reduce((a, b) => a + b, 0)

console.log(sum([]))     // 0
console.log(sum([4]))    // 4
console.log(sum([2, 5])) // 7

Oct 22 '2016 18:10 Michał Perłakowski