JavaScript: Standardparameter, Spread-Operator, Rest-Parameter und Destrukturierung!-js-Tutorial-php.cn

JavaScript: Standardparameter, Spread-Operator, Rest-Parameter und Destrukturierung!

WBOY

Freigeben： 2024-08-09 09:21:51

Original

342 Leute haben es durchsucht

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

Standardparameter

Wir können einen Standardwert direkt in unserer Parameterliste hinzufügen

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

Nach dem Login kopieren

Hier müssen wir auf Ordnung achten. Standardparameter sollten nur am Ende nach allen Parametern stehen, die keine Standardwerte haben:

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

Nach dem Login kopieren

Verbreiten

Die Spread-Syntax ermöglicht die Erweiterung eines Iterables wie eines Arrays an Stellen, an denen null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder die Erweiterung eines Objektausdrucks an Stellen, an denen null oder mehr vorhanden sind Es werden weitere Schlüssel-Wert-Paare (für Objektliterale) erwartet. - MDN

Wir können den Spread-Operator für Arrays verwenden:

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

Nach dem Login kopieren

Wir können den Spread-Operator verwenden, um Arrays zu verketten:

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']

Nach dem Login kopieren

Wir können Spread verwenden, um Eigenschaften von einem Objekt auf ein anderes zu kopieren:

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}

Nach dem Login kopieren

Spread auf Arrays und Strings verwendet Indizes als Schlüsselwerte:

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

Nach dem Login kopieren

Ein realeres Beispiel für die Verwendung von Spread wäre, wenn wir Daten zu einem Formular hinzufügen möchten:

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}

Nach dem Login kopieren

Ruheparameter

Ruhe bewirkt das Gegenteil von Ausbreitung. Es nimmt eine Reihe von Parametern, die an eine Funktion übergeben werden, und kombiniert sie in einem Array. Einige Beispiele sind:

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}`);
}

Nach dem Login kopieren

Destrukturierend

Destrukturierung von Arrays

Hier ist ein Beispiel für die Destrukturierung eines Arrays:

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]

Nach dem Login kopieren

Objekte zerstören

Hier werden wir ein Objekt zerstören:

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

Nach dem Login kopieren

Wir können unseren Variablen wie folgt Standardwerte zuweisen:

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

Nach dem Login kopieren

Destrukturierende Parameter

Wir können auch innerhalb von Funktionsparametern destrukturieren:

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

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

Nach dem Login kopieren

Wir rufen auch Destrukturierung in Callback-Funktionen auf:

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']

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavaScript: Standardparameter, Spread-Operator, Rest-Parameter und Destrukturierung!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!