[JavaScript_study] 배열 메소드1 (Array methods)

push() : 뒤에 삽입

pop() : 뒤에 삭제

unshift() : 앞에 삽입

shift() : 앞에 삭제

 

* arr.splice(n, m) : 특정 요소 지움

// n : 시작, m : 개수

let arr = [1, 2, 3, 4, 5];
arr.splice(1,2);

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

 

* arr.splice(n, m , x) : 특정 요소 지우고 추가

 

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

arr.splice(1, 3, 100, 200);

console.log(arr); // [1, 100, 200, 5]

let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");

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

 

* arr.splice() : 삭제된 요소 반환

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까지 반환

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

 

* arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환

let arr = [1, 2];

arr.concat([3,4]); // [1, 2, 3, 4]

arr.concat([3,4],[5,6]); // [1, 2, 3, 4, 5, 6]

arr.concat([3,4],5,6); // [1, 2, 3, 4, 5, 6]

 

* arr.forEach(fn) : 배열 반복

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

users.forEach( (item, index, arr) => {
  console.log(item)
})

// Mike
// Tom
// Jane

// item // Mike, Tom, Jane
// index // 0, 1, 2
// arr // users 배열자체를 의미한다.

 

* arr.indexOf / arr.lastIndexOf

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

arr.indexOf(3); // 2
arr.indexOf(3,3) // 7 // 두번째 인자는 시작위치를 의미한다. // 3번째 인덱스에서 3을 찾는다.

// 끝에서부터 탐색
arr.lastIndexOf(3); // 7

* arr.inclueds() : 포함하는지 확인

 

let arr = [1, 2, 3];

arr.includes(2); // true
arr.includes(8); // false

 

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

  > function을 이용하여 보다 복잡한 연산을 확인 가능하다.

  > 첫번째 true값만 반환하고 끝 만약 없으면 undefined를 반환한다.

 

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

const result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result); // 2 // 첫번째 true값만 반환해준다.

> 객체가 들어가있는 예시코드

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

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

console.log(result) // {name: 'Tom', age: 10}

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

console.log(result); // 2

 * arr.filter(fn)

  > 만족하는 모든 요소를 배열로 반환

 

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

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

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

 

* arr.reverse() : 역순으로 재정렬

 

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

arr.reverse(); // [5, 4, 3, 2, 1]

 

* arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

 

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

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id : index + 1,
    isAdult : user.age > 19,
  });
});

console.log(newUserList)

// 0: {name: 'Mike', age: 30, id: 1, isAdult: true}
// 1: {name: 'Jane', age: 27, id: 2, isAdult: true}
// 2: {name: 'Tom', age: 10, id: 3, isAdult: false}

// 기존의 userList에는 영향을 미치지 않는다.

* arr.join() : 배열안의 요소 합치기

 

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

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

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

* arr.split() : 문자열의 요소를 잘라서 배열로 만들어준다.

 

const users = "Mike,Jane,Tom,Tony";

let str = 'Hello, My name is Mike.';

const result = users.split(",");
const result2 = str.split("");

console.log(result); // ['Mike', 'Jane', 'Tom', 'Tony']
console.log(result2); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'M', 'y', ' ', 'n', 'a', 'm', 'e', ' ', 'i', 's', ' ', 'M', 'i', 'k', 'e', '.']

 

* Array.isArray() : 인자가 Array 인지 판별

 

let user = {
  name : "Mike",
  age : 30,
};

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

console.log(typeof user); // object
console.log(typeof userList); // object

console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true