배열(array)
//선언 방법
let array = [1, "문자", {name: "yeongoo", age: 31}, true]
//위처럼 데이터는 다양하게 넣을 수 있다.
각 데이터 접근과 변경, 추가
let array = [1, "문자", {name: "yeongoo", age: 31}, true]
//배열은 각 data의 index로 접근할 수 있으며 index 는 앞 부터 0, 1, 2, 3 순이다.
array[0]; // 1
array[1]; // "문자"
array[2]; // {name: "yeongoo, age: 31}
array[3]; // true
//변경과 추가
array[0] = 2; // 0번째 값이 2로 변경
array[4] = 193; // 4번째에 193을 추가
배열의 data 갯수
let array = [1, 2, 3, 4, 5]
array.length // 5 length 속성은 무엇의 길이를 젤 때 사용한다.
push, pop, unshift, shift
// push 배열의 맨 뒷 부분에 새로운 값을 넣어준다. 기존배열을 파괴한다.
let array = [1, 2, 3, 4, 5];
array.push(6);
console.log(array); // [1, 2, 3, 4, 5, 6]
//pop 배열의 맨 뒷 부분의 값을 추출 한다. 기존배열을 파괴한다.
let array = [1, 2, 3, 4, 5];
let number = array.pop();
console.log(array); // [1, 2, 3, 4]
console.log(number); // 5
//unshift 배열의 맨 앞 부분에 새로운 값을 넣어준다. 기존배열을 파괴한다.
let array = [1, 2, 3, 4, 5]
array.unshift(0);
console.log(array); // [0, 1, 2, 3, 4, 5]
//shift 배열의 맨 앞 부분의 값을 추출 한다. 기존배열을 파괴한다.
let array = [1, 2, 3, 4, 5];
let number = array.shift();
console.log(array); // [2, 3, 4, 5]
console.log(number); // 1
forEach
// 배열을 순회한다.
let array = [1, 2, 3, 4, 5];
array.forEach(function(value,index){
console.log(index, value); // 0,1 / 1,2 / 2,3 / 3,4 / 4,5 가 출력된다.
});
//ex
let array = [1, 2, 3, 4, 5];
let sum = 0;
array.forEach(function(value){
return sum += value;
});
console.log(sum) // 15가 나온다.
map
//map 은 기존배열에 어떤 처리를 해서 새배열을 만들어준다.
let array = [1, 2, 3, 4, 5]
let arr = array.map(function(value,index){
return value*value;
})
console.log(arr)// [1, 4, 9, 16, 25]
//ex
let person = [{name: "yeongoo", age: 31}, {name: "sarang", age: 32}];
let name = person.map(function(value){ // value에 각 객체가 하나씩 들어가서 name이 추출된다.
return value.name;
});
console.log(name); // ["yeongoo", "sarang"]
indexOf
//indexOf 는 찾으려는 값의 index를 알려준다.
let array = [1, 2, 3, 4, 5]
let index = array.indexOf(3);
console.log(index); // 2 3의 index인 2가 나온다
//주의사항
let none = array.indexOf(6);
console.log(none); // -1 값이 배열에 없을 때에는 -1이 나온다.
//ex
let array = [1, 2, 3, 4, 5]
let arr = [1, 2, 4, 5, 6, 7, 8]
for(let i =0; i < arr.length; i++){
if(array.indexOf(arr[i]) === -1){
array.push(arr[i]);
}
}
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8] 없을 경우에만 push 하기 때문에 겹치는것을 제외하고 합칠 수 있다
find 와 findIndex
//find 특정 조건의 걸어서 그 값을 찾아준다.
let person = [{name: "yeongoo", age: 31}, {name: "sarang", age: 31}];
const findPerson = person.find(function(value){
return value.name === "yeongoo";
});
console.log(findPerson); // {name: "yeongoo", age: 31}
//findIndex 특정 조건을 걸어서 index값을 찾아준다.
let person = [{name: "yeongoo", age: 31}, {name: "sarang", age: 31}];
const index = person.findIndex(function(value){
return value.name === "yeongoo";
});
console.log(index); // 0
//주의사항
let person = [{name: "yeongoo", age: 31}, {name: "sarang", age: 31}];
const index = person.findIndex(function(value){
return value.age === 31;
});
console.log(index) // 0 객체 모두 age는 31 이지만 제일 앞쪽 값의 index를 찾는다.
includes
//includes 찾는 값이 있는 지를 boolean으로 리턴해준다.
let array = [1, 2, 3, 4, 5];
let arr = array.includes(5);
console.log(arr); // true
let arr1 = array.includes(6);
console.log(arr1); // false
filter
// filter 특정 조건으로 filtering해서 새 배열을 만들어 준다.
let array = [1, 2, 3, 4, 5, 6]
let arr = array.filter(function(value){
return value % 2 === 0;
});
console.log(arr); // [2, 4, 6] 2로 나눳을떄 나머지가 0인 것만 추출해서 새 배열을 만든다.
splice 와 slice
//splice 배열을 지정된 index로 부터 지정된 index포함 지정한 갯수만큼 잘라준다. 기존 배열을 파괴한다.
let array = [1, 2, 3, 4, 5, 6];
let arr = array.splice(0,3); // index 0번째 부터 0번째 포함 3개를 자른다.
console.log(array); // [4, 5, 6]
console.log(arr); // [1, 2, 3]
//slice 배열을 지정된 index부터 index 전까지 잘라준다. 기존 배열을 유지.
let array = [1, 2, 3, 4, 5, 6];
let arr = array.slice(0,3); // index 0번째부터 index 3번째 " 전 " 까지 잘라준다.
console.log(array); // [1, 2, 3, 4, 5, 6]
console.log(arr); // [1, 2, 3]
concat
//concat 두개의 배열을 하나로 합쳐 새로운 배열을 만들어준다.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [6, 7 ,8, 9, 10];
let array = arr1.concat(arr2); // arr1의 뒷부분에 arr2 를 붙여 준다.
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
join
//join 배열의 요소 사이사이에 특정한 값을 넣어 문자열 형태로 만들어준다.
let array = [1, 2, 3, 4, 5];
let arr = array.join("사이");
console.log(arr); // 1사이2사이3사이4사이5 이런 문자열이 된다.
reduce
//reduce 배열순회하며 여려가지 연산을 할 수 있게 해준다.
// accumulator = 누진값, current = 배열 내부요소 하나씩 순회,
// index = 배열의 index(0,1,2,3...), array = 현재배열
//accumulator??
let array = [1, 2, 3, 4, 5];
let sum = array.reduce(function(accumulator, current){
return accumulator + current;
},0); //0은 accumulator 의 초기값을 설정 해준 것이다.
console.log(sum);// 15
// 처음 acc = 0 current = 1 더해서 acc = 1 이된다.
// 두번째 acc = 1 current = 2 더해서 acc = 3 이된다.
// 세번째 acc = 3 current = 3 더해서 acc = 6 이된다.
// 네번째 acc = 6 current = 4 더해서 acc = 10 이된다.
// 다섯번째 return acc = 10 current = 5 더해서 acc = 15 가된다
//ex
let array = [1, 2, 3, 4, 5];
let average = array.reduce(function(accumulator, current, index, array){
if(index === array.length-1){ // index가 array.length-1 과 같아 졌다는 것은 마지막 순회라는 뜻
return (accumulator+current) / array.length;
}else {
return accumulator + current;
}
},0);
console.log(average); // 3 배열을 다 더해서 배열의 길이로 나눈 평균이 나온다.