반응형


//10. splice() 메서드
//배열의 기존 요소를 삭제하거나 교체하고자 할 때 --> 새로운 요소를 추가 --> 배열의 값을 변경.
//특징1 --> 원본을 수정.
//특징2 --> 잘라내고(삭제하고) 이어 붙이기 기능

//기본 사용법
//splice(______, ______, ______, ______);
//splice(start, count(del), 값(item), 값(item));

console.clear();
console.log('---------------------------------------------------- splice()');

//원본배열
const oriArt10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("원본 배열: "+oriArt10);

//10-1.
console.log('---------------------------------------------------- splice() 10-1');
const spliceAr1 = oriArt10.splice(5);
console.log(spliceAr1); // 6, 7, 8, 9, 10
console.log(oriArt10); // 1, 2, 3, 4, 5

//10-2.
console.log('---------------------------------------------------- slice() 10-2');
const sliceAr1 = oriArt10.slice(3);
console.log(sliceAr1); // 4, 5, 6, 7, 8, 9, 10
console.log( "원본 배열: " + oriArt10); // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
console.log("원본 배열 길이: " + oriAr10.length); //7

//10-3.
const oriAr10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log('---------------------------------------------------- slice() 10-3');
const spliceAr3 = oriAr10.splice(3, 2, 'a', 'b', 'c');
console.log(spliceAr3); // 4, 5
console.log("원본 배열: "+ oriAr10); // 1, 2, 3, a, b, c, 6, 7, 8, 9, 10
console.log("원본 배열 길이: "+ oriAr10.length); // 11

//10-4.
console.clear();
console.log('---------------------------------------------------- slice() 10-4');
const oriStrings = ['서울', '부산', '인천', '경기', '전라', '경상', '충청'];
console.log(oriStrings);

// 지정한 인덱스 포함해서 2개를 삭제하고 --> 새로운 '강원', '제주' 를 추가
const oriStrings1 = oriStrings.splice(2, 2, '강원', '제주');
console.log(oriStrings1); // 인천, 경기
console.log(oriStrings); // 서울, 부산, 강원, 제주, 전라, 경상, 충청

// 마이너스 지정
const oriStrings2 = oriStrings.splice(-2);
console.log(oriStrings2); // 경상, 충청
console.log(oriStrings); // 서울, 부산, 강원, 제주, 전라

//0 지정
const oriStrings3 = oriStrings.splice(3, 0, '진도');
console.log(oriStrings3); // [] --> 지정한 인덱스 자리에 삭제하는 것 없이 --> 새로운 요소 삽입
console.log(oriStrings); // '서울', '부산', '인천', '경기', '전라' --> '서울', '부산', '인천', '진도', '경기', '전라'





반응형
반응형


1. 자바스크립트 - 배열 메소드(Array methods)

push() : 뒤에 삽입
pop() : 뒤에 삭제
unshift() : 앞에 삽입
shift() : 앞에 삭제

------------------------------------------------------------

2. arr.splice(n, m) : 특정 요소 지움

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

console.log(arr);

arr.splice(n, m, x) : 특정 요소 지우고 추가

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

arr.splice(1, 3, 100, 200);

console.log(arr);

arr.splice(n, m, x)  : 특정 요소 지우고 추가
- m: 두번째 인수의 0을 넣으면 아무것도 지우지 않고 중간에 새로운 요소를 추가

let arr = ["나는", "제이슨", "입니다."];

arr.splice(1, 0, "대한민국", "경찰관");

console.log(arr);

------------------------------------------------------------

3. arr.splice() :  삭제된 요소 반환

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

let result = arr.splice(1, 2);

console.log(arr);
console.log(result);

------------------------------------------------------------

4. arr.slice(n, m) : n부터 m까지 반환

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

let arr2 = arr.slice();
console.log(arr2);

------------------------------------------------------------

5. arr.concat(arr2, arr3, ...) : 합쳐서 새배열 반환

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

arr.concat([3,4],[5,6]);
arr.concat([3,4],5,6);

------------------------------------------------------------

6. arr.forEach(fn) : 배열 반복
- 첫번째는 해당 요소이고 두번째는 인덱스임
  세번째는 해당 배열 자체를 의미

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) => {
//
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(name);
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(`${index+1}. ${name}`);
});

------------------------------------------------------------

7. arr.indexOf / arr.lastIndexOf

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

arr.indexOf(3);
arr.indexOf(3, 3);
arr.lastIndexOf(3);

------------------------------------------------------------

8. arr.includes() : 포함하는지 확인

let arr = [1, 2, 3];

arr.includes(2);
arr.includes(8);

------------------------------------------------------------

9. arr.find(fn) / arr.findIndex(fn)

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

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

const result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result);

// find / findIndex

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

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

console.log(result);

------------------------------------------------------------

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

const arr = [1, 2, 3, 4, 5, 6];

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

console.log(result);

------------------------------------------------------------

11. arr.reverse() : 역순으로 재정렬

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

arr.reverse();

------------------------------------------------------------

12. arr.map(fn)

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

// arr.map()

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    isAdult: user.age > 18,
  });
});

console.log(newUserList);

// arr.map()

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index + 1,
    isAdult: user.age > 18,
  });
});

console.log(newUserList);
console.log(userList);

------------------------------------------------------------

// join, split

let arr = ["안녕", "나는", "제임스야"];

let result = arr.join();

console.log(result);

------------------------------------------------------------

let arr = ["안녕", "나는", "제임스야"];

let result = arr.join("   ");

console.log(result);

------------------------------------------------------------

// split

const users = "Mike, Jane, Tom, Tony";

const result = users.split(",");

console.log(result);

------------------------------------------------------------

// split

let str = "Hello, My name is Mike.";
const result = str.split("");

console.log(result);

------------------------------------------------------------

// Array.isArray()

let user = {
  name : "Mike",
  age: 30,
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user);
console.log(typeof userList);

console.log(Array.isArray(user));
console.log(Array.isArray(userList));

 

반응형