[dev] javascript 에서 배열(array) 사용 방법 - (2)

in #kr7 years ago (edited)

출처 : https://www.freecodecamp.org/news/manipulating-arrays-in-javascript/

이전 글 : [dev] javascript 에서 배열(array) 사용 방법 - (1)

indexOf()

  • 검색하려는 항목의 첫번째 일치하는 위치(인덱스)정보를 반환합니다. 못찾으면 -1 반환
let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

lastIndexOf()

  • 검색하려는 항목의 마지막 일치하는 위치(인덱스)정보를 반환합니다. 못찾으면 -1 반환
let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

filter()

  • 특정 조건을 통과한 결과값을 가지고서, 새로운 배열을 생성하여 반환합니다.
  • (개인적으로 자주 사용하는 매소드 중 하나 입니다)

문법 예시

let results = array.filter(function(item, index, array) {
  // returns true if the item passes the filter
});

나이지리아 유저 여부 판별

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter( code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

map()

  • 배열 내부의 값을 조작한 신규 배열을 반환합니다.

페이지에서 사용자명 표시하기

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {
return '<li>' + item + '</li>';
})
const render = '<ul>' + display.join('') + '</ul>';
document.write(render);

다른 예시, 숫자 앞에 통화기호 붙여주기

// adds dollar sign to numbers
const numbers = [10, 3, 4, 6];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

reduce()

  • 이 매소드는 합계를 계산할 때 좋습니다.

배열을 기반으로 단일 값을 계산하는 데 사용됩니다.

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {
sum += n;
}
console.log(sum);

위 메소드를 reduce() 를 사용하여 구현한 결과
(문법이 익숙치 않아서 그럴 수도 있지만 써보면 좋아요)

  • accummulator : 축적된 값
  • value : 넘겨 받은 값
  • ,0 : 초기 값 설정
const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) =>
accummulator + value
, 0);
console.log(sum); // 970

forEach()

  • 배열을 반복하면서 작업할 때 사용 됩니다
const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

every()

  • 수식 적용 후 모든 결과가, 참 일 경우에만 true 를 반환합니다.
const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

some()

  • 수식 적용 후 결과가, 하나라도 참이면 true 를 반환합니다.
const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

includes()

  • 목록에서 특정 항목을 포함하고 있는지 여부를 판별 합니다.
  • some()과 유사해 보이나 특정 항목값의 존재 여부를 판별 합니다. (사용법이 더 간단함)
let users = ['paddy', 'zaddy', 'faddy', 'baddy'];
users.includes('baddy'); // returns true

맺음말

  • 더 많은 매소드가 있으나, 일단 중요한 것들만 나열 했습니다.
  • 좀 더 자세한 내용은 MDN Array 에서 확인 하실 수 있습니다.
Sort:  

Thank you for your continued support towards JJM. For each 1000 JJM you are holding, you can get an additional 1% of upvote. 10,000JJM would give you a 11% daily voting from the 700K SP virus707 account.

우왕굳헬로~

Coin Marketplace

STEEM 0.05
TRX 0.32
JST 0.081
BTC 63311.46
ETH 1687.53
USDT 1.00
SBD 0.41