728x90
반응형

array
이름과 인덱스로 참조되는 정렬된 값의 집합
- 배열값 : 배열 요소(element)
- 배열에서의 위치 : index *0부터 시작
- 배열 요소의 자료형이 달라도 된다.
- 배열 요소의 인덱스가 연속적이지 않아도 되며,
  특정 배열 요소가 비어 있을 수도(empty) 있다.
- 자바스크립트의 배열은 Array객체로 다뤄진다.
  
*형식
//배열 리터럴을 이용
1. var arr = [배열요소1,배열요소2,...];
//Array객체의 생성자 이용
2. var arr =Array(배열요소1,배열요소2,...);
//new연산자를 이용한 Array객체 생성
3. var arr =new Array(배열요소1, 배열요소2,...);
  
   
.forEach( )형식
- item : 해당 배열객체의 요소값을 가져오는 변수
- idx : 해당 배열의 인덱스값을 가져오는 변수
**empty값(아예 기술한 값이 없다.)이 있으면 해당 요소는 출력에서 제외

배열객체명
.forEach(function(요소값변수, 인덱스변수){
       실행문;
       ...
   });

delete : 배열 요소(값)만 삭제됨. 공간은 삭제 안 됨
delete arr[2]
  
pop(): 배열 공간 삭제됨 -원본훼손 일어남
arr.pop();
 
push()를 통한 요소 추가 -원본훼손 일어남
arr.push("Script");
  
slice(시작인덱스번호, 마지막인덱스번호 (지정된값-1))
-원본훼손 일어남
arr.slice(0, 2); 
  
length를 통한 요소 추가
arr[arr.length] = 100;
  
 특정 인덱스를 지정하여 요소 추가
//arr["JavaScript",10,100, , , , , , , "자바스크립트"]
arr[10] = "자바스크립트";
document.write(arr + "<br>");
document.write(arr[7]); //값 할당받은 것이 없음. undefined
 

 

array
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>배열(array)이란 :</h1>
    <pre> 
        <!-- <pre>:단락태그이면서 글자가 작게 나옴.앞에 공백이 있는만큼 공백형성 -->
이름과 인덱스로 참조되는 정렬된 값의 집합
- 배열값 : 배열 요소(element)
- 배열에서의 위치 : index *0부터 시작
- 배열 요소의 자료형이 달라도 된다.
- 배열 요소의 인덱스가 연속적이지 않아도 되며,
  특정 배열 요소가 비어 있을 수도(empty) 있다.
- 자바스크립트의 배열은 Array객체로 다뤄진다.

*형식
//배열 리터럴을 이용
1. var arr = [배열요소1,배열요소2,...];
//Array객체의 생성자 이용
2. var arr = Array(배열요소1,배열요소2,...);
//new연산자를 이용한 Array객체 생성
3. var arr = new Array(배열요소1, 배열요소2,...);
    </pre>
    <script>
      var arrLit = [1, true, , "JavaScript"];
      var arrObj = Array(1, true, null, "JavaScript");
      var arrNewObj = new Array(1, true, "JavaScript");

      /*
        forEach()형식
        - item : 해당 배열객체의 요소값을 가져오는 변수
        - idx : 해당 배열의 인덱스값을 가져오는 변수
        **empty값(아예 기술한 값이 없다.)이 있으면 해당 요소는 출력에서 제외
        배열객체명.forEach(function(요소값변수, 인덱스변수){
            실행문;
            ...
        });
        */
      //var arrLit = [1,true, , "JavaScript"];
      arrLit.forEach(function (item, idx) {
        console.log(idx + "/" + item);
      });
      //var arrObj = Array(1,true,null,"JavaScript");
      arrObj.forEach(function (item, idx) {
        console.log(idx + "/" + item);
      });

      document.write(arrLit + "<br>");
      document.write(arrObj + "<br>");
      document.write(arrNewObj + "<br>");

      document.write('arrLit.length: ' + arrLit.length + "<br>");
      document.write('arrObj.length: ' + arrObj.length + "<br>");
      document.write('arrNewObj.length: ' + arrNewObj.length + "<br>");
    </script>
  </body>
</html>

 

ㅁ
\ 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>배열의 참조</h1>
    <script>
      var arr = ["JavaScript"];
      var element = arr[0]; //"JavaScript"

      arr[1] = 10;
      arr[2] = element;

      document.write("배열 arr의 요소1: [" + arr + "]<br>");
      document.write("배열 arr의 길이1: " + arr.length + "<br>");

      delete arr[2]; //delete : 배열 요소(값)만 삭제됨. 공간은 삭제 안 됨.
      document.write("배열 arr의 요소2: [" + arr + "]<br>");
      document.write("배열 arr의 길이2: " + arr.length + "<br>");

      arr.pop(); //pop(): 배열 공간 삭제됨.
      document.write("배열 arr의 요소3: [" + arr + "]<br>");
      document.write("배열 arr의 길이3: " + arr.length + "<br>");

      //push()를 통한 요소 추가 // arr["JavaScript", 10,"Script"]
      arr.push("Script");
      document.write("배열 arr의 요소4: [" + arr + "]<br>");
      document.write("배열 arr의 길이4: " + arr.length + "<br>");
      ///arr=[1,2,3,4,5,6,7] => arr.slice(1,3);
      arr = arr.slice(0, 2); //slice(시작인덱스번호, 마지막인덱스번호 (지정된값-1))
      // document.write(arr.slice(0,2), "<br>"); //arr["JavaScript", 10]
      document.write(arr + "<br>");
      document.write("배열 arr의 요소5: [" + arr + "]<br>");
      document.write("배열 arr의 길이5: " + arr.length + "<br>");
      document.write("배열 arr의 길이5(slice): " + arr.length + "<br>");

      // length를 통한 요소 추가
      arr[arr.length] = 100; //arr["JavaScript", 10, 100]
      document.write(arr + "<br>");

      //특정 인덱스를 지정하여 요소 추가
      //   arr["JavaScript",10,100, , , , , , , "자바스크립트"]
      arr[10] = "자바스크립트";
      document.write(arr + "<br>");
      document.write(arr[7]); //값 할당받은 것이 없음.
    </script>
  </body>
</html>​

배열관련 함수들
charAt(인덱스) : 문자열의 한 글자만 추출
  
Array.isArray() : 배열객체 여부 판별
  
객체|변수|데이터 instanceof Array: 배열객체 여부 판별
- new를 통한 객체 생성시, object로 자료형으로 됨.
 
document.write((str instanceof Array)); // false
document.write((str instanceof String)); // false
document.write((str1 instanceof String)); // true
document.write(typeof(str) ); //string
document.write(typeof (new를 통해 생성시)); //object
  
ㄹ
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>배열관련 함수들</h1>
    <script>
      // charAt(인덱스) : 문자열의 한 글자만 추출
      var str = "안녕하세요!";
      var str1 = new String("안녕하세요!");
      document.write(str.charAt(2) + "<br>");
      document.write(str[5] + "<br>");
      document.write(str.length + "<br>");

      // Array.isArray() : 배열객체 여부 판별
      var arr = [1, true, "JavaScript"];
      document.write(Array.isArray(arr) + "<br>");
      document.write(Array.isArray(str) + "<br><br>");

      // 객체|변수|데이터 instatnceof Array : 배열객체 여부 판별
      document.write((arr instanceof Array) + "<br>");
      document.write((str instanceof Array) + "<br>");
      document.write((str instanceof String) + "<br>");
      document.write((str1 instanceof String) + "<hr>");

      document.write(typeof(str) + "<br>"); //string
      document.write(typeof str1 + "<br>"); //object
      //new를 통한 객체 생성시, object로 자료형으로 됨
    </script>
  </body>
</html>​
728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

[JS] function2, arguments  (0) 2024.02.28
[JS] function1  (0) 2024.02.28
[JS] continue  (0) 2024.02.27
[JS] for  (0) 2024.02.27
[JS] while, do~while  (0) 2024.02.27

+ Recent posts

티스토리툴바