html,css,js
[자바스크립트 중급] Array method 배열 메소드1
코복이
2023. 5. 8. 13:47
728x90
1. arr.splice(n, m) : 특정 요소를 지우거나, 지우고 추가하거나, 특정 자리에 추가
- n번째 요소부터 m개 지워라
// splice(n, m) 특정 요소 지움
let arr = [1,2,3,4,5];
console.log(arr.splice(1,2)); // [ 2, 3 ] 이건 스플라이스 자체를 콘솔로그 찍은거라 뭐 지울지 보여줌.
console.log(arr); // [ 1, 4, 5 ] 이건 스플라이스 적용된 arr (1번부터 2개 지움)
- 배열.splice(1, 2, x, y, ...) : 특정 요소 지우고 그 자리에 x, y ... 넣어라
// splice(n, m, x) 특정 요소 지우고 그자리에 다른거 채움
let arr = [1,2,3,4,5];
arr.splice(1,2,100,200,300);
console.log(arr); // [ 1, 100, 200, 300, 4, 5 ]
- m자리에 0을 넣으면 아무것도 지우지 않고 n번째 자리에 요소 추가 가능
// splice(n, m, x) m에 0 넣으면 지우는거 없이 n 자리에 추가 가능
let arr = [1,2,3,4,5];
arr.splice(1,0,100,200,300);
console.log(arr); // [ 1, 100, 200, 300, 2, 3, 4, 5 ] // 1번 자리에 추가됨
- 배열.splice() 자체는 삭제한 요소를 반환함. (맨위에 콘솔 로그 찍은 것과 연계)
// splice(n, m) 자체는 삭제한 요소를 반환함.
let arr = [1,2,3,4,5];
let result = arr.splice(1,2);
console.log(arr); // [ 1, 4, 5 ]
console.log(result); // [ 2, 3 ]
2. arr.slice(n, m) : n번째부터 m번째까지 반환
- m번째는 포함하지 않음 (String.slice 와 매커니즘 같음 마지막 포함 안함)
- ()괄호 안에 아무것도 안넣으면 전체 반환
// slice(n, m) n번 부터 m번까지 반환
let arr = [1,2,3,4,5];
console.log(arr.slice(1,3)); // [ 2,3 ]
3. arr.concat(arr2,arr3...) : 기준배열에 파라미터로 들어온 배열 합쳐서 새배열 반환
- 배열 아니여도 합침
// arr.concat() 파라미터에 들어온 배열 합치기
let arr = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
console.log(arr.concat(arr2,arr3)); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(arr.concat([0,0,0],[4,4,4])); // [ 1, 2, 3, 0, 0, 0, 4, 4, 4 ]
console.log(arr.concat([0,0,0],9,9,9)); // [ 1, 2, 3, 0, 0, 0, 9, 9, 9 ] // 배열 아니여도 합침
4. arr.forEach(fn) : 배열을 순회하며 코드 반복
- arr.forEach((item, index, arr)=>{반복할 코드}); 이렇게 씀.
- forEach는 함수를 인수로 받는다.
- 그 함수는 3개의 매개변수가 있다: ( item, index, arr ) *보통 item, index만 사용
- item: 각 요소들을 뜻 함 (각 요소를 대표하는 이름으로 하면 좋음)
- index: 각 요소의 순서를 뜻 함
- arr: 해당 배열 자체 (보통 안씀)
// forEach
let arr = ["Mike", "Jane", "Tom"];
arr.forEach((name, index)=>{
console.log(`${index + 1}번 ${name}입니다.`)
})
1번 Mike입니다.
2번 Jane입니다.
3번 Tom입니다.
5. arr.indexOf() : 찾는 요소의 index 값 반환
- indexOf(n): n 어디있어요? => index 몇에 있어
- indexOf(n, m): n 어디있어요? 근데 요소 m 다음 순서부터 찾아주세요 => index 몇에 있어
*단, 어디서 시작했는지와 상관없이 배열에서 n의 index 반환
*그리고 시작점 m이 n 다음 순서에 있으면 전부 -1 반환 - arr.indexOf(3) // 배열에서 3의 index 값 반환
- arr.indexOf(4,3) // 3부터 시작해서(3앞에 있는 것 무시) 찾을때 4의 index 값 반환
6. arr.lastIndexOf() : 찾는 요소의 index 값 반환 (끝에서부터 찾음)
- 끝에서부터 찾아도 반환은 정방향 index 값
- lastIndexOf : 대문자 I, 대문자 O로 써야 함.
// indexOf(), lastindexOf()
let arr = [1,2,3,4,5,6,7];
console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(3,2)); // 2 (시작점 요소 2부터 찾은 것과 상관없이 index는 처음부터 순서 2)
console.log(arr.indexOf(3,5)); // -1 (시작점이 찾는 요소보다 뒤에 있으면 -1)
console.log(arr.lastIndexOf(3)); // 2 (끝에서부터 찾아도 정방향 index 2)
7. arr.includes() : 배열 내에 해당 요소를 포함하고 있는지 확인
- true || false 로 반환
- 인덱스 상관없이 있는지 없는지만 체크
8. arr.find(fn) : 조건에 해당하는 가장 첫번째 인덱스 반환
- arr.find((요소)=>{실행코드})
- 찾고자 하는 대상이 객체 리스트 일때 indexOf() 로는 찾기 어려움. 그럴때 find() 사용
- 함수를 인수로 받아 특정 조건에 해당하는 것을 찾을 수 있음 e.g) 짝수만 찾아, 성인만 찾아
- 첫번째 true 값만 반환하고 끝 (전부 찾지 않음)
- 만약 찾는 조건에 해당하는 요소가 없으면 undefined 반환
9. arr.findIndex(fn) :
- 특정 조건에 해당하는 요소의 인덱스를 반환함.
- 없으면 -1를 반환함
// arr.find()
let arr = [1,2,3,4,5,6,7];
const result = arr.find((item)=>{
return item % 2 === 0;
})
console.log(result); // 2 (첫번째 true 요소 반환)
//arr.findIndex()
const result2 = arr.findIndex((item)=>{
return item % 2 === 0;
})
console.log(result2); // 1 (첫번쨰 true 요소의 인덱스 반환)
// arr.find(), arr.findIndex() 유저 중에 성인만 찾기
let userList = [
{name: "Mike", age: 29},
{name: "Jane", age: 17},
{name: "Tom", age: 35}
];
const adultUser = userList.find((user)=>{
return user.age > 19;
})
const adultUser2 = userList.findIndex((user)=>{
return user.age > 19;
})
const adultUser3 = userList.find((user)=>{
if(user.age > 19){
return true;
}return false;
})
const adultUser4 = userList.findIndex((user)=>{
return user.age > 50;
})
const adultUser5 = userList.find((user)=>{
return user.age > 50;
})
console.log(adultUser); // { name: 'Mike', age: 29 }
console.log(adultUser2); // 0
console.log(adultUser3); // { name: 'Mike', age: 29 }
console.log(adultUser4); // -1
console.log(adultUser5); // undefined
10. arr.filter(fn) : 만족하는 모든 요소를 배열로 반환
- arr.find()와 사용법 동일
- 만족하는 모든 요소를 찾을 수 있음 (배열로 반환)
// arr.filter() 유저 중에 성인 전부 찾기
let userList = [
{name: "Mike", age: 29},
{name: "Jane", age: 17},
{name: "Tom", age: 35}
];
const adultUser = userList.filter((user)=>{
return user.age > 19;
})
const adultUser2 = userList.filter((user)=>{
return user.age > 50;
})
console.log(adultUser); // [ { name: 'Mike', age: 29 }, { name: 'Tom', age: 35 } ]
console.log(adultUser2); // [] ( 없으면 빈배열 반환)
11. arr.reverse() : 역순으로 재정렬
- 게시판에서 최신순 정렬할때, 또는 회원 가입 최신순으로 정렬할때 사용
// arr.reverse() 역순으로 반환
let userList = [0,1,2,3,4,5,6]
console.log(userList.reverse()); // [ 6, 5, 4, 3, 2, 1, 0 ]
12. arr.map(fn) : 함수를 받아 특정 기능 실행하고 새로운 배열 반환
- 실무에서 많이 씀.
// arr.map(fn) : 함수받아 특정 기능 실행하고 새로운 배열로 재반환
let userList = [
{name: "Mike", age: 29},
{name: "Jane", age: 17},
{name: "Tom", age: 35}
];
// Object.assign 활용하여 빈객체에 새로운 유저리스트 추가, 복사 (빈객체에 일단 기존 요소들 넣고, 프로퍼티 추가) const newUserList = userList.map((user, index)=>{
return Object.assign({},user,{
id : index + 1, // id 프로퍼티 추가
inAdult: user.age > 19, // 성인인지 체크하는 프로퍼티 추가 (t/f 반환)
introduce: `제 이름은 ${user.name}이고 나이는 ${user.age}입니다.` // 소개 프로퍼티 추가
})
})
console.log(newUserList);
console.log(userList); // 기존은 안바뀜
[
{
name: 'Mike',
age: 29,
id: 1,
inAdult: true,
introduce: '제 이름은 Mike이고 나이는 29입니다.'
},
{
name: 'Jane',
age: 17,
id: 2,
inAdult: false,
introduce: '제 이름은 Jane이고 나이는 17입니다.'
},
{
name: 'Tom',
age: 35,
id: 3,
inAdult: true,
introduce: '제 이름은 Tom이고 나이는 35입니다.'
}
]
[
{ name: 'Mike', age: 29 },
{ name: 'Jane', age: 17 },
{ name: 'Tom', age: 35 }
]
13. arr.join() : 배열의 요소들을 합쳐서 문자열로 반환
- 파라미터 자리에 넣는 문자열로 각 요소 사이를 채움.
- 아무것도 안넣으면 , 가 들어감.
// arr.join()
let user = ["가이","파이","와이"]
let userList = [
{name: "Mike", age: 29},
{name: "Jane", age: 17},
{name: "Tom", age: 35}
];
const test1 = user.join();
const test2 = user.join('');
const test3 = user.join(' ');
const test4 = userList.join();
console.log(test1);
console.log(test2);
console.log(test3);
console.log(test4);
가이,파이,와이
가이파이와이
가이 파이 와이
[object Object],[object Object],[object Object] // 객체 배열은 타입을 반환하네
14.arr.split() : 문자열을 나눠서 배열로 만들어 줌
- join()의 거꾸로
- () 파라미터자리에 들어가는 문자열이 각 요소를 나누는 기준이 됨.
- 파라미터 아무것도 안적거나 나눌 수 없는 걸로 하면 구분하지 않고 요소 1개짜리로 통째로 반환
- ("")빈문자열 띄어쓰기 없이 입력하면 한글자씩 요소로 반환
// arr.split()
const str1 = "가오,가이,거거,기름"
const str2 = "가오 가이 거거 기름"
const test1 = str1.split();
const test2 = str1.split(",");
const test3 = str2.split();
const test4 = str2.split(" ");
const test5 = str1.split(" ");
const test6 = str1.split("");
console.log(test1); // [ '가오,가이,거거,기름' ]
console.log(test2); // [ '가오', '가이', '거거', '기름' ]
console.log(test3); // [ '가오 가이 거거 기름' ]
console.log(test4); // [ '가오', '가이', '거거', '기름' ]
console.log(test5); // [ '가오,가이,거거,기름' ]
console.log(test6);
[ '가', '오', ',',
'가', '이', ',',
'거', '거', ',',
'기', '름'
]
15. Array.isArray() : 배열인지 아닌지 확인
- 배열은 객체의 속어이기 때문에 typeof 는 object로 알려줌 (구분이 안됨)
- 이럴때 Array.isArray() 사용
// Array.isArray()
let user = {
name: "Sam",
age: 29
}
let userList = ["Sam", "Mike", "Tom"]
console.log(typeof user); // object
console.log(typeof userList); // object
console.log(Array.isArray(userList)); // true
728x90