Desestructurar para obtener el último elemento de una matriz en es6

116

En coffeescript esto es sencillo:

coffee> a = ['a', 'b', 'program']
[ 'a', 'b', 'program' ]
coffee> [_..., b] = a
[ 'a', 'b', 'program' ]
coffee> b
'program'

¿Es6 permite algo similar?

> const [, b] = [1, 2, 3]                              
'use strict'                                           
> b  // it got the second element, not the last one!                      
2                                                      
> const [...butLast, last] = [1, 2, 3]          
SyntaxError: repl: Unexpected token (1:17)                                                                                                                                                        
> 1 | const [...butLast, last] = [1, 2, 3]                                                                                                                                                        
    |                  ^                                                                                                                                                                          
    at Parser.pp.raise (C:\Users\user\AppData\Roaming\npm\node_modules\babel\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:24:13)

Por supuesto que puedo hacerlo de la forma es5 -

const a = b[b.length - 1]

Pero tal vez esto sea un poco propenso a errores de uno. ¿Puede el splat ser lo último en la desestructuración?

ecmascript-6 destructuring

— George Simms
fuente

7

¿Por qué todo el mundo piensa que ES6 cambia todo y hay una nueva sintaxis para hacer xyz?

— Felix Kling

23

@FelixKling la pregunta es en particular sobre el comportamiento de ...en es6, particularmente que solo se puede usar como lo último cuando se desestructura o en una lista de parámetros. Esto es potencialmente contrario a la intuición para alguien que ingresa a es6 desde coffeescript y, por lo tanto, esta pregunta es potencialmente útil.

— George Simms

Eso significa que además [1,2,3].slice(-1)no se puede desestructurar equivalente a [1,2,3].slice(0, -1). Estas son operaciones comunes. ¡La desestructuración de ES6 es de alguna manera una broma!

— scriptum

@Incluso hay una razón legítima: manejar infinitos iterables.

— George Simms

Lástima que el descanso ya que el primer parámetro no funciona. Hubiera sido genial ... Aquí hay un jsperf usando algunas de las respuestas jsperf.com/destructure-last/1

— Shanimal

46

No es posible en ES6 / 2015. El estándar simplemente no lo prevé.

Como puede ver en la especificación , FormalParameterListpuede ser:

una FunctionRestParameter
a FormalsList(una lista de parámetros)
una FormalsList, seguida de unaFunctionRestParameter

FunctionRestParameterNo se proporciona haber seguido los parámetros.

— Andrey Mikhaylov - lolmaus
fuente

215

console.log('last', [1, 3, 4, 5].slice(-1));
console.log('second_to_last', [1, 3, 4, 5].slice(-2));

Expandir fragmento

— Ryan Huang
fuente

4

Bonita solución simple no mutativa.

— Jack Steam

1

@Shanimal Depende, obtengo la popversión más rápida (OS X, Chrome 68).

— Dave Newton

1

@Dave Newton Pero pop () causa mutación

— Antonio Pantano

1

@AntonioPantano Sí, muta la copia. El punto era si es más rápido o no, no es un hecho.

— Dave Newton

53

Creo que ES6 podría al menos ayudar con eso:

[...arr].pop()

Dado que su matriz (arr) no está indefinida y es un elemento iterable (sí, ¡incluso las cadenas funcionan!), Debería devolver el último elemento ... incluso para la matriz vacía y tampoco lo altera. Sin embargo, crea una matriz intermedia ... pero eso no debería costar mucho.

Su ejemplo se vería así:

  console.log(  [...['a', 'b', 'program']].pop() );

Expandir fragmento

— zapatos
fuente

6

uhh, es bastante malo, incluso .slice(-1)[0]es un poco menos malo, o var [last]=arr.slice().reverse()es otro feo si lo necesita

— caub

6

Pensé que esta publicación era sobre ES6 / ES2015, ¿no? Pero me gusta especialmente tu última pieza. ¿Qué tal combinar los dos var [last] = arr.slice(-1)

— :;

13

mi forma favorita esObject.defineProperty(Array.prototype, -1, { get() {return this[this.length - 1] } }); [1,2,3][-1]

— caub

3

Aunque esto funciona, es mutativo y elimina el elemento de la matriz original. No es ideal en muchos escenarios.

— GavKilbride

4

@GavKilbride no es así. El ejemplo es el mismo [].concat(arr).pop();que no cambia arr.

— Dan

37

Puede desestructurar la matriz invertida para acercarse a lo que desea.

const [a, ...rest] = ['a', 'b', 'program'].reverse();
  
document.body.innerHTML = 
    "<pre>"
    + "a: " + JSON.stringify(a) + "\n\n"
    + "rest: " + JSON.stringify(rest.reverse())
    + "</pre>";

Expandir fragmento

— KamiOfTea
fuente

2

Inteligente. Mejor que const last = ['bbb', 'uuu', 'iii'].slice(-1);? ¿En términos de actuaciones?

— Vadorequest

1

el .slice(-1)es técnicamente más rápido, pero no le brinda tanto el último elemento como el subarreglo en una llamada, lo cual es un beneficio del ...splat al desestructurar. El impacto de rendimiento de invertir dos veces se debe considerar cuando se usa en matrices más largas, pero para un script pequeño, probablemente valga la pena la conveniencia. Pero podría hacerlo con la misma facilidad let a = array.slice(-1), rest = array.slice(0,array.length-2)si aún quisiera el delineador en ES5, eso es ~ 4% más rápido. jsperf.com/last-array-splat

— mix3d

17

otro enfoque es:

const arr = [1, 2, 3, 4, 5]
const { length, [length - 1]: last } = arr; //should be 5
console.log(last)

Expandir fragmento

— Den Kerny
fuente

1

@isakbob yeap, aquí está

— Den Kerny

difícil de leer, o tal vez es solo mi cerebro

— webjay

podría ser muy útil usar múltiples accesorios, así que sí, es solo tuyo, xd xd xd

— Den Kerny

5

No es necesariamente la forma más eficaz de hacerlo. Pero dependiendo del contexto una forma bastante elegante sería:

const myArray = ['one', 'two', 'three'];
const theOneIWant = [...myArray].pop();

console.log(theOneIWant); // 'three'
console.log(myArray.length); //3

Expandir fragmento

— theTaoOfJS
fuente

3

No veo ninguna elegancia en esta solución, pero de todos modos @shoesel ya la publicó

— Bergi

2

const arr = ['a', 'b', 'c']; // => [ 'a', 'b', 'c' ]

const {
  [arr.length - 1]: last
} = arr;

console.log(last); // => 'c'

Expandir fragmento

— Andrhamm
fuente

2

Sí, lo encuentro útil cuando ya estoy haciendo otras desestructuraciones. Por sí solo, no es tan fácil de leer como la solución clásica.

— andrhamm

1

Esto debería funcionar:

const [lastone] = myArray.slice(-1);

— OPulido
fuente

1

Puedes probar este truco:

let a = ['a', 'b', 'program'];
let [last] = a.reverse();
a.reverse();
console.log(last);

— Bazar de Ups
fuente

0

Definitivamente, la pregunta es sobre Desestructuración para matrices de JavaScript, y sabemos que no es posible tener el último elemento de una matriz usando la asignación de desestructuración, hay una forma de hacerlo inmutable , vea lo siguiente:

const arr = ['a', 'b', 'c', 'last'];

~~~
const arrDepth = arr.length - 1;

const allExceptTheLast = arr.filter( (dep, index) => index !== arrDepth && dep );
const [ theLastItem ] = arr.filter( (dep, index) => index === arrDepth && dep );

No mutamos la arrvariable, pero todavía tenemos todos los miembros de la matriz excepto el último elemento como una matriz y tenemos el último elemento por separado.

— AmerllicA
fuente

0

let a = [1,2,3]
let [b] = [...a].reverse()

— Andrew Nekowitsch
fuente

0

No es destructivo pero podría ayudar. De acuerdo con la documentación de javascript y el método inverso, podría probar esto:

const reversed = array1.reverse();
let last_item = reversed[0]

— Pamela Hdz
fuente