배열(Array) & 유사배열(Array-like) , Array.from & Object.entries

ㆍArray.from(유사배열) 유사배열 → 배열로 변환하여 리턴

ㆍObject.entries(유사배열) 유사배열 → 배열(key 를 가지는 2차원)로 변환하여 리턴

ㆍ배열

let tmp = [ ‘bmw’ , ‘audi’ , ‘benz’ , ‘hyundai’]

ㆍ유사배열 : 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미합니다.

let tmp = { 0:’bmw’ , 1:’auid’ , 2:’benz’ , 3:’HYUNDAI’ , length : 4}

– 반드시 key 를 ‘숫자’로 포함해야함

– 반드시 length 를 포함해야함

※ 유사배열 Array.from 으로 배열변환

let tmp = { 0:’bmw’ , 1:’auid’ , 2:’benz’ , 3:’HYUNDAI’ , length:4 } // 유사배열은 length 속성이 반드시 있어야함

let tmpArray = Array.from(tmp)

console.log(tmpArray ) // 정상적으로 반영됨
———–출력————–

0: “bmw”
1: “auid”
2: “benz”
3: “HYUNDAI”
length: 4

→ key 가 숫자가 아닌경우

let tmp = { ‘a’:’bmw’ , ‘b’:’auid’ , ‘c’:’benz’ , ‘d’:’HYUNDAI’ , length:4} // key 가 숫자가 아니라서 안됨!!!

※ 유사배열 Object.entries 으로 배열변환
→ key(숫자) 값이 있는경우 그대로 활용, 없는경우 key index 생성

let tmp = { 0:’bmw’ , 1:’auid’ , 2:’benz’ , 3:’HYUNDAI’, length:4 } // key 값이 있는경우 키를 그대로 활용

let tmpArray = Object.entries(tmp)

let tmp2 = [ ‘bmw’ , ‘auid’ , ‘benz’ , ‘HYUNDAI’ ] // key 값이 없는 경우 key(숫자) 값 생성

let tmpArray2 = Object.entries(tmp2)

console.log(Array.isArray(tmp2)) // 배열확인 True

console.log(tmpArray ) // 정상적으로 반영됨

[ [‘0’, ‘bmw’] , [‘1’, ‘auid’] , [‘2’, ‘benz’] , [‘3’, ‘HYUNDAI’] , [‘length’, 4] ]

———–출력————–
(key(숫자)가 있느 경우나 없는경우나 결과는 같음)

0: (2) [‘0’, ‘bmw’]
1: (2) [‘1’, ‘auid’]
2: (2) [‘2’, ‘benz’]
3: (2) [‘3’, ‘HYUNDAI’]
4: (2) [‘length’, 4]
length: 5

// 키가 문자인경우

let inputList = { ‘a’:’bmw’ , ‘b’:’auid’ , ‘c’:’benz’ , ‘d’:’HYUNDAI’}
———–출력————–
(key가 숫자가 아닌경우 그대로 문자로 사용)

0: (2) [‘a’, ‘bmw’]
1: (2) [‘b’, ‘auid’]
2: (2) [‘c’, ‘benz’]
3: (2) [‘d’, ‘HYUNDAI’]
4: (2) [‘length’, 4]

let selList = document.getElementsByClassName(“_selClass”);

→ HTMLCollection(3) [ input#id1._selclass , input#id2._selclass , input#id3._selclass ]

// _selClass 클래스 이름을 갖는 객체들의 유사배열(열거형)

// selList 배열형식을 가지고 있는 유사배열(array-like) 이다
// forEach 나 map 사용불가 (Array.from 또는 Object.entries 로 변환해야함)
// 증거 1) console.log(Array.isArray(selList) – false 나옴
// 증거 2) console.log(selList); // length 가 존재함

// 증거 3) for(var i in selList) { console.log(i) } – 속성출력 for ~ in 사용시, 배열요소외에, 속성이보임(length)

selList.forEach( (x) =>{ }) // forEach , map 사용불가 (배열만 사용가능)

console.log(Array.isArray(selList)) // 배열인지 확인 False

※ Array.from 열거형 → 배열로 변환

let arrObjList = Array.from(selList)

console.log(Array.isArray(arrObjList )) // 배열확인 True forEach 사용가능

※ Object.entries 열거형/유사배열(객체) → 배열로 변환

let arrObjList = Object.entries(selList)

console.log(Array.isArray(arrObjList )) // 배열확인 True forEach 사용가능

Array.from(btnTelDelList).forEach(e =>{

e.addEventListener(“click”,function()

{

var idxforDel = e.getAttribute(‘data-idx’);

var selid = e.getAttribute(‘data-select-id’);

if(idxforDel == “”)

alert(“데이터를 선택해주세요”)

else

{

document.getElementById(“ifrStatus”).src= goUrl;

}

})

});

일	월	화	수	목	금	토
	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	29	30

배열(Array) & 유사배열(Array-like) , Array.from & Object.entries

Published by pluginn

답글 남기기 응답 취소

Our Visitor