JavaScript オブジェクト 新しいページはコチラ
提供: yonewiki
(→記事作成用テンプレート) |
(→.keys 関数) |
||
| 2,392行: | 2,392行: | ||
== .keys 関数 == | == .keys 関数 == | ||
*var i = Object.keys(obj); | *var i = Object.keys(obj); | ||
| − | : | + | :上記のようにして、for構造の中で使うinキーワードと同じようにオブジェクトの要素名のすべてを、左辺値に代入します。代入された変数は複数の要素が含まれていれば配列のようなオブジェクトになり、この左辺値の配列変数をinキーワードや配列番号で要素の中身を取り出したりすることができます。ただし、inキーワードで取り出す要素名と、微妙な違いがあり、抽出される要素が異なることに注意が必要です。普通に使っている分には同じと思ってもらっても問題ないですが、複雑なオブジェクトを扱い始めると変化が生じてきます。そのことがわかるサンプルを以下に示します。 |
| + | |||
サンプル | サンプル | ||
<syntaxhighlight lang="javascript" line start="1"> | <syntaxhighlight lang="javascript" line start="1"> | ||
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <TITLE>JavaScript keys</TITLE> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | JavaScript keys<br /> | ||
| + | <SCRIPT Language="JavaScript"> | ||
| + | <!-- | ||
| + | function funcOutputObjectKeys(obj){ | ||
| + | var keys = Object.keys(obj); | ||
| + | var n = 0; | ||
| + | document.write("■Object.keys()による出力<BR />"); | ||
| + | for(var key in keys){ | ||
| + | document.write("key[", n , "] = ", key,", keys[", key, "] = ", keys[key], ", obj[", key, "] = ", obj[keys[key]] , "<BR />"); | ||
| + | n++; | ||
| + | } | ||
| + | n = 0; | ||
| + | document.write("■for(... in ...)による出力<BR />"); | ||
| + | for(var key in obj){ | ||
| + | document.write("obj[", n , "] = ", key,", obj[", key, "] = ", obj[key], "<BR />"); | ||
| + | n++; | ||
| + | } | ||
| + | document.write("<BR />"); | ||
| + | } | ||
| + | var obj1 = { | ||
| + | objectdescriptor_a:100, | ||
| + | objectdescriptor_b:200, | ||
| + | objectdescriptor_c:300, | ||
| + | objectdescriptor_d:400 | ||
| + | }; | ||
| + | funcOutputObjectKeys(obj1); | ||
| + | function obFunc(){ | ||
| + | this.property_a = 100; | ||
| + | this.property_b = 200; | ||
| + | } | ||
| + | obFunc.prototype.prototype_add_property_c = 300; | ||
| + | obFunc.prototype.prototype_add_property_d = 400; | ||
| + | |||
| + | obj2 = new obFunc(); | ||
| + | |||
| + | funcOutputObjectKeys(obj2); | ||
| + | |||
| + | obj3 = Object.create(obj1,{ | ||
| + | create_property_a:{ | ||
| + | value:"create_property_a", | ||
| + | writable:true, | ||
| + | enumerable:true, | ||
| + | configurable:true | ||
| + | }, | ||
| + | create_property_b:{ | ||
| + | value:"create_property_b", | ||
| + | writable:true, | ||
| + | enumerable:true, | ||
| + | configurable:true | ||
| + | }, | ||
| + | create_property_c:{ | ||
| + | value:"create_property_c", | ||
| + | writable:true, | ||
| + | enumerable:true, | ||
| + | configurable:true | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | funcOutputObjectKeys(obj3); | ||
| + | |||
| + | --> | ||
| + | </SCRIPT> | ||
| + | </BODY> | ||
| + | </HTML> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
[[Media:JavaScript Object keys.html|実行結果サンプル]] | [[Media:JavaScript Object keys.html|実行結果サンプル]] | ||
| + | |||
| + | Object.createで生成されたオブジェクトは、enumerableが省略されている場合は規定値でfalseになっているため、for(...in...)では列挙されず、Object.keysでは列挙されます。オブジェクトに対してプロトタイプの追加で作成されたpropertyにも違いが発生します。getOwnPropertyNameという関数の項目で記述したようにプロパティ値の取得がぶら下がっているオブジェクトにまで及ぶ抽出方法もありました。適宜使い分けて、オブジェクトの中身を制御する必要があります。 | ||
| + | |||
| + | |||
| + | == オブジェクト応用 == | ||
| + | オブジェクトはここまでで言及した仕組みを用いてより実用的なオブジェクト利用方法が見出されそうなことに気づかれた人もいると思います。自分も活用方法をここでさらに言及する予定ですが、イマイチうまく伝える方法が思いついていません。しばらく時間をあけて追記する予定ですが、活用については、それぞれの人が他のややこしい解説のサイトを見るなりして解決してもらえればと思います。ここで解説した内容を理解していれば、ほかのサイトに記述されている有用な記事を読み解くことは可能だと思います。 | ||
[[JAVA Script#リファレンス]]に戻る。 | [[JAVA Script#リファレンス]]に戻る。 | ||
