TypeScript…の/インデックス/キー付き?


146

ここで説明するように、 TypeScriptはforeachループを導入します。

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item); // 9,2,5
}

しかし、インデックス/キーはありませんか?私は次のようなものを期待します:

for (var item, key of someArray) { ... }

回答:


274

.forEach すでにこの能力を持っています:

const someArray = [9, 2, 5];
someArray.forEach((value, index) => {
    console.log(index); // 0, 1, 2
    console.log(value); // 9, 2, 5
});

しかし、の機能がfor...of必要な場合はmap、インデックスと値への配列を使用できます。

for (const { index, value } of someArray.map((value, index) => ({ index, value }))) {
    console.log(index); // 0, 1, 2
    console.log(value); // 9, 2, 5
}

これは少し長いので、再利用可能な関数に入れると役立つ場合があります。

function toEntries<T>(a: T[]) {
    return a.map((value, index) => [index, value] as const);
}

for (const [index, value] of toEntries(someArray)) {
    // ..etc..
}

反復可能なバージョン

これは、--downlevelIterationコンパイラオプションを使用してコンパイルする場合、ES3またはES5をターゲットとするときに機能します。

function* toEntries<T>(values: T[] | IterableIterator<T>) {
    let index = 0;
    for (const value of values) {
        yield [index, value] as const;
        index++;
    }
}

Array.prototype.entries()-ES6 +

ES6 +環境をターゲットにできる場合は.entries()Arnavionの回答に概説されている方法を使用できます。


ただし、TypeScriptは「for ... of」を、インデックスvar _iを持つ単純な「for」にコンパイルします。したがって、TypeScript開発者がこの_iを使用するのは簡単です。遊び場の例を参照してください:bit.ly/1R9SfBR
Mick

2
@ミックそれはターゲットに依存します。ES6にトランスパイルする場合、それは行われません。トランスパイル時の追加コードの理由は、ES6コードを過去のバージョンで機能させるためだけです。
David Sherret、2016年

3
どうすれば休憩できますか。そのために?
ジョアン・シルバ

また、良い答えです。stackoverflow.com
Christopher Grigg

@JoãoSilvaを使用してArray.some()、停止する反復でfalseを返すことができます。それはほど明確またはきれいbreakではありませんが、それは仕事を成し遂げるでしょう。個人的には好きではありません。おそらく他の方法でイテレーションを
書き直し


35

救助への「古い学校のJavaScript」(関数型プログラミングに慣れていない/愛している人のために)

for (let i = 0; i < someArray.length ; i++) {
  let item = someArray[i];
}

2
私は実際にはこの答えが一番好きです。各要素のインデックスを生成するためだけに追加のメソッドを使用する必要はありません。
bluegrounds

youuu veryyyy muuuchhありがとう!私たちはこれを知りませんでした:)
TSR

14

コレクションを処理するときに、for..in TypeScript演算子を使用してインデックスにアクセスできます。

var test = [7,8,9];
for (var i in test) {
   console.log(i + ': ' + test[i]);
} 

出力:

 0: 7
 1: 8
 2: 9

デモを見る


「i」は、for..inループのある整数ではない文字列であることに注意してください。「i」を使用して算術演算を実行すると、文字列が連結されます。iが0 =と(i + 1)が例えば"01"に等しいであろう
ステファン

for..inまた、オブジェクトで宣言されたすべての関数も含まれているため、予想以上の結果が得られます。例:for (var prop in window.document) { console.log(prop); }
Ken Lyon

5

または別の古い学校の解決策:

var someArray = [9, 2, 5];
let i = 0;
for (var item of someArray) {
    console.log(item); // 9,2,5
    i++;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.