ListView: slice()

対象の ListView から指定の範囲のコンテンツを与える反復可能イテレータ（IterableIterator）を取得します。

構文

listView.slice(startIndex, endIndex) => IterableIterator<ViewLogic>

引数

  • startIndex: number

    取得する範囲の開始位置を示す整数です。startIndex の位置の要素は返値の配列に含まれます。startIndex が負の場合、コンテンツの末尾を 1 番目として末尾から -startIndex 番目を開始位置とします。startIndex が NaN であるか -startIndex がコンテンツの個数を超える場合、代わりに 0 が使用されます。

  • endIndex : number

    取得する範囲の終端位置を示す整数です。endIndex の位置の要素は返値の配列に含まれません。endIndex が負の場合、コンテンツの末尾を 1 番目として末尾から -endIndex 番目を開始位置とします。startIndex が NaN であるか -startIndex がコンテンツの個数を超える場合、代わりに 0 が使用されます。

返値: IterableIterator<ViewLogic>

startIndex から endIndex までの範囲のコンテンツを返す反復可能イテレータです。

反復の過程で指定した範囲のコンテンツが存在しなくなった場合、undefined が返ります。

例

const listVl = new class ListVl extends ViewLogic {
    constructor() {
        super();
        this.loadContainer({
            text: `<alier-list-view id="list"></alier-list-view>`,
            id: "list",
        });
        this.relateElements(this.collectElements(this.container));
    }
};

const archetype = new class ListItemVl extends ViewLogic {
    constructor() {
        super();
        this.loadContainer({
            text: `
                <head><style>
                .row {
                    --border-width: 2px;
                    display: grid;
                    grid-template: auto 1fr / repeat(2, 1fr);
                }
                .row:nth-child(3n) {
                    background-color: lightblue;
                }
                .row:nth-child(5n) {
                    border: var(--border-width) solid orange;
                }
                :not(.row:nth-child(5n)) {
                    padding: var(--border-width);
                }
                </style></head>
                <body>
                <div id="hello" class="row">
                <span
                    id="word"
                    data-ui-component
                    data-primary="textContent"
                ></span>
                <span
                    id="length"
                    data-ui-component
                    data-primary="textContent"
                ></span>
                </div>
                </body>
                `,
            id: "hello",
        });
        this.relateElements(this.collectElements(this.container));
    }
};

const words = [
    "Antelope", "Bear"   , "Cat"       , "Dog"    , "Elephant",
    "Falcon"  , "Giraffe", "Hawk"      , "Iguana" , "Jaguar"  ,
    "Kangaroo", "Lion"   , "Moose"     , "Narwhal", "Ostrich" ,
    "Penguin" , "Quail"  , "Rhinoceros", "Sloth"  , "Tiger"   ,
    "Urchin"  , "Vulture", "Wolf"      , "Xerus"  , "Yak"     ,
    "Zebra"
];

const prev_vl = Alier.View.attach(listVl);

//  listVl.container に archetype のコンストラクタ（ListItemVl）をテンプレートとして設定する
listVl.container.attach(archetype);

//  listVl に words の要素数だけ要素を追加する
listVl.container.splice(0, 0, words.length);

//  words の値を listVl の各要素に設定する
for (const item of listVl.container) {
    const word = words.splice(0, 1)[0];
    item.reflectValues({ word, length: word.length });
}

//  先頭から 6 個目から 15 個目まで（添え字が 5 から 14 の範囲）のコンテンツ 10 個を列挙する
for (const item of listVl.container.slice(5, 15)) {
    console.log(JSON.stringify(item.curateValues()));
}

解説

対象の ListView から指定の範囲のコンテンツを与える反復可能イテレータ（IterableIterator）を取得します。

note

Array クラスが提供する slice() 関数と異なり、この関数は配列でなく単なる反復可能オブジェクトを返します。従って、filter() や map() のような Array クラスで実装されている関数は提供されません。同等の処理を行うには for-of ループを利用してください。