<TIL> Javascript_Array, String
2021.08.06
Array
기본사용법
-
let 또는 const 변수 = [];
-
let 또는 const 변수 = new Array( );
변수.[0] = 값1;
변수.[1] = 값2;
변수.[2] = 값3; -
let 또는 const 변수 = new Array(값1, 값2, 값3);
for문으로 배열 값 순서대로 가져오기
-
for 기본형
for(let i = 0; i < 배열.length; i++){
document.write(배열[i]);
} -
for in 사용
for(i in 배열){
document.write(배열[i]);
}
Array Method
let arr_1 = ['사당', '교대', '방배', '강남'];
let arr_2 = ['신사', '압구정', '옥수'];
-
join(연결문자)
배열 값들 사이에 입력된 문자로 연결해
한개의 문자형 데이터로 바꿔주는 메서드
let result = arr_1.join(' - ');
console.log(result); // 사당 - 교대 - 방배 - 강남 -
concat( )
배열 합치는 메서드
result = arr_1.concat(arr_2);
console.log(result); // ["사당", "교대", "방배", "강남", "신사", "압구정", "옥수"] -
slice(index1, index2)
지정한 범위로 자르기
result = arr_1.slice(1, 3);
console.log(result); // ["교대", "방배"] // 1번부터 3번까지(3번 포함 X) -
reverse( )
목록순서 뒤집기
arr_2.reverse();
console.log(arr_2); // ["옥수", "압구정", "신사"] -
sort( )
오름차순 정렬 = 많이 사용
arr_1.sort();
console.log(arr_1); // ["강남", "교대", "방배", "사당"] -
splice( )
인덱스번호, 자를 갯수, 대체데이터 = 많이 사용
arr_1.splice(2, 1, 'test');
console.log(arr_1); // ["강남", "교대", "test", "사당"] -
pop( )
마지막 배열 삭제하는 메서드 = 많이 사용
arr_1.pop();
arr_1.pop();
console.log(arr_1); // ["강남", "교대"] -
shift( )
첫번째 인덱스 번호 삭제
result = arr_1.shift(); // result에는 삭제하는 값인 "강남"이 담겨있다.
console.log(arr_1, result); // ["교대", "강남"] // "강남" -
push( )
배열 맨뒤에 새로운 값 추가 = 많이 사용
arr_1.push(result);
console.log(arr_1); // ["교대", "강남"]
arr_1.push('test');
console.log(arr_1); // ["교대", "강남", "test"] -
unshift( )
배열 앞에 데이터 추가
arr_1.unshift('1234');
console.log(arr_1); // ["1234", "교대", "강남", "test"]
String
기본사용법
-
let 또는 const 변수 = "";
-
let 또는 const 변수 = '';
-
let 또는 const 변수 = new String('문자')
String Method
let text = 'Hello Javascript ';
let text2 = new String('Hello Javascript'); // 문자열 객체
let text3 = 'jQuery';
-
toUpperCase() 영문 일괄 대문자
console.log(text.toUpperCase()); // HELLO JAVASCRIPT
console.log(text[7].toUpperCase()); // A // 특정 인덱스만 선택 -
toLowerCase() 영문 일괄 소문자
console.log(text.toLowerCase()); // hello javascript
-
charAt(index) 특정 인덱스의 문자만 추출
console.log(text.charAt(1)); // e -
indexOf('찾을 문자') 해당 문자로 시작하는 인덱스번호
console.log(text.indexOf('Javascript')); // 6
console.log(text.indexOf('q')); // -1 // 문자열 찾지 못하면 -1 반환
console.log(text.indexOf('s')); // 10 -
lastIndexOf('찾을 문자') // 오른쪽부터 해당 문자를 찾아서 인덱스값 반환
console.log(text.lastIndexOf('p')); // 14 -
slice(a, b)
console.log(text.slice(6, 10)); // Java // 문자를 잘라옴 (시작인덱스, 끝인덱스번호 : 미포함) = 실제 들어오는 인덱스 시작 ~ (끝 - 1) -
substring(a, b)
결과가 slice와 같지만 끝인덱스번호 뒤의 데이터는 삭제하는 점이 다르다.
console.log(text.substring(6, 10)); // Java -
substr(a, b)
substr(위치지정, 지정 위치부터의 문자갯수)
console.log(text.substr(6, 10)); // Javascript -
length
배열 길이 출력
console.log(text.length); // 16 -
trim( )
앞뒤에 붙은 공백문자 제거 ( 공백hi공백 -> hi )
console.log(text.trim()); // Hello Javascript -
concat(문자)
문자끼리 이어줌
console.log(text.concat(text3)); // Hello Javascript jQuery
console.log(text.concat('test')); // Hello Javascript test -
charCodeAt(문자)
문자에 대한 아스키코드
console.log(text.charCodeAt(O)); // 72 -
String.fromCharCode(숫자 및 아스코드)
아스키코드에 대한 문자
console.log(String.fromCharCode(72)); // H -
match(찾는 문자)
배열내 찾는 문자와 일치하는 값이 있으면 그대로 반환 없으면 null 반환
console.log(text.match('show')); // null
console.log(text.match('script')); // script -
replace(제거할 문자, 대체할 문자)
특정 문자를 지우고 다른 문자로 대체해줌
console.log(text.replace('Hello', 'Hi')); // Hi Javascript -
기타
console.log('\u{1F60D}'); // 😍 // 아스키 코드 특수문자
console.log("it's very good"); // it's very good
console.log('it\'s very good'); // it's very good
console.log('A\B'); // A\B
특정 코드기능관련 코드를 문자 그대로 출력할 때 \을 붙혀사용한다.
응용예제
배열응용
난수를 이용한 배열 내 랜덤 배경색 출력
<body id="bg">
<button onclick="change()">배경색 바꾸기</button>
<script>
let color = [
'red',
'yellow',
'orange',
'coral',
'black',
'white',
'blueviolet',
'yellowgreen',
'gray',
];
function change() {
let rdm = Math.random();
let num = Math.floor(rdm * color.length);
document.getElementById('bg').style.backgroundColor = color[num];
}
</script>
</body>배열을 색상텍스트로 설정해 놓고 버튼을 클릭하면 작동되는 함수에 난수를 배열의 길이만큼 곱해주고 내림하여 0 ~ 배열길이까지 인덱스번호가 나오게하고 해당 값을 body 배경색으로 배열[인덱스난수]로 지정해준다.
실행결과
바꾸기 버튼을 누를 때마다 랜덤하게 배경색이 나타나는 것을 볼 수 있다.
음악플레이리스트 등록 및 삭제리스트
<style>
#list {
width: 100px;
list-style: none;
padding-left: 10px;
}
#list li {
border-bottom: 1px solid #333;
line-height: 1.4;
margin-bottom: 10px;
}
</style>
<body>
<h1>뮤직 플레이리스트</h1>
<input type="text" placeholder="노래 제목을 입력해주세요" id="input" />
<button onclick="add()">추가하기</button>
<button onclick="del()">삭제하기</button>
<ul id="list"></ul>
<script>
let playlist = [];
function add() {
let music = document.getElementById('input').value;
if (!music) {
document.getElementById('input').value = '';
} else {
playlist.push(music);
let list = '';
for (i in playlist) {
list += `<li>${playlist[i]}</li>`;
}
document.getElementById('list').innerHTML = list;
document.getElementById('input').value = '';
}
}
function del() {
let music = document.getElementById('input').value;
playlist.pop(music);
let list2 = '';
for (i in playlist) {
list2 += `<li>${playlist[i]}</li>`;
}
document.getElementById('list').innerHTML = list2;
document.getElementById('input').value = '';
}
</script>
</body>입력값을 받아줄 input을 만들고 입력된 곡을 넣어줄 빈배열을 만들고 추가버튼을 클릭하면 작동되는 함수에 input의 입력값을 받아줄 변수를 선언하고 if문을 사용해 해당 변수가 비어있으면 입력값을 초기화해주고 아닌 경우는 빈배열에 push로 해당 변수의 값을 추가해준다.
이후 li를 만들 문자를 중첩시킬 변수를 만들고 for in으로 채워진 배열의 길이만큼 반복문을 돌려 인덱스 0부터 li를 중첩시켜준다. 그리고 for문 밖에서 중첩된 문자가 쌓인 변수를 ul태그에 넣어주어 곡정보가 추가된 리스트를 완성시켜주고 다시 input의 입력창을 초기화시켜주어 비어있게한다.
반대로 삭제버튼을 눌렀을 때 작동하는 함수에는 pop을 사용해 기존에 채워진 배열의 뒤 인덱스 값부터 삭제하여 새로운 문자 중첩 변수에 for문으로 삭제된 배열을 배열길이만큼 반복하여 li를 중첩시켜주고 중첩된 문자변수를 ul태그에 넣어 기존 리스트를 교체해주고 input 입력창을 초기화시켜 최근에 입력한 정보가 삭제된 리스트를 출력해준다.
실행결과
초기상태
추가하기 5번 이후
삭제하기 2번 이후
문자응용
문자객체 메서드로 이메일 유효성 검사하기
<body>
<script>
let userEmail = prompt('이메일 주소를 입력해주세요');
let arrUrl = ['.com', 'co.kr', '.net', '.or.kr', 'go,kr'];
// boolean 판단 변수 생성
let check1 = false; // @ 유무
let check2 = false; // url 유무
// '@'가 userEmail에 없으면 -1을 반환하므로 양수이면 @ 판단 변수를 true로 바꿔준다.
if (userEmail.indexOf('@') > 0) {
check1 = true;
}
for (i in arrUrl) {
// arrUrl 내부 데이터가 userEmail에 없으면 -1을 반환하므로 양수이면 url판단 변수를 true로 바꿔준다.
if (userEmail.indexOf(arrUrl[i]) > 0) {
check2 = true;
}
}
if (check1 && check2) {
document.write(userEmail);
} else {
alert('이메일 형식이 잘못되었습니다.');
}
</script>
</body>이메일을 입력받을 prompt를 사용하고 이메일의 url 값을 결정하는 부분을 배열로 만들어준다. 그리고 체크변수를 만들어 기본값으로 false를 넣어준다. 한가지는 @가 존재하는지, 나머지는 배열에 있는 url 값들 중 하나인지 판단해주기 위해 존재한다.
먼저 if문으로 입력값을 받은 변수를 indexOf('@')로 찾고 없으면 -1을 반환하기 때문에 조건에 해당 값이 양수이면을 달고 참이면 체크변수1번을 true로 바꿔준다.
다음 for in으로 배열내 값을 전부 적용하여 내부 if문에 넣어서 위에서 설명한 것과 똑같이 입력받은 값 변수.indexOf(arrUrl[i]) > 0 가 참이면 체크변수2번을 true로 바꿔준다.
마지막으로 체크변수 1번과 2번이 모두 참일때 입력받은 이메일을 출력하고 하나라도 거짓인 경우 '이메일 형식이 잘못되었습니다'라는 알림을 출력해준다.
실행결과
초기화면
[email protected]을 입력했을때
12341234를 입력했을때
구구단을 테이블 형태로 출력 후 특정문자를 포함하는 테이블 배경 바꾸기
<style>
table {
border-collapse: collapse;
float: left;
margin: 20px;
}
table td {
border: 1px solid #555;
padding: 5px;
}
</style>
<body>
<script>
let table = ''; // 빈문자열을 초기값으로 세팅해줘야 누적연산이 가능
for (let i = 2; i <= 9; i++) {
table += '<table>';
table += `<caption>${i}단</caption>`;
for (let j = 1; j <= 9; j++) {
let total = String(i * j);
table += '<tr>';
if (total.indexOf('9') >= 0) {
table += '<td style = "background-color: red">';
} else if (total.indexOf('7') >= 0) {
table += '<td style = "background-color: skyblue">';
} else {
table += '<td>';
}
table += `${i} x ${j} = ${total} </td>`;
table += '</tr>';
}
table += '</table>';
}
document.write(table);
</script>
</body>문자를 중첩시켜줄 변수를 선언해주고 for문을 2번돌려 첫 for문은 변수1을 2 ~ 9까지 두번째 for문은 변수2를 1 ~ 9까지 첫 for문의 변수1에 2가 들어갈 때 변수2에 1 ~ 9까지 넣어주면서 차곡차곡 테이블을 구성하는 태그들을 쌓아준다.
여기서 배경색을 바꾸는 조건을 주기 위해 값을 행으로 출력해주는 td 테이블 행태그를 선택하여 if문을 입력한다.
곱한 값을 String()으로 문자열로 바꾸어주고 변수를 선언한다. 그리고 if 조건에 해당 변수.indexOf('9')를 사용해 실제 존재하여 값이 양수이면 중첩변수에 += '<td style = "background-color: red">'; 또 else if 조건에 변수.indexOf('7')를 사용해 실제 존재하여 값이 양수이면 중첩변수에 += '<td style = "background-color: skyblue">';를 실행하고 그 나머지는 중첩변수에 += '<td>';사용하여 테이블을 완성시켜준다.
실행결과
Author And Source
이 문제에 관하여(<TIL> Javascript_Array, String), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@padd60/TIL-JavascriptArray-String저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
