> 웹 프론트엔드 > JS 튜토리얼 > 스프레드 및 나머지 연산자

스프레드 및 나머지 연산자

WBOY
풀어 주다: 2024-08-21 06:10:05
원래의
1223명이 탐색했습니다.

Spread & Rest Operator

  • 문자 노이즈가 적은 기존 배열에서 새 배열을 형성합니다.
  • Spread는 요소를 값으로 추출합니다. 불변 기능입니다.
  • []는 새로운 배열을 작성하는 방법입니다. 따라서 스프레드는 원래 배열을 변경하지 않습니다.
  • Spread는 배열뿐만 아니라 모든 반복 가능 항목에서 작동합니다.
  • Iterables: 문자열, 배열, 맵, 집합, 즉 객체 데이터 유형을 제외한 대부분 내장 데이터 구조입니다.
  • 구조 분해와의 차이점: 배열에서 모든 요소를 ​​추출하고 새 변수를 생성하지 않으며 CSV 값이 필요한 위치에서만 사용됩니다.
  • 배열을 만들거나 함수에 값을 전달할 때 사용됩니다.
const nums = [5,6,7];
const newNums = [1,2, nums[0],nums[1],nums[2]];
console.log(newNums); // [ 1, 2, 5, 6, 7 ]

is reduced to 

const nums = [5,6,7];
const newNums = [1,2, ...nums];
console.log(newNums); // [ 1, 2, 5, 6, 7 ]
console.log(...newNums); // 1 2 5 6 7
로그인 후 복사

1. 두 개의 어레이를 함께 병합

const arr1 = [1,2,3,4,5];
const arr2 = [6,7,8,9];

let nums = [...arr1,...arr2];
nums; // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]


const firstname = "Peter";
const fullName = [...firstname,' ',"P."];
fullName; // [ 'P', 'e', 't', 'e', 'r', ' ', 'P.' ]

console.log(...firstname); // 'P' 'e' 't' 'e' 'r'
로그인 후 복사
  • 오류 소스: 템플릿 문자열은 내부에 여러 값을 예상하지 않으므로 스프레드 연산자가 템플릿 문자열 내에서 작동하지 않습니다.

2. 배열의 얕은 복사본 만들기

const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya']
};

const frnz = [...girl.friends];
console.log(frnz); // [ 'Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya' ]
console.log(girl.friends); // [ 'Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya' ]
로그인 후 복사

Spread는 반복 가능하지 않은 객체에서도 작동합니다.

let male = {
  "firstName": "Gangadhar",
  "lastName": "Shaktimaan"
}

let female = {
  "firstName": "Geeta",
  "lastName": "Vishwas"
}

let x = {...male, born: 1950};
let y = {...female, born: 1940};

x; // { firstName: 'Gangadhar',   lastName: 'Shaktimaan',   born: 1950 }
y; // { firstName: 'Geeta',  lastName: 'Vishwas',  born: 1940 }```




## Shallow Copy of objects:

let male = {
  "firstName": "Gangadhar",
  "lastName": "Shaktimaan"
}

let character = {...male, firstName: 'Wonderwoman'};

male;         // { firstName: 'Gangadhar', lastName: 'Shaktimaan' }
character;    // { firstName: 'Wonderwoman', lastName: 'Shaktimaan' }

- First name for character object is changed although it was extracted from male object


로그인 후 복사

휴식 패턴 및 휴식 매개변수:

  • Rest는 Spread와 반대이지만 Spread와 동일한 구문을 갖습니다.
  • Spread는 새 배열을 구축하거나 fn에 값을 전달하는 데 사용되었습니다. 두 경우 모두 요소를 확장하는 데 스프레드가 사용되었습니다.
  • Rest는 동일한 구문을 사용하지만 해당 값을 단일로 압축합니다
  • 확산은 배열에서 요소를 압축 해제하기 위한 것이고, 나머지는 요소를 배열로 압축하기 위한 것입니다. ````

확산 연산자와 나머지 연산자의 구문 차이:
스프레드 연산자 => ... 할당 연산자의 RHS에 사용됩니다.
const 숫자 = [9,4, ...[2,7,1]];

나머지 연산자 => ... 구조 분해를 통해 할당 연산자의 LHS에 있게 됩니다
const [x,y,...z] = [9,4, 2,7,1];

## Rest syntax collects all the elements after the last elements into an array. Doesn't include any skipped elements. 
- Hence, it should be the last element in the destructuring assignment.
- There can be only one rest in any destructuring assignment.
로그인 후 복사

다이어트하자 = ['피자', '버거', '국수', '구이', '초밥', '도사', '우타팜'];

let [첫 번째, ,세 번째, ...기타] = 다이어트;
먼저;
세 번째;
기타;

- Rest also works with objects. Only difference is that elements will be collected into a new object instead of an arrray.
로그인 후 복사

let days = { '월':1, '화':2, '수':3, '목':4, '금':5, '토':6, '일':7};
{토요일, 일요일, ...작업} = 일수;
let off = {토, 일};

일 중; // { 월:1, 화:2, 수:3, 목:4, 금:5 }
끄다; // { 토: 6, 일: 7 }

- Although both look same, but they work differently based on where they are used.

로그인 후 복사

Rest & Spread의 미묘한 차이:

  • 확산 연산자는 쉼표로 구분된 값을 쓰는 데 사용됩니다
  • 나머지 패턴을 사용하여 변수 이름을 쉼표로 구분하여 작성합니다.

로그인 후 복사

위 내용은 스프레드 및 나머지 연산자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿