DEV Community

loading...
Cover image for Javascript: déconstruire des tableaux et des objets

Javascript: déconstruire des tableaux et des objets

Eric Le Codeur
Javascript, Python et PHP
Originally published at ericlecodeur.com Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
aminnairi profile image
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;
Enter fullscreen mode Exit fullscreen mode

Ç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>
);
Enter fullscreen mode Exit fullscreen mode