속성 과정 - 13 유용한 자바스크립트 배열 방법

이 댓글에 편지 한 통 보내주세요.💓, 🦄, 혹은🔖 네가 좋아하면!
JavaScript 배열 방법은 일반적으로 필요한 데이터 변환을 수행하는 데 필요한 믿을 수 없고 우아한 방법을 제공합니다.Stack Overflow의 공헌자로서 나는 대상 그룹을 어떻게 이런저런 방식으로 조종하는지에 관한 문제를 자주 본다.이것은 왕왕 수조 방법의 완벽한 용례이다.
나는 이곳에서 유사한 방법으로 조직되어 때로는 합병될 수 있는 서로 다른 수조 방법을 소개할 것이다.이 목록은 전면적이지 않습니다. MDN (내가 가장 좋아하는 자바스크립트 참조) 에서 토론한 모든 내용을 되돌아보고 실천하시기를 권장합니다.

매핑, 필터링, 감소
javascript수 그룹 방법map,filter,reduce에 약간의 혼동이 존재한다.이것들은 그룹을 변환하거나 집합 값을 되돌려 주는 유용한 방법이다.

map: 수조를 되돌려줍니다. 그 중 모든 요소는 함수의 지정에 따라 변환됩니다

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

필터:true의 원소 그룹을 되돌려줍니다

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

감소: 함수 중의 규정에 따라 누적치

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current, 0);
console.log(reduced);
// 21

참고: 일반적으로 초기 값을 지정하는 것이 좋습니다. 그렇지 않으면 오류가 발생할 수 있습니다.예를 들면 다음과 같습니다.

const arr = [];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// Uncaught TypeError: Reduce of empty array with no initial value

만약 initialValue가 없다면, Reduce는 그룹의 첫 번째 요소를 initialValue로 하고, 두 번째 요소부터 교체합니다.

색인
수조 방법find,findIndex과indexOf는 통상적으로 합병할 수 있다.다음과 같이 사용합니다.

find: 지정한 조건과 일치하는 첫 번째 실례를 되돌려줍니다.일치하는 다른 인스턴스는 더 이상 찾을 수 없습니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

다시 한 번 주의하지만 5 이후의 모든 내용은 조건에 부합되지만 첫 번째 일치하는 요소만 되돌려줍니다.이것은 실제로 매우 유용한 상황에서, 당신은 보통 for 순환을 깨뜨릴 것이다. 일치하는 것을 찾으면!

findIndex: 검색 방식은 거의 같지만 첫 번째 일치하는 요소가 아니라 첫 번째 일치하는 요소의 인덱스를 되돌려줍니다.아래의 예를 들어 명확하게 보기 위해 숫자가 아닌 이름을 사용한다.

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

indexOf:findIndex와 거의 같지만 함수를 매개 변수로 하는 것이 아니라 간단한 값을 사용합니다.더 간단한 논리가 있고 일치하는 함수가 있는지 확인할 필요가 없을 때 사용할 수 있습니다.

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

밀어내기, 팝업, 이동, 이동 취소
여러 가지 좋은 수조 방법은 수조에서 맞춤형 방식으로 요소를 추가하거나 삭제하는 데 도움을 줄 수 있다.

push: 이것은 상대적으로 간단한 방법으로 하나의 항목을 그룹의 끝에 추가할 수 있다.이것은 적당한 위치에서 수조를 수정하고 함수 자체가 새 수조의 길이를 되돌려줍니다.

const arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

pop: 그룹에서 마지막 항목을 삭제합니다.마찬가지로, 그것은 적당한 위치에서 그룹을 수정할 것이다.함수 자체가 수조에서 제거된 항목을 되돌려줍니다.

const arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

shift: 그룹에서 첫 번째 항목을 삭제합니다.마찬가지로, 그것은 적당한 위치에서 그룹을 수정할 것이다.함수 자체가 수조에서 제거된 항목을 되돌려줍니다.

const arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1

위치 이동 취소: 그룹의 시작에 원소를 하나 이상 추가합니다.마찬가지로, 그것은 적당한 위치에서 그룹을 수정할 것이다.많은 다른 방법과 달리 함수 자체가 수조의 새로운 길이를 되돌려줍니다.

const arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7

조인트
이 방법들은 그룹 서브집합을 수정하거나, 그룹 서브집합을 되돌려줍니다.

결합: 기존 요소와 새 요소를 제거하거나 교체하여 그룹의 내용을 변경합니다.이 메서드는 현재 위치에서 패턴을 수정합니다.

The following code sample can be read as: at position 1 of the array, remove 0 elements and insert b.
const arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b');
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

slice: 지정한 시작 위치에서 그룹의 얕은 복사를 되돌려줍니다. 지정한 끝 위치 전에.끝 위치를 지정하지 않으면, 그룹의 나머지 부분을 되돌려줍니다.중요한 것은 이 방법은 그 자리에서 그룹을 수정하지 않고 필요한 서브집합을 되돌려주는 것이다.

const arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

분류하다

정렬: 제공된 함수에 따라 수조를 정렬하고 이 함수는 첫 번째 원소와 두 번째 원소 파라미터를 받아들인다.현재 위치에서 패턴을 수정합니다.함수가 음수나 0을 되돌리면 순서가 변하지 않습니다.양의 경우 요소 순서를 전환합니다.

const arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]

아니, 너 다 알아들었니?나도 없다. 사실 이 글을 쓸 때, 나는 어쩔 수 없이 MDN 문서를 대량으로 인용했다 - 괜찮아요!밖에 어떤 방법이 있는지 알기만 하면 95%의 성공을 얻을 수 있다.