JavaScript
[Javascript] from() 메서드 사용해 배열로 만들기
fnow
2021. 10. 24. 15:32
반응형
자바스크립트에는 배열 형태이지만 배열이 아닌 것들이 꽤 있다. 이 경우 배열로 어떻게 변환할 수 있는지 알아보도록 하자.
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 |
반응형