for ... of 時に直接代入以外のアプローチによる 配列操作について

JavaScript には 参照変数 / 参照渡し はありませんが クロージャがありますので 変数への代入を反映することができます。

例えば 配列を for...of 中に 代入による対象の上書きをしたいとします。

その場合はどうしたらいいのでしょうか？

問 for ... of 上で 各要素に 1 を足した値を設定してください

const array = [1,2,3,4,5];
console.log('before: %o', [...array]);
for(const a of array) {
   // TODO
}
console.log('after: %o', [...array]);

答1

array.values()が使われていたのを entries()にして key と value を取り出して 操作 するなら次の様になります。

const array = [1,2,3,4,5];
console.log('before: %o', [...array]);
foreach(const [key, value] of array.entries()) {
   array[key] = value + 1;
}
console.log('after: %o', [...array]);

ただ、これは少々煩雑です。 元の array と key による操作を行う必要があります。

アイディア

今回のアイディアはジェネレータ構文を用いた次のアプローチを提案します。

答2

Vue の ref の様に プロパティ getter / settter アプローチなら次の様な感じでしょうか………？

const array = [1,2,3,4,5];
console.log('before: %o', [...array]);
for(const ref of iterator(array)) {
   ref.value = ref.value + 1;
}
console.log('after: %o', [...array]);
function* iterator(array) {
    for(const [key, value] of array.entries()) {
        const entry = Object.create(null);
        Reflect.defineProperty(entry, "value", {
            get: () => array[key],
            set: (value) => array[key] = value,
        });
        yield entry;
    }
}

答3

React の useState の様に 値と その setter を提供するアプローチなら次の様に書くことができます。

const array = [1,2,3,4,5];
console.log('before: %o', [...array]);
for(const [state, setState] of iterator(array)) {
    setState(state + 1);
}
console.log('after: %o', [...array]);
function* iterator(array) {
    for(const [key, value] of array.entries()) {
        const setter = (value) => array[key] = value;
        yield [value, setter];
    }
}

以上。