JS : splice(), filter(), delete

daymoon_·2022년 4월 24일
0

JAVASCRIPT

목록 보기
19/23
post-thumbnail

splice()

🧶 참고 자료
MDN Array.prototype.splice()
DaleSeo 자바스크립트 배열의 slice()와 splice() 함수

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

배열의 길이를 변하게 한다.
아무 값도 제거하지 않았으면 빈 배열을 반환한다.


🧩 splice(A,B) : A번 인덱스 요소부터 B개를 삭제

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];

// [
//  'maroon',   'tan',
//  'salmon',   'snow',
//  'oldace',   'silver',
//  'azure',    'ivory',
//  'lavender'
// ]
console.log(color);
// 9
console.log(color.length);

// 3번 인덱스 요소부터 5개 요소 삭제
// [ 'salmon', 'snow', 'oldace', 'silver', 'azure' ]
console.log(color.splice(3,5));
// 4
console.log(color.length);

// [ 'maroon', 'tan', 'salmon', 'lavender' ]
console.log(color);

🧩 splice(A,0, "string") : 요소 삭제 없이 A번 인덱스에 "string" 추가

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];
// 9
console.log(color.length);

// 4번 인덱스 위치에 RED 추가
color.splice(4, 0, "RED");

// [
//   'maroon', 'tan',
//   'salmon', 'snow',
//   'RED',    'oldace',
//   'silver', 'azure',
//   'ivory',  'lavender'
// ]
console.log(color);
// 9
console.log(color.length);


// 7번 인덱스 위치에 GREEN, PINK 추가
color.splice(7, 0, "GREEN", "PINK");

// [
//   'maroon', 'tan',
//   'salmon', 'snow',
//   'RED',    'oldace',
//   'silver', 'GREEN',
//   'PINK',   'azure',
//   'ivory',  'lavender'
// ]
console.log(color);
// 12
console.log(color.length);

🧩 splice(A, B, "string") : A번 인덱스에 요소 B개 삭제하고 "string" 추가

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];
// 9
console.log(color.length);


// 3번 인덱스부터 요소 5개 삭제하고 ALICEBLUE 추가
color.splice(3, 5, 'ALICEBLUE');

// [ 'maroon', 'tan', 'salmon', 'ALICEBLUE', 'lavender' ]
console.log(color);
// 5
console.log(color.length);


// 2번 인덱스부터 요소 1개 제거하고 YELLOW, PLUM 추가
color.splice(2, 1, 'YELLOW', 'PLUM');

// [ 'maroon', 'tan', 'YELLOW', 'PLUM', 'ALICEBLUE', 'lavender' ]
console.log(color);
// 6
console.log(color.length);

🧩 splice(A) : A번 인덱스 포함해서 이후의 모든 요소 제거

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];
// 9
console.log(color.length);


// 5번 인덱스부터 끝까지 제거
color.splice(5)

// [ 'maroon', 'tan', 'salmon', 'snow', 'oldace' ]
console.log(color);

// 3번 인덱스부터 끝까지 제거
color.splice(3);

// [ 'maroon', 'tan', 'salmon']
console.log(color);

filter()

🧶 참고 자료
MDN Array.prototype.filter()
평범한 직장인의 공부 정리 fiter함수 사용 방법
JS : Array.map(), Array.filter(), Array.reduce()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새료운 배열로 반환한다.

테스트를 통과하지 못했으면 빈 배열을 반환한다.

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// [ 12, 130, 44 ]
console.log(filtered);

delete 연산자

🧶 참고 자료
MDN delete 연산자

delete 연산자는 객체의 속성을 제거한다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수한다.

배열의 길이 변화는 없다.
반환 값은 true이다. 단, 비엄격 모드에서 속성이 자신의 속성이며 설정 불가능 한 경우 false이다.

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];

// color[5] 요소 삭제
delete color[5];
// true
console.log(delete color[5]);


// [
//   'maroon',
//   'tan',
//   'salmon',
//   'snow',
//   'oldace',
//   <1 empty item>,
//   'azure',
//   'ivory',
//   'lavender'
// ]
console.log(color);


// undefined
console.log(color[5]);
profile
새벽과 코딩을 아우르는 미지의 공간 _ Study Log 🌙

0개의 댓글