|
자바스크립트(Javascript) 내장 객체 Array 의 join 함수, reverse 함수 – 3회 |
|
환경: Eclipse Mars |
Join() 함수는 배열의 데이터를 지정된 구분 문자로 연결해서 하나의 문자열로 만듭니다. 그러니까 각각의 영역에 저장된 배열 데이터를 콤마나 구분자로 구분한 후 붙여서 하나로 합치는 것입니다. 만약 join() 함수의 인수로 아무값도 넘기지 않는다면 기본값인 콤바를 추가합니다. reverse() 함수는 단어에서 의미하는 것과 같이 요소 값들의 순서를 반대로 바꿉니다. 데이터가 “1,2,3” 일 때 reverse() 를 사용하면 “3,2,1” 이 되는 것이죠.
|
◎ join() 함수 |
▼ join() 함수는 개요에서 설명했듯이 인수를 넣어도 되고 넣지 않으면 기본적으로 콤마로 배열값을 연결해서 하나의 문자열을 만듭니다. 아래 샘플은 넣지 않았을 때 입니다. 넣기 않고 document.write() 로 출력하면 “,” 로 연결되어서 화면에 표시가 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
var arr = new Array("사과","오이","배추","무우");
arr.join()
document.write(arr);
//-->
</script>
</head>
<body>
</body>
</html>
▼ 이번에는 인수로 구분할 문자를 넣었습니다. join() 함수의 인수로 “-” 를 넣으면 각 배열 요소의 값에 “-” 붙여서 연결해 줍니다. 만약 <br/> 태그를 인수로 넣으면 모든 데이터를 줄 바꿈 할 수 있겠죠. 그래서 태그와 데이터를 조합해서 많이 사용하기도 합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
var arr = new Array(0,1,2,3,4);
var brr = arr.join("-");
document.write(brr);
//-->
</script>
</head>
<body>
</body>
</html>
|
◎ reverse() 함수 |
▼ reverse() 함수는 배열 객체에 담겨 있는 요소 값들의 순서를 바꿉니다. 뒤에 있는 데이터가 앞으로 오고 앞에 있는 데이터가 뒤로 가는 것이죠. 오름차순과 내림차순 정렬할 때 많이 사용합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
var arr = new Array(0,1,2,3,4);
var reverseArr = arr.reverse();
document.write(reverseArr);
//-->
</script>
</head>
<body>
</body>
</html>
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) 수학과 난수 Math 객체 사용하기 2부, Ceil, Floor, Round (0) | 2019.06.02 |
|---|---|
| 자바스크립트(Javascript) 수학과 난수 Math 객체 사용하기 1부, cos, sin, tan 함수 (0) | 2019.05.27 |
| 자바스크립트(Javascript) 조건 연산자, 삼항 연산자 사용하는 방법 (0) | 2019.05.19 |
| 자바스크립트(Javascript) 문자를 숫자로 변환하는 Number 함수 (0) | 2019.05.02 |
| 자바스크립트(Javascript) 문자인지 여부를 판단할 수 있는 isFinite 함수 (0) | 2019.03.24 |
| 자바스크립트(Javascript) 대화상자 내장함수 alert, confirm, prompt 사용하는 방법 (0) | 2018.12.30 |
| 자바스크립트(Javascript) 주석(설명글) 넣어서 코드의 이해를 돕기 위한 방법 (0) | 2018.12.02 |
| 자바스크립트(Javascript) 해석하지 못하는 브라우저일 때 스크립트 소스 숨기기 (3) | 2018.09.13 |
