자바 스크립트의 구조 분해 및 확산 구문
11322 단어 javascript
구조 분해 구문
먼저 자바스크립트에서 분해 연산자에 대해 살펴보겠습니다. 이 연산자는 배열 또는 객체에서 변수를 추출하는 데 사용됩니다.
더 명확하게 이해하기 위해 아래 예를 볼 수 있습니다.
// let us declare an array here
let arr = [2, 1, 3, 5];
/*
suppose we want to store the individual numbers into
variables we can use destructure operator
*/
const [a] = arr;
console.log(a); // [output]: 2
const [l, m, n] = arr;
console.log(`${l} ${m} ${n}`); // [output]: 2 1 3
const [p,q,r,s] = arr;
console.log(`${p} ${q} ${r} ${s}`); // [output]: 2 1 3 5
const [z,x,c,v,b] = arr;
console.log(b); // [output]: undefined // as there are only 5 elements in array
보시다시피 분해하는 동안 변수의 수가 배열의 요소 수보다 많으면 배열에서 임의의 수의 요소를 분해할 수 있습니다. 그런 다음 추가 변수에서 정의되지 않습니다.
const student = {name: 'Krishna', age:21, rollNo: '21JK15'};
const {name} = student;
console.log(name); // [output]: Krishna
const {age, rollNo} = student;
console.log(`${age} ${rollNo}`); // [output]: 21 21JK15
const {marks} = student;
console.log(marks); // [output]: undefined
위에서 볼 수 있듯이 구조 분해는 객체의 속성을 추출하는 데 사용되며 객체에 존재하지 않는 속성을 추출하면 정의되지 않음
스프레드 구문
이 구문에 대해 내가 찾은 것은 함수에 인수를 전달하는 데 사용할 수 있거나 배열이나 객체를 확장하는 데 사용할 수 있다는 것입니다. 여기에서 몇 가지 예를 볼 수 있습니다.
자바스크립트에서 스프레드 연산자로 ... 3개의 점을 사용합니다.
function addNums(a, b) {
return a+b;
}
const nums = [1,2];
console.log(addNums(...nums)); // [output]: 3
위의 예에서 스프레드 연산자가 함수에 인수를 전달하는 데 사용되는 것을 볼 수 있습니다.
const arr1 = [1,2];
const arr2 = [3,4];
const arr3 = [...arr1, ...arr2]; // concat two arrays
const arr4 = [...arr1, 7, 8]; // append new elements to array at last
const arr5 = [7, 8, ...arr1]; // append to the front of array
위의 예에서 스프레드 연산자가 배열을 확장하는 데 사용됨을 알 수 있습니다.
let student = {name:'Krishna', age:21};
student = {...student, marks: 85};
console.log(student); // [output]: {name:'Krishna', age:21, marks:85}
위의 예에서 스프레드 연산자를 사용하여 개체에 새 속성을 추가합니다.
let student = {name:'Krishna', age:21};
student = {...student, age:18}; // wii modify the age to 18
console.log(student); // [output]: {name:'Krishna', age:18}
student = {name:'Krishna', age:21};
student = {age:18, ...student}; // wrong way to modify object
console.log(student); // [output]: {name:'Krishna', age: 21}
위에서 볼 수 있듯이 스프레드 연산자를 사용하여 객체의 속성을 수정할 수도 있습니다. 객체를 수정하는 두 번째 방법은 잘못되었습니다. 먼저 객체를 스프레드한 다음 수정해야 합니다. 다음에 조심할 수 있도록 지금 공유합니다
Reference
이 문제에 관하여(자바 스크립트의 구조 분해 및 확산 구문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rohit20001221/destructuring-and-spread-syntax-in-javascript-7dj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)