JavaScript에서 스프레드 연산자를 사용하는 다양한 방법을 자세히 설명하는 기사

이 기사에서는 JavaScript에서 스프레드 연산자를 사용하는 다양한 방법과 스프레드 연산자와 나머지 연산자의 주요 차이점을 설명합니다.

은 점 3개( ...)로 표시됩니다. JavaScript 스프레드 연산자는 ES6에서 도입되었습니다. 컬렉션 및 배열의 ​​요소를 단일 개별 요소로 확장하는 데 사용할 수 있습니다. ...) 表示，JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。

扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。

语法

扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如：

console.log(...arr);

功能以及参数

以Math.min()方法为例。此方法接受至少一个数字作为参数，并返回传递的参数中最小的数字。

如果您有一个数字数组并且您想找到这些数字中的最小值，那么在没有展开运算符的情况下，您需要使用它们的索引一个一个地传递元素，或者使用apply()方法来传递数组作为参数。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

请注意，第一个参数是null，因为第一个参数用于更改this调用函数的值。

扩展运算符是将数组元素作为参数传递给函数的更方便和可读的解决方案。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

创建数组

扩展运算符可用于从现有数组或其他包含Symbol.iterator()方法的可迭代对象创建新数组。这些是可以使用for...of循环迭代的对象。

例如，它可用于克隆数组。如果您只是将现有数组的值分配给新数组，则对新数组进行更改将更新现有数组：

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

通过使用扩展运算符，可以将现有数组克隆到一个新数组中，并且对新数组所做的任何更改都不会影响现有数组：

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

应该注意的是，这只会克隆一维数组。它不适用于多维数组。

扩展运算符也可用于将多个数组连接为一个。例如：

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

您还可以在字符串上使用扩展运算符来创建一个数组，其中每个项目都是字符串中的一个字符：

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

创建对象

扩展运算符可以以不同的方式用于创建对象。

它可用于浅克隆另一个对象。例如：

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

它还可以用于将多个对象合并为一个。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

需要注意的是，如果对象共享相同的属性名称，将使用最后一个对象展开的值。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

扩展运算符可用于从数组创建对象，其中数组中的索引成为属性，该索引处的值成为属性的值。例如：

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

它还可以用于从字符串创建对象，其中，字符串中的索引成为属性，该索引处的字符成为属性的值。例如：

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

将 NodeList 转换为数组

NodeList是节点的集合，它们是文档中的元素。元素通过集合中的方法访问，例如itemor entries，与数组不同。

您可以使用扩展运算符将 NodeList 转换为 Array。例如：

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

从数组中删除重复项

Set对象是一个仅存储唯一值的集合。与 NodeList 类似，可以使用扩展运算符将 Set 转换为数组。

由于 Set 仅存储唯一值，因此可以将其与扩展运算符配对以从数组中删除重复项。例如：

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

扩展运算符与休息运算符

rest 运算符也是一个三点运算符 ( ...)，但它用于不同的目的。rest 运算符可以在函数的参数列表中使用，表示该函数接受未定义数量的参数。这些参数可以作为数组处理。

例如：

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

在此示例中，rest 运算符用作calculateSum函数的参数。然后，您循环遍历数组中的项目并将它们相加以计算它们的总和。

然后，您可以将变量一个一个地calculateSum

확산 연산자를 사용하여 배열과 객체를 생성 및 복제하고, 배열을 함수 인수로 전달하고, 배열에서 중복 항목을 제거하는 등의 작업을 할 수 있습니다.

Syntax

스프레드 연산자는 반복 가능한 객체에만 사용할 수 있습니다. 분리 없이 반복 가능한 객체 앞에 사용해야 합니다. 예:

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

🎜함수 및 매개변수🎜🎜🎜Math.min() 메서드를 예로 들어 보겠습니다. 이 메서드는 하나 이상의 숫자를 인수로 받아들이고 전달된 인수 중 가장 작은 숫자를 반환합니다. 🎜🎜숫자 배열이 있고 이 숫자 중 최소값을 찾으려면 스프레드 연산자 없이 인덱스를 사용하여 요소를 하나씩 전달하거나 apply() 메서드를 사용하여 배열을 매개 변수로 전달해야 합니다. 예: 🎜rrreee🎜 첫 번째 매개변수는 호출 함수에서 this 값을 변경하는 데 사용되므로 첫 번째 매개변수는 null입니다. 🎜🎜확산 연산자는 배열 요소를 함수에 인수로 전달하는 데 더 편리하고 읽기 쉬운 솔루션입니다. 예: 🎜rrreee

🎜배열 만들기 🎜🎜🎜확산 연산자를 사용하면 기존 배열이나 Symbol.iterator() 메서드가 포함된 기타 반복 가능한 객체에서 새 배열을 만들 수 있습니다. . 이는 for...of 루프를 사용하여 반복할 수 있는 객체입니다. 🎜🎜예를 들어 배열을 복제하는 데 사용할 수 있습니다. 기존 배열의 값을 새 배열에 할당하기만 하면 새 배열을 변경하면 기존 배열이 업데이트됩니다. 🎜rrreee🎜 스프레드 연산자를 사용하면 기존 배열을 새 배열로 복제할 수 있으며, 새 배열 업데이트 배열에 대한 변경 사항은 기존 배열에 영향을 주지 않습니다. 🎜rrreee🎜 이는 1차원 배열만 복제한다는 점에 유의해야 합니다. 다차원 배열에서는 작동하지 않습니다. 🎜🎜확산 연산자를 사용하여 여러 배열을 하나로 연결할 수도 있습니다. 예: 🎜rrreee🎜 문자열에 스프레드 연산자를 사용하여 각 항목이 문자열의 문자인 배열을 만들 수도 있습니다. 🎜rrreee

🎜Create Objects 🎜🎜🎜 스프레드 연산자는 객체를 생성하기 위해 다양한 방법으로 사용될 수 있습니다. 🎜🎜다른 개체를 얕은 복제하는 데 사용할 수 있습니다. 예: 🎜rrreee🎜 여러 개체를 하나로 병합하는 데에도 사용할 수 있습니다. 예: 🎜rrreee🎜객체가 동일한 속성 이름을 공유하는 경우 확장된 마지막 객체의 값이 사용된다는 점에 유의하는 것이 중요합니다. 예: 🎜rrreee🎜 확산 연산자를 사용하여 배열에서 객체를 생성할 수 있습니다. 여기서 배열의 인덱스는 속성이 되고 해당 인덱스의 값은 속성의 값이 됩니다. 예: 🎜rrreee🎜 또한 문자열에서 객체를 생성하는 데 사용할 수 있습니다. 여기서 문자열의 인덱스는 속성이 되고 해당 인덱스의 문자는 속성의 값이 됩니다. 예: 🎜rrreee

🎜Convert NodeList to Array🎜🎜🎜NodeList는 문서의 요소인 노드의 모음입니다. 요소는 배열과 달리 항목 또는 항목과 같은 컬렉션의 메서드를 통해 액세스됩니다. 🎜🎜확산 연산자를 사용하여 NodeList를 Array로 변환할 수 있습니다. 예: 🎜rrreee

🎜배열에서 중복 제거🎜🎜🎜Set 객체는 고유한 값만 저장하는 컬렉션입니다. NodeList와 유사하게 Set은 스프레드 연산자를 사용하여 배열로 변환될 수 있습니다. 🎜🎜Set은 고유한 값만 저장하므로 스프레드 연산자와 함께 사용하여 배열에서 중복 항목을 제거할 수 있습니다. 예: 🎜rrreee

🎜확장 연산자 및 나머지 연산자🎜🎜🎜나머지 연산자도 점 3개 연산자(...)이지만 다른 목적으로 사용됩니다. 나머지 연산자는 함수의 인수 목록에 사용되어 함수가 정의되지 않은 수의 인수를 허용함을 나타낼 수 있습니다. 이러한 매개변수는 배열로 처리될 수 있습니다. 🎜🎜예: 🎜rrreee🎜이 예에서는 나머지 연산자가 calculateSum 함수에 대한 인수로 사용됩니다. 그런 다음 배열의 항목을 반복하고 추가하여 합계를 계산합니다. 🎜🎜그런 다음 변수를 함수에 하나씩 calculateSum 인수로 전달하거나 스프레드 연산자를 사용하여 배열 요소를 인수로 전달할 수 있습니다. 🎜rrreee🎜🎜결론🎜🎜🎜확산 연산자 코드를 읽기 쉽게 유지하면서 더 적은 코드 줄로 더 많은 작업을 수행할 수 있습니다. 함수에 인수를 전달하거나 다른 반복 가능 항목에서 배열 및 객체를 생성하기 위해 반복 가능 항목과 함께 사용할 수 있습니다. 🎜

【관련 추천: javascript 동영상 튜토리얼, 기본 프로그래밍 동영상】

위 내용은 JavaScript에서 스프레드 연산자를 사용하는 다양한 방법을 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!