ホームページ > ウェブフロントエンド > フロントエンドQ&A > es6 でオブジェクトと配列を走査するためのメソッドは何ですか

es6 でオブジェクトと配列を走査するためのメソッドは何ですか

青灯夜游
リリース: 2023-01-29 19:00:00
オリジナル
1685 人が閲覧しました

オブジェクトを走査するためのメソッド: 1. オブジェクト自身および継承された列挙可能なプロパティをループできる「for in」ステートメント; 2. Object.keys() および Object.values(); 3. Object .getOwnPropertyNames ()。配列を走査するためのメソッド: 1. forEach()、配列内の各要素の関数を呼び出すことができます; 2. map()、配列の各要素に対して指定されたコールバック関数を呼び出します; 3. filter(); 4 . 何か()など

es6 でオブジェクトと配列を走査するためのメソッドは何ですか

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

私たちは仕事で配列またはオブジェクトのトラバーサルをよく使用します。for の問題点の 1 つは、追加の変数が定義されることです。for ループが多すぎると、変数が競合する傾向があります。 ES6 では新しいトラバーサル メソッドが提供されています。

オブジェクトのトラバース

1, for (let k in obj) {}# を見てみましょう。

##オブジェクト自身および継承された列挙可能なプロパティをループします

Properties (オブジェクト自身および継承された列挙可能なプロパティをループします (シンボル プロパティを除く)

let obj = {'0':'a','1':'b','2':'c'}
for (let k in obj) {
	console.log(k+':'+obj[k])
}
//0:a
//1:b
//2:c
ログイン後にコピー

2, Object.keys(obj)|| Object.values(obj)

トラバーサル オブジェクト属性または属性値を返します。

array (

  • Object.keys() メソッドは、指定されたオブジェクトの自己列挙可能なプロパティ、配列内の属性名の順序で構成される配列を返します。

  • Object.values() メソッドは、指定されたオブジェクト自体の列挙可能なすべてのプロパティを返します 値の配列を同じ順序で返しますfor...in ループを使用する場合と同様 (違いは、for-in ループがプロトタイプ チェーン内のプロパティを列挙することです)。

  • let obj = {'0':'a','1':'b','2':'c'}
    console.log(Object.keys(obj))
    //["0","1","2"]
    console.log(Object.values(obj))
    //["a","b","c"]
    ログイン後にコピー

3. Object .getOwnPropertyNames(obj)

オブジェクトのプロパティまたはプロパティ値をトラバースする配列を返します (シンボル プロパティ、自己プロパティを除く - プロトタイプのプロパティを除く) .

let obj = {'0':'a','1':'b','2':'c'};

Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});
// 0 a
// 1 b
// 2 c
ログイン後にコピー

配列を走査します

1、arr.forEach#パラメータは匿名関数であることに注意してください。最初のパラメータは配列メンバーの値で、2 番目のパラメータはそのインデックスです。 {}

var name = ['张三', '李四', '王五'];
['张三', '李四', '王五'].forEach((v,l,k) => {
	console.log(v);
	console.log(l);
	console.log(k);
})
ログイン後にコピー

k は、各配列メンバーのインデックス値です。es6 でオブジェクトと配列を走査するためのメソッドは何ですか

3、for(let k of arr){ }

k は各配列メンバーの値です。

は配列をサポートするだけでなく、ほとんどの配列のようなオブジェクト (疑似配列) もサポートします。 DOM NodeList オブジェクトなど。 は文字列トラバーサルもサポートしており、文字列をトラバーサル用の一連の Unicode 文字として扱います。

let arr = ['a','b','c','d']
for(let k in arr){
	console.log(k,arr[k])
}
// 0 a
// 1 b
// 2 c
// 3 d
ログイン後にコピー
4.map():

map はマッピング、つまり 1 対 1 の対応を表します。トラバーサルが完了すると、新しい配列が返されますが、元の配列は変更されません。

5. filter()

フィルタリング、つまりフィルタという意味なので使い方

let arr = ['a','b','c','d']
for(let k of arr){
	console.log(k)
}
//  a
//  b
//  c
//  d
ログイン後にコピー

6.reduce()

左から右にトラバースし、通常加算、減算、乗算、除算に使用されます

var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item,key,ary) {
     return item.toUpperCase();
});
console.log(a1);// ['a','b','c'];
console.log(a2); //['A','B','C'];
ログイン後にコピー

7,すべて (および)

8、一部 (または)

var a1 = [1, 2, 3];
var total = a1.reduce(function(first, second) { 
     return first + second; 
},0);
console.log(total) // Prints 6

//注意 1、就是 return first+second 其实相当于  return first+=second; 也就是说每次的first 是上一次的和
    //2、就是function{}后面的参数,如果 有值 那么第一次加载的时候 first  = 0; second = 1;
    如果没有值 , first = 1 , second = 2;如果后面的参数是个字符串,那么就是会是字符串拼接、
ログイン後にコピー

[関連する推奨事項: JavaScript ビデオ チュートリアルウェブフロントエンド]

以上がes6 でオブジェクトと配列を走査するためのメソッドは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート