자바스크립트 - 배열

배열 (Array)

---

배열에는 숫자, 문자열, 객체, 함수 모두 포함가능함.

자바스크립트에서 배열은 객체로 인식된다.

let stduents = ['짱구','철수','훈이','맹구','유리'];

# 접근 방법
stduents[0]; (짱구)
stduents[1]; (철수)
stduents[2]; (훈이)
stduents[3]; (맹구)
stduents[4]; (유리)

# 수정 방법
stduents[0] = "액션가면"
stduents[1] = "흰둥이"

# 추가 방법
stduents.push('값')           # 배열 맨끝에 값 추가
stduents.push('값1','값2')    # 배열 맨끝에 여러 값 추가
stduents.unshift('값')        # 배열 맨앞에 값 추가
stduents.unshift('값1','값2') # 배열 맨앞에 여러 값 추가

# 제거 방법
stduents.pop()                # 배열 맨끝에 값 제거
stduents.shift()              # 배열 맨앞에 값 제거

# 길이 반환
stduents.length

# 배열인지 확인
typeof students               # object (배열은 객체로 인식되기 때문)
Array.isArray(students)       # true

 

반복, 순회

for(let i=0; i<students.length; i++){ # 인덱스 필요할때
  console.log(studnets[i]);
}
for(let i of students){               # 인덱스 못 얻지만 편리함
  console.log(studnets[i]);
}

let id = ['sponge','bob']
arr.forEach((name, index) => {        # 첫번째는 값, 두번째는 인덱스
  console.log(`${index+1}, ${name}`);
});

 

탐색

let arr = [1,2,3]

arr.indexOf(1)   찾으면 인덱스 반환 없으면 -1 반환 (인덱스/-1)
arr.indexOf(1,3) 첫번째는 찾을 값 두번째는 탐색을 시작할 인덱스 (인덱스/-1) 
arr.includes(1); 포함여부 확인. (true/false)
arr.find()       찾으면 true 없으면 undefined 반환 (true/undefined)
arr.findIndex()  찾으면 인덱스 반환 없으면 -1 반환 (인덱스/-1)
arr.filter()     조건에 만족하는 값들을 배열로 반환


let user = [
  { name: "sponge"},
  { name: "bob"},
];
const a = user.find((u) => { find는 객체 같은 복잡한 구조에서 값을 찾을때 사용
  if (u.name === "bob") {
    console.log("hi");
  }
});

const b = user.findIndex(u => u.name === "bob");

const a = user.filter((u) => { find와 사용법 동일.
  if (u.name === "bob") {
    console.log("hi");
  }
});

 

자르고 붙이기

let arr = [1,2,3,4,5];

arr.splice(n, m)      인덱스 n부터 m개수만큼 지움
arr.splice(n, m, x)   인덱스 n부터 m개수만큼 지우고 그만큼 x로 채움
arr.splice(n, 0, x)   인덱스 n과 n+1 사이에 x를 추가
arr.splice(n,0,6,7,8) x는 여러개 올 수 있음

splice는 삭제된 요소를 반환한다.
d = arr.splice(0, 2)  [1,2] 반환

arr.slice(n, m)       인덱스 n부터 m-1까지 반환 (m을 안쓰면 끝까지, 음수는 뒤에서부터 카운트)
arr.slice(n)          인덱스 n부터 끝까지


arr.concat(arr1, arr2)배열을 합쳐서 반환
let arr=[1,2];          [1,2]
arr.concat([3,4]);      [1,2,3,4]
arr.concat([3,4],[5,6]);[1,2,3,4,5,6]
arr.concat([3,4],5,6);  [1,2,3,4,5,6]

 

정렬

let arr = [1,2,3,4,5];

arr.reverse() 역순 정렬 : arr = [5,4,3,2,1] 이렇게 제자리 정렬됨
arr.sort()    정렬      : 인수에 함수를 넣어서 다른 조작 가능함.
※ sort()는 문자열로 취급하여 정렬하므로 숫자를 넣어서 정렬시 똑바로 정렬이 안됨.

# 숫자 정렬
arr.sort((a,b) => {     : a가 작으면 a를 앞으로 크면 뒤로. 같으면 그대로
  return a-b;
});

Lodash 라이브러리
_.sortBy(arr);   를 사용하면 이런거 신경안쓰고 숫자/문자열/객체 등 소팅 가능

 

누적 합

let arr = [1,2,3,4,5];

arr.reduce()       배열의 누적합 반환
arr.reduceRight()  배열의 누적합 반환 (배열 우측부터 연산)


const arrSum = arr.reduce((prev, cur) => {  prev는 누적, cur는 현재값
  return prev + cur;
}, 0);  여기서 0은 초기값. 안쓰면 배열의 첫번째 요소


let users = [
  {name: "sponge", age:10},
  {name: "bob", age:20},
  {name: "zingzing", age:20},
];

let filterUser = arr.reduce((prev, cur) => {
  if(cur.age === 20){
    prev.push(cur.name);
  }
}, []);  : ['bob','zingzing']

 

배열 조작

let users = [
  { name:"sponge", age:10},
  { name:"bob", age:20},
];

arr.map()   배열을 조작하여 새 배열 반환해준다.
arr.join()  배열의 값들을 하나의 문자열로 구분자로 합쳐서 반환 (기본 구분자 : 쉼표)
arr.split() 배열의 값들을 구분자로 잘라서 반환

let newUser = users.map((user, index) => {
  return Object.assing({},user, {
    isAudlt : user.age >19.
  });
});

newUser=[
  { name:"sponge", age:10, isAudlt:false},
  { name:"bob", age:20, isAudlt:true},
];

let a = ['123','456','789'];
b = a.join();          '123,456,789' (쉼표로 합쳐짐)
c = a.join(' ');       '123 456 789' (공백으로 합쳐짐)

let aa = "good,bye";
bb = aa.split("")      ['g','o','o','d',',','b','y','e']
cc = aa.split(",")      ['good','bye']

 

구조 분해

let users = [
  { name:"sponge", age:10},
  { name:"bob", age:20},
];
let [u1,u2] = users;              객체를 각각 분해

let users = [
  { name:"sponge", age:10},
];
let {name,age} = user;            객체 하나를 분해
let {name:uName,age:uAge} = user; 변수명 변경도 가능함.
let {name:'noname',age:0} = user; 기본값 설정가능
let {name:'noname',age:0, gender:'male'} = user; 새로운 변수 넣어줄 수도 있음

let s = "1-2-3";
let splitS = s.split('-');

let [a=1,b=2,c=3] = [5,6]; 기본값 설정가능 (c는 값이 없으므로 3)
let [a=1, ,c=3] = [5,6,7,8]; 불필요한 값 생략 가능 (a=5, c=7, 나머지는 무시)

let a = 1;
let b = 2;
[a,b] = [b,a]   스왑 가능