JavaScript Array Destructuring을 알고 계셨습니까?

소개: 안녕하세요, 오늘 우리는 JavaScript 프레임워크를 배우기 전에 필수적인 가장 중요한 JavaScript 개념 중 하나를 배울 것입니다. 배열 구조 분해는 초보자 개발자에게도 혼란스럽습니다.

흥미로운 이야기를 들려드리면 갑자기 JavaScriptarray destructuring에 대한 모든 것을 알고 있음을 알게 될 것입니다. 아무것도 기억할 필요가 없습니다. 이 이야기를 따라하면 완료됩니다.

요구 사항: 강렬한 집중이 필요합니다.

고양이가 당신의 문제 해결사가 됩니다. 당신은 노트북과 함께 의자에 앉아 있고 노트북에는 현재 작동하는 세 개의 키("I", "A"및 "M")만 있습니다. 입력에 대한 마지막 희망인 weAreAlive라는 배열에 입력합니다.

 const weAreAlive = ["I", "A", "M"] 

더 이상 작동하지 않는 모든 쓸모없는 키를 포함하는 또 다른 배열을 만듭니다. 이 배열의 이름을 weAreUseless로 지정합니다.

const weAreUseless = ["B", "C", "D", ...]

Twitter 피드에 "I am"이라는 두 단어를 입력한 직후 "I"키도 작동을 멈춘다는 것을 알게 됩니다.



따라서 이 키를 weAreUseless 배열로 이동하려면 먼저 이를 kickMeOut이라는 변수에 할당합니다. 그러나 새 줄에 새 변수를 만드는 대신 다음과 같은 배열 구조 분해 구문을 사용하여 weAreAlive 배열 자체의 첫 번째 키에 새 변수를 할당하면 됩니다.

const [kickMeOut] = ["I", "A", "M"]

이제 이 kickMeOut 변수를 콘솔에 기록하면 배열에서 "I"인 첫 번째 키만 얻게 됩니다. 살펴보세요:

console.log(kickMeOUt) // "I"

따라서 "weAreUseless"배열에 푸시할 수 있는 이 쓰레기 키가 있습니다.



좋습니다. 이제 제대로 작동하는 키가 두 개뿐입니다. 그러나 의미 있는 단어를 입력할 수 있는 키가 없기 때문에 비생산적이라고 느끼기 시작합니다.

그래서 커피를 들고 끔찍한 노트북에 대해 생각하기 시작합니다. 하지만 당신은 이 노트북이 더 이상 당신의 것이 아니라는 사실을 몰랐습니다. 당신의 고양이는 어떻게든 당신이 불행하다는 것을 깨달았습니다. 그래서 그는 그것에 대해 이야기하기 위해 당신의 얼굴을 향해 손을 뻗기 위해 당신의 테이블로 뛰어들었고 당신은 노트북에 커피를 쏟았습니다.



그 후 "M"키가 더 이상 살아 있지 않다는 것을 알게 됩니다. 따라서 "weAreUseless"배열로 이동하려면 이전과 마찬가지로 즉시 코드 작성을 시작합니다. 아아! 이 배열('weAreAlive')의 첫 번째 키만 대상으로 지정할 수 있습니다. 배열 내부의 특정 항목에 변수를 할당하는 방법을 모릅니다.

const [kickM] = ["A", "M"] // Sorry we can only kick out "A"

갑자기 당신은 고양이가 당신에게 "아, 배열의 항목을 건너뛰려면 대신 쉼표를 사용해야 합니다"라고 말하는 것을 깨닫게 됩니다.



따라서 즉시 다음과 같이 이 배열의 불필요한 키를 통과하기 위해 쉼표를 넣기 시작했습니다.

const [, kickMe] = ["A,"M"] // "M" Keys succesfully kicked out!

그러면 마음이 자동으로 알려주기 시작합니다. 여기서 사실은 변수 앞에 쉼표를 넣으면 이 경우 "A"의 항목 배열에서 한 단계 앞으로 이동하고 이 "M"키에 kickM 변수를 할당한다는 것입니다. 각 쉼표는 배열 목록에서 왼쪽에서 오른쪽으로 고유한 위치를 나타냅니다.

구체적인 예는 다음과 같습니다.

const [, , targetCat] = ["horse", "dog", "cat"]

console.log(targetCat) // cat has been targeted!

요약: 그래서 우리는 한 줄에 배열 구조 분해를 사용하여 배열 값을 새 변수에 할당할 수 있고 각 쉼표가 배열 목록에서 하나의 특정 항목만 차지하는 쉼표를 사용하여 배열 목록을 통해 특정 항목을 건너뛸 수 있다는 것을 배웠습니다.

이 기사를 즐겼기를 바랍니다. 절대 잊지 못할 이야기와 같은 복잡한 프로그래밍 아이디어에 대해 자세히 알아보려면 저를 팔로우하세요.

JavaScript 배열 분해 비디오 요약:

내 소셜 미디어 계정:/

읽어주셔서 감사합니다.