Detaillierte Erklärung des Durchquerungsproblems in js

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit der detaillierten Erläuterung von Durchlaufproblemen in js. Er hat einen gewissen Referenzwert. Freunde in Not können sich auf

Instanzattribute und Prototypattribute beziehen

• Es gibt zwei Arten von Eigenschaften von Objekten in JavaScript: Dateneigenschaften und Accessor-Eigenschaften .

• Je nach spezifischem Kontext können Attribute unterteilt werden in: Prototypattribute und Instanzattribute .

• Prototypattribute sind Attribute, die im Prototyp des Objekts definiert sind prototype,

• Instanzattribute Einerseits stammen sie aus der konstruierten Funktion, und dann werden nach der Instanziierung des Konstruktors neue Attribute hinzugefügt.

js-Aufzählung

Das Durchlaufen der Eigenschaften eines Objekts in JavaScript ist nicht sehr einfach, hauptsächlich aus zwei Gründen:

• Objekte in JavaScript befinden sich normalerweise in einer Prototypenkette und erben einige Eigenschaften von einem oder mehreren oberen Prototypen

• Attribute in JavaScript haben nicht nur Werte, sondern neben dem Wert auch einige andere Funktionen. Eine der Funktionen, die sich auf die Attributdurchquerung auswirken, ist Enumerable (ein Attributdeskriptor) Wenn der Wert true ist, ist das Attribut aufzählbar, andernfalls

Attributdeskriptor

• 属性描述符 hat zwei Hauptformen: 数据描述符 und 存取描述符.

• Verwenden Sie die Methoden Object.getOwnPropertyDescriptor und Object.getOwnPropertyDescriptors, um das 属性描述符 des Objekts abzurufen.

var obj = {
  name: '10',
  _age: 25,
  get age(){
    return this._age;
  },
  set age(age){
    if(age<1){
      throw new Error(&#39;Age must be more than 0&#39;);
    }else{
      this._age = age;
    }
  }
};

var des = Object.getOwnPropertyDescriptors(obj);
console.log(des);
/**
 * des: {
 *  name: {
 *    configurable: true,
 *    enumerable: true,
 *    value: "10",
 *    writable: true,
 *    __proto__: Object
 *  },
 *  _age: {
 *    configurable: true,
 *    enumerable: true,
 *    value: 25,
 *    writable: true,
 *    __proto__: Object
 *  },
 *  age: {
 *    configurable: true,
 *    enumerable: true,
 *    get: f age(),
 *    set: f age(age),
 *    __proto__: Object
 *  },
 *  __proto__: Object
 * }
*/

Wert

Der Wert dieses Attributs (nur gültig für Datenattributdeskriptoren)

beschreibbar

Wann< Wenn die 🎜>-Eigenschaft auf writable gesetzt ist, gilt die Eigenschaft als „nicht beschreibbar“. Es kann nicht neu zugewiesen werden. false

get

Ruft die Zugriffsfunktion (

) dieser Eigenschaft ab. Wenn kein Accessor vorhanden ist, ist der Wert getter. (Nur gültig für Eigenschaftsbeschreibungen, die Accessoren oder Setter enthalten) undefined

set

Ruft die Setter-Funktion (

) dieser Eigenschaft ab. Wenn kein Setter vorhanden ist, ist der Wert setter. (Nur gültig für Eigenschaftsbeschreibungen, die Accessoren oder Setter enthalten) Das Attribut undefined

konfigurierbar

gibt an, ob die Attribute des Objekts gelöscht werden können, und andere Attribute außer dem Attribut configurable, ob dies möglich ist geändert. writable

enumerable

definiert, ob die Eigenschaften des Objekts in enumerable-Schleifen und for...in aufgezählt werden können. Object.keys()

• name und _age haben vier Attributdeskriptoren

  , 'configurable', 'enumerable', 'value', zusammen 'writable'数据描述符

< genannt 🎜>Alter hat vier Attributdeskriptoren
• ,

  , 'configurable' und 'enumerable', die zusammen als 'get''set'存取描述符

bezeichnet werden

对象的属性描述符，可以通过Object.defineProperty和Object.defineProperties来修改(configurable为true的条件下)

常用的遍历方法

for...in...遍历

• 遍历自身及原型链上所有可枚举的属性

• 使用 for...in 循环遍历对象属性时返回的属性会因为各个 浏览器不同 导致对象属性遍历的顺序有可能不是当初构建时的顺序。

Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此，使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范，属性遍历顺序由属性构建的顺序决定。

for-in 语句无法保证遍历顺序，应尽量避免编写依赖对象属性顺序的代码。如果想顺序遍历一组数据，请使用数组并使用 for 语句遍历。

var Animal = function({name='none', age=3, weight=80}={}){
  this.name = name;
  this.age = age;
  this.weight = weight;
}

Animal.prototype = {
  color: 'red'
}

var dog = new Animal()

// 将weight属性设置为 不可枚举
Object.defineProperty(dog, 'weight', {
  enumerable: false
})

for(let i in dog){
  console.log(n);
}

//原型链上的color同样被遍历出来了，并且由于weight属性被设置成了enumerable:false，所以不可被遍历
//name 
//age 
//color

for...of遍历

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串。

如果不太清楚iterator，请去看看阮一峰大神的这篇文章，里面关于for...of以及iterator都讲的非常详细！

其实for...of和for...in都是迭代一些东西，它们之间的主要区别在于它们的迭代方式。

• for...in语句以原始插入顺序迭代对象的可枚举属性。

• for...of 语句遍历可迭代对象定义要迭代的数据。

请仔细看以下实例，理解其中的区别

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); //  0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); //  0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); //  3, 5, 7
}

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = 'hello';

在这段代码里面，由于继承和原型链，对象iterable继承属性objCustom和arrCustom。

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

在这段代码里面，此循环仅以原始插入顺序记录iterable 对象的可枚举属性。它不记录数组元素3, 5, 7 或hello，因为这些不是枚举属性。但是它记录了数组索引以及arrCustom和objCustom（为何记录arrCustom和objCustom在本文for...in里面有讲过）。

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); //  0, 1, 2, "foo"
  }
}

hasOwnProperty()用来检查找到的枚举属性是不是对象自己的（即是不是继承的）

for (let i of iterable) {
  console.log(i); //  3, 5, 7 
}

该循环迭代并记录iterable作为可迭代对象定义的迭代值，这些是数组元素 3, 5, 7，而不是任何对象的属性。

Object.keys遍历

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

Object.getOwnPropertyNames()遍历

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组,此方法不会获取原型链上的属性。

var Animal = function({name='', age=1, weight=70}={}){
  this.name = name;
  this.age = age;
  this.weight = weight;
}

Animal.prototype = {
  type: 'Animal'
}

var dog = new Animal()

// 将height属性设置为 不可枚举
Object.defineProperty(dog, 'weight', {
  enumerable: false
})

var keys = Object.getOwnPropertyNames(dog);
console.log(keys)
// ['name', 'age', 'weight']

结语

这篇文章希望能让大家更加理解js中的遍历，写的不好多多见谅并指出！

相关推荐：

实例详解AngularJS遍历获取数组元素

JS遍历对象属性的方法示例

JS遍历页面所有对象属性及实现方法

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Durchquerungsproblems in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!