Penjelasan terperinci tentang objek asas JavaScript (tersusun dan dikongsi)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang objek dalam JavaScript. Objek dalam JavaScript juga merupakan pembolehubah, tetapi objek mengandungi banyak nilai, saya harap ia akan membantu anda selepas membaca artikel ini.

1 Asas objek

1.1 Jenis

JavaScript mempunyai enam jenis bahasa utama:

rentetan, number, boolean, undefined, null, object

Jenis asas: rentetan, nombor, boolean, undefined, null, jenis asas itu sendiri bukan objek.

null

Tetapi null kadangkala dianggap sebagai objek, dan typeof null akan mengembalikan objek. Sebenarnya, null ialah jenis asas. Sebabnya ialah objek yang berbeza diwakili sebagai perduaan di peringkat bawah Dalam JavaScript, jika tiga digit pertama perduaan adalah 0, ia akan dinilai sebagai jenis objek, dan null bermakna semua 0, jadi typeof. akan mengembalikan objek.

Subjenis objek khas

Array

Array juga merupakan jenis objek dengan beberapa gelagat tambahan. Organisasi tatasusunan adalah lebih kompleks daripada objek biasa.

Fungsi

Fungsi pada asasnya adalah sama dengan fungsi biasa, kecuali ia boleh dipanggil, jadi anda boleh mengendalikan fungsi dengan cara yang sama seperti objek.

1.2 Objek Terbina dalam

String
Nombor
Tarikh
Boolean
Fungsi

Array

1.3 Kandungan

.a dipanggil akses atribut, dan ['a'] dipanggil akses operator.

//对象中的属性名始终是字符串
myobj={}

myobj[myobj]='bar'//赋值

myobj['[object object]'] //'bar'

1.4 Nama atribut boleh dikira

es6 Menambah nama atribut boleh dikira, anda boleh menggunakan [] dalam bentuk teks untuk membalut ungkapan sebagai nama atribut

var perfix = 'foo'

var myobj={
    [perfix + 'bar'] :'hello'
}

myobj['foobar']//hello

1.5 Deskriptor atribut

Bermula dari es5, semua atribut mempunyai deskriptor atribut Contohnya, anda boleh menentukan secara langsung sama ada atribut itu boleh dibaca dan boleh ditulis.

/*
 * 重要函数：
 * Object.getOwnPropertyDescriptor(..) //获取属性描述符
 * Object.defineProperty(..) //设置属性描述符
 */
 writeble（可读性）
 configurable（可配置性）
 enumerable （可枚举性）

1.6 Traversal

for in

for in boleh digunakan untuk melintasi senarai atribut terhitung objek (termasuk rantai [[Prototaip]]), yang perlu diperolehi secara manual nilai atribut. Boleh merentasi tatasusunan dan objek biasa

for of

es6 adalah baharu dan boleh digunakan untuk melintasi nilai atribut ​​​​gelung for of mula-mula akan meminta objek lelaran daripada objek yang diakses, dan kemudian Lelaran melalui semua nilai pulangan dengan memanggil kaedah seterusnya() bagi objek iterator.
Tatasusunan mempunyai @@iterator terbina dalam,

Bagaimanakah cara kerja?

var arr = [1, 2, 3]
var it = arr[Symbol.iterator]()//迭代器对象
console.log(it.next());//{value: 1, done: false}
console.log(it.next());//{value: 2, done: false}
console.log(it.next());//{value: 3, done: false}
console.log(it.next());//{value: undefined, done: true}

/*
 * 用es6 的Symbol.iterator 来获取对象的迭代器内部属性。
 * @@iterator本身并不是一个迭代器对象，而是一个返回迭代器对象的函数。
 */

Bagaimanakah objek boleh mempunyai @@iterator terbina dalam untuk melintasi nilai atribut?

Oleh kerana objek tidak mempunyai @@iterator terbina dalam, for...of traversal tidak boleh dilengkapkan secara automatik. Walau bagaimanapun, anda boleh mentakrifkan @@iterator untuk sebarang objek yang anda ingin lalui, contohnya:

  var obj={
      a:1,b:2
  }
  
   Object.defineProperty(obj, Symbol.iterator, {
        enumerable: false,
        writable: false,
        configurable: true,
        value: function () {
            var self = this
            var idx = 0
            var ks = Object.keys(self)
            return {
                next: function () {
                    return {
                        value: self[ks[idx++]],
                        done: (idx > ks.length)
                    }
                }
            }
        }
    })
    
    //手动遍历
    var it = obj[Symbol.iterator]()//迭代器对象
    console.log(it.next());//{value: 1, done: false}
    console.log(it.next());//{value: 2, done: false}
    console.log(it.next());//{value: undefined, done: true}

   //for of 遍历
    for (const v of obj) {
        console.log(v);
    }
    //2
    //3

Fungsi lintasan tatasusunan lain

 /*
 forEach：会遍历所有并忽略返回值
 some：会一直运行到回调函数返回 true（或者"真"值）
 every：会一直运行到回调函数返回 false（或者"假"值）
 map：
 filter：返回满足条件的值
 reduce：
 some和every 和for的break语句类似，会提前终止遍历
 */

Objek kelas campuran

Soalan temu bual

1. Salinan mendalam dan salinan cetek objek

Pengetahuan berkaitan

Jenis asas dan jenis rujukan

Seperti yang dinyatakan di atas, JavaScript There ialah enam jenis bahasa utama: rentetan, nombor, boolean, null, undefined, dan objek lima yang pertama adalah jenis asas, dan objek terakhir ialah jenis rujukan.

Kaedah penyimpanan pembolehubah JavaScript: tindanan dan timbunan

Timbunan: memperuntukkan ruang memori secara automatik dan dilepaskan secara automatik oleh sistem ini menyimpan nilai jenis asas dan jenis rujukan

Timbunan: memori yang diperuntukkan secara dinamik, saiznya berubah-ubah dan tidak akan dikeluarkan secara automatik. Ia menyimpan nilai jenis rujukan

Perbezaan terbesar antara jenis asas dan jenis rujukan ialah perbezaan antara hantaran nilai dan hantaran alamat

Jenis asas menggunakan hantaran nilai menggunakan alamat (penunjuk) lulus. Berikan alamat yang disimpan dalam memori tindanan kepada pembolehubah yang diterima.

Apakah salinan cetek dan salinan dalam?

Salinan cetek: Salinan cetek objek akan menyalin objek 'utama', tetapi tidak akan menyalin objek di dalam objek. 'Objek dalam' dikongsi antara objek asal dan salinannya.

Salinan dalam: Salinan dalam objek, yang bukan sahaja menyalin setiap atribut objek asal satu demi satu, tetapi juga menyalin secara mendalam objek yang terkandung dalam setiap atribut daripada objek asal. Kaedah ini disalin secara rekursif ke objek baharu, jadi pengubahsuaian pada satu objek tidak akan menjejaskan objek lain.

Contohnya:

var anotherObject={
    b:"b"
}

var anotherArray=[]

var myObject={
    a:'a',
    b:anotherObject, //引用，不是副本
    c:anotherArray //另外一个引用
}

anotherArray.push(anotherObject,myObject)

/*
  如何准确的复制 myObject?
 浅复制 myObject，就是复制出 新对象中的 a 的值会复制出对象中a 的值，也就是 'a'，
 但是对象中的 b、c两个属性其实只是三个引用，新对象的b、c属性和旧对象的是一样的。
 
 深复制 myObject，除了复制 myObject 以外还会复制 anotherObject 和 anotherArray。
 但是这里深复制 myObject会出现一个问题，anotherArray 引用 anotherObject 和 myObject，
 所以又需要复制 myObject，这样就会由于循环引用导致死循环。
 后面会介绍如何处理这种情况。
*/

Cara melaksanakan salinan cetek

objek

object.assign(), operator spread (…)

var obj1 = {x: 1, y: 2}
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 1, y: 2}
obj2.x = 2; //修改obj2.x
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 2, y: 2}

var obj1 = {
    x: 1, 
    y: {
        m: 1
    }
};
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 1, y: {m: 1}}
obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 2}}
console.log(obj2) //{x: 2, y: {m: 2}}

Array

slice(), concat, Array.from(), spread operator (...), concat, for loop

var arr1 = [1, 2, [3, 4]], arr2 = arr1.slice();
console.log(arr1); //[1, 2, [3, 4]]
console.log(arr2); //[1, 2, [3, 4]]

arr2[0] = 2 
arr2[2][1] = 5; 
console.log(arr1); //[1, 2, [3, 5]]
console.log(arr2); //[2, 2, [3, 5]]

Cara melaksanakan deep copy

JSON.parse(JSON.stringify(obj))

Semasa proses bersiri JSON.stringify(), fungsi dan nilai simbol yang tidak ditentukan, arbitrari akan dijana semasa penyirian proses. Diabaikan (apabila muncul dalam nilai sifat objek bukan tatasusunan) atau ditukar kepada null (apabila muncul dalam tatasusunan).

var obj1 = {
    x: 1, 
    y: {
        m: 1
    },
    a:undefined,
    b:function(a,b){
      return a+b
    },
    c:Symbol("foo")
};
var obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj1) //{x: 1, y: {m: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
console.log(obj2) //{x: 1, y: {m: 1}}
obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
console.log(obj2) //{x: 2, y: {m: 2}}

Pelaksanaan mudah fungsi salinan dalam

function deepClone(obj){
  let result = Array.isArray(obj)?[]:{};
  if(obj && typeof obj === "object"){
    for(let key in obj){
      if(obj.hasOwnProperty(key)){
        if(obj[key] && typeof obj[key] === "object"){
          result[key] = deepClone(obj[key]);
        }else{
          result[key] = obj[key];
        }
      }
    }
  }
  return result;
}

var obj1 = {
    x: {
        m: 1
    },
    y: undefined,
    z: function add(z1, z2) {
        return z1 + z2
    },
    a: Symbol("foo"),
    b: [1,2,3,4,5],
    c: null
};
var obj2 = deepClone(obj1);
obj2.x.m = 2;
obj2.b[0] = 2;
console.log(obj1);
console.log(obj2);

//obj1
{
a: Symbol(foo)
b: (5) [1, 2, 3, 4, 5]
c: null
x: {m: 1}
y: undefined
z: ƒ add(z1, z2)
}

//obj2
{
a: Symbol(foo)
b: (5) [2, 2, 3, 4, 5]
c: null
x: {m: 2}
y: undefined
z: ƒ add(z1, z2)
}

Kaedah salinan dalam di atas akan jatuh ke dalam proses rekursif bulat apabila ia menemui rujukan bulat, menyebabkan timbunan meletup. Oleh itu penambahbaikan diperlukan.

Peningkatan fungsi salinan dalam (mencegah pengulangan gelung)

Untuk menyelesaikan masalah letupan tindanan akibat pengulangan gelung, anda hanya perlu menentukan sama ada medan objek merujuk kepada objek ini atau mana-mana ibu bapa bagi objek ini Tahap sudah memadai.

function deepClone(obj, parent = null){ // 改进（1）
  let result = Array.isArray(obj)?[]:{};
  let _parent = parent;  // 改进（2）
  while(_parent){ // 改进（3）
    if(_parent.originalParent === obj){
      return _parent.currentParent;
    }
    _parent = _parent.parent;
  }
  if(obj && typeof obj === "object"){
    for(let key in obj){
      if(obj.hasOwnProperty(key)){
        if(obj[key] && typeof obj[key] === "object"){
          result[key] = deepClone(obj[key],{ // 改进（4）
            originalParent: obj,
            currentParent: result,
            parent: parent
          });
        }else{
          result[key] = obj[key];
        }
      }
    }
  }
  return result;
}

// 调试用
var obj1 = {
    x: 1, 
    y: 2
};
obj1.z = obj1;
var obj2 = deepClone(obj1);
console.log(obj1); 
console.log(obj2);

Versi akhir fungsi salinan dalam (menyokong jenis data asas, rantai prototaip, RegExp, jenis Tarikh)

function deepClone(obj, parent = null){ 
  let result; // 最后的返回结果

  let _parent = parent; // 防止循环引用
  while(_parent){
    if(_parent.originalParent === obj){
      return _parent.currentParent;
    }
    _parent = _parent.parent;
  }
  
  if(obj && typeof obj === "object"){ // 返回引用数据类型(null已被判断条件排除))
    if(obj instanceof RegExp){ // RegExp类型
      result = new RegExp(obj.source, obj.flags)
    }else if(obj instanceof Date){ // Date类型
      result = new Date(obj.getTime());
    }else{
      if(obj instanceof Array){ // Array类型
        result = []
      }else{ // Object类型，继承原型链
        let proto = Object.getPrototypeOf(obj);
        result = Object.create(proto);
      }
      for(let key in obj){ // Array类型 与 Object类型 的深拷贝
        if(obj.hasOwnProperty(key)){
          if(obj[key] && typeof obj[key] === "object"){
            result[key] = deepClone(obj[key],{ 
              originalParent: obj,
              currentParent: result,
              parent: parent
            });
          }else{
            result[key] = obj[key];
          }
        }
      }
    }
  }else{ // 返回基本数据类型与Function类型,因为Function不需要深拷贝
    return obj
  }
  return result;
}

// 调试用
function construct(){
    this.a = 1,
    this.b = {
        x:2,
        y:3,
        z:[4,5,[6]]
    },
    this.c = [7,8,[9,10]],
    this.d = new Date(),
    this.e = /abc/ig,
    this.f = function(a,b){
        return a+b
    },
    this.g = null,
    this.h = undefined,
    this.i = "hello",
    this.j = Symbol("foo")
}
construct.prototype.str = "I'm prototype"
var obj1 = new construct()
obj1.k = obj1
obj2 = deepClone(obj1)
obj2.b.x = 999
obj2.c[0] = 666
console.log(obj1)
console.log(obj2)
console.log(obj1.str)
console.log(obj2.str)

Nota: Salinan dalam jenis Fungsi:

bind(): Gunakan fn.bind() untuk membuat salinan dalam fungsi, tetapi ia tidak boleh digunakan kerana masalah penunjuk ini; : Hanya fungsi anak panah yang disokong. Fungsi fungsi biasa fn(){} tidak berkenaan

Fungsi baharu(arg1, arg2,..., function_body): Parameter dan badan fungsi perlu diekstrak

PS: Biasanya tidak Salinan Fungsi yang mendalam diperlukan.

[Cadangan berkaitan:

tutorial pembelajaran javascript

]

Atas ialah kandungan terperinci Penjelasan terperinci tentang objek asas JavaScript (tersusun dan dikongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!