JavaScript 배열 단순화
14721 단어 programmingjavascriptwebdev
이 게시물에서는 배열 작업을 더 쉽게 하고 더 우아한 코드를 작성할 수 있도록 하는 몇 가지 JavaScript 방법을 다룰 것입니다.
배열을 정의합시다
const beers = ["Heineken", "San Diego", "Coruja", "Saint Bier"];
const ages = [20, 25, 19, 21, 42];
우리는 다음에 이해할 방법을 사용할 두 개의 배열을 만들었습니다.
몇 가지 놀라운 방법을 이해하기!
이제 작업에 필요한 배열을 만들었으므로 반죽에 손을 넣고 몇 가지 매우 흥미로운 방법으로 결과를 확인하겠습니다.
어레이.에브리()
배열의 모든 요소를 테스트할 수 있습니다. 요소 중 하나라도 정의한 조건을 통과하지 않으면 false가 반환됩니다. 예를 참조하십시오:
// ES5
function isGreaterThan(age) {
return age > 18;
}
const greater = ages.every(isGreaterThan);
// ES6
const isGreaterThan = (age) => age > 18;
const greater = ages.every(isGreaterThan);
console.log(greater); // true
> true
age 배열의 모든 값이 18보다 크므로 더 큰 변수의 반환은 true여야 합니다.
참고: 빈 배열이 제공되면 기본 반환 값은 TRUE여야 합니다.
배열.포함()
정의된 배열에 요소가 존재하는지 여부를 확인할 수 있습니다. 예시:
console.log(beers.includes('Skol')); // false
> false
console.log(ages.includes(25)); // true
> true
위에서 언급한 경우 반환값은 beer.includes('Skol')에 대해 false이고 age.includes(25)에 대해 true입니다.
배열.필터()
이 방법을 사용하면 정의한 조건으로 여러 요소를 필터링할 수 있습니다. 예시:
// ES5
function startWithS(word) {
return word.indexOf('S') === 0;
}
// ES6
const startWithS = (word) => word.indexOf('S') === 0;
const beersStartWithS = beers.filter(startWithS);
console.log(beersStartWithS); // [0: 'San Diego', 1: Saint Bier]
> [0: 'San Diego', 1: Saint Bier]
BeersStartWithS 변수의 반환 값은 다음과 같아야 합니다.
[
0: 'San Diego',
1: 'Saint Bier'
]
반환된 모든 요소는 문자 S로 시작하기 때문입니다.
배열.찾기()
filter() 메서드와 비교하여 이 메서드의 차이점은 찾은 첫 번째 항목이 사용자가 정의한 조건에 따라 반환된다는 것입니다. 예를 참조하십시오:
// ES5
function findSanDiego(element) {
return element === 'San Diego';
}
// ES6
const findSanDiego = (element) => element === 'San Diego';
const beerSanDiego = beers.find(findSanDiego);
console.log(beerSanDiego); // 'San Diego'
> 'San Diego'
우리의 beers 배열이 이 이름을 가진 요소를 가지고 있기 때문에 San Diego라는 요소를 가져오는 필터를 만들었습니다. 우리는 변수 beerSanDiego에서 San Diego를 반환할 것입니다. 같은 이름을 가진 요소가 더 있으면 첫 번째를 받게 됩니다. 우리 맥주 배열에서 발견되는 것.
참고: 반환할 요소가 없으면 정의되지 않은 반환값을 얻게 됩니다.
배열.맵()
이 메서드는 배열의 모든 요소를 순회하고 각 요소에 대한 함수를 실행하고 결과로 새 배열을 반환합니다. 예시:
// ES5
function upAge(age) {
return age + 1;
}
// ES6
const upAge = (age) => age + 1;
const newAges = ages.map(upAge);
console.log(newAges); // [0: 21, 1: 26, 2: 20, 3: 22, 4: 43]
> [0: 21, 1: 26, 2: 20, 3: 22, 4: 43]
우리는 newAges에서 다음과 같은 반환을 받게 됩니다.
[
0: 21,
1: 26,
2: 20,
3: 22,
4: 43
]
여기서 +1이 초기 값에 추가되었습니다.
배열.some()
이 메서드는 적어도 하나의 요소가 조건을 만족하는지 확인합니다. 예시:
// ES5
function hasHeinekenOrSaint(beer) {
return (beer === 'Saint Bier' || beer === 'Heineken');
}
// ES6
const hasHeinekenOrSaint = (beer) => (beer === 'Saint Bier' || beer === 'Heineken');
const heinekenSaint = beers.some(hasHeinekenOrSaint);
console.log(heinekenSaint); // true
> true
이 경우 하이네켄이나 생비에 요소가 있는 경우가 있는지 확인하고 있습니다. 그렇다면 결과는 참이 될 것입니다.
배열.감소()
경우에 따라 축소 방법을 사용할 수 있으며 그 중 하나는 계산을 용이하게 하는 것입니다. 예시:
// ES5
function reducerAge(accumulator, age) {
return accumulator + age;
}
// ES6
const reducerAge = (accumulator, age) => accumulator + age;
const sumAges = ages.reduce(reducerAge);
console.log(sumAges); // 127
> 127
이 경우 반환값은 모든 연령의 합인 127이 됩니다.
결론
언어별로 제공되는 기능을 사용하면 큰 힘이 됩니다!
이러한 기능을 사용합니까? 의견에 경험을 공유하십시오. ⚡️
Reference
이 문제에 관하여(JavaScript 배열 단순화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/helderberto/simplify-javascript-arrays-46j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)