[JS] Array 배열 메소드 splice(), slice(), map(), filter(), join(), split() 등

 

 

💡 arr.splice(n, m) : 인덱스 n번부터 m개 특정 요소 지움

❗️ 문자열에는 사용 XXX

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

 

➕ arr.splice(n, m, x) : 특정 요소를 지우고 지워진 자리에 x 추가

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

// 여기서 m이 0이라면? 아무것도 지우지 않고 요소 추가 가능!
let arr = ["나는", "호수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");
console.log(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까지 반환. 정확히는 m의 앞까지. m을 안쓰면 끝까지 반환.

❗️ 문자열에도 사용 OOO

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

 

➕ n, m 둘 다 안 쓰면 배열을 복사!

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

 

💡 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) : 배열 반복. 함수를 인수로 받는데 그 함수는 3개의 매개변수가 있다.

forEach(해당 요소, 인덱스, 해당 배열 자체) 보통 요소와 인덱스만 활용한다.

let users = ["aoto", "yae", "haru"];
// item => aoto yae haru
// index => 0 1 2
// arr users
users.forEach((item, index, arr) => {});

let users = ["aoto", "yae", "haru"];
users.forEach((name, index) => {
  console.log(`${index + 1}. ${name}`);
  //1. aoto
  // 2. yae
  // 3. haru
});

 

💡 arr.indexOf() : 배열의 특정 요소의 인덱스 반환

💡 arr.lastIndexOf() : 끝에서부터 요소를 찾는다.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7 n인 3부터 탐색을 시작하고 후에 3이 발견된 idx를 반환
arr.lastIndexOf(3); // 7 끝에서부터 처음 나오는 3의 idx

 

💡 arr.includes() : 인덱스를 확인할 필요 없고 포함하고 있는지만 알고 싶을 때

let arr = [1, 2, 3];
arr.includes(2); // true
arr.includes(8); // false

 

💡 arr.find(fn)

: indexOf()처럼 찾는단 의미는 같지만 보다 복잡한 연산이 가능하도록 함수를 연결할 수 있다. (짝수를 찾는다던가..)

주의할 점은, 첫번째 true 값만 반환하고 끝난다. 만약 없으면 undefined 반환.

💡 arr.findIndex(fn)

주의할 점은, 해당 index 반환하고 끝난다. 만약 없으면 -1 반환.

let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
  return item % 2 === 0; // 배열에서 짝수인 첫 번째 값을 반환
});

console.log(result); // 2

let userList = [
  { name: "aoto", age: 10 },
  { name: "yae", age: 30 },
  { name: "haru", age: 40 },
];

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

console.log(result); // {name: 'aoto', age: 10}
// findIndex를 썼다면 0 반환

 

💡 arr.filter(fn) : find와 달리 조건을 만족하는 모든 요소를 배열로 반환

let arr = [1, 2, 3, 4, 5];
const result = arr.filter((item) => {
  return item % 2 === 0; // 배열에서 짝수인 첫 번째 값을 반환
});

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

 

💡 arr.reverse() : 배열을 역순으로 재정렬

최근 가입된 유저를 보여준다던가. 게시판에서 가장 최근에 작성된 순서로 정렬할 때 자주 사용

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

 

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

let userList = [
  { name: "aoto", age: 10 },
  { name: "yae", age: 30 },
  { name: "haru", age: 40 },
];
// 매번 나이를 확인하기 귀찮으니 새 key 값을 가진 배열을 만들어보자.

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

console.log(newUserList);
// [
//   { name: "aoto", age: 10, id: 1, isAdult: false },
//   { name: "yae", age: 30, id: 2, isAdult: true },
//   { name: "haru", age: 40, id: 3, isAdult: true },
// ];

 

💡 arr.join() : 배열을 합쳐서 문자열로 반환

💡 arr.split() : 문자열을 나눠서 배열로 반환

let arr = ["안녕", "나는", "호수야"];
let result = arr.join(); // 아무것도 전달하지 않으면 아래처럼 쉼표로 구분됨
console.log(result); // 안녕,나는,호수야

let result2 = arr.join(" ");
console.log(result2); // 안녕 나는 호수야

const users = "aoto,yae,haru";
const result3 = users.split(","); // 쉼표 기준으로 나뉘어짐
console.log(result3); // ['aoto', 'yae', 'haru']

const result4 = users.split("");
console.log(result4); // ['a', 'o', 't', 'o', ',', 'y', 'a', 'e', ',', 'h', 'a', 'r', 'u']

 

 

💡 Array.isArray() : 배열인지 아닌지 확인해줌

type of를 쓴다면 자바스크립트에서 배열은 객체형에 속하기 때문에

값이 objecrt가 나와서 일반 객체와 구분히 어렵다.

let user = {
  name: "aoto",
  age: "20",
};
let userList = ["aoto", "yae", "haru"];

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

console.log(Array.isArray(user)); // false 객체이기 때문에
console.log(Array.isArray(userList)); // true 배열이기 때문에

 

 

 

🔗 https://youtu.be/pJzO6O-aWew?si=-yoMkxHloWUv4s1p