1
votes

Comment utiliser une affectation de déstructuration à l'intérieur d'un objet

Est-il possible d'utiliser une affectation de déstructuration à l'intérieur d'un objet?

Cela fonctionne

    const test = {a: 'hey', b: 'hello'}
    // something like this
    const destruct = {
        {a,b}: test
    };

    const destruct = {
        {a}: test,
        {b}: test
    };

J'aimerais faire ceci

        const test = {a: 'hey', b: 'hello'}
        const {a,b} = test;
        const destruct = {
            a,
            b
        };

javascript typescript ecmascript-6

2 commentaires

Si vous voulez une copie superficielle, {... obj} le fera. Si vous voulez un sous-ensemble des propriétés, vous devez dé- et restructurer (ou simplement faire {a: test.a, b: test.b} ).

@LawrenceCherone oui, vous pouvez, en utilisant des propriétés calculées comme const k = "foo"; const o = {[k]: "bar"}; donne o = {foo: "bar"}

3 Réponses :

2
votes

Si je comprends bien, il semble que la se propage la syntaxe est parfaitement adaptée à vos besoins.

La syntaxe de propagation " ... " vous permet de "diffuser" les paires clé / valeur d'un objet source (ie test ) vers un objet cible (ie destruct):

const test = {
  a: 'hey',
  b: 'hello',
  c: 'goodbye'
}

/* Spread subset of keys from source object to target object */
const welcomeOnly = {
  ...({ a, b } = test, { a, b })
}

console.log('exclude goodbye, show welcomes only:', welcomeOnly);

De plus, si vous souhaitez sélectionner un sous-ensemble de clés d'un objet source et les répartir dans un objet cible, cela peut être réalisé de la manière suivante:

const test = {
  a: 'hey',
  b: 'hello',
  c: 'goodbye'
}

const destruct = {
  // {a,b}: test <-- invalid syntax
  ...test // equivalent using the "spread" syntax
};

console.log(destruct)

Le deuxième exemple fonctionne en détruisant l'objet source (c'est-à-dire test ) en un objet, avec le sous-ensemble de clés que nous voulons ( a et b ).

Dans le cadre de cette expression (c'est-à-dire tout ce qui se trouve entre ( et ) ), ces clés sont accessibles en tant que variables locales. Nous en profitons et les passons à un nouvel objet (c'est-à-dire {a, b} ). Étant donné que le nouvel objet est déclaré après le , , il est renvoyé comme résultat de l'expression.

6 commentaires

Je pense que l'OP est après votre deuxième version, qui est très soignée / cool btw

Lors du test, pourquoi est-ce que ... ({a, b} = test) fonctionne de la même manière, à quoi sert la deuxième partie?

@LawrenceCherone merci pour les commentaires - je viens de détailler un peu plus la réponse. Cette deuxième partie (c'est-à-dire après le , ) est un nouvel objet défini localement qui est essentiellement retourné comme résultat de l'expression car il s'agit de la dernière partie de l'expression - espérons que cela a du sens: \

... n'est pas un opérateur!

@FelixKling doh ...: \ merci pour cela. Correction faite :)

Oui, la deuxième version est exactement ce que je cherchais à faire. Je ne sais pas à quel point c'est pratique par rapport à {a: test.a} mais c'est toujours bon à savoir.

0
votes

Si vous essayez de prendre un sous-ensemble de propriétés, vous pouvez utiliser l'opérateur rest

const test = ['hey', 'hello', 'goodbye'];

const [ first, ...rest ] = test;

console.log(rest);

Ceci affecte c à un const et les propriétés restantes sont affectées à la destruction de const. Commencez par répertorier toutes les propriétés indésirables, puis les propriétés restantes sont capturées avec l'opérateur rest.

Fonctionne également avec les tableaux.

const test = {
  a: 'hey',
  b: 'hello',
  c: 'goodbye'
};

const { c, ...destruct } = test;

console.log(destruct);

0 commentaires

0
votes

Vous pouvez essayer de travailler comme ceci pour déstructurer des tableaux!

    let abc = {
      a: 'hello',
      b: 'hey',
      c: 'hi, there!'
    }


    let {a: x, b:y, c:z} = abc;

    console.log(x,y,z)  

// "hello"
   "hey"
   "hi, there!"

0 commentaires