배열 Array(PUSH, Number, pop(), length, splice(), slice(), substr(), replace(), 정규 표현식 Regular Expression, String 객체 문자열)

Array 
하나의 변수_명으로 동일한 타입의 여러 데이터를 저장할 수 있는 변수타입.
문자열 변환, 요소의 추가와 삭제, 요소의 이동, 연결, 요소 분리, 요소 정렬 등 다양한 메써드가 있다.

 

toString() 요소 값들을 콤마 ( , ) 로 분리된 문자열로 변환
push() 새로운 요소 (맨 뒤에)추가
pop() 마지막 요소 보이고, 삭제
splice() 특정 위치의 요소를 삭제하고 그 위치에 삽입 = 배열_명.splice(index, 삭제_개수, 대체_요소)
slice() 특정 요소 추출
sort() 오름차순으로 정렬
reverse() 요소를 거꾸로 만듦

 

    <script>
        var animals = ["사자","호랑이","사슴","펭귄"];
        var str = animals.toString();

        document.write(str + "<br>");
        document.write(typeof(str));
    </script>
사자,호랑이,사슴,펭귄
string

 

PUSH

 

    <script>
        var animals = ["사자","호랑이","사슴","펭귄"];
        var str = animals.push("기린"); // animals.push("기린")으로 변수 선언 안하고 가능 / 배열 맨 뒤 추가

        document.write(str + "<br>");
        document.write(typeof(str) + "<br>");
        document.write(animals.toString())
    </script>
5
number
사자,호랑이,사슴,펭귄,기린

    <script>
        var animals = ["사자","호랑이","사슴","펭귄"];
        animals.push("기린"); // animals.push("기린")으로 변수 선언 안하고 가능
        var x;
        x = animals.push("이구아나")	// 변수 선언과 동시에 push로 넣어주면 배열의 길이가 나옴
        document.write(animals + "<br>");
    </script>
사자,호랑이,사슴,펭귄,기린,이구아나

 

POP()

 

    <script>
        var animals = ["사자","호랑이","사슴","펭귄"];
        animals.pop("기린"); 

        document.write(animals + "<br>");

        var x = animals.pop();

        document.write(x + "<br>");
        document.write(animals)
    </script>
사자,호랑이,사슴
사슴
사자,호랑이

 

length

 

    <script>
        var animals = ["사자","호랑이","사슴","펭귄"];
        animals[0]="코뿔소"; // 첫번째 요소 "사자"를 "코뿔소"로 대체

        document.write(animals + "<br>");

        var len = animals.length;
        document.write(len + "<br>");   // 요소의 개수를 보임

        animals[6] = "여우";	// 배열 자리를 요소가 있는 자리에 배치하면 대체가 되며, 길이가 더 길게 하면 사이의 값은 뭘까
        document.write(animals);
    </script>
코뿔소,호랑이,사슴,펭귄
4
코뿔소,호랑이,사슴,펭귄,,,여우

 

splice()

= 배열_명.splice(index, 삭제_개수, 대체_요소)

 

    <script>
        var animals = ["사자","호랑이","사슴","펭귄"];
        animals.splice(2,2,"곰"); // index 2 부터 2개 요소를 삭제, 그 위치에 곰 추가
        document.write(animals + "<br>");

        animals.splice(2,0, "원숭이");	// index 2 위치에 0개 요소 삭제 후 원숭이 추가
        document.write(animals);
    </script>
사자,호랑이,곰
사자,호랑이,원숭이,곰

 

slice()

배열_명.slice(start_index, last_index)
last_index는 불포함.
배열_명.slice(start_index)
start_index 부터 끝까지.

    <script>
        var animals = ["사자","호랑이","사슴","펭귄","여우","독수리"];
        var arr = animals.slice(2); 	// index 2부터 끝까지
        document.write(arr+ " <br>")

        var arr1 = animals.slice(1,2);	// index 1부터 1까지, 2 불포함 !!
        document.write(arr1);
    </script>

 

    <script>
        var str = "123 4567 891 234 1156";
        document.write(str.slice(2,8)+"<br>");  // 2~ 7까지
        document.write(str.slice(5)+"<br>");    // 5 ~ 끝까지
        document.write(str.slice(-3)+"<br>");   // 끝에서 3번째부터 끝까지
        document.write(str.slice(-10,-3)+"<br>");	
	// 끝에서 10번째부터 끝에서 3번째 까지, -10,3은 안됨 순서가 올바르지 않음
    </script>
3 4567
567 891 234 1156
156
1 234 1
// 띄어쓰기 포함

 

String 객체 문자열

slice() index를 이용하여 특정 문자열 추출
substr() 인덱스와 길이를 이용하여 특정 문자열 추출
replace() 특정 문자열 치환
toUpperCase() 영문을 대문자로 변환
toLowerCase() 영문을 소문자로 변환
split() 특정 문자를 기준으로 문자열 분리

 

substr()

배열의 인덱스와 추출할 요소의 개수를 사용하는 면에서 slice() 와 다르다

 

    <script>
        var str = "123 4567 891 234 1156";
        document.write(str.substr(2,8)+"<br>");  // 2에서 8자리 추출
        document.write(str.substr(5)+"<br>");    // 5에서 끝까지 추출
        document.write(str.substr(-3)+"<br>");   // 끝에서 3번째부터 끝까지
        document.write(str.substr(-10,3)+"<br>");
	// 끝에서 10번째부터 3자리 추출, -10,-3은 안됨 -10자리부터 -3자리추출이라는 개념이 없음
    </script>
3 4567 8
567 891 234 1156
156
1 2

 

replace()
문자열 지정 시, 문자열에서 처음 나오는 측정 문자열을 치환

 

    <script>
        var str = "A friend in need is a friend indeed.";
        document.write(str.replace("friend","family")+"<br>");  // 찾은 문자중 가장 처음 문자 변경
        document.write(str+"<br>");   // str 문자열 그대로 반환
        
        var str1 = str.replace(/friend/g, "buddy"); //  friend 의 모든 문자 buddy로 반환, g 모든 줄이라는 뜻.(정규표현식)
        document.write(str1)
    </script>
A family in need is a friend indeed.
A friend in need is a friend indeed.
A buddy in need is a buddy indeed.

 

정규 표현식 (Regular Expression)
 많은 텍스트 편집기와 자바스크립트와 같은 프로그래밍 언어에서 문자열 검색, 추가, 치환 등에서 주로 사용.

대소문자 변경
대문자로 변경 - toUpperCase()
소문자로 변경 - toLowerCase()

 

    <script>
        var str = "Have a Nice Day !";
        document.write(str.toUpperCase() + "<br>");  
        document.write(str+"<br>");   
        var str2 = str.toLowerCase();
        document.write(str2);
    </script>

HAVE A NICE DAY !
Have a Nice Day !
have a nice day !

split() 문자열을 특정 문자열을 기준으로 분리해서 

 

    <script>
        var str = "2022/07/06";
        var arr = str.split("/");   // /슬러쉬를 중심으로 쪼개랏
        document.write("년 : " + arr[0] + "<br>");
        document.write("월 : " + arr[1] + "<br>");
        document.write("일 : " + arr[2] + "<br>");
    </script>
년 : 2022
월 : 07
일 : 06