Kuasai objek JavaScript dalam satu artikel

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan objek, termasuk berorientasikan objek, operasi objek, penamaan atribut, dll. Mari kita pelajari tentangnya bersama-sama Lihat, harap membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

JavaScript objek

, termasuk tujuh jenis data primitif (JavaScript, Number, BigInt, String, Boolean, null dan undefined) dan jenis kompleks symbol (iaitu jenis objek). object

Berbanding dengan jenis data primitif,

dipanggil jenis kompleks kerana jenis primitif hanya boleh mewakili satu jenis data, seperti object mewakili nombor, Number mewakili rentetan, dsb. Dan String boleh mengandungi semua jenis data primitif dalam bentuk object pasangan nilai kunci .

Sebagai contoh, kita boleh menggunakan jenis

untuk mewakili symbol objek, jenis ID untuk mewakili nama objek dan String untuk mewakili jantina objek, dsb. Setiap jenis data dalam objek dipanggil atribut Boolean objek secara teorinya boleh mempunyai atribut yang tidak terkira banyaknya, dan atribut ini dicipta dalam sepasang kurungan kerinting . {...}

Berorientasikan objek bukan sahaja ciri bahasa , tetapi sebenarnya dalam semua bahasa berorientasikan objek, seperti JavaScript, C , Java, Python Ini semua adalah konsep yang sangat penting. Jika anda ingin belajar C# dengan baik, anda mesti mahir atau pun mahir dalam ciri-ciri objek, kerana objek itu menembusi semua aspek JavaScript. JavaScript

Berorientasikan objek VS berorientasikan proses

Berorientasikan objek ialah idea pengaturcaraan, bukan teknologi baharu. Sebelum berorientasikan objek dilahirkan, pengaturcara mengatur sejumlah besar kod dengan pemikiran berorientasikan proses.

Apakah itu berorientasikan objek? Soalan ini sering ditanya di sekolah dan temuduga. Kita boleh memahami jawapannya dengan sangat mendalam:

Semuanya adalah objek Walaupun ini betul-betul betul, ia bukanlah jawapan yang dimahukan oleh penemuduga atau guru.

Berorientasikan objek ialah idea pengaturcaraan, cara menyusun kod, yang relatif kepada

berorientasikan proses. Dalam berorientasikan proses, pengaturcara adalah Tuhan, dan Tuhan mengarahkan dan mengarahkan segala-galanya. Sebagai contoh, kita sering memberi contoh: meletakkan gajah di dalam peti sejuk. Dalam proses menghadap Allah, anda perlu buka pintu peti ais dahulu, kemudian masukkan gajah ke dalam peti ais, dan akhir sekali tutup pintu peti ais. Semua proses dikendalikan oleh Tuhan sahaja.
Dalam berorientasikan objek, peti sejuk dan gajah adalah objek sedia ada, dan peti sejuk akan membuka pintu dengan sendirinya, gajah akan memasuki peti sejuk dengan sendirinya, dan kemudian peti sejuk akan menutup pintu dengan sendirinya. Seluruh proses diselaraskan oleh Allah, tetapi proses khusus melakukan sesuatu diselesaikan oleh subjek itu sendiri, seperti cara membuka pintu peti sejuk, cara memasuki peti sejuk, dll.

Sintaks

Anda tidak perlu menggunakan kata kunci untuk mentakrifkan objek Anda boleh mencipta objek dengan membungkus pasangan nilai kunci secara langsung dalam kurungan kerinting

berikut: {..}

let child = {
    name:'Tom',
    age:8,}

Kod di atas mencipta objek ringkas dan memberikan objek kepada pembolehubah

. Objek child mempunyai dua sifat (dua nilai), satu ialah child dan satu lagi ialah name. age Pasangan nilai kunci yang dipanggil (
) ialah pemetaan mudah antara nama dan nilai. key:value Contohnya,
dalam contoh di atas ialah pasangan nilai kunci, dengan name:'Tom' ialah kunci dan name ialah nilai yang sepadan. Dalam penggunaan sebenar, nilai yang sepadan boleh diperolehi melalui kunci, sama seperti menggunakan nama pembolehubah untuk mendapatkan nilai pembolehubah. "Tom"

Objek kosong

Jika objek tidak mempunyai sebarang atribut, maka objek tersebut adalah objek kosong. Kita boleh mendapatkan objek kosong dengan hanya memberikan

kepada pembolehubah, atau kita boleh menggunakan kaedah lain: {}

let nullObj1 = {};
//创建也给空的对象let nullObj2 = new Object();
//同样创建了一个空对象

Operasi objek

Selepas objek dicipta, ia tidak boleh diubah , semasa proses menggunakan objek, kita boleh menanyakan sifat objek atau menukar objek pada bila-bila masa.

Atribut pertanyaan

Untuk menanyakan nilai atribut objek, anda perlu menggunakan simbol baharu:

dan sintaksnya ialah .. 对象名.变量名

Sebagai contoh mudah:

let child = {
    name:'Tom',
    age:8,};console.log(child.name);console.log(child.age)

Hasil pelaksanaan kod adalah seperti berikut:

Dalam kes di atas, jika kita ingin melihat atribut

dalam pembolehubah child, hanya gunakan name. child.name

增加属性

在一个对象变量创建完成后，我们还可以随时向变量中添加新的属性，方法如下：

let child = {
    name:'Tom',
    age:8,}child.height = 800;//创建了一个新的属性heightconsole.log(child.height);

代码执行结果如下：

向对象变量中添加新的属性，只需要直接使用.属性名，然后直接向新属性赋值即可。

如果我们此时查看变量child的内容，可以发现height属性已经位列其中了：

对象的属性类型可以是任意的，我们可以直接使用child.isBoy=true向对象中添加布尔值，或者使用child.money=null添加一个值为空的属性。

更改属性

JavaScript对象更改属性值也非常简单，直接向变量赋值就可以了，举个简单的小李子：

let child={
    name:'Tom',
    age:8,}child.age=12;console.log(child);

代码执行结果如下：

可以看到，age变量已经从8变成了12。

删除属性

对象删除属性需要使用一个新的关键字delete，使用delet 对象名.属性名删除对象的属性：

let child = {
    name:'Tom',
    age:8,}delete child.age;console.log(child);

代码执行结果如下：

从代码的执行结果可以看到属性age已经被删掉了。

多单词键值

对象的属性名（键）还能够使用空格隔开的多个单词，不过在创建此类属性时需要使用双引号把键名包裹起来。

举个例子：

let child={
    name = 'Tom',
    age:8,
    "favorite cat":'Jerry',}

以上代码就创建了一个键名为"favorite cat"的键值对，但是在访问属性值的时候，如果使用：

child.favorite cat = 'Bob'; //语法错误

这种方式是错误的，引擎会把favorite当作一个键名，并在遇到cat时报错。

访问此类键值，就需要方括号。

方括号

.可以访问普通的属性名，在例如"favorite cat"之类的变量时可以使用[]，举个例子：

let child={
    name:'Tom',
    age:8,
    "favorite cat":'Jerry',}console.log(child['favorite cat']);

代码执行结果如下：

方括号提供了.之外的属性访问方式，我们完全可以通过方括号代替.来操作对象的属性。

例如：

let child = {
    name:'Tom',
    age:8,}child['favorite cat']='Jerry';
    //增加属性child['name']='Bob';
    //修改属性delete child['age'];
    //删除数console.log(child['name']);
    //查看属性

除了常规的属性操作之外，方括号还能通过变量访问对象属性：

let child = {
    name:'Tom',
    age:8,}let prop = 'name';console.log(child[prop]);prop='age';console.log(child[prop]);

通过变量访问属性值的能力为我们提供了非常有用的变量访问方式，例如我们可以在程序中计算出属性的键名，然后再通过键名访问键值。

举个栗子：

let child = {
    prop1:0,
    prop2:1,
    prop3:2,}let prop = 'prop';for(let i=1;i<p>在这里，范围属性值的<code>key</code>是通过计算得到的，这一功能用<code>.</code>是不能实现的。</p><h2 id="计算属性">计算属性</h2><p>在创建对象时，我们还可以通过变量指定对象的键名，此类属性叫做<strong>计算属性</strong>。</p><p>举个例子：</p><pre class="brush:php;toolbar:false">let propName = 'name';let child ={
    [propName]:'Tom',
    age:8,}

代码执行结果如下：

> let propName = 'name';
> let child ={
   [propName]:'Tom',
   age:8,
> }
> undefined
> child
> {name: 'Tom', age: 8}

上例中的[propName]就是一个计算属性，意义也非常简单，就是使用变量propName中存储的值（此处为"name"）作为对象的键名。

以上的代码本质上和下面的代码作用相同：

let propName='name';let child = {
    age:8,}child[propName]='Tom';

方括号中还可以使用复杂的表达式：

let child = {['prop' + 2 * 3]:'Tom',}

代码执行结果如下：

> let child = {
    ['prop'+2*3]:'Tom',
  } child<h2 id="属性简写">属性简写</h2><p>在实际应用中，或者匿名对象中，我们常常会使用和变量同名的属性，举个例子：</p><pre class="brush:php;toolbar:false">let name = 'Tom';let age = 8;let child = {
    name:name,  //属性名和变量名一样，都是name
    age:age,};

这种情况下，我们就可以简写对象属性，如下：

let name = 'Tom';let age = 8;let child = {
    name, // 等同于name:name;
    age,}

代码的执行结果：

> let name = 'Tom';
  let age = 8;
  let child = {
        name,
        age,
  } child<h2 id="属性命名">属性命名</h2><p>和变量命名不同，我们几乎可以使用任何值作为属性的名称，包括关键字和数字：</p><h3 id="关键字作为变量名">关键字作为变量名</h3><p>虽然听起来不可思议，实际上，所有的关键字都可以作为对象的属性名：</p><pre class="brush:php;toolbar:false">let obj = {
    for:0,
    while:1,
    function:2,
    alert:3,}

代码执行结果：

> let obj = {
      for:0,
      while:1,
      function:2,
      alert:3,
  } obj<h3 id="数字作为关键字">数字作为关键字</h3><p>数字也可以作为关键字的名称，如下：</p><pre class="brush:php;toolbar:false">let obj = {
    0:'Number',//隐式转换为"0"
    1:'Number',}console.log(obj['0']);

数字作为属性名称时，会被隐式转换为字符串，在访问属性时，不能使用.，必须使用方括号代替。

属性名称中的陷阱

在命名中，有一个小陷阱，我们不能使用__proto__作为属性的名称，这个属性是对象的一个特殊，后继会特别介绍。

举个例子：

let obj = {};obj.__proto__ = 1;console.log(obj.__proto__);

in 操作符

JavaScript有一个需要注意的特性，即使访问一个不存的属性时也不会报错，仅仅是返回undefined。
那我们如何知道，属性是否存在于对象之中呢？

最简单的方式是使用if语句：

let obj = {};if(obj.someProp === undefined){
    ...}

这么做在大部分情况下是没有问题的，但是当属性名称的值就是undefined本身时，就会出现错误：

let obj = {
    prop : undefined}obj.prop === undefined ? console.log('no'):console.log('yes');

代码执行结果：

> let obj = {
      prop : undefined
  }
  obj.prop === undefined ? console.log('no'):console.log('yes');
  no<p>虽然<code>prop</code>是存在的，但是以上案例并不能正确的返回结果。</p><p>这个时候就需要使用<code>in</code></p><pre class="brush:php;toolbar:false">let obj = {
    prop:undefined,};if('prop' in obj){
    console.log('yes');}else{
    console.log('no');}

这么做是不是优雅了许多呢？

> let obj = {
      prop:undefined,
  };
  if('prop' in obj){
      console.log('yes');
  }else{
      console.log('no');
  }<h2 id="属性遍历">属性遍历</h2><p>如果我们不知道对象中都存在什么属性，如何取得所有的属性值呢？<br> 这时候就需要使用<code>for .. in ..</code>语句了，它类似于<code>for</code>循环，但是更简洁。</p><p><strong>语法</strong></p><pre class="brush:php;toolbar:false">for (key in obj){
    ...}

举个简单的小李子：

let child = {
    name:'Tom',
    age:8,
    height:180,}for (let key in child){
    console.log(key+':'+child[key]);}

代码执行结果如下：

> let child = {
      name:'Tom',
      age:8,
      height:180,
  }

  for (let key in child){
      console.log(key+':'+child[key]);
  }<h2 id="属性顺序">属性顺序</h2><p>当我们创建一个对象并遍历其中所有的属性时，属性是如何排列的呢？答案是：特别的顺序排列，并遵循以下规则：</p><ol>
<li>数字属性以数字顺序排列；</li>
<li>其他属性按照创建顺序排列；</li>
<li>数字属性在其他属性之前；</li>
</ol><p>举个例子：</p><pre class="brush:php;toolbar:false">let obj = {
    name:'Tom',
    age:99,
    7:'7',
    1:'1',
    9:'9',}for (let key in obj){
    console.log(key+':'+obj[key]);}

代码执行结果：

> let obj = {
      name:'Tom',
      age:99,
      7:'7',
      1:'1',
      9:'9',
  }
  for (let key in obj){
      console.log(key+':'+obj[key]);
  }<p>【相关推荐：<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p>

Atas ialah kandungan terperinci Kuasai objek JavaScript dalam satu artikel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!