JavaScript: Destructuring에서 값 건너뛰기

공백을 사용하여 원치 않는 값을 건너뛸 수 있습니다 🤓

이렇게 하면 구조 분해 중에 원하지 않는 값에 대한 쓸모없는 변수 할당을 피할 수 있습니다 👍

무시할 변수 이름 뒤에 "_"접두사를 붙일 수도 있습니다. 이것은 쓸모없는 변수라는 것을 팀원에게 전달하는 데 도움이 됩니다 🤝

// ❌ Ugh, useless variable assignment
const [ignore, keep] = ['ignore', 'keep'];

// ✅ Good (blank space)
const [, keep] = ['ignore', 'keep'];

// ✅ Good ("_" communicates useless variable)
const [_ignore, keep] = ['ignore', 'keep'];

코드 가독성 향상을 위한 주석 추가

공백 옵션을 사용하여 값을 건너뛸 때 주석을 추가할 수도 있습니다. 이렇게 하면 원하지 않는 값을 의도적으로 건너뛰고 있음을 동료 개발자에게 알리는 데 도움이 됩니다.

let [
  chili,
  , // rotten
  , // rancid
  apple,
  olive,
] = ['chili', 'rotten', 'rancid', 'apple', 'olive'];

// OR

let [
  chili,
  /* rotten */,
  /* rancid */,
  keep,
  olive
] = ['chili', 'rotten', 'rancid', 'keep', 'olive'];

간단한 사용 사례

다음은 이것이 도움이 될 수 있는 간단한 사용 사례입니다.

const url = 'www.samanthaming.com/tidbit.jpg';

// 1. Split string by "."
const array = url.split('.'); // [ 'www', 'samanthaming', 'com/tidbit', 'jpg' ]

// 2. Create only the variable we want
const [ , domain, ,type] = array;

// 3. Consuming the variable we created
const name = `${domain}.${type}`;
// 'samanthaming.jpg'

커뮤니티 입력

: 밑줄이 상당히 도움이 됩니다. 적어도 코드를 읽는 사람은 변수가 어떻게 생겼는지 추적할 필요가 없습니다. 해체된 항목(배열 또는 객체)에 변수가 많을 때 스트레스가 될 수 있습니다.

: 할 수 있다는 학습[ , valueICareAbout]이 매우 유용했습니다. 대부분의 linter는 사용하지 않는 변수에 대해 불평합니다.

: TypeScript에서 규칙은 다음과 같습니다_.

동의하지만 항상 실용적으로 살펴보고 코드 가독성을 염두에 두십시오. 동료 개발자(또는 미래의 당신)가 코드를 이해하기 위해 쉼표를 세기 시작해야 하는 터무니없는 상황에 도달할 수 있습니다 ;-)

const values = ['ignore', 'ignore', 'keep'];

// ❌ Don't do useless variable assignment
const [a, b, c] = values;

// ✅ if all you need is one value...
const [, keep] = ['ignore', 'keep'];

// 🦄 But also, don't overhack it:
let c = values[2]; // simpler is better

: 쉼표로 구분된 데이터를 구문 분석하고 필요한 항목만 가져옵니다.

const tooMuchData = '33871,LOC,type1,99.27,FN';
const [, , , price] = tooMuchData.split(',');

console.log(price); // 99.27

: 또는 키가 인덱스인 객체와 같은 배열을 분해한 다음 키의 이름을 원하는 변수 이름으로 바꿀 수도 있습니다const {1: name} = ['ignore', 'keep']. name의 값은 배열의 인덱스 1에 있는 값이기 때문에 keep가 됩니다.

자원

MDN Web Docs: Destructuring - Ignoring some returned values

Advanced ES6 Destructuring Techniques

Stack Overflow: How can I ignore certain returned values from array destructuring?

원래 게시 위치: www.samanthaming.com

읽어주셔서 감사합니다 ❤
안녕하세요! | | Blog | SamanthaMing.com