자바스크립트 중급 강좌 (배열매서드-1)

히대·2023년 12월 14일

Javascript

목록 보기
17/28

Array methods

splice()

splice(n,m) : n부터 시작해서 m개 만큼 지움 n은 index 번호

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

console.log(arr) -> [1,4,5]

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) -> ["나는","대한민국","소방관","철수","입니다"]

splice() : 삭제된 요소 반환

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

console.log(arr) -> [1,4,5]
console.log(result) -> [2,3] 특정요소를 지우고 그 값을 저장함

slice(n,m) : n부터 m 바로 앞까지 반환

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

let arr2 = arr.slice();  아무것도 적지않으면 배열이 복사됨
console.log(arr2) -> [1,2,3,4,5]

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(fn) : 배열 반복

let user = ["mike","tom","jane"]
user.forEach((item,index,arr)=> {
})

item = 해당 요소
index = 인덱스
arr = 해당배열자체

let arr = ['mike','tom','jane']
arr.forEach((name,index)=>{
	console.log(name) -> 'mike','tom','jane'
    console.log(`${index+1}. ${name}`) -> 1. mike 2. tom 3. jane
});

indexOf() : index의 여부

lastIndexOf() : 끝에서 부터 찾을때

let arr = [1,2,3,4,5,1,2,3]
arr.indexOf(3) -> 2
arr.indexOf(3,3) -> 7 뒤쪽에 있는 index번호를 반환함.
arr.lastIndexOf(3) -> 7 뒤에서부터 찾음

includes() : 포함하는지 확인

let arr = [1,2,3]

arr.includes(2); -> true
arr.includes(8); -> false

find(fn) / findeIndex(fn)

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

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

const result = arr.find(()=>{
	return item % 2 === 0  // 짝수를 찾는 식 item을 2로 나눴을때 나머지값이 0 인걸 찾음
})

console.log(result) -> 2와 4 나와야하지만
먼저 나오는 true 값이 2 이기 때문에 2만 반환함
let userList = [
	{name:'mike', age: 30},
    {name:'jane', age: 27},
    {name:'tom', age: 10},
]

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

console.log(result); -> {name:'tom', age: 10}

filter(fn) : 만족하는 모든 요소를 배열로 반환

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

const result = arr.filter(()=>{
	return item % 2 === 0  // 짝수를 찾는 식 item을 2로 나눴을때 나머지값이 0 인걸 찾음
})

console.log(result) -> [2,4,6]

reverse() : 역순으로 재정렬

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

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

let userList = [
	{name:'mike', age: 30},
    {name:'jane', age: 27},
    {name:'tom', age: 10},
];

let newUserList = userList.map((user, index)=>{
	return Object.assing({}, 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}

console.log(userList); -> 기존의 userList는 변하지 않음.
0 : {name : 'mike', age : 30}
1 : {name : 'jane', age : 27}
2 : {name : 'tom', age : 10}

join : 배열 문자열로 만듦

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

let result = arr.join();  아무것도 적지않으면 , 로 반환 ("")공백을 넣으면 공백 반환
console.log(result)  -> 안녕,나는,철수야

split : 문자열을 배열로 만듦

const user = "mike,jane,tom,tony"

const result = user.split(",")
console.log(result); -> ["mike","jane","tom","tony"]


const str = "Hello, My name is Mike"

const result = str.split("")
console.log(result); -> ["H","e","l","l","o"...] 이런식으로 각각 배열로 반환

isArray : 배열 인지 아닌지

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 를 반환
profile
아자아자 파이팅🔥

0개의 댓글