Language/javascript

[JavaScript] array / push, pop, shift, unsift, splice, slices, foreach, map, filter, find

다닿 2023. 10. 13. 23:05

배열의 선언

var array = [];
var array = ['a','b','c'];

대부분의 프로그래밍 언어에서는 배열의 요소들의 데이터 타입이 같지만 JavaScript에서는 각자 다른 데이터 타입도 배열안에 포함 할 수 있다.

var array = ['a', 0, null];

 

배열의 길이

var array1 = ['a','b','c'];
console.log(array1.length);
var array2 = ['d','e','f','g'];
console.log(array2.length);

length를 이용하여  배열의 길이를 알 수 있다.

 

 

push, pop, shift, unsift, splice, slices

let fruits = ["사과", "바나나"];
//push 뒤에 추가
fruits.push("오렌지");
console.log(fruits); // ["사과","바나나","오렌지"]
fruits.push("키위");
console.log(fruits); //["사과","바나나","오렌지","키위"]
//pop 맨뒤 삭제
fruits.pop();
console.log(fruits); //["사과","바나나","오렌지"];
//shift 첫번째 삭제
fruits.shift();
console.log(fruits); //["바나나","오렌지"]
//unshift 첫번째 추가
fruits.unshift("포도");
console.log(fruits); //["포도","바나나","오렌지"]
//splice
fruits.splice(1, 1, "사과"); // 1번째 1개 "사과"로 바꿈
console.log(fruits); //["포도","사과","오렌지"]
//slice
var reuslt = fruits.slice(1,2); // =1번째부터 <2번째까지 새배열
console.log(reuslt); //["사과"];

 

 

forEach, map, filter, find

let array = [1, 2, 3, 4, 5];
array.forEach(e => {
    console.log("array : " + e);
});
// map 배열값반환해줘야함
let maparray = array.map(e => {
    return e * 2;
});
console.log("maparray");
console.log(maparray);

// filter 조건 반환해줘야함
let filterarray = array.filter(e => {
    return e > 1;
});
console.log("filterarray");
console.log(filterarray);

// find 조건에 맞는거 첫번째를 반환해줌
let findarray = array.find(e => {
    return e > 1;
});
console.log("findarray");
console.log(findarray);

 

 

또 다른 배열 요소 추가와 삭제

// 추가
var array = [];
console.log(array);
array[0] = 'a';
console.log(array);
array[1] = 'b';
console.log(array);

// 삭제
delete array[0];
console.log(array);

삭제는 위험해 보임

 

 

배열의 순회

var array = ['a','b','c'];
console.log(array);
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);

배열요소의 순번으로 안의 값(value)을 알수 있는 것 처럼

for in을 이용하여 배열을 순회하면서 값 (value) 을 알 수 있다.

for (const key in array) {
    console.log('key: ' + key, 'value: ' + array[key]);
}

 

for문을 이용한 순회

for (let i = 0; i < array.length; i++) {
    console.log('i: ' + i, 'value: ' + array[i]);
}

 

 

배열요소의 위치 반환

indexOf

const arr = [1, 2, 2, 3];
// 배열 arr에서 요소 2를 검색하여 첫번째 인덱스를 반환
console.log(arr.indexOf(2));    // -> 1
// 배열 arr에서 요소 4가 없으므로 -1을 반환
console.log(arr.indexOf(4));    // -1
// 두번째 인수는 검색을 시작할 인덱스이다. 두번째 인수를 생략하면 처음부터 검색한다.
console.log(arr.indexOf(2, 2)); // 2

배열안에  찾는 요소가 있는지 없는지를, 반환값이 -1인지 아닌지로 알 수 있다.

 

 

그런데 신문물! ES7에 도입된 includes

var array = ['0','1','2','3'];
console.log(array.includes('0'));
console.log(array.includes('4'));

배열