ホームページ  >  記事  >  ウェブフロントエンド  >  es6 の新しいトラバーサル方法は何ですか?

es6 の新しいトラバーサル方法は何ですか?

青灯夜游
青灯夜游オリジナル
2022-03-23 16:38:232063ブラウズ

新しいトラバーサル メソッドは次のとおりです: 1. findIndex() (配列をトラバースして一致する要素を見つけることができます)、2. find() (配列をトラバースして最初に一致した要素を見つけることができます)、3. エントリ( )、キーと値のペアを走査します。 4. key()、キー名を走査します。 5. value()、キーと値を走査します。

es6 の新しいトラバーサル方法は何ですか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES5 で一般的に使用される 10 個のトラバーサル メソッド:

1. オリジナルの for ループ ステートメント

2. 組み込みの Array.prototype.forEach 配列オブジェクトメソッド

3、Array.prototype.map 配列オブジェクトの組み込みメソッド

4、Array.prototype.filter 配列オブジェクトの組み込みメソッド

5、Array.prototype .reduce 配列オブジェクトの組み込みメソッド

6、Array.prototype.some 配列オブジェクトの組み込みメソッド

7、Array.prototype.every 配列オブジェクトの組み込みメソッド

8, Array.prototype.indexOf 配列オブジェクトの組み込みメソッド

9, Array.prototype.lastIndexOf 配列オブジェクトの組み込みメソッド

10, for...in ループ ステートメント

es6 new トラバーサル メソッド

findIndex(callback [, thisArg]) は、配列内で一致する要素を検索します

找到一个就返回匹配的元素的下标,没找到就返回-1。
let arr = [1, 2, 3, 4, 5, 6]// 此时我们找大于2的数
let newArr = arr.findIndex(val => {return val > 2})
console.log(newArr) // 2

find(fn(callback [, thisArg])

配列内で一致する要素を検索します。一致する要素が見つかった場合は、一致する要素が返されます。一致する要素が見つからない場合は、未定義が返されます。

注: 次の例は、2 より大きい数値を検索したいため、要件に対して間違った例です。3 の一致が見つかった場合、条件が満たされ、関数は次のようになります。

例:

let arr = [1, 2, 3, 4, 5, 6]
// 此时我们找大于2的数
let newArr = arr.find(val => {
    return val > 2
})
console.log(newArr) // 3

entries()、keys()、values()

ES6 には 3 つの新しいメソッド、entries()、 key() と value() - 配列とオブジェクトを走査します。これらはすべてイテレータ オブジェクトを返します。これは for...of ループを使用して走査できます。唯一の違いは、keys() がキーを走査することです。 names、values() はキー値を走査し、entries() はキーと値のペアを走査します。 .

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

for...of ループを使用しない場合は、トラバーサーの次のメソッドを手動で呼び出すことができます。

let letter = ['a', 'b', 'c'];  
let entries = letter.entries();  
console.log(entries.next().value); // [0, 'a']  
console.log(entries.next().value); // [1, 'b']  
console.log(entries.next().value); // [2, 'c']

[関連する推奨事項: JavaScript ビデオ チュートリアルwebfrontend]

以上がes6 の新しいトラバーサル方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。