차이

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

--- wiki:javascript:javascript_note:js_arrays [2021/04/26 11:47]
emblim98 [Associative Arrays]
+++ wiki:javascript:javascript_note:js_arrays [2023/01/13 18:44] (현재)
@@ 줄 13: / 줄 13: @@
 \\
 <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>
@@ 줄 50: / 줄 48: @@
 공백과 줄 바꿈(line breaks)은 중요하지 않습니다. 선언은 여러 줄에 걸쳐있을 수 있습니다.\\
 <code javascript>
-    let cars = [
+let cars = [
-      "Saab",
+  "Saab",
-      "Volvo",
+  "Volvo",
-      "BMW"
+  "BMW"
-    ];
+];
 </code>
@@ 줄 200: / 줄 198: @@
 ''%%Array.forEach()%%'' 메서드를 사용할 수도 있습니다.\\
 <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>
@@ 줄 226: / 줄 224: @@
 </code>
 \\
 ''length'' 속성을 사용하여 배열에 새로운 요소를 추가할 수도 있습니다.\\
 <code javascript>
@@ 줄 236: / 줄 235: @@
 }
 </code>
+\\
-  **WARNING!**
+**WARNING!**
-  인덱스가 높은 요소를 추가하면 배열에 정의되지 않은(undefined) "구멍(holes)"이 생길 수 있습니다.
+인덱스가 높은 요소를 추가하면 배열에 정의되지 않은(undefined) "구멍(holes)"이 생길 수 있습니다.\\
 \\
@@ 줄 265: / 줄 264: @@
 \\
 <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!!%%**\\
 명명된 인덱스를 사용하는 경우, %%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>
+\\
+다음의 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>

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

사용자 도구

사이트 도구

차이

문서 도구