집 > 기사 > 웹 프론트엔드 > Node.js는 배열을 순회하여 공유할 수 있는 API 예제를 사용합니다.

Node.js는 배열을 순회하여 공유할 수 있는 API 예제를 사용합니다.

小云云원래의: 2018-01-29 11:41:071384검색

JS에는 배열을 통과할 수 있는 많은 API가 잘 캡슐화되어 있으므로 일반적인 개발 중에 사용하면 어떨까요? 비교용 문장의 일반 문장과 유사합니다. 이 기사는 주로 js에서 탐색 가능한 배열을 사용하는 API 예제를 공유합니다. 도움이 되기를 바랍니다.

객체 배열을 테스트 데이터로 사용합니다.

const testArr = [
    { id: 1, name: '张三', age: 18 }, 
    { id: 2, name: '李四', age: 24 }, 
    { id: 3, name: '王小二', age: 22 }
];

forEach

모든 객체의 ID를 인쇄합니다. for 문은 다음과 같이 작성됩니다.

for (let i = 0, len = testArr.length; i < len; i++) {
    console.log(testArr[i].id); // 1, 2, 3
}

다음으로 방법을 살펴보겠습니다. forEach는 다음과 같이 작성되었습니다.

testArr.forEach(item => console.log(item.id)); // 1, 2, 3

둘의 결과는 동일합니다. forEach는 명령형 프로그래밍 스타일인 반면, forEach는 기계에 무엇을 해야 할지 알려주는 반면, 후자는 무엇을 해야 할지에만 집중합니다. . 우리는 후자의 작성 방법을 권장하며 forEach를 사용하도록 노력해야 합니다. 그러면 for()에 긴 일련의 표현식을 작성할 필요가 없습니다. (ps: 성능에 대해 까다롭다면 for를 사용하세요!)

map

이제 모든 개체의 이름을 가져와서 새 배열을 만들고 싶습니다. for 문은 다음과 같이 작성됩니다.

let names = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    names.push(testArr[i].name);
}

console.log(names); // [ &#39;张三&#39;, &#39;李四&#39;, &#39;王小二&#39; ]

더 장황합니다. , 원본과의 이러한 종류의 비교 배열의 각 요소에 대해 지정된 작업을 수행하고 최종적으로 새 배열을 반환하는 문제에는 map이 완벽하게 적합합니다.

testArr.map(item => item.name); // [ '张三', '李四', '王小二' ]

for 문과 비교하면 map은 매우 우아합니다!

지도와 관련하여 주의할 점이 있습니다:

[1, 2, 3].map(parseInt); // [ 1, NaN, NaN ]

일부 학생들은 여기서 약간 혼란스러워할 수 있습니다. 결과가 [1, 2, 3]이 아닌 이유는 무엇입니까?

사실 매우 간단합니다. map은 세 개의 매개변수(현재 탐색 중인 요소, 현재 요소 인덱스 및 원래 배열 자체)를 parsInt에 전달하며,parseInt는 두 개의 매개변수를 가질 수 있습니다.

이것은 다음 코드를 실행하는 것과 동일합니다:

parseInt(1, 0); // 1
parseInt(2, 1); // NaN
parseInt(3, 2); // NaN

따라서 결과는 [1, 2, 3] 대신 [1, NaN, NaN]입니다.

filter

때때로 18세 이상의 개체와 같이 특정 조건을 충족하는 요소를 필터링해야 하는 경우가 있습니다. for의 작성은 다음과 같습니다.

let newArr = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newArr.push(testArr[i]);
    }
}

console.log(newArr); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]

보시다시피 작성이 매우 장황하고, 이때 필터를 사용하는 것이 매우 편리합니다.

testArr.filter(item => item.age > 18); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]

filter를 사용하여 배열을 중복 제거할 수도 있습니다. 코드는 다음과 같습니다.

const arr2 = [1, 2, 4, 1, 3, 2, 6];

arr2.filter((item, idx, arr) => {
    return arr.indexOf(item) === idx;
}); // [ 1, 2, 4, 3, 6 ]

map + filter

모든 객체의 특정 속성을 얻으려면 다음을 결정해야 합니다. 객체에 이 속성이 있는지 여부를 미리 지정합니다. For는 작성하기가 약간 불편합니다.

function getAllOfSomeProps (array, props) {
    let arr = [];

    array.forEach((item) => {           
        if (item[props]) {
            arr.push(item[props]); // => item[props] && arr.push(item[props])
        }
    })

    return arr;
}

getAllOfSomeProps(testArr, 'sex'); // []
getAllOfSomeProps(testArr, 'id'); // [ 1, 2, 3 ]
getAllOfSomeProps(testArr, 'name'); // [ '张三', '李四', '王小二' ]

map + 필터의 조합이 훨씬 더 우아합니다.

return array.map(item => item[props]).filter(item => item);

더 유명한 예를 들어 보겠습니다. for 문은 다음과 같습니다:

let newNames = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newNames.push(testArr[i].name);
    }
}

console.log(newNames); // [ '李四', '王小二' ]

map + filter를 다시 살펴보겠습니다:

testArr.filter(item => item.age > 18).map(item => item.name); // [ '李四', '王小二' ]

는 여전히 매우 우아합니다.

some

때때로 새 객체를 추가해야 하지만 일부 속성은 반복할 수 없습니다. for는 다음과 같이 작성됩니다.

function isRepeat (array, props, value) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (array[i][props] === value) {
            return true;
        }
    }

    return false;
}

some 메소드는 배열의 특정 요소가 지정된 함수의 테스트를 통과하는지 테스트합니다.

function isRepeat (array, props, value) {
    return array.some(item => item[props] === value);
}

isRepeat(testArr, 'name', '张三'); // true
isRepeat(testArr, 'name', '李白'); // false

every

for는 다음과 같이 작성됩니다.

function hasSomeProps (array, props) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (!array[i][props]) {
            return false;
        }
    }

    return true;
}

every 메소드는 배열의 모든 요소가 지정된 속성의 테스트를 통과했는지 테스트합니다. 기능. 다음과 같이 다시 작성하세요:

function hasSomeProps (array, props) {
    return array.every(item => item[props]);
}

hasSomeProps(testArr, 'name'); // true

Break out of the loop

이름이 Li Si가 될 때까지 개체 정보를 인쇄하는 등 특정 조건이 충족되면 루프를 종료해야 하는 경우도 있습니다.

사용하기 위해 break:

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].name === &#39;李四&#39;) {
        break;
    }
    console.log(testArr[i]); // { id: 1, name: &#39;张三&#39;, age: 18 }
}

some , 조건이 true이면 true를 반환하여 빠져나옵니다. 루프:

testArr.some((item) => {
    if (item.name === '李四') {
        return true;
    }
    console.log(item); // { id: 1, name: '张三', age: 18 }
})

every, 조건이 true이면 false를 반환하여 루프에서 빠져나옵니다.

testArr.every((item) => {
    if (item.name === '李四') {
        return false;
    }
    console.log(item); // { id: 1, name: '张三', age: 18 }
})

forEach에는 중단이 없으므로 여기서는 some, Every를 사용할 수 있습니다. 대신에.

reduce

[343, 34, 232, 4, 343, 335, 353535]의 합을 계산합니다. for 의 작성은 다음과 같습니다.

const arr = [343, 34, 232, 4, 343, 335, 353535];

let sum = 0;
for (let i = 0, len = arr.length; i < len; i++) {
    sum += arr[i];
}
console.log(sum); // 354826

이런 종류의 누적 연산을 수행하려면 Reduce를 사용하는 것이 매우 편리합니다. :

arr.reduce((prev, curr) => prev + curr) // 354826

실용적인 방법이 훨씬 더 많습니다. 이런 식으로 학생들은 일상적인 공부나 업무에서 천천히 축적할 수 있습니다.

요약: 배열을 순회할 때 이러한 API를 사용해야 합니다. 유연한 사용은 코드를 더욱 우아하게 만들 수 있습니다. 함수와 체인 호출을 최대한 많이 사용하는 이러한 스타일은 함수형 프로그래밍에 매우 가깝고 코드 품질을 향상시킬 수 있습니다.