반응형
Sort Without Articles
목표
배열의 내용에서 부사를 제거한 뒤 알파벳 순으로 재배열
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
</head>
<body>
<ul id="bands"></ul>
<script>
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
</script>
</body>
</html>과정
- 부사를 제거할 수 있는 함수 생성
- 배열을 재정렬
- 문서에 매핑
코드 분석
1. 부사를 제거할 수 있는 함수 생성
const strip = bandName => {
return bandName.replace(/^(a |the |an )/i, '').trim();
}인자로 bandName을 넣으면 내용중 a, the, an 을 공백으로 바꾸고 공백을 제거하는 함수 strip()을 생성
2. 배열을 재정렬
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);sortedBands에 bands의 내용을 알파벳 순서대로 재정렬해 담음
3. 문서에 매핑
document.querySelector('#bands').innerHTML = sortedBands.map(band => '<li>${band}</li>').join('');새 배열을 리스트에 하나씩 담아 bands를 id로 갖는 요소에 매핑한다
찾아본 내용, 알게된 내용들
trim() - 데이터에 있는 공백과 탭을 제거하는 메소드