요소 추가·제거 메서드
splice
기존 배열의 요소를 삭제하거나 새 요소를 추가하여 배열의 내용을 변경
기본문법
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
- start : 배열에서 변경을 시작할 인덱스위치. 음수일 경우 배열의 끝에서부터 위치지정
- deleteCount (선택적) : 배열에서 제거할 요소의 수. 생략시 start에서부터 모든 요소 제거
- item1,item2 (선택적) : 배열에 추가할 요소. 생략시 splice()는 요소를 제거하기만 함.
구문에서 대괄호는 선택적이라는 의미
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // ["Let's", "dance", "right", "now"] 0번째인덱스앞 I부터 3개삭제 "I", "study", "JavaScript"그다음 "Let's", "dance"추가
- 음수인 인덱스인 경우
let arr = [1, 2, 5];
arr.splice(-1, 0, 3, 4);
alert( arr ); // 1,2,3,4,5-1위치인덱스앞 5부터 0개삭제, 그후 3,4추가
slice
원본 배열을 수정하지 않고 특정 부분을 추출하여 새 배열을 만듬,
배열의 특정 부분을 추출할 때 사용
기본문법
array.slice([begin[, end]])
- begin (선택적) : 기본값은 0, 생략시 배열의 처음부터 복사시작.
- end (선택적) : 선택한 인자값 바로 앞부분까지 복사. 생략시 배열의 끝까지 복사
- begin 이나 end 가 음수인 경우, 배열의 끝에서부터의 위치를 나타냄.
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s
alert( arr.slice(-2) ); // s,t 1번 인덱스 "e"부터 3번 인덱스인 "t"앞에있는 "s" 복사후 반환 ->e,s
-2번 인덱스 "s"부터 end값이 없음, 그래서 끝까지 복사후 반화 ->s,t
arr.slice() 이경우는 기존배열 건드리지 않고 새로운배열 복사가능.
ex) let ABC = arr.slice(); //ABC =["t", "e", "s", "t"]
concat
기존의 배열에 하나 이상의 배열이나 값을 합쳐 새로운 배열을 만들어 반환
두 개 이상의 배열을 하나로 합칠 때 사용
기본문법
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
- value는 배열이나 값 상관없이 여러개 지정할수 있음.
원본 배열을 변경하지 않음. 대신 합쳐진 요소들을 포함하는 새로운 배열을 반환
let arr = [1, 2];
alert( arr.concat([3, 4]) ); // 1,2,3,4
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6forEach
배열의 각 요소에 대해 주어진 함수를 실행하는 메소드,
배열의 각 요소를 순회하며, 각 요소에 대해 정의된 콜백 함수를 한 번씩 실행
배열을 변경하지 않음. 다만, 콜백 함수 내부에서 배열 요소는 변경가능
기본문법
array.forEach(function(currentValue, index, arr), thisValue)
- currentValue : 배열의 현재 처리되고 있는 요소
- index : 현재 처리되고 있는 요소의 인덱스
- arr : forEach() 메소드가 적용되고 있는 배열 객체
- thisValue (선택적) : 콜백 함수 내에서 this로 사용될 값.생략시 undefined가 this 값
(아직이해못함)
const fruits = ['사과', '바나나', '체리'];
fruits.forEach(function(item, index, arr) {
console.log(index, item, arr);
});
0 '사과' (3) ['사과', '바나나', '체리']
1 '바나나' (3) ['사과', '바나나', '체리']
2 '체리' (3) ['사과', '바나나', '체리']fruits에 사과,바나나,체리 상수선언
콘솔로그에 현재인덱스, 현재배열요소, 배열전체 순으로 나옴
배열탐색하기
indexOf, lastIndexOf, includes
indexOf : 배열에서 지정된 요소를 찾아 그 위치의 첫 번째 인덱스를 반환. 없으면 -1반환
기본문법
array.indexOf(searchElement, fromIndex)
- searchElement : 배열에서 찾고자 하는 요소
- fromIndex(선택적) : 검색을 시작할 인덱스. 생략시 기본값 0이고 배열의 처음부터 검색시작함.
lastIndexOf : indexOf와 반대, 뒤에서부터 검색 후 첫번째 인덱스 찾아서 값 반환.없으면 -1반환
includes :배열에 특정값이 있는지 없는지만 확인후 있으면 true, 없으면 false반환.
2024.04.28수정
includes는 비교대상이 배열일경우 값이 완벽히 일치해야만 true.
비교대상이 문자열일경우 부분일치도 true 반환.
let arr = [1, 0, false, 1];
alert( arr.lastIndexOf(1) ); // 3
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1
alert( arr.includes(1) ); // truarr에 1이라는 요소가 두개있는데 lastIndexOf(1)은 뒤에부터 검색이라서 4번째1의 인덱스값 3을 출력함.
라스트인덱스오브에서 I대문자 주의
find와 findIndex
find : 주어진 판별 함수를 만족하는 배열 내의 첫 번째 요소의 값을 반환,없으면 undefined 반환.
기본문법
array.find(function(element, index, array) { 조건 }, thisArg);
- element : 현재 처리되고 있는 배열의 요소
- index(선택적) : 현재 처리되고 있는 요소의 인덱스
- array (선택적): find 메소드가 적용되는 배열
- thisArg (선택적): 콜백 함수 내에서 this 값으로 사용될 객체
(이해못함)
findIndex: 만족하는 값을 반환하는대신 해당요소 첫 번째 인덱스를 반환 .없으면 -1반환
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
let user = users.find(function(item){
return item.id ==1;
});
alert(user.name); // Johnusers에 각각요소들 id1,2,3 name 할당됨.
user는 users에서 요소들중 id가 ==1 인경우를 찾음.
alert에서 user.name를 부르면 id:1 인 john출력됨.
%궁금해서 검색해봄%
alert(user); 시 user객채 전체가 문자열로 변환된다고함.
그러면 기본 문자열변환 메서드 toString()호출됨. 지금현재 user안에 있는건 객채라서
객채문자열 변환 결과인 [object Object]가 출력된다고함. 몰라 그냥 그렇다고함.
filter
find 와비슷하지만 조건을 만족하는 요소가 여러개일시,
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
기본문법
let newArray = array.filter(function(element, index, array) { 조건 }, thisArg);
- element: 현재 처리되고 있는 요소
- index (선택적): 현재 처리되고 있는 요소의 인덱스
- array (선택적): filter 메소드가 호출된 배열
- thisArg (선택적): 콜백 함수 내에서 this로 사용될 값
(이해못함)
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
let someUsers = users.filter(function(item){
return item.id < 3;
});
someUsers.forEach(function(user) {
alert(user.name); //John,Pete
}); users 에 id1,2,3 각각 존 ,피트,매리 할당됨.
someUsers는 users에 필터적용해서 id값이 3미만인경우인 값이 들어감.
필터적용한 someUsers에 forEach반복문으로 순회하면서 그안에있는 name속성값들을 alert로 부름
배열을 변형하는 메서드
map
배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.
원본 배열을 변경하지 않으면서, 각 요소를 주어진 함수의 반환 값으로 매핑하여 새로운 배열을 생성
데이터의 변환 및 가공에 자주 사용되는 메소드
기본문법
let newArray = array.map(function(element, index, array) { 변환 로직 }, thisArg);
- 문자열을 대문자나 소문자로 바꾼다던지, 문자열길이반환 ,객체 배열에서 특정 키의 값만 추출하거나, 숫자 배열의 각 요소를 특정 수치로 조정하는 등,숫자를 문자열로 바꾼다던지 등등
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6const fruits = ["apple", "banana", "cherry"];
const upperCased = fruits.map(fruit => fruit.toUpperCase());
console.log(upperCased); // ["APPLE", "BANANA", "CHERRY"]const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]const numbers = [1, 2, 3, 4, 5];
const incrementedNumbers = numbers.map(number => number + 3);
console.log(incrementedNumbers); // [4, 5, 6, 7, 8]const numbers = [1, 2, 3, 4, 5];
const stringNumbers = numbers.map(number => number.toString());
console.log(stringNumbers); // ["1", "2", "3", "4", "5"]const users = [
{ id: 1, name: "Alice", age: 28 },
{ id: 2, name: "Bob", age: 24 },
{ id: 3, name: "Charlie", age: 30 },
];
// 각 사용자의 이름만 추출
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]