본문 바로가기

Front End/Javascript

(53)
[JavaScript] 맵(Map)객체의 요소 반복하기 let map = new Map([            ['컴퓨터', 1500],            ['마우스', 250],            ['프린터', 800]        ]);for ~ in아무값도 나오지 않습니다.        // 아무것도 나오지 않음        for( let item in map){            document.write(`${item} `);        }        document.write(``); for ~ of배열로 나타납니다. 0번은 키값이 1번은 값이 나옵니다.        for( let item of map){            document.write(`${item[0]} ===> ${item[1]} `);        }      컴..
[JavaScript] 맵(Map) 객체의 map[key]는 객체 접근입니다. map[key]는 Map을 쓰는 바른 방법이 아닙니다. map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 합니다.  하지만 이 방법은 map을 일반 객체처럼 취급하는것 입니다.  따라서 여러 제약이 생기게 됩니다.map을 사용할 땐 map전용 메서드 set, get 등을 사용해야만 합니다. 객체 선언과 동시에 초기값을 지정 가능합니다.        let map = new Map(            [                ['1', 234],                ['2', 345]            ]        ); 메서드 체이닝도 가능합니다.        let kimc = {name:'김종서'};        let leec = {name:'이순신..
[JavaScript] 맵(Map) 객체의 set(), get() object와 map은 유사해보입니다, 그렇다면 맵은 언제 사용해야 할까요?key값으로 primitive value( (number, object, boolean, NaN, etc) )을 써야할 때는 map을 사용합니다.입력된 순서를  기억해야할 때는 map을 사용합니다.map에서는 쉽게 size를 얻을 수 있다. (Object에서는 Object.keys(obj).length로 접근가능)  primitive value로 키값을 지정하는 예입니다. 객체로도 가능하고 함수로도 가능합니다. 값을 넣을때는 set(키, 값) 메서드를 얻을때는 get(키)메서드를 사용해야 합니다. 값 넣기        let map = new Map();        map.set('1', '문자형 키');   // 문자형 키  ..
[JavaScript] 배열 reduce(), reduceRight() arr.reduce() 와 arr.reduceRight()reduce와 reduceRight는 배열을 기반으로 값 하나를 도출할 때 사용됩니다. let value = arr.reduce(callback(accumulator, currentValue, index, array), initialValue); 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값); Array.reduceRight() : 끝 인덱스 부터 시작한다는 점을 제외하고는 reduce()와 유사하다. reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다: - accumulator - currentValue - c..
[JavaScript] 배열 map() 배열.map(함수)맵을 사용 하면 각 배열 요소에 대해 함수의 내용을 적용하여 새로운 배열 요소를 반환 합니다.변경된 새로운 배열이 만들어 집니다.기존 배열 요소에는 변경사항이 없습니다.        // 각각의 요소 값이 2배인 배열을 만들어 리턴합니다.     ar.map(n=>n*2)}     // 각각의 요소 값이 제곱인 배열을 만들어 리턴합니다.     ar.map(n=>n*n)}        ex11.html 파일을 다음과 같이 만듭니다.12345678910111213141516171819202122232425262728293031323334353637!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewp..
[JavaScript] 배열 sort() 배열.sort()대량의 데이터의 경우 정렬하기는 기본적인 기능입니다. 오름차순과 내림차순 정렬을 합니다.자바스크립트 배열의 sort()메서드는 기본적으로 문자열 정렬을 지원합니다.매개변수로 함수를 전달하면 함수 내용에 따라 정렬이 됩니다.함수는 앞의 값이 클경우 양수를 같을경우 0을 뒤의 값이 클경우  음수를 리턴하도록 구현하면 됩니다.         const zodiac = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(",");        document.write(`띠(${zodiac.length}개) : ${zodiac}`);                // sort() : 배열의 요소를 정렬합니다. 인자로 정렬에 사용될 비교 함수를 줄수 있습니다.         //  ..
[JavaScript] 배열 filter(), reverse(), every(), some() 배열.filter(함수) 매개 변수로 주어진 함수를 이용하여 배열내의 모든 요소를 테스트해서 참인 요소만으로 만들어진 배열을 반환합니다.        let oddArr = ar2.filter(n=>n%2==1);   // 홀수만        let evenArr = ar2.filter(n=>n%2==0); // 짝수만 reverse()배열 요소의 순서가 뒤집힌 배열을 반환합니다.         document.write(`띠(${zodiac.length}개) : ${zodiac.reverse()}`);every() : and 매개 변수로 주어진 함수로 배열내의 모든 요소를 테스트해서 참일 경우 true를 반환합니다.         let ar = [2, 4, 6, 8];        document.w..
[JavaScript] 배열 slice(), splice() slice()배열의 일부분을 잘라서 배열로 반환합니다.  array.slice(start, end)       let ar1 = zodiac.slice(0, 4);       let ar2 = zodiac.slice(4, 8);       let ar3 = zodiac.slice(8);       document.write(`${ar1.length}개 : ${ar1}`);       document.write(`${ar2.length}개 : ${ar2}`);       document.write(`${ar3.length}개 : ${ar3}`); splice()배열에 요소를 변경, 추가 또는 삭제 합니다. 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);       // 삭제 : 5..