Javascript: déconstruire des tableaux et des objets

Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

---

Déconstruire des tableaux

// Code sans déconstruire
const names = ['Mike', 'Paul', 'John']
const name1 = names[0]
const name2 = names[1]
const name3 = names[2]

// Code avec déconstruction de tableau
const [name1, name2, name3] = names

// Déconstruire seulement les deux premiers éléments
const [name1, name2] = names

// Déconstruire premier et troisième élément
const [name1, ,name3] = names

// Déconstruction avec lors d'un return d'une fonction
const sumAndMultiplication = function(num1, num2) {
  return [num1 + num2, num1 * num2]
}
const [sum, multiplication] = sumAndMultiplication(10, 10)

console.log(sum, multiplication) // 20 100

// Déconstruction partiel
const [number1, number2] = [1]
// number1 = 1, number2 = undefined

// Déconstruction avec valeur par défaut
const [number1 = 0, number2 = 0] = [1]
// number1 = 1, number2 = 0

Déconstruire des objets

const post = {
  id: 100,
  title: 'This is my Blog',
  description: 'This is my blog text body..',
  tags: ['web', 'dev', 'js'],
}

// Déconstruire avec les mêmes noms d'attributs
const {id, title} = post

// Déconstruire avec noms d'attributs différents
const {number: id, main: title} = post

// Valeur par défaut si attribut non présent
const {id, title, user = 1} = post

// Autre exemple
const {id, title, categorie = []} = post

// Assignation de variables existantes
let id = 100
let title = 'My Blog title'
// use the parentheses
({id, title} = post)

// Déconstruire les paramètres d'une fonction
const createPost = function({id = 200, name, title}) {
  console.log(id)
  console.log(name)
  console.log(title)
}

// Passer un object comme paramètre
const obj = {
  name: 'Mike',
  title: 'New Title'
}
createPost(obj)
// ou déconstruire
createPost({name: 'Mike', title: 'New title'})

Comments

[Amin]

Tu peux aussi déconstruire un tableau pour récupérer un ou plusieurs éléments, et utiliser l'opérateur de décomposition dans la déconstruction pour récupérer les éléments que tu n'a pas récupéré explicitement dans un nouveau tableau.

const [firstItem, secondItem, ...remainingItems] = items;

Ça marche aussi avec des objets (c'est d'ailleurs très pratique en JSX pour récupérer certaines propriétés et toutes les autres).

const {opened, required, children, ...remainingProps} = props;

const valid = opened && required;

return (
  <SubComponent {...remainingProps} valid={valid}>
    {children}
  </SubComponent>
);