Que signifient trois points dans es6

Dans es6, les trois points "..." font référence à "l'opérateur d'expansion", qui peut développer des expressions de tableau ou des chaînes au niveau syntaxique lors d'appels de fonction ou de construction de tableau, il peut également être utilisé lors de la construction d'objets littéraux lors du développement ; l'expression de l'objet selon la méthode "clé-valeur".

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

Que signifient les trois points dans ES6 ? Le vrai nom des trois points (...) est l'opérateur spread, qui est un nouvel ajout dans ES6. Il peut être utilisé dans. fonctions Lors de l'appel/de la construction d'un tableau, développez l'expression du tableau ou la chaîne au niveau de la syntaxe ; vous pouvez également développer l'expression de l'objet selon la méthode key-value lors de la construction de l'objet littéralLes littéraux font généralement référence à [ 1,2,3] ou {name:'chuichui'}, cette méthode de construction simple, des tableaux et des objets imbriqués multicouches sont impuissants en trois points

Pour parler franchement, cela signifie enlever vos vêtements, que ce soit accolades ([]), accolades ({}), pas besoin de vous en soucier, enlevez-les toutes ! ...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开

字面量一般指[1,2,3]或者{name:'chuichui'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了

说白了就是把衣服脱了，不管是大括号（[]）、花括号（{}），统统不在话下，全部脱掉脱掉！

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//对象
var man = {name:'chuichui',height:176}
console.log({...man}) / {name:'chuichui',height:176}

扩展运算符的8种用法

1. 拷贝数组对象

使用扩展符拷贝数组是ES6中常用的操作：

const years = [2018, 2019, 2020, 2021];
const copyYears = [...years];

console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]

扩展运算符拷贝数组，只有第一层是深拷贝，即对一维数组使用扩展运算符拷贝就属于深拷贝，看下面的代码：

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1];

const copyArray = [...miniCalendar];
console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]

copyArray[1][0] = 0;
copyArray[1].push(8);
copyArray[2] = 2;
console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

把打印的结果放在一起便于更加清楚进行对比，如下：

变量说明	结果	操作
copyArray	[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]	复制数组 miniCalendar
copyArray	[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]	1. 将数组第二个元素的第一个元素重新赋值为 0 ；2. 往数组的第二个元素增加一个元素 8 ；3. 将数组第三个元素重新赋值为2
miniCalendar	[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]	从结果来看，数组的第二个元素为数组，大于1维了，里面的元素的变更将导致原变量的值随之改变

拷贝对象，代码如下：

const time = {
    year: 2021,
    month: 7,
    day: {
        value: 1,
    },
};
const copyTime = { ...time };
console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }

扩展运算符拷贝对象只会在一层进行深拷贝，从下面代码是基于上面代码：

copyTime.day.value = 2;
copyTime.month = 6;
console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } }
console.log(time); // { year: 2021, month: 7, day: { value: 2 } }

从打印的结果看，扩展运算符只对对象第一层进行了深拷贝。

严格来讲，扩展运算符不执行深拷贝

2. 合并操作

先来看数组的合并，如下：

const halfMonths1 = [1, 2, 3, 4, 5, 6];
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

合并对象，在合并对象时，如果一个键已经存在，它会被具有相同键的最后一个对象给替换。

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }

3. 参数传递

const sum = (num1, num2) => num1 + num2;

console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13

从上面的代码看，函数定义了多少个参数，扩展运算符传入的值就是多少个。

和 math 函数一起使用，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10

4. 数组去重

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

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

5. 字符串转字符数组

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

6. NodeList 转数组

NodeList  对象是节点的集合，通常是由属性，如 Node.childNodes 和方法，如 document.querySelectorAll 返回的。

NodeList 类似于数组，但不是数组，没有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach()

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

8 façons d'utiliser l'opérateur spread

1. Copier des objets de tableau

La copie de tableaux à l'aide de l'opérateur spread est une opération courante dans ES6 :

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

L'opérateur spread copie un tableau, uniquement

Le premier niveau est une copie profonde

, c'est-à-dire que l'utilisation de l'opérateur spread pour copier un tableau unidimensionnel est une copie complète. Voir le code ci-dessous :

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" };
const { name, ...location } = userInfo;
console.log(name); // Crayon
console.log(location); // { province: 'Guangdong', city: 'Shenzhen' }

Rassemblez les résultats imprimés pour une comparaison plus claire, comme suit : [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

Description de la variable	Résultat	Opération
copyArray	[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]	Copier le tableauminiCalendar
copyArray	[ 2021 , [ 0 , 2, 3, 4, 5, 6, 7, 8 ], 2 ]	1. Réaffectez le premier élément du deuxième élément du tableau à 0; Allez dans Ajouter un élément 8 au deuxième élément du tableau ; 3. Réaffectez le troisième élément du tableau à 2
miniCalendar	À partir du résultat, le deuxième élément du array Il s'agit d'un tableau de plus d'une dimension. Les modifications apportées aux éléments à l'intérieur entraîneront une modification de la valeur de la variable d'origine en conséquence

Copiez l'objet, le code. est la suivante :

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

Opération d'expansion L'objet de copie de l'opérateur n'effectuera une copie approfondie que sur un seul calque. Le code suivant est basé sur le code ci-dessus :

rrreee

À partir des résultats imprimés, l'opérateur de propagation n'effectuera une copie approfondie que sur un seul calque. la première couche de l'objet. À proprement parler, l'opérateur de propagation n'effectue pas de copie approfondie

2. Opération de fusionRegardons d'abord la fusion de tableaux, comme suit :

rrreee🎜Fusionner des objets, si. une clé existe déjà, elle sera remplacée par le dernier objet ayant la même clé. 🎜rrreee🎜🎜🎜3. Passage de paramètres🎜🎜🎜rrreee🎜À partir du code ci-dessus, nous pouvons voir que le nombre de paramètres transmis par l'opérateur de propagation est le nombre de paramètres définis par la fonction. 🎜🎜Utilisé avec la fonction math, comme suit : 🎜rrreee🎜🎜🎜4. Déduplication du tableau 🎜🎜🎜🎜Utilisé avec Set pour éliminer les doublons dans le tableau, comme suit : 🎜rrreee🎜🎜🎜5. Chaîne en tableau de caractères🎜🎜🎜🎜String est également un objet itérable, vous pouvez donc également utiliser l'opérateur de propagation ... pour le convertir, c'est un tableau de caractères, comme suit : 🎜rrreee🎜Ensuite, vous pouvez simplement intercepter la chaîne, comme suit : 🎜rrreee🎜🎜🎜6 NodeList Convertir le tableau 🎜🎜🎜🎜🎜. Objet NodeList Est une collection de nœuds, généralement renvoyés par des propriétés telles que Node.childNodes et des méthodes telles que document.querySelectorAll. 🎜🎜🎜NodeList est similaire à un tableau, mais pas à un tableau. Il n'a pas toutes les méthodes de Array, telles que find, map , filter, etc., mais vous pouvez utiliser forEach() pour itérer. 🎜🎜Il peut être converti en tableau via l'opérateur spread, comme suit : 🎜rrreee🎜🎜🎜🎜🎜🎜7 Déstructuration des variables 🎜🎜🎜🎜Déstructuration des tableaux, comme suit : 🎜rrreee🎜Déstructuration des objets comme suit : 🎜rrreee🎜. 🎜🎜8 . Journal d'impression🎜🎜🎜🎜Lors de l'impression d'objets itérables, vous devez imprimer chaque élément à l'aide de l'opérateur d'expansion, comme suit : 🎜rrreee🎜🎜🎜Résumé🎜🎜🎜🎜L'opérateur d'expansion... Rend le code concis, ce devrait être ES6 L'opérateur le plus populaire parmi eux. 🎜🎜【Recommandations associées : 🎜tutoriel vidéo javascript🎜, 🎜front-end 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!