[JS] 문자열을 배열로 바꾸고 공백 제거하기 (+배열 공백제거)

1. 문자열 → 배열로 변환

 

· str.split()

 지정한 구분자로 문자열을 나눈 후 배열로 반환한다.

//String.split() 메서드

const inputString = prompt('숫자를 입력해주세요');
//input: 12345(String)


inputString.split('') // ['1','2','3','4','5']
inputString.split(' ') // ['12345'] 공백이없으므로
inputString.split() // ['12345'] 구분자없을시 문자열그대로 배열반환

 

·  spread operator

전개 연산자로 문자열을 배열로 반환한다.

//spread operator 전개연산자

const inputNum = prompt('입력해주세요')
//input: 12345(String)

const arr = [...inputNum] // ['1','2','3','4','5']

 

 

· Array.from()

Array.from() 메서드로 유사배열객채 or 반복가능한 객체를 인자로 받아서 배열로 반환한다.

// Array.from()

const inputNum = prompt('입력해주세요')
input: 12345(String)

const arr = Array.from(inputNum) // ['1','2','3','4','5']

Array.from(객체, mapFn, thisArg)

두 번째 인자로 배열 요소 전체에 적용할 맵핑함수가 들어간다 (optional)

 

 

2. 공백 제거

공백 포함 문자열 → 문자열

공백을 포함한 문자열을 입력받았을 때, 공백을 제거하는 방법

 

· str.replace()

//공백 포함 문자열
const inputNum = prompt('입력해주세요')
input: 1 2 3 4 5 // '1 2 3 4 5'

let str = inputNum.replace(/\s/g, ''); // '12345'

replace() 메서드에 정규표현식으로 match 여부를 판별하고 대체자로 빈 문자열을 설정한다

\s : 공백

\g : 전역검색

 

공백포함 배열 → 배열

배열에 공백포함 문자열을 요소가 있는 경우

· arr.filter() , parseInt()

// 공백 포함 문자열의 배열요소
const inputNum = prompt('입력해주세요')
//input: 1 2 3 4 5 // "1 2 3 4 5"

const arr = inputNum.split('') // ["1", " ", "2", " ", "3", " ", "4", " ", "5"]

arr.filter(elem => parseInt(elem)); // ["1", "2", "3", "4", "5"]

arr.filter() 배열 메서드는 배열의 모든 요소를 돌며 콜백함수를 실행한다.

" ", 즉 공백을 포함한 문자열은 falsy value가 아니기때문에 filter를 거쳐도 값을 반환하는데, 공백을 제외시키기 위해서

문자열을 정수로 변환하는 parseInt()를 사용, 인자로 " " 공백을 포함한 문자열이 들어가면 NaN(Not a Number) 를 반환한다. (falsy value)

 

따라서 filter()메서드는 해당 값을 반환하지않고 나머지를 반환하게 된다.

 

 

+ 배열에 빈값 제거

배열에 empty값이 있을 때

arr.flat()

//배열의 빈 값 제거

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

arr.flat(); //[1, 2, 3, 4, 5]

 

flat() 배열메서드는 배열에 구멍이 있으면 제거한다.

또한 2차원 배열을 1차원 배열로 평탄화 시킨다. (default : 1)