3. JS 핵심 - 배열

• 참고

// dir()은 개체의 모든 속성 및 메서드를 나열하는 JavaScript의 내장 메서드.
// 주어진 객체의 모든 속성을 문자열 배열로 반환하며, 이를 통해 개발자는 개체를 탐색하고 디버그한다.
console.dir();

 

1. 배열 

• java와 달리 배열의 크기는 동적으로 변경가능하다.
• 하나의 배열에 여러 타입의 값을 저장할 수 있다.
• 배열도 객체이며, new 연산자로 생성할 수 있다.
  
  
• 배열 생성 방법
  1. new Array()
     
     
  2. new Array(num) :num개 길이 생성
     
     • 실제 공간은 확보하지 않는다.
     • .length를 통해서 길이로는 인정된다.
     • 동적 배열이여서 .length가 고정 값이 아니다.
  3. [1,2,3] : 값 바로 집어넣기
• 참고 - 객체
  • 배열과 동일하게 생성한다.
  • new Object();
  • obj = {};

 

// 배열은 동적이다

const arr1 = new Array(); // 이렇게 하지 말기
const arr2 = new Array(4); // 이건 가능. 배열칸이 4개인 배열 생성

const arr3 = [1, 2, 3]; // 3개
console.log(arr3[0]); // 배열 확인

arr3[6] = 199; // 동적 추가 가능

console.log(arr3); // 출력시 empty items가 몇개인지 보여주지만 실제 공간을 준비해놓지는 않는다.
console.log(arr3[4]); // empty 칸은 undefiend 이다.
console.log(arr3.length); // 7 그래도 개수로는 인정해준다.

for (const i in arr3) {
  console.log(arr3[i]); // empty items는 제외한다.
}

 

2. 배열 함수

 

2.1. 탐색, 출력 

• 조건 맞는 요소 찾기
  1. find(lambda function) : 순차적으로 탐색, 일치 요소 1개만 반환
     
     
  2. filter(lambda function) : 일치 요소 배열로 다 반환
     
     
  3. indexOf() : 반환 type number
     
     • indexOf("value") : 해당 value가 위치한 index 반환. 없으면 -1 
     • indexOf("value", n) : n번째 index부터 value가 위치한 index 반환. n이 음수이면 끝에서부터 시작

 

• 모든 요소 출력하기
  • toString(): array명.toString()
  • join(): array명.join("x") : x에 원하는 중간 string을 넣을 수 있다.

const arr4 = [10, 20, 30, 40, 50];
function checkAdult(age) {
  return age >= 18;
}
// find
console.log(arr4.find(checkAdult)); // 순차적 검색, 처음 값만 출력

// filter
console.log(arr4.filter(checkAdult)); // [ 20, 30, 40, 50 ]

// index
const fruits = ["ba", "ora", "app", "man"];
var a = fruits.indexOf("ba", 0); //  0
var a = fruits.indexOf("ba", 1); // -1
var a = fruits.indexOf("ba", -1); // -1
var a = fruits.indexOf("ba", -4); //  0

console.log(a);

//toString
console.log(fruits.toString()); // ba,ora,app,man
console.log(arr4.toString()); //10,20,30,40,50

// join
console.log(fruits.join(" - ")); // ba - ora - app - man
console.log(arr4.join(" & ")); //10,20,30,40,50

 

2.2. 추가, 삭제

• 원본을 건들인다.
  1. 오른쪽 요소 추가 삭제
     • push("x") : 오른쪽에 요소 추가
     • pop() : 오른쪽에 요소 제거
  2. 왼쪽 요소 추가 삭제
     • unshift("x") : 왼쪽에 요소 추가
     • shift() : 왼쪽 요소 제거
  3. 가운데 요소 추가 삭제
     1. splice(index, 1 || 0, "x")
        • 해당 인덱스 위치에 "x" 값 넣기
          • 1 : 해당 인덱스 값 대체
          • 0 : 해당 인덱스 위치에 값 삽입
     2. splice(index, num) : 해당 인덱스 부터 num개 삭제. 삭제 요소 배열로 반환
        
        
     3. delete Array명[index]
        • 해당 array의 index 제거, 해당 위치에 undefined 남아 있다.
        • true 반환, 없는 index 제거해도 true 반환
          
          
• 원본 안건들이는 method
  • slice(a, b) : a index부터 b개 새 배열로 반환

const fruits = ["ba", "ora", "app", "man"];

// right 추가 삭제
fruits.push("Kiwi");
console.log(fruits);

fruits.pop();
console.log(fruits);

// left 추가 삭제
fruits.unshift("lemon");
console.log(fruits);

fruits.shift();
console.log(fruits);

fruits.splice(-1, 1, "splice 1 = 대체");
console.log(fruits);

fruits.splice(0, 0, "splice 0 = 삽입");
console.log(fruits);

delete fruits[0];
console.log(fruits);

// splice, slice 차이점
const a = fruits.splice(0, 2); // 원본 요소 이용 삭제
console.log(a); // 제거한 요소
console.log(fruits); // 남은 요소

const b = fruits.slice(0, 2); // 원본 유지
console.log(b); // 나눈 요소 - 원본 아님
console.log(fruits); // 남은 요소 - 원본 유지

 

 

2.3. 정렬하기, 뒤집기, 채우기, 합치기

 

• sort() : 사전순 정렬, comparater를 이용해서 정렬기준을 제공시 해당 정렬조건으로 정렬
• reverse() : 사전 역순 정렬, comparater 사용 가능
• comparater
  1. (a,b) => a-b; // sort
  2. (a,b) => b-a; // reverse
  3. () => Math.random -0.5; // shuffle
• fill(x) : array의 모든 요소를 x로 채운다
  
  
• concat() : 배열 합치기. 2개의 배열을 하나로 병합

 

// 배열 정렬, 뒤집기, 채우기, 합치기

const fruits = ["ba", "ora", "app", "man"];
var a = fruits.sort();
console.log(a); // [ 'app', 'ba', 'man', 'ora' ]
var a = fruits.reverse();
console.log(a); // [ 'ora', 'man', 'ba', 'app' ]

const arr = [20, 10, 1, 6, 3, 30];

//string 형식의 사전순
var a = arr.sort();
console.log(a); // [ 1, 10, 20, 3, 30, 6 ]
var a = arr.reverse();
console.log(a); // [ 6, 30, 3, 20, 10, 1 ]

// comparater lambda 식 적용
var a = arr.sort((a, b) => a - b);
console.log(a);
var a = arr.sort((a, b) => b - a);
console.log(a);

// shuffle
var a = arr.sort(() => Math.random() - 0.5);
console.log(a);

// fill
arr.fill(null);
console.log(arr); // [ null, null, null, null, null, null ]
console.log(arr.length); // 6

arr.fill(undefined);
console.log(arr); // [ undefined, undefined, undefined, undefined, undefined, undefined ]
console.log(arr.length); // 6

arr.fill(1);
console.log(arr); //[ 1, 1, 1, 1, 1, 1 ]
console.log(arr.length); // 6

// concat
var arr1 = [2, 2, 2, [1, 1]];
var concat = arr1.concat(arr);
console.log(concat);

 

3. 다차원 배열

• 생성방법 2가지
  1. [[],[]]
  2. for문 이용

// 다차원 배열
// 1. 직접 작성
var arr2 = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(arr2);
var a = arr2.flat(); // java flatMap
console.log(a);

// 2. for문 작성
for (i = 0; i < 5; i++) {
  arr2[i] = new Array(5);
}
console.log(arr2);

 

 

이전 발행글 : 2. JS 핵심 - 연산자