문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » javascript_note » js_arrays
wiki:javascript:javascript_note:js_arrays

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:javascript:javascript_note:js_arrays [2021/04/26 11:48]
emblim98 [Adding Array Elements] 		wiki:javascript:javascript_note:js_arrays [2023/01/13 18:44] (현재)
줄 13: 줄 13:
 \\ \\
 <code javascript> <code javascript>
-  <script> +let cars = ["Saab", "Volvo", "BMW"]; 
-    let cars = ["Saab", "Volvo", "BMW"]; +document.getElementById("demo").innerHTML = cars;
-    document.getElementById("demo").innerHTML = cars; +
-  </script>+
 </code> </code>
  
줄 50: 줄 48:
 공백과 줄 바꿈(line breaks)은 중요하지 않습니다. 선언은 여러 줄에 걸쳐있을 수 있습니다.\\ 공백과 줄 바꿈(line breaks)은 중요하지 않습니다. 선언은 여러 줄에 걸쳐있을 수 있습니다.\\
 <code javascript> <code javascript>
-    let cars = [ +let cars = [ 
-      "Saab", +  "Saab", 
-      "Volvo", +  "Volvo", 
-      "BMW" +  "BMW" 
-    ];+];
 </code> </code>
  
줄 200: 줄 198:
 ''%%Array.forEach()%%'' 메서드를 사용할 수도 있습니다.\\ ''%%Array.forEach()%%'' 메서드를 사용할 수도 있습니다.\\
 <code javascript> <code javascript>
-    let fruits, text; +let fruits, text; 
-    fruits = ["Banana", "Orange", "Apple", "Mango"];+fruits = ["Banana", "Orange", "Apple", "Mango"];
  
-    text = "<ul>"; +text = "<ul>"; 
-    fruits.forEach(myFunction); +fruits.forEach(myFunction); 
-    text += "</ul>"; +text += "</ul>"; 
-    document.getElementById("demo").innerHTML = text;+document.getElementById("demo").innerHTML = text;
  
-    function myFunction(value) { +function myFunction(value) { 
-      text += "<li>" + value + "</li>"; +text += "<li>" + value + "</li>"; 
-    }+}
 </code> </code>
  
줄 226: 줄 224:
 </code> </code>
 \\ \\
 +
 ''length'' 속성을 사용하여 배열에 새로운 요소를 추가할 수도 있습니다.\\ ''length'' 속성을 사용하여 배열에 새로운 요소를 추가할 수도 있습니다.\\
 <code javascript> <code javascript>
줄 236: 줄 235:
 } }
 </code> </code>
 +\\
 **WARNING!** **WARNING!**
 인덱스가 높은 요소를 추가하면 배열에 정의되지 않은(undefined) "구멍(holes)"이 생길 수 있습니다.\\ 인덱스가 높은 요소를 추가하면 배열에 정의되지 않은(undefined) "구멍(holes)"이 생길 수 있습니다.\\
줄 265: 줄 264:
 \\ \\
 <code javascript> <code javascript>
- +let person = []; 
-<code>+person[0] = "John"; 
 +person[1] = "Doe"; 
 +person[2] = 46; 
 +let x = person.length; 
 +let y = person[0]; 
 +console.log(x);   // person.length will return 3 
 +console.log(y);   // porson[0] will return "John" 
 +document.getElementById("demo").innerHTML = person[0] + " " + person.length; // John 3 
 +</code>
 \\ \\
 **%%WARNING!!%%**\\ **%%WARNING!!%%**\\
줄 273: 줄 280:
 \\ \\
 <code javascript> <code javascript>
 +let person = [];
 +person["firstName"] = "John";
 +person["lastName"] = "Doe";
 +person["age"] = 46;
 +document.getElementById("demo").innerHTML = person[0] + "" + person.length; // undefined()
 +</code>
  
 +=====The Difference Between Arrays and Objects=====
 +%%JavaScript%%에서 **배열(arrays)***은 **번호가 매겨진 인덱스(numbered indexes)**를 사용합니다.\\
 +\\
 +%%JavaScript%%에서 **오브젝트(objects)**는 **명명된 인덱스(named indexes)**를 사용합니다.\\
 +\\
 +  배열은 번호가 매겨진 인덱스를 가진 특수한 종류의 객체입니다.
 +\\
 +
 +=====When to Use Arrays. When to use Objects.=====
 +
 +  * %%JavaScript%%는 연관 배열을 지원하지 않습니다.
 +  * 요소 이름을 문자열 (텍스트)로 지정하려면 오브젝트를 사용해야 합니다.
 +  * 요소 이름을 숫자로 만들려면 배열을 사용해야 합니다.
 +
 +=====Avoid new Array()=====
 +
 +%%JavaScript%%의 내장 배열 생성자 ''new Array()''를 사용할 필요가 없습니다.\\
 +\\
 +**대신 ''%%[]%%''를 사용하십시오.**
 +\\
 +다음의 두 가지 다른 스테이트먼트 모두 포인트라는 이름의 새로운 빈 배열을 만듭니다:\\
 +\\
 +<code javascript>
 +let points = new Array();    // Bad
 +let points = [];             // Good
 </code> </code>
 +\\
 +다음의 2개의 다른 스테이트먼트는 6개의 숫자를 가진 새로운 배열을 생성합니다.\\
 +\\
 +<code javascript>
 +// 
 +let points = new Array(40, 100, 1, 5, 25, 10);
 +let points = [40, 100, 1, 5, 25, 10];
 +document.getElementById("demo").innerHTML = points[0];
 +console.log(points);    // 40
 +</code>
 +\\
 +''new'' 키워드는 코드를 복잡하게 만듭니다. 또한 예상치 못한 결과가 발생할 수 있습니다.\\
 +\\
 +<code javascript>
 +let points = new Array(40, 100);  // Creates an array with two elements ( 40 and 100)
 +</code>
 +\\
 +위의 요소 중에서 하나를 제거하면 아래와 같이 됩니다.\\
 +<code javascript>
 +let points = new Array(40);
 +document.getElementById("demo").innerHTML = points[0];
 +// Creates an array with 40 undefined elements!!!
 +</code>
 +
 +=====How to Recognize an Array=====
 +일반적인 질문: 변수가 배열인지 어떻게 알 수 있습니까?\\
 +\\
 +문제는 %%JavaScript%% 연산자 ''%%typeof%%''가 "''object''"를 반환한다는 것입니다.\\
 +\\
 +<code javascript>
 +let fruits = ["Banana", "Orange", "Apple", "Mango"];
 +document.getElementById("demo").innerHTML = typeof fruits;  // object
 +</code>
 +\\
 +%%typeof%% 연산자는 %%JavaScript%% 배열이 오브젝트이기 때문에 오브젝트를 반환합니다.\\
 +\\
 +
 +====Solution 1:====
 +이 문제를 해결하기 위해, %%ECMAScript 5%%는 새로운 메서드 ''%%Array.isArray()%%''를 정의합니다.\\
 +\\
 +<code javascript>
 +let fruits = ["Banana", "Orange", "Apple", "Mango"];
 +    document.getElementById("demo").innerHTML = Array.isArray(fruits);  // true
 +</code>
 +\\
 +이 솔루션의 문제점은 %%ECMAScript 5%%가 구번전의 브라우저에서 지원되지 않는다는 것입니다.\\
 +\\
 +
 +====Solution 2:====
 +이 문제를 해결하기 위해, 고유한 ''%%isArray()%%'' 함수를 만들 수 있습니다:\\
 +<code javascript>
 +let fruits = ["Banana", "Orange", "Apple", "Mango"];
 +document.getElementById("demo").innerHTML = isArray(fruits);
 +
 +function isArray(myArray) {
 +return myArray.constructor.toString().indexOf("Array") > -1;
 +} // true
 +</code>
 +\\
 +
 +위의 함수는 인수가 배열이면 항상 true를 반환합니다.\\
 +\\
 +또는 더 정확하게는, 오브젝트 프로토 타입에 %%"Array"%%라는 단어가 포함되어 있으면, true를 반환합니다.\\
 +
 +====Solution 3:====
 +''instanceof'' 연산자는 주어진 생성자에 의해 오브젝트가 생성된 경우 true를 반환합니다.\\
 +\\
 +<code javascript>
 +let fruits = ["Banana", "Orange", "Apple", "Mango"];
 +document.getElementById("demo").innerHTML = fruits instanceof Array;  // true
 +</code>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
/var/services/web/dokuwiki/data/attic/wiki/javascript/javascript_note/js_arrays.1619405326.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki