본문 바로가기
✨ Front-end/자바스크립트(JS)

[JavaScript] 배열 객체와 날짜함수

by 환풍 2023. 9. 1.
728x90
반응형

배열 객체 1

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>배열 객체</title>
</head>
 
<body>
    <p id="demo"></p>
    <script>
        var fruits = ["banana", "orange", "apple", "mango"];
 
        var text = "";
        for (var i = 0; i < fruits.length; i++) {
            text += fruits[i] + "<br>";
        }
        document.getElementById("demo").innerHTML = text;
 
        var arr = [1, 2, 3, 4];
        arr.pop(); // 뒤에서부터 삭제
        arr.push(5); // 맨뒤에 숫자 넣기
        arr.unshift(100); // 맨앞에 숫자 넣기
        arr.shift(); // 맨앞에 숫자 삭제
        arr.splice(1, 2); // 2, 3 삭제
        document.write(arr + '<br><br>');
 
        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6];
        var arr3 = arr1.concat(arr2);
        document.write(arr3 + '<br><br>');
 
        var arr7 = [1, 2, 3, 4];
 
        document.write(arr7.join() + '<br><br>');
        document.write(arr7.join(' - ') + '<br><br>');
 
        var arr4 = [9, 11, 10];
        var isOdd = function (value) {
            return value % 2 == 0;
        };
 
    document.write(arr4.every(isOdd) + '<br><br>');
 
document.write(arr4.some(isOdd) + '<br><br>');
    </script>
</body>
 
</html>
cs

pop( ) : 뒤에서부터 삭제

push( x ) : 맨 뒤에 숫자 x 넣기

unshift( x ) : 맨 앞에 숫자 x 넣기

shift( ) : 맨 앞에 숫자 삭제

splice( 1, 2 ) : 1번째, 2번째 삭제

x.concat( y ) : x와 y 합침

join( ) : 배열의 모든 요소를 기본 구분자 쉼표( , )로 결합한다.

join( ' - ' ) : 배열의 모든 요소를 대시( - ) 로 구분하여 결합한다.

 

every( x ) 

배열 내의 모든 요소가 주어진 조건을 만족하는지 여부를 확인한다.

만약 배열내의 모든 요소가 x라면 true, 그렇지 않다면 false이다.

 

some( x )

배열 내의 어느 하나의 요소라도 주어진 조건을 만족하는지 여부를 확인한다.

만약 하나 이상의 x 값이 있다면 true, 그렇지 않다면 false이다.

 

배열 객체2

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var isEven = function (value) {
    return value % 2 === 0;
};
var newArr = arr5.filter(isEven);
document.write(newArr + '<br><br>');
 
var arr6 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var value = arr6.reduce(function (previousValue, currentValue, index) {
    document.write(previousValue + ' ' + currentValue + ' ' + index + '<br>');
    return previousValue + currentValue;
});
document.write('<br>' + value);
cs
filter( ) 

( ) 안의 함수를 적용하여 조건에 맞는 값만 추출하여 배열에 저장한다.

 

reduce( )

배열의 요소를 누적합을 계산하는 value를 만든다.

배열의 각 요소에 대해 콜백 함수를 실행하고, 콜백 함수 내에서 이전 누적 값(previousValue), 현재 값(currentValue), 및 현재 인덱스(index)를 출력한 후, 이전 누적 값과 현재 값을 더해 누적 값을 갱신한다.

이러한 과정이 배열의 모든 요소에 대해 반복된다.

 

 

배열 객체3

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
var textArray = new Array("banana", "orange", "apple", "mango");
document.write(textArray.sort() + '<br>');
 
var intArray = new Array(5, 7, 22, 11, 42, 1);
document.write(intArray.sort() + '<br>');
 
// 숫자를 오름차순으로 정렬하는 비교 함수
intArray.sort(function (a, b) {
    return a - b;
});
document.write(intArray);
cs

 

sort( ) - 문자열로 오름차순 정렬하는 메소드이다. 숫자로 오름차순 정렬하기 위해 비교함수를 사용해야한다.

 

 

배열 객체4 ( 날짜함수)

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

 

1
2
3
4
5
6
7
8
9
10
11
var days=new Array("일","월","화","수","목","금","토");
var date=new Date();
document.write("오늘은 " 
        +date.getFullYear()+"년"
        +(date.getMonth()+1)+"월"
        +date.getDate()+"일 "
        +days[date.getDay()]+"요일 입니다.<br>");
    
document.write("현재시간은 "+date.getHours()+":" 
                        +date.getMinutes()+":"
                        +date.getSeconds()+"입니다.");
cs

 

728x90
반응형
저작자표시 비영리 변경금지

'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글

[JavaScript] 정규 표현식(RegExp)  (0) 2023.09.01
[JavaScript] JSON 객체, 배열 사용법  (0) 2023.09.01
[JavaScript] String 객체 함수  (0) 2023.09.01
[JavaScript] 생성자 함수  (0) 2023.09.01
[JavaScript] 자바스크립트 객체 VS 자바 객체 비교, Object  (0) 2023.09.01

관련글

댓글

티스토리툴바