ホームページ > ウェブフロントエンド > jsチュートリアル > jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ

不言
リリース: 2018-08-15 11:56:57
オリジナル
60526 人が閲覧しました

この記事では、js でオブジェクト (5 種類) を走査する方法と配列 (6 種類) を走査する方法をまとめています。必要な方は参考にしていただければ幸いです。ヘルプ。

1. トラバース オブジェクト メソッド

1.for...in
トラバース出力は、オブジェクト自体のプロパティと、プロトタイプ チェーン上の列挙可能なプロパティ (シンボル プロパティを除く)、プロトタイプです。チェーン上の属性の最終出力は、self の列挙可能な属性が最初に走査され、次にプロトタイプ チェーン上の

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {};//在原型链上添加属性
Object.defineProperty(obj, 'country', {
  Enumerable: true //可枚举
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
for (var index in obj) {
  console.log('key=', index, 'value=', obj[index])
}
ログイン後にコピー

が走査されることを示しています。出力結果は次のとおりです。 .keys()

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ オブジェクトを走査します。 返されるのは、オブジェクト自体の列挙可能なプロパティ (シンボル プロパティを除く) を含む配列です。

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.keys(obj).forEach(function(index) {
  console.log(index, obj[index])
});
ログイン後にコピー
出力結果:


3.Objcet.getOwnPropertyNames ()

オブジェクト自身の列挙可能なプロパティを出力します。列挙可能なプロパティと列挙不可能なプロパティの配列。プロトタイプチェーン上のプロパティは出力しませんjsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj).forEach(function(index) {
  console.log(index, obj[index])
});
ログイン後にコピー
出力結果:


4.Reflect.ownKeys()

属性名がシンボルであるか文字列であるか、列挙可能であるかどうかに関係なく、オブジェクト自体のすべてのプロパティを返します。 .keysjsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ アンダースコア プラグインのトラバース メソッドを使用すると、列挙可能な属性

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Reflect.ownKeys(obj).forEach(function(index) {
  console.log(index, obj[index])
});
ログイン後にコピー

の出力結果のみをトラバースできます。

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
console.log(_.keys(obj));
ログイン後にコピー
出力結果:

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ2.map

それに応じて走査された各アイテムを処理し、各関数呼び出しの結果で構成される配列を返すことができます

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
  console.log('value=', value, 'index=', index);
})
ログイン後にコピー
出力結果:

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ3. for ループトラバーサル

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
  console.log(item, index);
})
ログイン後にコピー

出力結果:

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ4.for...in

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i <p> 出力結果:<strong> <em></em></strong><br></p><p> </p><p>5.for...of<img src="https://img.php.cn//upload/image/773/856/429/1534304523832007.png" title="1534304523832007.png" alt="jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ"><span class="img-wrap">(es6) </span>値のみを走査し、添え字を走査することはできませんが、Symbol データ型の属性を走査することはできます。このメソッドは、すべてを走査するための統一されたメソッドとして使用されます。データ構造</p><pre class="brush:php;toolbar:false">eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
  console.log('index:', i, 'value:', arr[i])
}
ログイン後にコピー

出力結果:

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめ6. アンダースコアプラグインを使用します

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
  console.log('value', value)
}
ログイン後にコピー

出力結果:

jsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめJSの違い配列とオブジェクトの走査と、オブジェクト、配列、プロパティを再帰的に走査するメソッドの詳細な説明

js オブジェクトのプロパティの走査 コード

js で配列を走査する 2 つのメソッド

以上がjsでオブジェクト(5種類)を走査する方法と配列(6種類)を走査する方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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