for each
배열안에 있는 모든 요소에 같은 함수 적용가능
const superheros = ['아이언맨', '캡아', '토르', '블위', '스파이더맨'];
function print(hero) {
console.log(hero);
}
superheros.forEach(
function print(hero) {
console.log(hero);
}
)
superheros.forEach(hero => {
console.log(hero);
})
superheros.forEach(print())
let num1 = [1, 3, 5, 7, 9];
num1.forEach(function (item, index, self) {
self[index] = item * 2;
})
// item은 배열 요소, index는 index, self는 배열 그 자체
// foreach에 인자로 주어지는 함수는 매개변수를 통해 위 세가지를 제공받는다
console.log(num1);
// [2, 6, 10, 14, 18]
// 출처 - https://sgcomputer.tistory.com/199
map
맵을 이용하여 모든 값에 적용 가능
const array = [1,2,3,4,5,6,7,8];
const square = n => n*n; //n을 받아서 제곱해주는 함수!
const squared = array.map(square); //맵을 이용하여 어레인 안 모든 값에 함수 적용
const squared2 = array.map(n => n*n); //위의 두문장을 합칠 수도 있다
console.log(squared);
const items = [
{
id: 1,
text: 'hello'
},
{
id: 2,
text: 'bye'
},
];
const texts = items.map(item => item.text); //아이탬즈의 아이탬들의 텍스트값만 배열로 출력해줌!
console.log(texts)
indexof
인덱스값이 나온다
superheros = ['아이언맨', '캡아', '토르', '블위', '스파이더맨'];
const index = superheros.indexOf('블위'); //블위의 인덱스값이 나온다
console.log(index);
findIndex, find
조건에 맡는 항목의 인덱스값 반환, 그 항목 자체를 반환
const todos =[
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
},
]
const index1 = todos.findIndex(todo => todo.id === 3); //아이디가 3인 항목의 인덱스값을 반환
const todo = todos.find(todo => todo.id === 3); //아이디가 3인 객채 항목을 반환
const todo2 = todos.find(todo => todo.done === true); // 둘다 조건에 맞는 애들 중에 첫번째꺼를 반환한다
console.log(index);
filter - 특정조건만족 항목을 찾아서 새로운 배열을 형성
const tasksNotDone = todos.filter(todo => todo.done === false); // 객체의 던값이 false인 값만 받아서 담는다
const tasksNotDone1 = todos.filter(todo => !todo.done); //위랑 같은기능
const tasksNotDone2 = todos.filter(todo => todo.done); //위랑 반대의 기능
console.log(tasksNotDone);
splice - 잘라내서 반환 + 기존의 배열이 잘림
const nums = [10,20,30,40,50];
const ind = nums.indexOf(30);
const spliced = nums.splice(ind,2); //ind값(1번째파라) 부터 2개(2번째 파라)를 지우갰다 + 그 지운 인자를 반환한다
console.log(nums); //10,20,50
console.log(spliced); //30,40
slice - 잘라내서 반환 + 기존의 배열을 자르지않는다
const sliced = nums.sliced(0,2); //인덱스가 0인거부터 2앞까지 잘라서 반환 (기존의 배열에는 변화가 없다 ! ! )
console.log(sliced); //10,20
console.log(nums); //10,20,30,40,50
shift - 맨 앞에 있는 요소를 기존의 배열에서 하나씩 빼서 반환
unshift - 맨앞에 인자를 삽입
const value1 = nums.shift();
console.log(value1);
console.log(nums);
const value2 = nums.unshift(5);
console.log(value2);
console.log(nums);
pop - 맨 뒤에 있는 요소를 기존의 배열에서 하나씩 빼서 반환
push - 맨 뒤에 인자 삽입
const valueA = nums.pop();
console.log(valueA);
console.log(nums);
const valueB = nums.push();
console.log(valueB);
console.log(nums);
concat - 기존의 배열은 건드리지않고 합치기
const arr1 =[1,2,3];
const arr2 =[4,5,6];
const concated = arr1.concat(arr2); //arr1안에 arr2삽입해서 새로운 배열concated에 담는다
const concated1 = [...arr1, ...arr2] //위랑 같은방법 스프레드연산자 (다음에 알아보기)
console(concated);
join - 배열 인자를 스트링으로 바꿔서 합쳐줌
const arr3 = [1,2,3,4,5];
console.log(arr3.join()); // ,를 기준으로 나눠저있음
console.log(arr3.join(' ')); //파라미터는 사이사이 구분해주는것 - 이렇게 하면 한번씩 띄어줌
console.log(arr3.join(', ')); //파라미터는 사이사이 구분해주는것 - 이렇게 하면 ,넣고 한번씩 띄어줌
이때까지 배운방법으로 합구하기
const numbers = [1,2,3,4,5];
let sum1 = 0;
numbers.forEach(n =>{
sum += n;
});
console.log(sum1);
reduce
배열.reduce((accumulator - 누적된 값을 의미, current - 각 원소들을 의미하는데 맨처음에는 numbers의 첫 항목1 ) ==> (1-시행될 함수, 2- 초기 accumulator값)
accumulator + current 라는 실행되는 명령어의 결과가 그다음의 accumulator가 된다
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
//(accumulator - 누적된 값을 의미, current - 각 원소들을 의미하는데 맨처음에는 numbers의 첫 항목1 ) ==> (1-시행될 함수, 2- 초기 accumulator값)
//accumulator + current 라는 실행되는 명령어의 결과가 그다음의 accumulator가 된다
const average = numbers.reduce((accumulator, current,index, array) => {
if( index === array.length -1){ //마지막항목이면
return(accumulator + current) / array.length; // 평균을 반환해라
}
return accumulator + current; // 아니면 앞의 누적값에 현재의 항목을 더해라
}, 0);
//index - 각원소의 index값을 의미 / array - 함수가 실행하고있는 자기 자신을 의미함
console.log(average);
const alphabets =['a','a','a','b','b','c','c','d','e'];
const counts = alphabets.reduce((acc,current) =>{ //맨처음 acc가 빈 객체임
if( acc[current]){ //해당항목이 acc안에 있다면
// if( acc['a']){ - 맨처음엔 이거랑 똑같은의미
acc[current] += 1; //값에 1을 더한다
} else {
acc[current] = 1; // 아니면 값을 1로 설정 -맨처음에 객체안에 a를 넣고 벨류를 1로 설정
}
return acc; //마지막에 이렇게 할거임
},{}) //객체를 의미함
console.log(counts); // 이라는 결괴 {a:3, b:2, c:2,d:1,e:1}