JavaScript

new Set()-자바스크립

CD2Y 2022. 6. 28.
반응형

See the Pen new Set() by nilgi (@nilgi) on CodePen.

 

set는 고유 값의 모음이다. 값은 set에서 한 번만 발생한다.
    - new Set() // 새로운 set 만들기
    - add() // set에 요소 추가
    - delete() // 요소 제거
    - has() // set 값 true를 반환
    - forEach() // 각 요소 콜백
    - values() // 값이 있는 반복자 반환
    - size // 세트 요소 수 반환

<p id="set1"></p>
<script type="text/javascript">
    const hw1 = new Set(["m", "a", "p", "l", "e"]);

    document.getElementById("set1").innerHTML = hw1.size;
</script>



add()
<p id="sa1"></p>
<script type="text/javascript">
    const sa1_text = new Set();

    sa1_text.add("o");
    sa1_text.add("n");
    sa1_text.add("e");

    document.getElementById("sa1").innerHTML = sa1_text.size;
</script>

 



<p id="sa2"></p>
<script type="text/javascript">
    const sa2_text = new Set();

    const t = "t";
    const w = "w";
    const o = "o";

    sa2_text.add(t);
    sa2_text.add(w);
    sa2_text.add(o);

    document.getElementById("sa2").innerHTML = sa2_text.size;
</script>



add() // 동일 요소는 첫 번째 요소만 인정
<p id="sa3"></p>
<script type="text/javascript">
    const sa3_text = new Set();

    sa3_text.add("g");
    sa3_text.add("o");
    sa3_text.add("o");
    sa3_text.add("d");

    document.getElementById("sa3").innerHTML = sa3_text.size;
</script>



forEach()
<p id="fe1"></p>
<script type="text/javascript">
    const fe1_text = new Set (["q", "w", "e"]);

    let text = "";
    fe1_text.forEach (function (value) {
        text += value + "<br/>";
    })

    document.getElementById("fe1").innerHTML = text;
</script>



values()
<p id="vs1"></p>
<script type="text/javascript">
    const vs1_text = new Set(["h", "j", "k"]);

    let text3 = "";
    for (const n of vs1_text.values()) {
        text3 += n + "<br/>";
    }

    document.getElementById("vs1").innerHTML = text3;
</script>

 

반응형