배열의 값을 추가
🏁push()
배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.
let myArray = ['hi' , 'hello' , 123 , false];
myArray.push('hahahoho'); // 마지막 인덱스에 요소를 추가
console.log(myArray); // ["hi", "hello", 123, false, "hahahoho"] 🏁unshift()
배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입합니다.
let myArray = ['hi' , 'hello' , 123 , false];
myArray.unshift('hahahoho'); // 첫 번째 인덱스에 요소를 추가
console.log(myArray); // ["hahahoho", "hi", "hello", 123, false]배열의 값을 수정
🏁slice(start, end)
배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옵니다.
const myArray = [1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9];
const sliced = myArray.slice(2,-1);
const sliced2 = myArray.slice(-6,-2);
/* 첫 번째 파라미터 -> start(몇 번째 인덱스부터 잘라낼지 나타냄)
두 번째 파라미터 -> end (어디까지 잘라낼지 나타냄) */
console.log(myArray); /* [1, 2, 3, 4, 5, 6, 7, 8, 9]
기존 배열은 건드리지 않고 그대로 반환 */
console.log(sliced); /* [3, 4, 5, 6, 7, 8]
2번 인덱스부터 마지막 인덱스 빼고 를 반환 */
console.log(sliced2); /* [4, 5, 6, 7]
3번 인덱스부터 마지막 인덱스 빼고 를 반환 */
🧃start // 추출 시작점에 대한 인덱스
- undefined -> 0부터 slice
- 음수를 지정한 경우 -> 배열의 끝에서부터의 길이를 나타낸다
- 배열의 길이와 같거나 큰 수를 지정한 경우 -> 빈 배열을 반환한다
🧃end // 추출을 종료할 기준에 대한 인덱스 (end를 제외하고 그 전까지의 요소만 추출한다)
- 지정하지 않을 경우 -> 배열의 끝까지 slice
- 음수를 지정한 경우 -> 배열의 끝에서부터의 길이를 나타낸다
slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출 - 배열의 길이보다 큰 수를 지정한 경우 -> 배열의 끝까지 추출
🏁concat()
2개의 배열 객체를 하나로 결합합니다.
num1.concat(num2, ['ab', ['c','d','e']])
num1은 필수요소이며, num2 ... 등 은 선택요소이다
const num1 = ['a', 'b', 'c'];
const num2 = [1, 2, 3];
console.log(num1.concat(num2)); // ["a", "b", "c", 1, 2, 3]
console.log(num1.concat(num2, 'hello', false));
// ["a", "b", "c", 1, 2, 3, "hello", false] 🏁filter()
기존배열은 건드리지 않으면서 특정 조건에 만족하는 값만 모아서 새로운 배열을 만들어서 반환합니다.
arr.filter(callback(element[, index[, array]])[, thisArg])
🧃 callback
- 각 요소를 시험할 함수.
- true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
- 다음 세 가지 매개변수를 받습니다.
🧃 element
- 처리할 현재 요소.
🧃 index Optional
- 처리할 현재 요소의 인덱스.
🧃 array Optional
- filter를 호출한 배열.
🧃 thisArg Optional
- callback을 실행할 때 this로 사용하는 값.
배열 내 각 요소에 대해 callback 함수를 호출해,
true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다.
// 주어진 값들이 3보다 큰 수를 가진 값들을 걸러내는 방법
const num = [1, 2, 3, 4, 5];
const result = num.filter((value) => value > 3);
console.log(num); // [1, 2, 3, 4, 5] 원본배열은 변하지 않았음
console.log(result); // [4, 5]
// 점수가 85점 이상인 값을 걸러내는 방법
const testArray = [
{name: '김학생', score: 100},
{name: '박학생', score: 90},
{name: '이학생', score: 80}, ];
const result = testArray.filter((x) => x.score > 85);
console.log(result);
/* {name: "김학생", score: 100},
{ name: "박학생", score: 90} */
간단한 질문같은데 오브젝트 왜뜨는거에요.....?
배열의 값을 수정/삭제
🏁splice(start , deleteCount , itemN)
배열 객체의 지정 데이터를 삭제하고, 그 구간에 새 데이터를 삽입할 수 있습니다.
var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var num1 = num.splice(10, 2, 'a', 'b', 'c');
console.log(num); /* [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
splice() 함수를 사용하면 원본 배열인 num이 변경되고, */
console.log(num1); /* [11, 12] 삭제된 요소들의 배열은 num1 변수에 담긴다. */🧃start // 배열의 변경을 시작할 인덱스
- 음수를 지정한 경우 -> 배열의 끝에서부터의 길이를 나타낸다
- 배열의 길이보다 큰 수를 지정한 경우: 실제 시작 인덱스는 배열의 길이로 설정
- 절대값이 배열의 길이보다 큰 경우: 0으로 세팅
🧃deleteCount // 배열에서 제거할 요소의 수.
- 생략 / 값이 array.length - start보다 큰 경우: start부터의 모든 요소를 제거.
- 0 이하의 수를 지정: 어떤 요소도 제거되지 않는다.
🧃item1, item2, ... // 배열에 추가할 요소.
- 지정하지 않는 경우: splice()는 요소 제거만 수행한다.
🧃반환값 // 제거한 요소를 담은 배열.
- 아무 값도 제거하지 않았으면 빈 배열을 반환한다.
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr2 = arr1.splice(8,5,'hi');
// 여기서 삭제 된 배열은 arr2 에 담기고 [9, 10, 11, 12]
var arr3 = arr2.splice(2,3,'뭐래는거야');
// 여기서 삭제 된 배열은 arr3 에 담긴다 [11, 12]
/*
var arr3 = arr2.splice(2,3,'뭐래는거야'); -> 재할당? 되었다.
*/
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8, "hi"]
console.log(arr2); // [9, 10, "뭐래는거야"]
console.log(arr3); // [11, 12]
var arr4 = arr3.splice(1,0);
console.log(arr4); // [] 아무 값도 제거되지 않았음배열의 값을 삭제
🏁pop()
배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제합니다.
let num = ['hi' , 'hello' , false , 123123];
num.pop();
console.log(num); // ["hi", "hello", false]🏁shift()
배열에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제합니다.
let num = ['hi' , 'hello' , false , 123123];
num.shift();
console.log(num); // ["hello", false, 123123]