Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung verschiedener Objektmethoden in JavaScript (mit Beispielen)

不言
Freigeben: 2019-01-29 09:42:21
nach vorne
2368 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Zusammenfassung verschiedener Objektmethoden in JavaScript (mit Beispielen). Ich hoffe, dass er für Freunde hilfreich ist.

1. hasOwnProperty

obj.hasOwnProperty(prop)

Parameter

prop: der zu erkennende Attributzeichenfolgenname oder Symbol

Rückgabewert

Boolean

wird verwendet, um zu bestimmen, ob ein Objekt die angegebene Eigenschaft enthält. Alle Objekte, die Object erben, erben die Methode hasOwnProperty(). Diese Methode wird verwendet, um zu erkennen, ob ein Objekt bestimmte eigene Eigenschaften enthält. Im Gegensatz zum in-Operator ignoriert diese Methode von der Prototypenkette geerbte Eigenschaften

Object.prototype.a = 'aaa';
var obj = {
  b: 'bbb'
}
console.log(obj.hasOwnProperty(a)); // false
for(var item in obj) {
  console.log(item); // b  a。此结果也找到了从原型链上继承过来的属性
}
Nach dem Login kopieren

Wenn hasOwnProperty als Eigenschaftsname verwendet wird

var foo = {
  hasOwnProperty: function() {
    return false
  },
  bar: 'bar'
}

foo.hasOwnProperty('bar'); // false
// 如果这种情况下,想调用原型链上的方法
({}).hasOwnProperty.call(foo, 'bar'); // 即foo对象调用了{}对象的方法。
// 等同于
Object.prototype.hasOwnProperty.call(foo, 'bar')
Nach dem Login kopieren

Erweiterung: Alle Eigenschaften eines Objekts durchlaufen

for ... in durchläuft nur eine Schleife über aufzählbare Eigenschaften, daher sollten Sie auf dieser Grundlage keine Schleife über nicht aufzählbare Eigenschaften durchführen.

2.getOwnPropertyNames

Object.getOwnPropertyNames(obj)

Parameter

obj Ein Objekt mit eigenen aufzählbaren und nicht aufzählbaren Eigenschaften. Der Name wird zurückgegeben .

Rückgabewert

Ein Array von Zeichenfolgen, die seinen eigenen Eigenschaften entsprechen, die für das angegebene Objekt gefunden wurden.

Object.getOwnPropertyNames() gibt ein Array zurück, das aufzählbare und nicht aufzählbare Eigenschaften in obj enthält.

3.Object.keys()

Object.keys(obj)

Parameter

Das Objekt, das seine aufgezählten eigenen Eigenschaften zurückgibt

Rückgabewert

Ein String-Array, das alle aufzählbaren Eigenschaften des angegebenen Objekts darstellt

Beschreibung

Object.keys() gibt ein Array zurück, dessen Elemente Zeichen sind. Ein Array von Strings deren Elemente aus direkt aufzählbaren Eigenschaften des gegebenen Objekts stammen. Die Reihenfolge dieser Eigenschaften entspricht dem manuellen Durchlaufen der Eigenschaft (for...in...).

var obj = {a:'a',b:'b',c:'c'};
console.log(Object.keys(obj));// ['a', 'b', 'c']
Nach dem Login kopieren

4.Object.values()

Object.keys() gibt den Schlüsselwert zurück, Object.values() gibt den Wert zurück, die Regeln sind die gleichen wie bei Object.keys( ).

5.Object.assign()

Object.assign() wird verwendet, um alle aufzählbaren Werte von einem Objekt zum Zielobjekt zu kopieren. Es wird das Zielobjekt zurückgegeben.

Object.assign(target, ...sources);

Beschreibung

Wenn die Eigenschaften im Zielobjekt dieselben Eigenschaften haben wie die im Quellobjekt. Die Eigenschaften im Zielobjekt werden überschrieben. Eigenschaften vom Typ String und Symbol werden kopiert.
Im Fehlerfall, beispielsweise wenn die Eigenschaft nicht beschreibbar ist, wird ein TypeError ausgelöst und das Zielobjekt kann geändert werden, wenn vor der Fehlerauslösung irgendwelche Eigenschaften hinzugefügt wurden.

const a = {a: 'a', b: 'b'};
var b = Object.assign({}, a);
console.log(b); //{a: 'a', b: 'b'}
Nach dem Login kopieren

Tiefe Kopie, Object.assign() kann nur die Eigenschaften der ersten Ebene des Objekts kopieren. Wenn der Eigenschaftswert des Quellobjekts eine Referenz auf das Objekt ist, wird nur dieser Referenzwert kopiert.

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
Nach dem Login kopieren

Objekte zusammenführen

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
Nach dem Login kopieren

Objekte mit denselben Eigenschaften zusammenführen, und die Eigenschaften werden von anderen Objekten mit denselben Eigenschaften in nachfolgenden Parametern überschrieben.

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
Nach dem Login kopieren

Symboltypattribute kopieren

var o1 = { a: 1 };
var o2 = { [Symbol('foo')]: 2 };

var obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
Nach dem Login kopieren

Geerbte Attribute und nicht aufzählbare Attribute können nicht kopiert werden

var obj = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});

var copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }
Nach dem Login kopieren

Der ursprüngliche Typ wird als Objekt verpackt

var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo")

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装,null 和 undefined 会被忽略。
// 注意,只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
Nach dem Login kopieren

Ausnahme unterbricht nachfolgende Kopieraufgaben

var target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 属性是个只读属性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar);  // 2,说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo);  // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。
console.log(target.baz);  // undefined,第三个源对象更是不会被拷贝到的。
Nach dem Login kopieren

Kopierzugriffsfunktion

var obj = {
  foo: 1,
  get bar() {
    return 2;
  }
};

var copy = Object.assign({}, obj); 
// { foo: 1, bar: 2 }
// copy.bar的值来自obj.bar的getter函数的返回值 
console.log(copy); 

// 下面这个函数会拷贝所有自有属性的属性描述符
function completeAssign(target, ...sources) {
  sources.forEach(source => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});

    // Object.assign 默认也会拷贝可枚举的Symbols
    Object.getOwnPropertySymbols(source).forEach(sym => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

var copy = completeAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener Objektmethoden in JavaScript (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage