Comment utiliser l'opérateur spread dans es6

Utilisation de l'opérateur de propagation es6 : 1. Copier le tableau, syntaxe "[...array]" ; 2. Fusionner les tableaux, syntaxe "[...array1,...array2]" 3. Vers un tableau Ajouter des éléments dans , la syntaxe est "[...array, 'element value']"; 4. Utilisez-le avec l'objet Math pour calculer la valeur maximale, la valeur minimale ou la somme 5. Passez des paramètres infinis à la fonction, la syntaxe est " ; const myFunc=( ...args)=>{};"; 6. Convertissez la chaîne en un tableau de caractères, la syntaxe est "[...string]".

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Introduction à l'opérateur spread dans es6

L'opérateur spread ... est introduit dans ES6, qui développe l'objet itérable en ses éléments séparés. L'objet dit itérable est tout objet itérable qui peut être parcouru. en utilisant une boucle for ou des objets, tels que : tableau (méthodes courantes pour les tableaux), chaînes, Map (compréhension de Map), Set (comment utiliser Set ?), nœuds DOM, etc.

C'est comme l'opération inverse du paramètre rest, convertissant un tableau en une séquence de paramètres séparés par des virgules. L'opérateur spread peut être utilisé conjointement avec les paramètres de fonction normaux, et une expression peut également être placée après lui, mais s'il est suivi d'un tableau vide, cela n'aura aucun effet.

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

Signification

Remplacer la méthode apply de la fonction

Étant donné que l'opérateur spread peut étendre le tableau, la méthode apply n'est plus nécessaire pour convertir le tableau en paramètre de la fonction.

10+ façons d'utiliser l'opérateur spread (...) ...）的10+种用法

1、复制数组

我们可以使用展开操作符复制数组，不过要注意的是这是一个浅拷贝。

const arr1 = [1,2,3];
const arr2 = [...arr1];
console.log(arr2);
// [ 1, 2, 3 ]

这样我们就可以复制一个基本的数组，注意，它不适用于多级数组或带有日期或函数的数组。

2、合并数组

假设我们有两个数组想合并为一个，早期间我们可以使用concat方法，但现在可以使用展开操作符：

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]

我们还可以通过不同的排列方式来说明哪个应该先出现。

const arr3 = [...arr2, ...arr1];
console.log(arr3);
[4, 5, 6, 1, 2, 3];

此外，展开运算符号还适用多个数组的合并：

const output = [...arr1, ...arr2, ...arr3, ...arr4];

3、向数组中添加元素

let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

4、向对象添加属性

假设你有一个user 的对象，但它缺少一个age属性。

const user = {
  firstname: 'Chris',
  lastname: 'Bongers'
};

要向这个user对象添加age，我们可以再次利用展开操作符。

const output = {...user, age: 31};

5、使用 Math() 函数

假设我们有一个数字数组，我们想要获得这些数字中的最大值、最小值或者总和。

const arr1 = [1, -1, 0, 5, 3];

为了获得最小值，我们可以使用展开操作符和 Math.min 方法。

const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);
console.log(min);
// -1

同样，要获得最大值，可以这么做：

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(...arr1);
console.log(max);
// 5

如大家所见，最大值5，如果我们删除5，它将返回3。

你可能会好奇，如果我们不使用展开操作符会发生什么？

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);
console.log(max);
// NaN

这会返回NaN，因为JavaScript不知道数组的最大值是什么。

6、rest 参数

假设我们有一个函数，它有三个参数。

const myFunc(x1, x2, x3) => {
    console.log(x1);
    console.log(x2);
    console.log(x3);
}

我们可以按以下方式调用这个函数:

myFunc(1, 2, 3);

但是，如果我们要传递一个数组会发生什么。

const arr1 = [1, 2, 3];

我们可以使用展开操作符将这个数组扩展到我们的函数中。

myFunc(...arr1);
// 1
// 2
// 3

这里，我们将数组分为三个单独的参数，然后传递给函数。

const myFunc = (x1, x2, x3) => {
  console.log(x1);
  console.log(x2);
  console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3

7、向函数传递无限参数

假设我们有一个函数，它接受无限个参数，如下所示：

const myFunc = (...args) => {
  console.log(args);
};

如果我们现在调用这个带有多个参数的函数，会看到下面的情况:

myFunc(1, 'a', new Date());

返回：

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]

然后，我们就可以动态地循环遍历参数。

8、将 nodeList 转换为数组

假设我们使用了展开运算符来获取页面上的所有p：

const el = [...document.querySelectorAll('p')];
console.log(el);
// (3) [p, p, p]

在这里可以看到我们从dom中获得了3个p。

现在，我们可以轻松地遍历这些元素，因为它们是数组了。

const el = [...document.querySelectorAll('p')];
el.forEach(item => {
  console.log(item);
});
// <p></p>
// <p></p>
// <p></p>

9、解构变量

解构对象

假设我们有一个对象user:

const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};

现在，我们可以使用展开运算符将其分解为单个变量。

const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }

这里，我们解构了user对象，并将firstname解构为firstname变量，将对象的其余部分解构为rest

🎜🎜🎜🎜1 Copier un tableau 🎜🎜🎜🎜 Nous pouvons utiliser l'opérateur spread pour copier un tableau, mais soyez prudent. Le problème, c'est que c'est une 🎜copie peu profonde🎜. 🎜

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

🎜 De cette façon, nous pouvons copier un tableau de base, notez que cela ne fonctionne pas avec des tableaux multi-niveaux ou des tableaux avec des dates ou des fonctions. 🎜🎜🎜🎜2. Fusionner des tableaux 🎜🎜🎜🎜 Supposons que nous ayons deux tableaux que nous souhaitons fusionner en un seul. Au début, nous pouvions utiliser la méthode concat, mais maintenant nous pouvons utiliser la méthode. opérateur de spread : 🎜

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

🎜Nous Il existe également différentes dispositions pour indiquer lequel doit venir en premier. 🎜

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

🎜De plus, le symbole de l'opérateur d'expansion convient également pour fusionner plusieurs tableaux : 🎜

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

🎜🎜🎜3 Ajouter des éléments à un tableau🎜🎜🎜

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

🎜🎜🎜4. Ajouter des attributs à un objet🎜🎜🎜🎜. avoir un < An object of code>user, mais il lui manque une propriété age. 🎜rrreee🎜Pour ajouter age à cet objet user, nous pouvons à nouveau utiliser l'opérateur spread. 🎜rrreee🎜🎜🎜5. Utilisez la fonction Math()🎜🎜🎜🎜Supposons que nous ayons un tableau de nombres et que nous voulions obtenir le maximum, le minimum ou la somme de ces nombres. 🎜rrreee🎜Pour obtenir la valeur minimale, nous pouvons utiliser l'opérateur spread et la méthode Math.min. 🎜rrreee🎜De même, pour obtenir la valeur maximale, vous pouvez faire ceci : 🎜rrreee🎜Comme vous pouvez le voir, la valeur maximale est 5, et si on supprime 5, il renverra 3. 🎜🎜Vous vous demandez peut-être, que se passe-t-il si nous n'utilisons pas l'opérateur de propagation ? 🎜rrreee🎜Cela renvoie 🎜NaN🎜 car JavaScript ne sait pas quelle est la valeur maximale du tableau. 🎜🎜🎜🎜6. Paramètre de repos 🎜🎜🎜🎜 Supposons que nous ayons une fonction avec trois paramètres. 🎜rrreee🎜 Nous pouvons appeler cette fonction comme suit : 🎜rrreee🎜 Mais que se passe-t-il si nous voulons passer un tableau. 🎜rrreee🎜Nous pouvons étendre ce tableau dans notre fonction en utilisant l'opérateur spread. 🎜rrreee🎜Ici, nous divisons le tableau en trois paramètres distincts et les transmettons à la fonction. 🎜rrreee🎜🎜🎜7. Passez des paramètres illimités à la fonction 🎜🎜🎜🎜 Supposons que nous ayons une fonction qui accepte des paramètres illimités comme suit : 🎜rrreee🎜Si nous appelons maintenant cette fonction avec plusieurs paramètres, nous verrons la situation suivante : 🎜rrreee🎜 renvoie : 🎜rrreee🎜 Ensuite, nous pouvons parcourir dynamiquement les paramètres. 🎜🎜🎜🎜8. Convertir nodeList en tableau 🎜🎜🎜🎜 Supposons que nous utilisions l'opérateur spread pour obtenir tous les p sur la page : 🎜rrreee🎜Ici, vous pouvez voir ce que nous obtenons du dom 3 < code>p. 🎜🎜Maintenant, nous pouvons parcourir facilement ces éléments puisqu'il s'agit de tableaux. 🎜rrreee🎜🎜🎜9. Déstructurer des variables 🎜🎜🎜🎜🎜 Déstructurer des objets 🎜🎜🎜 Supposons que nous ayons un objet user : 🎜rrreee🎜 Maintenant, nous pouvons utiliser l'opérateur spread pour le déconstruire en variables individuelles. . 🎜rrreee🎜Ici, nous déstructurons l'objet user et déstructurons firstname en variable firstname et le reste de l'objet en rest< /code>variable. 🎜

解构数组

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

10、展开字符串（字符串转字符数组）

String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下：

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

进而可以简单进行字符串截取，如下：

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

11、数组去重

与 Set 一起使用消除数组的重复项，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

12、打印日志

在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

【相关推荐：web前端开发】

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!