내 배열 메서드 치트 시트 생략

반응형

아래의 배열 방법 표를 몇 번이나 참조해야 했는지 말씀드릴 수 없습니다. 저는 LeetCode에서 알고리즘 연습을 하는 동안 몇 번 이상 사용했습니다. 이제 그만! 나는 치트시트가 필요 없고 이 방법들을 더 잘 알고 싶어. 그럼 블로그에 풀어보죠

파괴적인 방법과 비파괴적인 방법?

여기 당신이 알아야 할 것이 있습니다.

 

• 소멸 배열 메서드는 메서드가 호출되는 원래 배열이 변이됩니다.

let runningShoes = ['Altras', 'Innov-8s', 'Bedrocks']
runningShoes.unshift('Luna Sandals') // destructive method
console.log(runningShoes)
// => ['Luna Sandals', 'Altras', 'Innov-8s', 'Bedrocks']

• 비파괴 방법은 수정사항을 사용하여 새 배열을 생성합니다.

let runningShoes = [“Altras”, “Innov-8s”, “Bedrocks”]
let newRunningShoes = [...runningShoes, “Luna Sandals”]
console.log(runningShoes)
//=> [ ‘Altras’, ‘Innov-8s’, ‘Bedrocks’ ]
console.log(newRunningShoes)
//=> [ ‘Altras’, ‘Innov-8s’, ‘Bedrocks’, ‘Luna Sandals’ ]

일반적으로 원본 데이터 세트를 변경하지 않도록 비파괴 방법을 사용하는 것이 좋습니다.

 

우선 비파괴적인 방법부터 시작합시다. 위의 예에서는 분산 연산자를 사용하고 있습니다.

연산자 확산

분산 연산자(. . . )를 사용하면 지정된 배열의 복사본을 만들고 새 배열을 반환합니다.

let runningShoes = [ ‘Altras’, ‘Innov-8s’, ‘Bedrocks’ ]
let copyOfRunningShoes = [...runningShoes]
console.log(copyOfRunningShoes) //=> [‘Altras’, ‘Innov-8s’, ‘Bedrocks’]

분산 연산자를 사용하여 배열의 시작이나 끝에 요소를 비파괴적으로 추가할 수 있습니다. 앞서 스프레드 연산자를 사용하여 끝에 요소를 추가했지만 맨발 테드의 루나 샌들을 시작 부분에 추가할 수도 있습니다.

 

let newRunningShoes = [“Luna Sandals”, ...runningShoes]
console.log(newRunningShoes)
//=> [‘Luna Sandals’, ‘Altras’, ‘Innov-8s’, ‘Bedrocks’]
console.log(runningShoes)
//=> [ ‘Altras’, ‘Innov-8s’, ‘Bedrocks’ ]

이는 원래 어레이에는 영향을 미치지 않으므로 runningShoes는 동일하게 유지됩니다. 또한 .slice()를 사용하여 배열의 복사본을 만들 수 있습니다.

.mbc()

.slice()를 인수 없이 사용하면 지정된 배열의 복사본도 생성되지만 인수와 함께 호출되면 해당 배열의 슬라이스가 복사됩니다.

slice()
slice(start)
slice(start, end)

 

인수는 인수가 호출된 배열의 인덱스를 나타냅니다. 시작이 새 배열의 첫 번째 요소가 되고 끝은 절단되는 첫 번째 요소가 됩니다.

let races = ['5K', '10K', '25K', '50K', '100K']
races.slice(1, 4) //=> [ ‘10K’, ‘25K’, ‘50K’ ]

위의 코드에서 시작은 경주[1]이고 끝은 경주[4]이다. .slice() 메소드는 시작 요소와 끝 요소 사이에 있는 배열 요소를 잡습니다(시작 요소 포함 및 끝 요소 제외).

.mbs 및 .unshifts

파괴 메서드로 이동합니다. push()는 배열 끝에 요소를 추가하며, 여기서 unshift()는 배열의 시작 부분에 요소를 추가합니다. 두 메서드 모두 배열의 새 길이를 반환합니다.

 

let races = [‘5K’, ‘10K’, ‘25K’, ‘50K’, ‘100K’]
races.push('150K') // returns 6, the new length of the array
races.unshift('Kids 1K') // returns 7
console.log(races) // => [‘Kids 1K’, ‘5K’, ‘10K’, ‘25K’, ‘50K’, ‘100K’, ‘150K’]

.poppus 및 .shift

pop()은 마지막 요소를 제거하고 .shift()는 첫 번째 요소를 제거합니다. 인수를 사용하지 않고 제거된 요소를 반환합니다.

let runningShoes = ['Altras', 'Innov-8s', 'Bedrocks']
runningShoes.pop() // returns 'Bedrocks'
console.log(runningShoes) //=> [ 'Altras', 'Innov-8s']

.splice()

 

그리고 이제 스플라이스. 리스트에서 가장 혼란스러운 사건인 것 같으니, 좀 더 헤어져 봅시다.

- MDN의 정의:

- 반환 값:

.splice는 삭제된 요소의 배열을 반환합니다.

- 인수:

 

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

- .splice()를 사용하여 요소를 삭제하는 중

첫 번째 인수인 start는 요소를 삭제할 배열의 시작 인덱스를 나타냅니다. deleteCount 인수는 삭제할 요소 수를 나타냅니다.

let favBrands = ['Patagonia', 'Brooks', 'Adidas', 'REI', 'Injinji']
favBrands.splice(2, 2) // returns ['Adidas', 'REI']
console.log(favoriteBrands) //=> ['Patagonia', 'Brooks', 'Injinji']

favBrands[2]에서 시작하고 로 시작하는 2개의 요소를 삭제합니다.

 

시작 인수에 대한 참고 사항:

• 지정된 인수가 start뿐이면 메소드가 시작 인덱스를 포함한 모든 요소를 삭제합니다.
• 시작이 배열 길이보다 크면: 배열 길이로 설정됩니다.
• 시작이 음수인 경우: 인덱스는 가장 높은 인덱스부터 뒤로 작동합니다. (즉 -1이 마지막 요소이고 -2가 두 번째에서 마지막 요소 등)

.splice()를 사용하여 요소를 추가하는 중

다음 인수는 배열에 추가할 요소(항목 1, 항목 2 등)를 나타냅니다. 여기 모든 주장이 함께 작동하는 두 가지 예가 있습니다. 하나는 설명이 있는 것이고, 다른 하나는 여러분이 여러분의 지식을 테스트할 필요가 없는 것입니다.

let favBrands = ['Patagonia', 'Brooks', 'Adidas', 'REI', 'Injinji']
favBrands.splice(-2, 0, 'SmartWool') // returns empty array since we didn't delete any elements!
console.log(favBrands) 
// => ['Patagonia', 'Brooks', 'Adidas', 'SmartWool', 'REI', 'Injinji']

 

단계별로 살펴보기:

• 시작 지수가 -2이므로 시작이 두 번째로 높습니다. favBrands[3]: REI
• deleteCount가 0이므로 요소를 삭제하지 않습니다.
• 마지막으로 추가할 브랜드는 시작 인덱스 뒤에 삽입되는 스마트울입니다.

다음은 여러분의 지식을 테스트하기 위한 두 번째 방법입니다.

let favBrands = ['Patagonia', 'Brooks', 'Adidas', 'REI', 'SmartWool', 'Injinji']
favBrands.splice(2, 2, "Amphipod", "Nathan" ) // return value?
console.log(favBrands) // output?

두 가지 질문:

 

• .splice()를 사용하면 어떤 결과가 반환됩니까?
• favBrands 어레이의 새로운 가치는 무엇입니까?

그 커닝 시트 말이야...

를 대비해서 보관하고 있을 수도 있지만 훨씬 적게 사용할 것입니다. 저는 이 모든 방법들을 알고 있었지만, 이 블로그를 쓰는 것이 그들이 하는 일, 그들의 주장, 그리고 그들의 반환 가치들을 더 잘 이해하는데 도움을 주었습니다.

하지만, 이것은 배열 방법의 시작에 불과하므로(내가 예전에 (다른 재미있는) 정렬 방법에 대해 썼던) 계속 배워봅시다.

리소스:

 

• MDN
• Replit에서 모든 테스트
• 플랫아이언 스쿨 커리큘럼
• 그리고 물론 위의 치트 시트도