티스토리 뷰
반응형
자바스크립트에는 배열 형태이지만 배열이 아닌 것들이 꽤 있다. 이 경우 배열로 어떻게 변환할 수 있는지 알아보도록 하자.
arguments를 사용했을 경우, 배열이 아니지만 형태만 배열인 객체를 출력한다. 배열이 아니기 때문에 map() 배열 메서드를 사용하면 아래처럼 오류가 뜬다.
|
1
2
3
4
5
6
7
8
9
10
|
function addTxt () {
let newData = arguments.map((value) => {
return '#' + value;
});
console.log(newData);
// Uncaught TypeError: arguments.map is not a function
}
addTxt(1, 2, 3, 4, 5);
|
cs |
그렇다면 먼저 배열 형식으로 바꾸는 작업을 해야될텐데, 기존에는 for 문으로 돌려서 새 배열에 push 하는 방식을 사용했다. 하지만 ES6부터는 from() 메서드를 사용하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
|
function addTxt () {
let newArray = Array.from(arguments); // arguments로부터 배열 생성
let newData = newArray.map((value) => {
return '#' + value;
});
console.log(newData);
// ['#1', '#2', '#3', '#4', '#5']
}
addTxt(1, 2, 3, 4, 5);
|
cs |
li에서 문자열 'r'이 포함된 노드로 구성되어있는 배열을 출력해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>apple</li> <li>banana</li> <li>orange</li> <li>strawberry</li> </ul> <script> function filterArray() { const list = document.querySelectorAll("li"); // Nodelist const listArray = Array.from(list); // Nodelist를 배열로 변형하기 const newArray = listArray.filter((v) => { return v.innerText.includes("r"); }); console.log(newArray); } filterArray(); </script> </body> </html> | cs |
반응형
'JavaScript' 카테고리의 다른 글
| [Javascript] 배열 중복 제거 Set() / filter() + indexOf() / forEach() + includes() (0) | 2021.10.24 |
|---|---|
| [Javascript] 구조분해 할당(Destructuring) - 클릭 이벤트 객체 전달 (0) | 2021.10.24 |
| [Javascript] forEach(), for in 문, for of 문 특징과 비교 (0) | 2021.10.22 |
| [Javascript] 변수 var과 let 차이, var의 클로저(Closure) 이슈 (0) | 2021.10.22 |
| [Javascript] 공장(팩토리) 함수 / 생성자 함수 / 클래스(class) (0) | 2021.10.20 |