JavaScript 배열

1.JavaScript 배열 CRUD

  배열생성 (Create)

• [] 괄호를 사용하고, 내부에서 아이템을 콤마(,)로 구분해서 넣으면 됨
• 객체와 마찬가지로, 새로운 배열로 배열 변수의 배열을 덮어씌우는 많지 않으므로, 배열 변수 선언시 const를 많이 사용함.
• 배열 길이는 length로 확인 가능

const data = [1,2,3,'Dave', ture];

console.log(data);
console.log(data.length);

• 다른 언어와 달리 객체처럼 생성도 가능

const data = new Array();

data[0] = 1;
data[1] = 2;

console.log(data); // [1,2]

 

  배열 읽기(Read)

• 0번부터 시작하는 인덱스 번호로 각 아이템을 읽을 수 있음

const data = new Array();

data[0] = 1;
data[1] = 2;

console.log(data[0], data[1]) // 1 2

• 인덱스 번호로 각 아이템을 수정할 수 있음

const data = new Array();

data[0] = 1;
data[1] = 2;
console.log(data); // [1,2]
data[1] = 'fun';
console.log(data); //[1,'fun']

 

  배열 삭제(Delete)

• 배열변수.splice(삭제를 시작할 인덱스 번호, 삭제를 시작할 인덱스 번호부터 몇개를 삭제할 지의 갯수)

const data = [1,2,3,'fun','hi'];

console.log(data);  //[1, 2, 3, 'fun', 'hi']
data.splice(1,3);
console.log(data);  //[1, 'hi']

 

2. 특별한 형태의 JavaScript 배열

   

const data1 = [1,2,'fun',null];

const data2 = [
	{name : 'Heo', age : 30 },
    {name : 'Kim', age : 40 }
];

const data3 = [
	[1,2,3],
    [4,5,6]
];

console.log(data1[0]); //1
console.log(data2[0].name); //Heo
console.log(data3[0][2]); //3

 

3. 다양한 배열 관련 기능(함수)

 

   push : 배열의 끝에 아이템 추가

const data = [1,2,3];
data.push('Heo');
console.log(data); //[1,2,3,'Heo']

   pop : 배열의 끝에 있는 아이템을 리턴해주고, 해당 아이템은 배열에서 삭제

const data = [1,2,3];
console.log(data.pop()); //3
console.log(data) //[1,2]

  shift : 배열의 첫번째 아이템을 삭제하고, 뒤에 있는 아이템을 앞으로 당김

const data = [1,2,3];
data.shift();
console.log(data); //[2,3]

concat : 두 배열을 합치기

const data1 = [1,2];
const data2 = ['hi',3];
const data3 = data1.concat(data2);
console.log(data3); // [1,2,'hi',3]

join : 아이템 사이에 특정 문자열을 넣어서, 모든 아이템을 합쳐서 하나의 문자열로 만들어줌

const data1 = [1,2];
let data2 = data1.join('*');

console.log(data2, typeof data2); //1*2 stirng

reverse : 배열을 역순으로 배치

const data1 = [1,2,3,4,5,6];
data1.reverse();
console.log(data1); // [6,5,4,3,2,1]

slice : 배열의 일부분 반환 (slice(a,b) : a 아이템 인덱스부터 시작해서 b-1아이템 인덱스까지 추출)

const data1 = [1,2,3,4,5,6];
let data2 = data1.slice(1,3);
console.log(data2);//[2,3]

forEach : for문을 대체해서 간단히 배열의 각 아이템을 가져올 수 있는 함수

const data1 = [1,2,3,4,5,6];
data1.forEach(item => {
	console.log(item);
    })

map : 배열의 각 아이템에 정의한 함수를 적용하여, 새로운 배열을 리턴하는 함수

const data1 = [1,2,3,4,5,6];
const data2 = data1.map(item =>item *2);
console.log(data2); // [2,4,6,8,10,12]

indexOf : 배열에서 지정한 데이터가 위치한 인덱스 번호를 리턴

const data1 = [1,2,'Heo',6];
console.log(data1.indexOf('Heo'); //2

findIndex : 배열의 아이템이 객체일 경우, 해당 객체에서 지정한 데이터 위치를 찾을 수 있는 방법을 제공함. 해당 인덱스 번호를 리턴함.

find : findIndex와 유사하지만, 지정한 데이터 위치를 리턴하는 것이 아니라. 지정한 데이터가 들어있는 객체자체를 리턴함

const data = [
	{ id : 1,
      name : 'Heo' },
    { id : 2,
      name : 'Kim'}
]

console.log(data.indexOf('Kim')); // -1 
console.log(data.findIndex(item => item.name ==='Kim')); //1
console.log(data.find(item = > item.name === 'Kim')); //{id:2, name:"Kim"}

filter : 배열에서 특정 조건에 맞는 아이템만 추출해 줄 때 사용

let myArray = [1,2,3,4,5,6,7,8,9,10];
let even = myArray.filter(item => item %2 === 0);
console.log(even); //[2,4,6,8,10]