Explication détaillée des problèmes de traversée dans js

Le contenu partagé avec vous dans cet article concerne l'explication détaillée des problèmes de traversée dans js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent se référer aux

Attributs d'instance et attributs de prototype

• Il existe deux types de propriétés d'objets en JavaScript : les

  propriétés de données et les propriétés d'accesseur .

• Selon le contexte spécifique, les attributs peuvent être divisés en :

  Attributs de prototype et Attributs d'instance .

• Les attributs du prototype sont des attributs définis dans le prototype de l'objet , prototype

• Attributs d'instance D'une part, ils proviennent de la fonction construite, et ensuite de nouveaux attributs sont ajoutés après l'instanciation du constructeur.

énumération js

Parcourir les propriétés d'un objet en JavaScript n'est pas très simple, principalement pour deux raisons :

• Les objets en JavaScript sont généralement dans une chaîne de prototypes et ils héritent de certaines propriétés d'un ou plusieurs prototypes de niveau supérieur

• Les attributs en JavaScript ont non seulement des valeurs, mais ils ont également d'autres caractéristiques en plus valeur. L'une des caractéristiques qui affectent le parcours d'attribut est

  (un descripteur d'attribut). Si la valeur est Enumerable, alors l'attribut est énumérable, sinon true

Descripteur d'attribut <.>

• a principalement deux formes :

  et 属性描述符. 数据描述符存取描述符

Utilisez les méthodes
• et

  pour obtenir le Object.getOwnPropertyDescriptor de l'objet. Object.getOwnPropertyDescriptors属性描述符

valeur

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
 * }
*/

La valeur de cet attribut (valable uniquement pour les descripteurs d'attributs de données)

inscriptible

Quand< Lorsque la propriété 🎜> est définie sur

, la propriété est dite "non accessible en écriture". Il ne peut pas être réaffecté.

writablegetfalse

Obtient la fonction accesseur (

) de cette propriété. S'il n'y a pas d'accesseur, la valeur est

. (Uniquement valable pour les descriptions de propriété contenant des accesseurs ou des setters)

gettersetundefined

Obtient la fonction setter (

) de cette propriété. S'il n'y a pas de setter, la valeur est

. (Valable uniquement pour les descriptions de propriétés contenant des accesseurs ou des setters) L'attribut

setterconfigurableundefined

indique si les attributs de l'objet peuvent être supprimés, et d'autres attributs à l'exception de l'attribut

s'il peut être modifié.

configurableenumerablewritable

définit si les propriétés de l'objet peuvent être énumérées dans des boucles

et

. enumerablefor...inObject.keys()

name et _age ont quatre descripteurs d'attribut

,
• ,

  et 'configurable', appelés collectivement 'enumerable''value''writable'数据描述符

  l'âge a quatre descripteurs d'attributs
,
• ,

  et 'configurable', collectivement appelés 'enumerable''get''set'存取描述符

  对象的属性描述符，可以通过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遍历页面所有对象属性及实现方法

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!