Array Methods

push() 뒤 삽입

pop() 뒤 삭제

unshift() 앞 삽입

shift() 뒤 삭제

더 편하게 쓰려면  전개구문 아래링크 참고

https://bangj.tistory.com/185

구조분해 할당 , 나머지 매개변수 , 전개구문

 

arr.splice(n, m, x) 원본은 특정 요소 지우고, 지워진값은 반환

n:시작, m:개수, x:추가

기본 동작/ 이동 요소 추출 확인하기

let original = [1, 2, 3, 4, 5, 6]
const remove = original.splice(2, 3) // 추출할 요소들
console.log(original,remove); //[1, 2, 6] , [3, 4, 5]

지우고 추가해보기

let original = [1, 2, 3, 4, 5, 6]
const remove = original.splice(2, 3, 9) //9추가
console.log(original,remove); //[1, 2, 9, 6], [3, 4, 5]

추가만 해보기

let original = [1, 2, 3, 4, 5, 6]
const remove = original.splice(2, 0, "추가") //지우지 않고 새로 추가
console.log(original,remove); //[1, 2, '추가', 3, 4, 5, 6], []

---

arr.slice(n, m) n부터 m 까지 반환 ,str.slice(문자열)도 가능

기본동작

let original = [1, 2, 3, 4, 5, 6]
const remove = original.slice(1, 4) //원본은 그대로, 저부분만 자르기
console.log(original,remove); //[1, 2, 3, 4, 5, 6] [2, 3, 4]

배열복사

let original = [1, 2, 3, 4, 5, 6]
const remove = original.slice() //괄호로 놔두면 배열이 복사
console.log(original,remove); //[1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6]

---

arr.concat(arr2, arr3 ...) 합쳐서 새배열 반환

기본동작

let original = [1, 2, 3, 4, 5, 6]
const total = original.concat(['추가1']) 
console.log(original,total); //[1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6, '추가1']
const total2 = original.concat(['추가1'],['추가2'],'추가3') //배열로 넣든 그냥 넣든
console.log(original,total2); //[1, 2, 3, 4, 5, 6, '추가1', '추가2', '추가3']  배열로반환

---

arr.forEach(fn) 배열 반복

let origin = ['서울역', '노원역', '강남역', '잠실역']
origin.forEach((item, index) => {
    console.log(item,index); //서울역 0 노원역 1 강남역 2 잠실역 3
})

---

arr.indexOf/ arr.lastIndexOf

let origin = [1,2,3,4,5,6,7,8,3,2,1]
const a = origin.indexOf(3)  //3번째 index
const b = origin.indexOf(3,4)  //4번쨰 index부터 탐색
const c = origin.lastIndexOf(2)  //뒤부터 만나는 2번째 인덱스
console.log(a,b,c); //2 8 9  없으면 -1

---

arr.includes() index없이 포함하는지만 확인

let origin = [1,2,3,4,5,6,7,8,3,2,1]
//없으면 -1
const a = origin.includes(3)  // true or false
console.log(a); //true

---

arr.find(fn) / arr.findIndex(fn) 제일 처음의 하나만 찾을때

arr.find(fn): indexOf 같으나 함수로 전달가능 / 첫번째 true만 반환하고 종료. 없으면 undefined

arr.findIndex(fn): 해당 index를 반환  없으면 -1

let origin = [1,2,3,4,5,6,7,8,3,2,1]
const a = origin.find((item) => {
    return item % 2 === 0 //짝수찾기
})  
console.log(a); //2 처음 true 가 나오면 종료

let list = [
    {name:'ji', age:40},
    {name:'na', age:41},
    {name:'da', age:30}
]
const b = list.find( item => {  
    if (item.age < 40) {
        return true
    }
    return false
})
console.log(b); //{name: 'da', age: 30} , list.findIndex() 일경우 2

---

arr.filter(fn) 만족하는 모든 요소를 배열로 반환

arr.map(callback(currentValue[, index[, array]])[, thisArg])

callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐

let origin = [1,2,3,4,5,6,7,8,3,2,1]
const a = origin.filter((item) => {
    return item % 2 === 0 //짝수찾기
})  
console.log(a); //[2, 4, 6, 8, 2]

arr.map() 함수를 받아 특정 기능을 시행하고 새배열 반환

arr.filter(callback(element[, index[, array]])[, thisArg])

callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버림. 다음 세 가지 인수를 가짐

let list = [
    {name:'ji', age:40},
    {name:'na', age:41},
    {name:'da', age:30}
]
const b = list.map((item, idx) => {
    return Object.assign({}, item, {  //새 객체를 만들어서 list 넣고, 추가 id,young 
        id: idx + 1 ,
        young: item.age < 40 
    })
})
console.log(b); //0: {name: 'ji', age: 40, id: 1, young: false}1: {name: 'na', age: 41, id: 2, young: false}2: {name: 'da', age: 30, id: 3, young: true}

map과 filter의 차이점은 map은 콜백함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환 즉, 각 함수의 리턴하는 기능이 다름

차이점을 보면

var testArray = [0,1,2,3,4,5];
 
testArray.filter(function(c){ return c <= 2; }); // [0, 1, 2] 
testArray.map(function(c){ return c <= 2 }); // [true, true, true, false, false, false]
 
testArray.map(function(c){
    if (c <= 2)
        return c;
}) // [0, 1, 2, undefined, undefined, undefined] 빈값을 제거하기위해선 아이런히하게도 filter을 써야한다.

map의 콜백함수는 산술된 인자를 받아 배열을 만드는 역할을 한다.

그래서 c <= 2를 받으면 그 산술 결과인 불리언값을 리턴해 배열을 만드는 것이다.

​

filter의 콜백 함수는 리턴값의 불리언이 true인 값만 가지고 배열을 만드는 역할은 한다.

그래서 c <= 2에서 c값에 따라 저 조건식이 true면, c를 그대로 저장하는 것이다.

출처: https://inpa.tistory.com/entry/JS-📚-map-과-filter-차이 [👨‍💻 Dev Scroll:티스토리]

반대의 경우를 보면

var testArray = [0,1,2,3,4,5]; 

testArray.filter(function(c){ return c * 2; }); // [1, 2, 3, 4, 5] 
testArray.map(function(c){ return c * 2 }); // [0, 2, 4, 6, 8, 10]

위둘을 이용하면

 

  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];
  
	const result = students
    .map(student => student.score)//스코어만 뽑아주고
    .filter(score => score >= 50) //50점 이상의 조건을 주고
    .join() //배열내용을 하나의 문자로 합쳐준다.
    console.log(result); //80,90,66,88

---

arr.reverse() 역순으로 재정렬

게시판등의 가장 최신의 글 정렬할때 쓰임

let origin = [1,2,3,4,5,6,7,8]
const a = origin.reverse()
console.log(a); //[8, 7, 6, 5, 4, 3, 2, 1]

---

arr.join() 배열을 합쳐서 문자열로

let arr = ["치킨", "앤", "맥주"]
let result = arr.join() // 안에 공백이면 자동으로 ,(콤마)
console.log(result); //치킨,앤,맥주

---

arr.split() 문자열을 나눠서 배열로

let arr = "강남역,논현역,구디역"
let result = arr.split(",") //나눌기준, 안에 공백이면 한글자씩
console.log(result); // ['강남역', '논현역', '구디역']

---

Array.isArray() 배열인지 확인

let lista = {
    name: 'ji',
    age: 40
}
let listb = ["버스","지하철","택시"]
console.log(typeof(lista),typeof(listb)); //object object  배열은 객체형이므로
console.log(Array.isArray(lista),Array.isArray(listb)); //false true

---

arr.sort() 배열 재정렬, 배열 자체가 변경

let origin = ["논현역", "하계역", "마포역" , "동대문역" ,"강남역", "신사역" ]
let result = origin.sort() //원본도 같이 변경
console.log(origin, result); //['강남역', '논현역', '동대문역', '마포역', '신사역', '하계역'] ['강남역', '논현역', '동대문역', '마포역', '신사역', '하계역']

let oriNum = [5, 42, 15, 37]

let result2 = oriNum.sort((a, b) => {
    console.log(a,b);
    return a - b // 빼서 양수면 a와 b 자리교체 음수면 그대로
})
console.log(oriNum, result2)

 - Lodash 같은 라이브러리  사용하면 편함   http://lodash.com 

---

arr.reduce() 함수를 실행하고, 하나의 결과값을 반환

//배열의 모든 수 더하기
let arr = [1, 2, 3, 4, 5]

//for, for of, forEach 사용하면 됨
let result = 0
arr.forEach(item => {
    result = result += item
})
console.log(result); // 15

//arr.reduce()
let sum = arr.reduce((prev, cur) => { //prev 이전값, cur 현재값
    return prev+cur
},0) // 초기값 0주겠다.
console.log(sum); // 15

//map,filter 대신 reduce
let user = [
    {station:"강남", time:60},
    {station:"잠실", time:50},
    {station:"성동", time:70},
    {station:"종로", time:40},
    {station:"구디", time:80}
]
let move = user.reduce((prev, cur) => {
    if (cur.time <= 60) {
        prev.push(cur.station)
    }
    return prev 
}, []) //초기값을 []로하여 이안에 넣겠다.
console.log(move); //['강남', '잠실', '종로']


let user = [
    {station:"강남", time:60},
    {station:"잠실", time:50},
    {station:"성동", time:70},
    {station:"종로", time:40},
    {station:"구디", time:80}
]
let move = user.reduce((prev, cur) => {
        return prev += cur.time
} ,0) 
console.log(move); //300