ホームページ ウェブフロントエンド jsチュートリアル JavaScript型のオブジェクトの詳細説明 system_javascriptスキル

JavaScript型のオブジェクトの詳細説明 system_javascriptスキル

May 16, 2016 pm 03:21 PM

前の単語

JavaScript ではオブジェクトが重要です。JavaScript のほとんどすべてがオブジェクトであるか、オブジェクトのように機能します。オブジェクトを理解すれば、JavaScript も理解できます。 JavaScript では、参照型はデータと機能を一緒に編成するために使用されるデータ構造であり、クラスとも呼ばれます。参照型はオブジェクトのクラスのプロパティとメソッドを記述するため、オブジェクト定義と呼ばれることもあります

ほとんどの参照型値は Object 型のインスタンスです。さらに、Object は JavaScript で最も一般的に使用される型でもあります。オブジェクト インスタンスには多くの機能はありませんが、アプリケーションでのデータの保存と転送には非常に理想的です

オブジェクトの作成

オブジェクトタイプを作成するには 2 つの方法があります

[1]オブジェクト コンストラクター

var person = new Object();
//如果不给构造函数传递参数可以不加括号 var person = new Object;
person.name = 'bai';
person.age = 29; 
//创建无属性的空对象
var cody1 = new Object();
var cody2 = new Object(undefined);
var cody3 = new Object(null);
console.log(typeof cody1,typeof cody2, typeof cody3);//object object object 
//创建string、number、array、function、boolean、regex
console.log(new Object('foo'));
console.log(new Object(1));
console.log(new Object([]));
console.log(new Object(function(){}));
console.log(new Object(true));
console.log(new Object(/\bbt[a-z]+\b/));
ログイン後にコピー

[注意] Object() コンストラクター自体はオブジェクトであり、コンストラクターは Function コンストラクターを元に作成されたオブジェクトです

[2]オブジェクトリテラルを使用する

JavaScript には、ほとんどのネイティブ オブジェクト値を作成するためのリテラルと呼ばれるショートカットが用意されています。リテラルを使用すると、new 演算子を使用した場合と同じ

が非表示になるだけです

基本的なプロセス

var person = {
name : 'bai',
age : 29,
5 : true
};
ログイン後にコピー

[注意] オブジェクト リテラルでカンマを使用して異なるプロパティを区切りますが、最後のプロパティの後にカンマを追加すると、IE7-

でエラーが発生します。

オブジェクト リテラル メソッドを使用してオブジェクトを定義すると、属性名が自動的に文字列に変換されます

//同上
var person = {
'name' : 'bai',
'age' : 29,
'5' : true
};
ログイン後にコピー

中括弧を空のままにすると、デフォルトのプロパティとメソッドのみを含むオブジェクトを定義できます

//等价于var person = new Object();
var person = {}; 
[tips]使用对象字面量封装多个可选参数
function displayInfo(args){
var output = '';
if(typeof args.name == 'string'){
output += 'name:' + args.name +'\n';
}
if(typeof args.age == 'number'){
output += 'Age:' + args.age + '\n';
}
console.log(output);
};
displayInfo({
name: 'Nicholas',
age: 29
});
displayInfo({
name: 'match'
});
ログイン後にコピー

上記のパラメーター受け渡しモードは、多数のオプションのパラメーターを関数に渡す必要がある状況に最適です。一般に、名前付きパラメータは扱いやすいですが、オプションのパラメータが複数ある場合は柔軟性に欠ける可能性があります。したがって、必須の値には仮パラメータを使用し、オブジェクト リテラルを使用して複数のオプションのパラメータをカプセル化します

オブジェクトの設定

オブジェクトのプロパティにアクセスするには 2 つの方法があります。ドット表記または括弧表記を使用して、オブジェクトのプロパティを取得、設定、または更新できます。

角括弧メソッドの 2 つの利点は、変数を通じて属性にアクセスできることと、属性名が Javascript の無効な識別子である可能性があることです

[注] 変数に漢字を含めることができます。漢字は文字に相当し、英語の文字と同じように扱われるため、person.white または person['白'] のように書くことができます。

var myObject = {
123:'zero',
class:'foo'
};
console.log(myObject['123'],myObject['class']);//'zero' 'foo'
console.log(myObject.123);//报错
ログイン後にコピー

角括弧内の値が非文字列型の場合は、String() を使用して暗黙的に文字列に変換されてから出力され、文字列型の場合は引用符がある場合は元の値が出力されます。そうでない場合は、変数として認識されます。変数が定義されていない場合は、エラーが報告されます。

person[0] = 1; //[]中的数字不会报错,而是自动转换成字符串
person[a] = 1; //[]中符合变量命名规则的元素会被当成变量,变量未被定义,而报错
person[''] = 2; //[]中的空字符串不会报错,是实际存在的且可以调用,但不会在控制台右侧的集合中显示
person[undefined 或 null 或 true 或 false] = 4;// 不会报错,而是自动转换成字符串
person['白'] = 6; // 不会报错 
ログイン後にコピー

オブジェクトを削除

delete 演算子を使用すると、オブジェクトから属性を完全に削除できます。削除は、オブジェクトからプロパティを削除する唯一の方法です。プロパティを未定義または null に設定すると、オブジェクトからプロパティを削除せずにプロパティの値のみを変更できます。 delete はオブジェクトの下のデータのみを削除でき、他の 5 つの基本タイプの値は削除できません

[注] 削除しても、プロトタイプ チェーンにあるプロパティは削除されません

var foo = {bar: 'bar'};
delete foo.bar;
console.log('bar' in foo);//false 
var a = 123;
delete a;
console.log(a);//123
ログイン後にコピー

変数 a をグローバル状態で宣言すると、window オブジェクトの下のデータ a と同等になります。 window.a または a と window の値を介して a に値を代入できます。 a と a は常に等しいですが、削除することはできません。

var a;
a = 10;
console.log(a,window.a);//10 10
window.a = 20;
console.log(a,window.a);//20 20
delete a ;
console.log(a,window.a);//20 20
delete window.a;
console.log(a,window.a);//20 20
ログイン後にコピー
window.b を使用して値を宣言して割り当てる場合 (b は window オブジェクトの下で宣言するのと同じです)、それを削除できます。削除後は delete b と delete window.b を使用しても同じ効果があります。 console.log(b) は変数が存在しないことを示すプロンプトを表示し、console.log(window.b) は未定義をプロンプトします

window.b = 10;
console.log(b,window.b);//10 10
delete b;
console.log(b);//报错
console.log(window.b);//undefined 
window.b = 10;
console.log(b,window.b);//10 10
delete window.b;
console.log(b);//报错
console.log(window.b);//undefined 
ログイン後にコピー

オブジェクトのネスト

オブジェクトはネストできますが、値はレイヤーごとに取得する必要があります

var student = {
name : {
chinese : 1,
englisth : 2
},
sex : 1,
age : 26
}
ログイン後にコピー
[注意] 値は、student.name.chinese のようにレイヤーごとにのみ取得でき、name と同じレベルに chinese という要素も存在する可能性があるため、student.chinese を直接使用することはできません。 🎜>

实例方法

  constructor:保存着用于创建当前对象的函数
  hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,propertyName必须以字符串形式指定

  isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型

  propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。其中,propertyName必须以字符串形式指定

  toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应

  toString():返回对象的字符串表示

  valueOf():返回对象的字符串、数值或布尔值表示,通常与toString()方法的返回值相同

var myObject = {
mark: true
};
console.log(myObject.constructor);//function Object(){}
console.log(myObject.hasOwnProperty('mark'));//true
console.log(Object.prototype.isPrototypeOf(myObject));//true
console.log(myObject.propertyIsEnumerable('mark'));//true
console.log(myObject.toLocaleString());//[object Object]
console.log(myObject.toString());//[object Object]
console.log(typeof myObject.valueOf(),myObject.valueOf());// object Object{mark:true}
ログイン後にコピー

小结:

Object类型

  对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象。

var o = new Object(); 
ログイン後にコピー

  Object的每个实例都具有下列属性和方法: 

  ● constructor——保存着用于创建当前对象的函数
   ● hasOwnProperty(propertyName)——用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))
   ● isPrototypeOf(object)——用于检查传入的对象是否是另一个对象的原型
   ● propertyIsEnumerable(propertyName)——用于检查给定的属性是否能够使用for-in语句来枚举 
  ● toString()——返回对象的字符串表示
   ● valueOf()——返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

PowerPointはJavaScriptを実行できますか? PowerPointはJavaScriptを実行できますか? Apr 01, 2025 pm 05:17 PM

JavaScriptはPowerPointで実行でき、外部JavaScriptファイルを呼び出したり、VBAを介してHTMLファイルを埋め込んだりすることで実装できます。 1. VBAを使用してJavaScriptファイルを呼び出すには、マクロを有効にし、VBAプログラミングの知識を持つ必要があります。 2。JavaScriptを含むHTMLファイルを埋め込みます。これは、シンプルで使いやすいが、セキュリティ制限の対象となります。利点には、拡張機能と柔軟性が含まれますが、欠点にはセキュリティ、互換性、複雑さが含まれます。実際には、セキュリティ、互換性、パフォーマンス、ユーザーエクスペリエンスに注意を払う必要があります。

See all articles