배열 메소드

지환·2024년 6월 11일
0

자바스크립트

목록 보기
17/30

기존에 있는 메소드

1. push() : 뒤에 삽입

2. pop() : 뒤에 삭제

3. unshift() : 앞에 삽입

4. shift() : 앞에 삭제

splice(n,m)

  • 특정 요소 지움

  • n번째 요소부터 m개 지워라

let arr = [1,2,3,4,5];
arr.splice(1,2); //1번쨰 요소부터 2개 지워라. [1,4,5]
console.log(arr) // 1,4,5

splice(n,m,x)

  • 특정 요소 지우고 x추가
let arr = [1,2,3,4,5];
arr.splice(1,3,100,200); // 2,3,4 지워지고 이 자리에 100 / 200이 들어감

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

두 번째 요소에 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(result); // [2,3]

slice()

  • n부터 m까지 반환
let arr = [1, 2, 3, 4, 5];

let result = arr.slice(2,3);

console.log(result); // [3]

괄호안에 아무것도 넣지 않는다면?

  • 배열 복사가 이뤄진다.
let arr = [1, 2, 3, 4, 5];

let result = arr.slice();

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

concat()

  • arr.concat(arr2,arr3..) : 합쳐서 새 배열 반환
// 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]

forEach()

  • arr.foreach(fn) ; 배열 반복

  • 함수를 인수로 받음 , 함수에는 3가지 매개변수

    • (해당요소 , 인덱스 , 배열 자체)
    • 보통 첫 번째 인자와 두 번째만 사용함
let users = ['Tom','Jery', 'Jane'];

users.forEach((item,index,arr)=>{
    // item : Tom / Jery / Jane
    // index : 0  / 1   /  2
    // arr : users
})
let users = ['Tom','Jery', 'Jane'];

users.forEach((item,index,arr)=>{
    // item : Tom / Jery / Jane
    // index : 0  / 1   /  2
    // arr : users
})

users.forEach((items,index)=>{
    console.log(`${index+1}`, `${items}`);
})

1 Tom
2 Jery
3 Jane

indexOf

  • 발견하면 해당 요소 인덱스 반환

  • 없으면 -1 반환

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

// 끝에서부터 탐색하고 싶을 때 

arr.lastIndexOf(3); // 7

includes()

  • 인덱스를 확인 할 필요는 없고 포함하는지만 확인하고 싶을 때 사용
let arr = [1,2,3];
arr.includes(2); // true;
arr.includes(8); // false;

find()

  • arr.find(fn)

  • arr.findIndex(fn)

  • indexOf처럼 찾는다는 의미는 동일하지만 보다 복잡한 연산이 가능함.

  • 첫 번째 true값만 반환하고 끝남

let arr = [1,2,3,4,5];
const result = arr.find((item)=>{
  return item % 2 === 0;
}) // 리턴값이 트루일 때 멈추고 해당 요소를 알려줌
let userList = [
    {name:'mike', age:'20'},
    {name:'jake', age:'18'},
    {name:'jane', age:'25'}
];

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

console.log(result);
---
{ name: 'jane', age: '25' }

filter

  • arr.filter(fn) : 만족하는 모든 요소를 배열로 반환한다.

    • find와 달리 조건을 만족하는 모든 요소를 알고 싶을 때 사용
let arr = [1,2,3,4,5];

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


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

map(fn)

  • arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환한다.
let userList = [
    { name: "Mike", age: 30 },
    { name: "Jane", age: 27 },
    { name: "Tom", age: 10 }
];

const result = userList.map((item,index)=>{
    return Object.assign({},item,{
        id : index+1,
        isAdult : item.age>19
    });
})



console.log(result);

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

join

let arr = ['안녕하세요', '나는', '오지환입니다.'];
let result = arr.join(); // 안녕하세요,나는,오지환입니다.
let result = arr.join(" "); // 안녕 나는 오지환입니다.

split

// split
// 문자열을 나눠서 배열로 만들어줌
let users = "Mike,Jane,Tom,Tony"
let result = users.split(",") // ["Mike", "Jane", "Tom", "Tony"]
console.log(result);

let str = "Hello, My name is Mike."
let result = str.split("") // ["H", "e", "l", "l", "o", " ", ... "."]
console.log(str);

Array.isArray()

  • 배열인지 아닌지 확인한다.

  • 자바스크립트에서 배열은 객체에 속함

let user = {name : 'mike', age : 30};
let userarray = ['mike','jane','tom'];
console.log(typeof user); // object
console.log(typeof userarray); // object


console.log(Array.isArray(user)); // false
console.log(Array.isArray(userarray)); // true
profile
아는만큼보인다.

0개의 댓글