JavaScript 배열 단순화

helderburato에 원래 게시됨


이 게시물에서는 배열 작업을 더 쉽게 하고 더 우아한 코드를 작성할 수 있도록 하는 몇 가지 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여야 합니다.

Array.includes()

정의된 배열에 요소가 존재하는지 여부를 확인할 수 있습니다. 예시:

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로 시작하기 때문입니다.

Array.find()

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이 됩니다.

결론

언어별로 제공되는 기능을 사용하면 큰 힘이 됩니다!

이러한 기능을 사용합니까? 의견에 경험을 공유하십시오. ⚡️