JavaScript : paramètres par défaut, opérateur de propagation, paramètres de repos et déstructuration !-js tutoriel-php.cn

JavaScript : paramètres par défaut, opérateur de propagation, paramètres de repos et déstructuration !

WBOY

Libérer： 2024-08-09 09:21:51

original

343 Les gens l'ont consulté

JavaScript: Default Parameters, Spread Operator, Rest Parameters, and Destructuring!

Paramètres par défaut

Nous pouvons ajouter une valeur par défaut directement dans notre liste de paramètres

function rollDie(numSides = 6) {
  return Math.floor(Math.random() * numSides) + 1;
}

Copier après la connexion

Ici, il faut faire attention à l'ordre. Les paramètres par défaut ne doivent apparaître qu'à la fin après tout paramètre qui n'a pas de valeur par défaut :

function greet(person, msg = 'Hey there', punc = '!') {
  return `${msgs}, ${person}${punc}`;
}

Copier après la connexion

Propagé

La syntaxe Spread permet à un itérable tel qu'un tableau d'être développé aux endroits où zéro ou plusieurs arguments (pour les appels de fonction) ou éléments (pour les littéraux de tableau) sont attendus, ou à une expression d'objet d'être développée aux endroits où zéro ou davantage de paires clé-valeur (pour les littéraux d'objet) sont attendues. -MDN

On peut utiliser l'opérateur spread sur les tableaux :

console.log(Math.max(1, 2, 3, 4, 5, 2)); // 5
const nums = [4, 3, 53, 3, 5, 2, 4, 920, 3, 5, 2];
console.log(Math.max(...nums)); // 920

Copier après la connexion

Nous pouvons utiliser l'opérateur spread pour concaténer des tableaux :

const cats = ['Fluffy', 'Zane', 'Jim'];
const dogs = ['Doggo', 'Sir Barks A Lot'];
const allPets = [...cats, ...dogs, 'Goldy'];
console.log(allPets); //['Fluffy', 'Zane', 'Jim', 'Doggo', 'Sir Barks A Lot', 'Goldy']

Copier après la connexion

Nous pouvons utiliser spread pour copier des propriétés d'un objet à un autre :

const feline = {
  legs: 4,
  family: 'Felidae',
};
const canine = {
  family: 'Canine',
  furry: true,
};

const dog = { ...canine, isPet: true };
console.log(dog); // {family: 'Canine', furry: true, isPet: true}

// Note, order matters - the last property takes precidence:
const catDog = { ...feline, ...canine };
console.log(catDog); // {legs: 4, family: 'Canine', furry: true}

Copier après la connexion

La propagation sur les tableaux et les chaînes utilise des index comme valeurs clés :

let newObj = { ...[2, 4, 6, 8] };
console.log(newObj); // {0: 2, 1: 4, 2: 6, 3: 8}

let anotherObj = { ...'Hello' };
console.log(anotherObj); //{0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o'}

Copier après la connexion

Un exemple plus concret d'utilisation de spread serait si nous voulions ajouter des données à un formulaire :

const dataFromForm = {
  email: 'jim@jimelm.com',
  password: '1234',
  username: 'jimelm',
};

const person = { ...dataFromForm, id: 2134, isAdmin: false };
console.log(person); // {email: 'jim@jimelm.com', password: '1234', username: 'jimelm', id: 2134, isAdmin: false}

Copier après la connexion

Paramètres de repos

Le repos fait le contraire de la propagation. Il prend un tas de paramètres passés dans une fonction et les combine dans un tableau. Quelques exemples incluent :

function sum(...nums) {
  return nums.reduce((total, el) => total + el);
}

function raceResults(gold, silver, ...everyoneElse) {
  console.log(`Gold metal goes to ${gold}`);
  console.log(`Silver metal goes to ${silver}`);
  console.log(`And thanks to: ${everyoneElse}`);
}

Copier après la connexion

Déstructuration

Tableaux de déstructuration

Voici un exemple de déstructuration d'un tableau :

const scores = [999, 888, 777, 666, 555, 444];

const [gold, silver, bronze, ...otherScores] = scores;
console.log(gold); // 999
console.log(silver); // 888
console.log(bronze); // 777
console.log(otherScores); // [666, 555, 444]

Copier après la connexion

Objets déstructurants

Ici on va déstructurer un objet :

const user = {
  email: 'marryelm@what.com',
  password: '134jsdf',
  firstName: 'Marry',
  lastName: 'Elm',
  born: 1927,
  died: 2091,
  city: 'Hayward',
  state: 'CA',
};

const { email, state, city } = user;
console.log(email); // marryelm@what.com
console.log(state); // CA
console.log(city); // Hayward

const { born: birthYear } = user;
console.log(birthYear); // 1927

Copier après la connexion

Nous pouvons donner les valeurs par défaut à nos variables comme suit :

const user2 = {
  email: 'stacy@what.com',
  firstName: 'stacy',
  lastName: 'kent',
  born: 1984,
  city: 'Boise',
  state: 'ID',
};

const { city, state, died } = user2;
console.log(died); // undefined

const { city, state, died = 'N/A' } = user2;
console.log(died); // N/A

Copier après la connexion

Paramètres de déstructuration

On peut également déstructurer au sein des paramètres de fonction :

const user2 = {
  email: 'stacy@what.com',
  firstName: 'stacy',
  lastName: 'kent',
  born: 1984,
  city: 'Boise',
  state: 'ID',
};

function fullName({ firstName, lastName = '???' }) {
  return `${firstName} ${lastName}`;
}

Copier après la connexion

Nous calons également la déstructuration dans les fonctions de rappel :

const movies = [
  {
    title: 'Indiana Jones',
    score: 77,
    year: 1994,
  },
  {
    title: 'Star Trek',
    score: 94,
    year: 1983,
  },
  {
    title: 'Deadpool',
    score: 79,
    year: 2001,
  },
];

let ratings = movies.map(({ title, score }) => {
  return `${title} is rated ${score}`;
});

console.log(ratings); // ['Indiana Jones is rated 77', 'Star Trek is rated 94', 'Deadpool is rated 79']

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!