개발 알다가도 모르겠네요

Slice vs Splice vs Split의 차이점을 알아보자 본문

웹/Javascript

Slice vs Splice vs Split의 차이점을 알아보자

이재빵 2022. 7. 7. 01:20
728x90

Slice()

slice()는 배열 메서드로 원하는 부분을 복사하고 새로운 배열로 리턴.
배열을 변경하지 않는 것이 핵심.


let bread=['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
newArr=bread.slice(2,5);
//output:["loaf3", "loaf4", "loaf5"]

 

Splice()

Splice() 또한 배열 메서드로 배열에 원하는 엘리먼트 갯수를 추가하거나 제거할 수 있음.

이는 기존 배열에 변이를 줌.

  1. 제거만 할 경우
let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
bread.splice(1, 3);
["loaf2", "loaf3", "loaf4"]
//output:["loaf1", "loaf5", "loaf6"]

2.제거하고 새로운 엘리먼트를 추가하는 경우

let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
bread.splice(1, 3, 'newLoaf1', 'newLoaf2');
console.log(bread);
//output:["loaf1", "newLoaf1", "newLoaf2", "loaf5", "loaf6"]

3.추가만 하는 경우

let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
bread.splice(3, 0, 'newLoaf1', 'newLoaf2');
console.log(bread);
//output:["loaf1", "loaf2", "loaf3", "newLoaf1", "newLoaf2", "loaf4", "loaf5", "loaf6"]

 

Split()

Split()은 string 메서드지만 배열을 리턴함.
문자열을 배열로 전환할 때 매우 유용.

let myString = "the quick brown fox jumps over the lazy dog";
//For a comma separated array use " ":
myString.split(" ");
//output: ["the", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]
//For each alphabet as element of array use "":
myString.split("");
//output: ["t", "h", "e", " ", "q", "u", "i", "c", "k", " ", "b", "r", "o", "w", "n", " ", "f", "o", "x", " ", "j", "u", "m", "p", "s", " ", "o", "v", "e", "r", " ", "t", "h", "e", " ", "l", "a", "z", "y", " ", "d", "o", "g"]

 

TIP

  1. 배열에 split()을 적용하기 위해 .toString()을 사용하여 string으로 전환할 것.
var myString = array.toString();

2.string을 배열로 전환하기위해 ("")와 함께 split을 사용할 것.

myString.split(" ");

 

참고:https://medium.com/@anupamroy8/slice-vs-splice-vs-split-in-javascript-344c41cb94a5