[Javascript] Array methods(1)

요소 추가 ·제거 메서드

---

arr.push( )

✔️ 배열의 끝에 삽입

✔️ 파라미터로 전달된 배열을 하나의 원소로 처리한다 -> 그래서 arr1.length = 4가 되어버림

//push() 함수로 배열 합치기
const arr1 = [1,2,3];
const arr2 = [4,5,6];

arr1.push(arr2);

console.log(arr1); //[1,2,3,[4,5,6]

✔️ 배열의 원소들을 각각 넣어서 합치기 위해서는 spread operator도 함께 사용.

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

arr1.push(...arr2);

console.log(arr1); //[1,2,3,4,5,6]

 

arr.pop( )

✔️ 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

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

let result = arr.pop();

console.log(result); //5
console.log(arr); //[1,2,3,4]

 

arr.shift( )

✔️ 배열에서 첫번째 요소를 제거하고 그 요소를 반환한다.

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

let result = arr.shift();

console.log(result); //1
console.log(arr); //[2,3,4,5]

 

 

arr.unshift( )

✔️ 새로운 요로를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

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

let result = arr.unshift(1);

console.log(result); //6
console.log(arr); //[0,1,2,3,4,5]

 

arr.splice(n, m) / arr.splice(n, m,x)

✔️ 특정 요소를 지움.

✔️ n : 위치, m : 지울 개수, x : 추가할 요소

✔️ 삭제된 요소를 반환할 수도 있다.

 

// 배열에서 splice는 특정 위치의 특정 개수를 지울 수 있다.
let arr = [1,2,3,4,5];

arr.splice(1,2);
console.log(arr); //1,4,5


//특정 요소를 지우고 추가할 수도 있다.
let arr = [1,2,3,4,5];

arr.splice(1,3,100,200);
console.log(arr); //1,100,200,5


//삭제할 개수를 0으로 처리하면 지워지는 요소 없이 요소를 추가할 수 있다.
let arr = ["나는", "철수", "입니다"];

arr.splice(1,0,"대한민국","소방관");

console.log(arr); //나는 대한민국 소방관 철수 입니다


//삭제된 요소를 반환할 수 있다.
let arr = [1,2,3,4,5];

let result = arr.splice(1,2);

console.log(arr); 1,4,5
console.log(result); 2,3

 

arr.slice(n,m)

✔️ n부터 m까지 반환(※ m 공백시 끝까지 반환)

let arr = [1,2,3,4,5];
console.log(arr.slice(1,4)); //[2,3,4]

console.log(arr.slice(2)); //[3,4,5]
console.log(Arr.slice()); //[1,2,3,4,5]

 

arr.concat(arr2,arr3)

✔️ 합쳐서 배열을 반환

let arr = [1,2];

console.log(arr.concat([3,4])); //[1,2,3,4]
console.log(arr); //[1,2]
//배열 arr 값 자체가 변하지는 않는다.

 

 

arr.forEach(fn)

✔️ 배열을 반복

let arr = ["Mike", "Tom", "Jane"];

arr.forEach((name, index) => {
	console.log(`${index+1}. ${name}`);
}
//1. Mike
//2. Tom
//3. Jane

 

arr.indexOf / arr.lastIndexOf

✔️ 해당 요소의 위치를 반환

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

console.log(arr.indexOf(3)); //2
console.log(arr.indexOf(3,3) //7
console.log(arr.lastIndexOf(3); //7

 

arr.includes()

✔️ 포함하는지 확인만 하고 싶을 때

 

let arr = [1,2,3];

console.log(arr.includes(2)); //true
console.log(arr.includes(5)); //false

 

arr.find(fn) / arr.findIndex(fn)

✔️ 주어진 함수를 만족하는 첫 번째 요소의 값을 반환

✔️ 첫번째 true값만 반환하고 값이 없으면 undefiend를 반환한다.

let userList = [
  {name:"Mike", age:30},
  {name:"Jane", age:27},
  {name:"Tom", age:10},
];

const result = userList.find(function(user){
  if(user.age < 19){
    return true;
  }
    return false;
});

console.log(result);

 

arr.filter(fn)

✔️ 배열을 순회하며 요소마다 조건 확인 후 조건을 만족하는 요소들로 구성된 배열을 리턴.

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

const result = arr.filter(function(item){
  return item % 2 === 0;
});

console.log(result); //[2,4,6]

 

arr.map()

✔️ 배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴.

 

arr.reverse()

✔️ 역순으로 재정렬

 

arr.join()

✔️ 배열을 하나로 합쳐줌

let arr = ["안녕", "나는", "철수야"];

let result = arr.join("-");

console.log(result); //안녕-나는-철수야

 

arr.split();

✔️ 문자열을 나눠 배열로 만들어준다.

let str = "Hello";
const result = str.split("");

console.log(result); //['H', 'e', 'l', 'l', 'o']