JavaScriptのオブジェクト操作に関する知識を例で解説_基礎知識

配列からオブジェクトへ

var myarr = ['red','blue','yellow','purple']; 
myarr;// ["red","blue","yellow","purple"] 
myarr[0];//"red" 
myarr[3];//"purple' 

誰もが配列に精通しているので、キーは値に対応しており、このキーは配列内ですでにデフォルト設定されています (上記のコードのように、そのキーは 0、1、2、3 であり、値は赤、青、黄、紫）。
この場合、オブジェクトはカスタム キーの配列として理解できます。次のコードを見てください

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

上記のコードから次のことがわかります:
1. オブジェクトの名前は hero です。
2. 配列とは異なり、「[」
の代わりに記号「{」が使用されます。 3. オブジェクトの属性 (品種や職業など) は記号「,」で区切られます
4.キーと値の構文は KEY:VALUE
です。 属性 (つまり、キー) が二重引用符で囲まれているか、一重引用符で囲まれているか、または引用符が付けられていない場合でも、結果は同じであることに注意することも重要です。

var obj={a:1,b:2}; 
var obj={'a':1,'b':2}; 
var obj={"a":1,"b":2}; 

推奨される記述方法は、属性を引用符で囲まないことです。属性名が数字などの特殊な記号であるか、スペースなどが含まれている場合を除きます。

この記事は非常に簡単です。配列を定義するための記号は [] ですが、オブジェクトを定義するための記号は {}
であることに注意してください。
要素、属性、メソッド
配列を学習するとき、配列には要素が含まれていると言えます。オブジェクトについて話すときは、ステートメントを変更できます。

var animal={ 
   name: 'dog', 
   run:function(){ 
    alert("running"); 
  } 
} 

name はプロパティであり、run 自体はこのオブジェクトではメソッドと呼ばれます。

オブジェクトのプロパティへのアクセス
オブジェクトのプロパティにアクセスするには 2 つの方法があります。
Animal['name']
のような配列形式を使用します。 ドットを使用してアクセスします: Animal.name
最初のアクセス方法は、どのような状況にも適しています。ただし、前のセクションで説明した「1name」または「my name」という名前の属性など、属性の名前が無効な場合、ドットを使用してアクセスすることは間違っています。この点に注意してください。

オブジェクトアクセスの例を詳しく見てみましょう

var book = { 
  name:'Javascript Fundation', 
  published:jixie. 
  author:{ 
    firstname:'nicholas', 
    lastname:'xia' 
  } 
}; 

1. author オブジェクト
の firstname 属性を取得します

book.author.firstname //nicholas

2. author オブジェクトの lastname 属性を取得します。
の別の書き方を試してみましょう。

book['author']['lastname'] //xia

混合アクセス方法も使用できます
book.author['lastname'] または book['author'].lastname はすべて有効なメソッドであり、柔軟に使用する必要があります

プロパティが動的である場合、オブジェクトにアクセスする配列メソッドが通常使用されます。

var key ='lastname' 
book.author[key];//xia 

オブジェクトのメソッドを呼び出します

var hero = { 
breed: 'Turtle', 
occupation: 'Ninja', 
say: function() { 
return 'I am ' + hero.occupation; 
} 
} 
hero.say(); 

オブジェクトにアクセスする方法は非常に簡単で、ほんの少しだけで十分ですが、奇妙に見える配列を使用することもできます
hero['say']();
など この書き方は、オブジェクトにアクセスするときにドットを使用することはお勧めしません。

プロパティとメソッドを変更する
JavaScript は動的言語であるため、オブジェクトのプロパティとメソッドはいつでも変更できます。以下の例を参照してください

var hero={}; 

ヒーローは空のオブジェクトです。

typeof hero.breed;//undefined 

ヒーローオブジェクトが品種属性を持たないことを示しています
次に、プロパティとメソッドを追加できます

hero.breed = 'turtle'; 
hero.name = 'Leonardo'; 
hero.sayName = function() {return hero.name;}; 

メソッドの呼び出し

 hero.sayName();//Leonardo

属性の削除

delete hero.name;//true 
hero.sayName();//方法失败 

これ

var hero = { 
  name : 'Rafaelo', 
  sayName : function(){ 
   return this.name;   
 } 
} 
hero.sayName();//Rafaelo 

これの意味はこのオブジェクトの意味です。これに関する複雑な問題については後で説明します。

コンストラクター関数
オブジェクトを作成する別の方法は、コンストラクターを使用することです。例を見てください。

function Hero(){ 
 this.name ='Refaelo'; 
} 
var hero = new Hero();
hero.name;//Refaelo

このメソッドの利点は、オブジェクトの作成時にパラメーターを渡すことができることです

function Hero(name){ 
  this.name = name; 
  this.whoAreYou = function(){ 
    return this.name; 
  } 
} 
 
var hi = new Hero('nicholas'); 
hi.whoAreYou();//nicholas 

新しいオペレーターを捨てないように注意してください。 。 。
グローバルオブジェクト
これまでのいくつかのセクションでは、グローバル変数の使用を避けるようにする必要があると述べました。実際、グローバル変数はグローバルです。オブジェクトにはプロパティがあります。ホスト環境が Web ブラウザの場合、グローバル変数は window です。
var a = 1;
と定義すると これは次のように理解できます:
グローバル変数 a、
window の属性 a として、window.a または window['a']
を呼び出すことができます。 事前定義された関数 parseInt('123 m') を見てみましょう。 window.parseInt('123 m');
と書くことができます。
コンストラクター属性
オブジェクトが作成されると、バックグラウンドのコンストラクターに隠し属性が作成されます。

h2.constructor;//Hero(name)

コンストラクターの属性は関数への参照であるため。 h2 オブジェクトが何から作成されたかは気にせず、h2 に似た新しいオブジェクトを作成することだけを気にする場合は、次の記述を使用します

var h3 = h2.constructor('Nicholas'); 
h3.name ;//Nicholas 

我们来看看如下写法的意思

var o = {}; 
o.constructor;//Object() 
typeof o.constructor;//"functions" 

其实就是隐藏了 new Object() ,更深的层次应用以后几个教程在说明。

instanceof 操作符
用instanceof来判断对象是否是指定的构造函数创建的。

function Hero(){ 
} 
var h = new Hero(); 
var o = {}; 
h instanceof Hero;//true 
h instanceof Object;//false 
o instanceof Object;//true 

要注意的是instanceof 后面的是个引用 不是个函数 如错误写法 h instanceof Hero();//错误

函数返回对象
可以用构造函数来创建个对象，也可以通过普通函数返回对象来创建对象

function factory(name){ 
  return { 
   name:name 
 }; 
} 

用这个方法创建对象

var o = factory('one'); 
o.name

让我们接下来看看比较少见的构造函数返回对象的例子

function C(){ 
 this.a = 1; 
 return {b:2}; 
} 
 
var c2 = new C(); 
typeof c2.a //undefined 
c2.b; // 2 

说明了 并不返回this了 而是返回了对象{b:2}。。这点要注意

传递对象
如果传递一个对象到函数里，那么传递的是个引用。如果改变了这个引用，也就会改变原始的对象。
下面是个对象赋值的例子

var original = {name:'nicholas'}; 
var copy =original; 
copy.name;//'nicholas'; 
copy.name = 'Jason'; 
original.name;// 'Jason'; 

修改了copy的属性name 也就等于修改了original的属性name
对象传参到函数中，也是同样的。

function modify(o){ 
  o.name ='Jason' 
} 
var original={name:'nicholas'}; 
modify(original); 
original.name;//Jason 

对象的比较
两个对象的比较如果是true的话，那么他们就是同一个对象的引用。

var fido ={breed:'dog'}; 
var benji ={breed:'dog'}; 
 
benji===fido; //false; 
benji==fido; //false; 

 
 以上的代码都不是同一引用，所以都是false