차이

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

--- wiki:javascript:javascript_note:filter [2023/01/17 12:34]
emblim98 만듦
+++ wiki:javascript:javascript_note:filter [2023/01/17 13:42] (현재)
emblim98
@@ 줄 4: / 줄 4: @@
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2023-01-17
+  * lastupdate  : 2023-01-17 Tue
 </WRAP>
 <WRAP clear></WRAP>
@@ 줄 28: / 줄 28: @@
 | arr           | 선택, 현재 요소의 배얼                                                     |
 | thisValue     | 선택, Default는 ''**undefined**''\\ ''**this**'' value로 함수에 전달될 값  |
+\\
+===== Example =====
+하기 코드에서 화살표 함수로 변환 과정을 확인\\
+<code javascript>
+const ages = [32, 33, 16, 40];
+const filtered = ages.filter(function(age){return age >= 18;});
+console.log(filtered);                  // [ 32, 33, 40 ]
+console.log(typeof filtered);           // object
+console.log(Array.isArray(filtered));   // true
+const filtered2 = ages.filter((age) => {return age >=18;});
+console.log(filtered2);     // [ 32, 33, 40 ]
+const filtered3 = ages.filter((age) => age >= 18);
+console.log(filtered3);     // [ 32, 33, 40 ]
+const filtered4 = ages.filter(age => age >= 18);
+console.log(filtered4);     // [ 32, 33, 40 ]
+</code>
+\\
+Apps chart.js사용 시 업무 분류별 등록된 업무 프로세스의 개수 구하기\\
+==== Ex1 ====
+<code javascript>
+let devCount = '0';
+let cmmnCount = '0';
+let mntnCount = '0';
+let projCount = '0';
+let cmpyCount = '0';
+for (let k = 0; k < data.checklistVO.length; k++) {
+    if(data.checklistVO[k].checklistCat === '2') {
+        devCount++;
+    }
+    if(data.checklistVO[k].checklistCat === '3') {
+        cmmnCount++;
+    }
+    if(data.checklistVO[k].checklistCat === '4') {
+        mntnCount++;
+    }
+    if(data.checklistVO[k].checklistCat === '5') {
+        projCount++;
+    }
+    if(data.checklistVO[k].checklistCat === '6') {
+        cmpyCount++;
+    }
+}
+</code>
+\\
+==== Ex2 ====
+<code javascript>
+let checklistObj = data.checklistVO;
+let devCount = '0';
+let cmmnCount = '0';
+let mntnCount = '0';
+let projCount = '0';
+let cmpyCount = '0';
+for (let k = 0; k < checklistObj.length; k++) {
+    if(checklistObj[k]['checklistCat'] === '2') {
+        devCount++;
+    }
+    if(checklistObj[k]['checklistCat'] === '3') {
+        cmmnCount++;
+    }
+    if(checklistObj[k]['checklistCat'] === '4') {
+        mntnCount++;
+    }
+    if(checklistObj[k]['checklistCat'] === '5') {
+        projCount++;
+    }
+    if(checklistObj[k]['checklistCat'] === '6') {
+        cmpyCount++;
+    }
+}
+</code>
+\\
+==== Ex3 ====
+<code javascript>
+let checklistObj = data.checklistVO;
+let devCount = '0';
+let cmmnCount = '0';
+let mntnCount = '0';
+let projCount = '0';
+let cmpyCount = '0';
+// checklistObj 배열에서 checklistCat === 2 인 요소들의 배열을 신규 생성해서 해당 배열의 길이 값을 변수 devCount에 대입
+devCount = (checklistObj.filter(item => item['checklistCat'] === '2')).length;
+cmmnCount = (checklistObj.filter(item => item['checklistCat'] === '3')).length;
+mntnCount = (checklistObj.filter(item => item['checklistCat'] === '4')).length;
+projCount = (checklistObj.filter(item => item['checklistCat'] === '5')).length;
+cmpyCount = (checklistObj.filter(item => item['checklistCat'] === '6')).length;
+</code>
@@ 줄 43: / 줄 142: @@
+==== Ref Link ====
+[[https://developer-talk.tistory.com/114|[JavaScript]배열에서 특정 값의 개수]]\\
+[[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter|Array.prototype.filter()]]\\
+[[https://www.w3schools.com/jsref/jsref_filter.asp|JavaScript Array filter()]]

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

사용자 도구

사이트 도구

차이

문서 도구