[JavaScript ES 6+]ES 6での巡回およびアプレットプロトコル


1.従来とは異なるES 6でリストを巡る


ES 5ではこのように巡回している.
const list = [1, 2, 3];
for (var i = 0; i < list.length; i++) {
    // log(list[i]);
}

const str = 'abc';
for (var i = 0; i < str.length; i++) {
    // log(str[i]);
}
ES 6はこのように宣言的な変更を行った.
for (const a of list) {
    // log(a);
}
for (const a of str) {
    // log(a);
}

2.Array、Set、Mapのアプレットプロトコル

// Array를 통해 알아보기
<script>
    log('Arr -----------');
    const arr = [1, 2, 3];
    let iter1 = arr[Symbol.iterator]();
    for (const a of iter1) log(a);
</script>
// Set을 통해 알아보기
<script>
    log('Set -----------');
    const set = new Set([1, 2, 3]);
    for (const a of set) log(a);
</script>
// Map을 통해 알아보기
<script>
    log('Map -----------');
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
    for (const a of map.keys()) log(a);
    for (const a of map.values()) log(a);
    for (const a of map.entries()) log(a);
    //console.clear();
</script>

アプレット/アプレットプロトコル


  • イテレーション:イテレーションを返す値は[Symbol.iterator]()です.

  • イテレーション:オブジェクト{value,don}の値next()を返します.

  • イテレーション/イテレーションプロトコル:イテレーション...展開演算子などと一緒に作業する規則

  • 3.カスタムイテレーション、イテレーション/イテレーションプロトコルの定義

    // 사용자 정의 이터러블을 통해 알아보기
    <script>
        const iterable = {
            [Symbol.iterator]() {
                let i = 3;
                return {
                    next() {
                        return i == 0 ? {done: true} : {value: i--, done: false};
                        // value : 점점 줄임 3->2->1
                    },
                    [Symbol.iterator]() {
                        // 자기자신또한 이터러블이면서, 계속 리턴하면서
                        // 어디서든 next() 할 수 있도록 하는게 well-formed iterator이다.
                        return this;
                    }
                }
            }
        };
        let iterator = iterable[Symbol.iterator]();
        iterator.next();
        iterator.next();
        // log(iterator.next());
        // log(iterator.next());
        // log(iterator.next());
        for (const a of iterator) log(a);
    
        // const arr2 = [1, 2, 3];
        // let iter2 = arr2[Symbol.iterator]();
        // iter2.next();
        // log(iter2[Symbol.iterator]() == iter2);
        // for (const a of iter2) log(a);
    
        for (const a of document.querySelectorAll('*')) log(a);
        const all = document.querySelectorAll('*');
        let iter3 = all[Symbol.iterator]();
        log(iter3.next());
        log(iter3.next());
        log(iter3.next());
    </script>

    4.展開演算子

    <script>
        const a = [1, 2];
        // a[Symbol.iterator] = null;
        log([...a, ...arr, ...set, ...map.keys()]);
    </script>