JavaScript 배열 방법: 필터링, 매핑, 감소 및 정렬

함수는 JavaScript에서 매우 중요한 부분이며 계속 사용할 것입니다.JavaScript에서 함수는 다른 객체와 마찬가지로 속성과 메서드를 가질 수 있으므로 계층 객체입니다.함수를 정의하는 데는 몇 가지 방법이 있는데, 가장 흔히 볼 수 있는 방법은 함수를 사용하여 함수를 정의하는 것이다.예:

function calcRectArea(width, height) {
  return width * height;
}

console.log(calcRectArea(5, 6));
//-------> Output: 30

콜백

우리가 함수 표현식(익명 함수)이나 바늘(변수 이름, 성명 함수 이름)을 매개 변수로 함수에 전달할 때 전달하는 함수를 리셋 함수라고 한다.수신 함수는 이후에 이 함수를 실행하거나 호출하기 때문이다.즉, 그것은 리셋을 할 수 있고, 이를 리셋이라고 부른다.

우리 는 수조 방법: 여과, 매핑, 약간 과 정렬 을 한층 더 이해합시다

수조는 많은 방법을 제공했다.JavaScript는 배열 데이터 유형에 메서드를 내장했습니다.다음은 그것을 어떻게 사용하는지의 예이다.

사용하다.필터 그룹

filter() 특정 조건을 충족시키는 새로운 필터 요소 그룹을 되돌려줍니다.filter() 방법은 제공된 함수를 통해 이루어진 테스트의 모든 요소를 포함하는 새 그룹을 만듭니다.filter() 값이 없는 그룹 요소에 함수를 실행하지 않고 원시 그룹을 변경하지 않습니다.

구문:

array.filter(function(currentValue, index, arr), thisValue)

function(currentValue, index,arr)가 필요합니다.
배열의 각 요소에 대해 실행하는 함수의 함수 매개 변수는 다음과 같습니다.currentValue - 필수 현재 요소의 값index - 선택 사항, 현재 요소의 배열 인덱스arr - 현재 요소가 속한 배열 객체를 선택할 수 있습니다.thisValue - 옵션입니다.함수에 "this"값으로 전달됩니다.만약 이 인자가 비어 있다면, "undefined"값은 "this"값으로 전달됩니다.

예.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//-------> Output: Array ["exuberant", "destruction", "present"]

//-------> Output: ["exuberant", "destruction", "present"]

예:

[10, 20, 30, 40].filter(function() {
    return true;
  }) //=> [10, 20, 30, 40] (map, basically)

  [10, 20, 30, 40].filter(function(e) {
    return e < 30;
  }) //=> [10, 20]

  [10, 20, 30, 40].filter(function(e, index) {
    return index % 2 === 0;
  }) //=> [10, 30] (elements with an even-numbered index)

예:

const myArray = [
  { id: 1, name: "Mark" },
  { id: 2, name: "Sam" },
  { id: 3, name: "Sandy" },
  { id: 4, name: "Mark" },
]

myArray.filter(element => element.name === "Mark")
//-------> Output : 0:{id: 1, name: "Mark"},
//                  1:{id: 4, name: "Mark"}

사용하다.map () 로 그룹 변환

map() 방법은 수조의 모든 요소에 대해 리셋 함수를 호출하고 결과를 포함하는 새로운 수조를 되돌려줍니다.map() 방법은 두 개의 명명 파라미터를 받아들인다. 첫 번째는 필수적이고 두 번째는 선택할 수 있다.

구문:

const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});

newArr - 반환된 새 배열oldArr - 작업 중인 이전 어레이입니다.이 배열은 변경되지 않습니다.currentValue - 처리 중인 현재 값index - 처리 중인 값의 현재 인덱스array - 원시 어레이

예:

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
//-------> Output: [2, 8, 18, 32]

예:

[10, 20, 30, 40].map(function(a) {
  return a * 2;
}); 
//-------> Output: [20, 40, 60, 80]

ES6 예:

const arr = [1, 2, 3, 4];

const newArray = arr.map(element => {
  return element * 2;
});

const newArrayOneLiner = arr.map(element => element * 2);

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]
console.log(newArrayOneLiner); // [2, 4, 6, 8]

사용하다.reduce () 는 그룹을 값으로 축소합니다

reduce() 방법은 그룹의 모든 요소에 Reducer 함수를 실행하여 출력 값을 생성합니다.reduce() 방법은 수조의 모든 값 (왼쪽에서 오른쪽) 을 실행하는 데 제공되는 함수입니다.

함수의 반환 값은 누적기에 저장됩니다. (결과/총 수)
주의: reduce() 무값 그룹 요소의 함수를 실행하지 않습니다.
이 방법은 원시 그룹을 변경하지 않습니다.

구문:

array.reduce( function(total, currentValue, currentIndex, arr), 
initialValue )

이 메서드는 다섯 개의 매개변수를 적용합니다.function(total, currentValue, index, arr): 이것은 그룹의 모든 요소를 실행하는 데 필요한 매개 변수입니다.여기에는 다음 네 개의 매개변수가 포함됩니다.total: initialValue 또는 함수가 이전에 반환된 값을 지정하는 데 필요한 매개 변수입니다.currentValue: 현재 요소의 값을 지정하는 데 필요한 매개 변수입니다.currentIndex: 현재 요소의 그룹 인덱스를 지정할 수 있는 선택할 수 있는 매개 변수입니다.arr: 현재 요소가 속한 배열 객체를 지정하는 선택적 매개 변수입니다.
initialValue: 함수에 전달할 값을 초기 값으로 지정하는 선택적 매개 변수입니다.

[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }) //=> 100
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }, 100) //=> 200

예.

배열의 숫자를 처음부터 빼기:

var numbers = [125, 20, 25, 30];

document.getElementById("demo").innerHTML = numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}
//=> 50

.reduce()가 어떻게 일을 하는지 봅시다.콜백은 네 번 호출되며 각 호출의 매개 변수와 반환 값은 다음과 같습니다.

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue
})

콜백 교체
누적기
현재 값
현재 인덱스
어레이
반환값
첫번째 전화
0
1
1
[0, 1, 2, 3, 4]
1
두 번째 전화
1
2
2
[0, 1, 2, 3, 4]
셋
세 번째 전화.
셋
셋
셋
[0, 1, 2, 3, 4]
6
네 번째 전화.
6
4
4
[0, 1, 2, 3, 4]
10

sort 사용()

sort() 방법은 수조의 원소를 현지에서 정렬하고 정렬된 수조를 되돌려준다.

구문

arr.sort([compareFunction])

매개변수:compareFunction는 옵션입니다.그것은 정렬 순서를 정의하는 함수를 지정했다.firstEl, 비교에 사용되는 첫 번째 원소.secondEl, 비교에 사용되는 두 번째 원소.
대상 속성의 값에 따라 대상 수조를 정렬하려면 sort() 방법을 사용하고 대상 순서를 확정하는 비교 함수를 제공할 수 있다.

예.

다음 그림과 같이 객체 배열students이 있다고 가정합니다.

let students = [
    {
        firstName: 'Johnny',
        lastName: 'Lee',
        age: 20,
    },

    {
        firstName: 'Anna',
        lastName: 'Zax',
        age: 19,

    },

    {
        firstName: 'Zion',
        lastName: 'Sanches',
        age: 22,

    }
];

다음 문장 세그먼트는 나이 상승 순서에 따라 students 배열을 정렬합니다.

students.sort((a, b) => {
    return a.age - b.age;
});

학생이 표시되는 위치에서 forEach() 메서드를 사용할 수 있습니다.

studetns.forEach((e) => {
    console.log(`${e.firstName} ${e.lastName} ${e.age}`);
});

출력:

Anna Zax 19
Jonny Lee 20
Zion Sanchez 22

학생을 연령별 내림차순으로 정렬하려면 다음과 같이 비교 함수의 순서를 뒤바꾸면 됩니다.

students.sort((a, b) => b.age - a.age);

students.forEach((e) => {
    console.log(`${e.firstName} ${e.lastName} ${e.age}`);
});

출력:

Zion Sanchez 22
Jonny Lee 20
Anna Zax 19

결론

우리는 map(), filter(), reduce()와 sort()가 불필요한 현식 순환과 공수 그룹 성명의 수량을 줄여 개발자의 업무를 간소화하는 방법을 이해했다.기회가 된다면, 이 가장 선진적인 함수로 for순환을 바꾸어 보세요.더 많은 문서here를 찾을 수 있습니다.
접속하려면 내 Github 또는 를 확인하십시오.
읽어주셔서 감사합니다!