Table of Contents
Instance attributes and prototype attributes
js enumeration
Attribute descriptor
常用的遍历方法
for...in...遍历
for...of遍历
Object.keys遍历
Object.getOwnPropertyNames()遍历
结语
Home Web Front-end JS Tutorial Detailed explanation of traversal problems in js

Detailed explanation of traversal problems in js

Apr 10, 2018 pm 04:55 PM
javascript Traverse question

The content shared with you in this article is about the detailed explanation of traversal issues in js. It has certain reference value. Friends in need can refer to it

Instance attributes and prototype attributes

  • Object properties in JavaScript are divided into two types: Data properties and Accessor properties.

  • According to the specific context, attributes can be divided into: Prototype attributes and Instance attributes .

  • Prototype attributes are attributes defined in the object’s prototype prototype,

  • Instance attributes On the one hand, they come from the constructor function, and then there are new attributes added after the constructor is instantiated.

js enumeration

Traversing the properties of an object in JavaScript is not very simple, mainly for two reasons:

  • Objects in JavaScript are usually in a prototype chain, and they will inherit some properties from one or more upper prototypes

  • The properties in JavaScript not only have values, It also has some other characteristics besides value. One of the characteristics that affects attribute traversal is Enumerable (an attribute descriptor). If the value is true, then this attribute is Enumerated, otherwise

Attribute descriptor
  • ##Attribute descriptor There are two main forms: Data descriptor and Access descriptor.

  • Use the

    Object.getOwnPropertyDescriptor and Object.getOwnPropertyDescriptors methods to obtain the property descriptor of the object.

  • 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
     * }
    */
    Copy after login
value
The value of this attribute (valid only for data attribute descriptors)

writable
When

When the writable attribute is set to false, the property is said to be "unwritable". It cannot be reassigned.

get
Get the accessor function (

getter) of this property. If there is no accessor, the value is undefined. (Only valid for property descriptions containing accessors or setters)

set
Get the setter function (

setter) of the property. If there is no setter, the value is undefined. (Only valid for property descriptions containing accessors or setters)

configurable

configurableAttributes indicate whether the object's properties can be deleted, and except writable Whether other characteristics besides characteristics can be modified.

enumerable

enumerableDefines whether the properties of the object can be used in for...in loops and Object.keys() is enumerated.

  • name,_age has

    'configurable', 'enumerable', 'value',' writable'Four attribute descriptors, collectively referred to as data descriptors

  • age has

    'configurable', 'enumerable ', 'get', 'set' four attribute descriptors, collectively referred to as access descriptor

Category'configurable''enumerable''value''writable''get''set'Data descriptoryesyesyesyesnonoAccess descriptoryesyesnonoyesyes

对象的属性描述符,可以通过Object.definePropertyObject.defineProperties来修改(configurabletrue的条件下)

常用的遍历方法

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=&#39;none&#39;, age=3, weight=80}={}){
  this.name = name;
  this.age = age;
  this.weight = weight;
}

Animal.prototype = {
  color: &#39;red&#39;
}

var dog = new Animal()

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

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

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

for...of遍历

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

for...of循环可以使用的范围包括数组、SetMap 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。

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

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

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

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

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

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

let iterable = [3, 5, 7];
iterable.foo = &#39;hello&#39;;

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
}
Copy after login
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = &#39;hello&#39;;
Copy after login

在这段代码里面,由于继承和原型链,对象iterable继承属性objCustomarrCustom

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

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

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

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

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

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

Object.keys遍历

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

Object.getOwnPropertyNames()遍历

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

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

Animal.prototype = {
  type: &#39;Animal&#39;
}

var dog = new Animal()

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

var keys = Object.getOwnPropertyNames(dog);
console.log(keys)
// [&#39;name&#39;, &#39;age&#39;, &#39;weight&#39;]
Copy after login

结语

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

相关推荐:

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

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

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

The above is the detailed content of Detailed explanation of traversal problems in js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Java how to loop through a folder and get all file names Java how to loop through a folder and get all file names Mar 29, 2024 pm 01:24 PM

Java is a popular programming language with powerful file handling capabilities. In Java, traversing a folder and getting all file names is a common operation, which can help us quickly locate and process files in a specific directory. This article will introduce how to implement a method of traversing a folder and getting all file names in Java, and provide specific code examples. 1. Use the recursive method to traverse the folder. We can use the recursive method to traverse the folder. The recursive method is a way of calling itself, which can effectively traverse the folder.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to solve the problem that jQuery cannot obtain the form element value How to solve the problem that jQuery cannot obtain the form element value Feb 19, 2024 pm 02:01 PM

To solve the problem that jQuery.val() cannot be used, specific code examples are required. For front-end developers, using jQuery is one of the common operations. Among them, using the .val() method to get or set the value of a form element is a very common operation. However, in some specific cases, the problem of not being able to use the .val() method may arise. This article will introduce some common situations and solutions, and provide specific code examples. Problem Description When using jQuery to develop front-end pages, sometimes you will encounter

How to solve the problem of the start menu that cannot be used after win11 installation How to solve the problem of the start menu that cannot be used after win11 installation Jan 06, 2024 pm 05:14 PM

Many users have tried to update the win11 system, but found that the start menu cannot be used after the update. This may be because there is a problem with the latest update. We can wait for Microsoft to fix or uninstall these updates to solve the problem. Let's take a look at it together. Solution. What to do if the start menu cannot be used after win11 is installed. Method 1: 1. First open the control panel in win11. 2. Then click the "Uninstall a program" button below the program. 3. Enter the uninstall interface and find "View installed updates" in the upper left corner. 4. After entering, you can view the update time in the update information and uninstall all recent updates. Method 2: 1. In addition, we can also directly download the win11 system without updates. 2. This is a product without the most

What are the questions in the Rulong 8 Wine Master exam? What are the questions in the Rulong 8 Wine Master exam? Feb 02, 2024 am 10:18 AM

What are the questions involved in the Yulong 8 Wine Master exam? What is the corresponding answer? How to pass the exam quickly? There are many questions that need to be answered in the Master of Wine Examination activities, and we can refer to the answers to solve them. These questions all involve knowledge of wine. If you need a reference, let’s take a look at the detailed analysis of the answers to the Yakuza 8 Wine Master exam questions! Detailed explanation of answers to questions in the Rulong 8 Wine Master exam 1. Questions about "wine". This is a distilled liquor produced by a distillery established by the royal family. It is brewed from the sugar of sugarcane grown in large quantities in Hawaii. What is the name of this wine? Answer: Rum 2. Question about "wine". The picture shows a drink made from dry ginseng and dry vermouth. It is characterized by the addition of olives and is known as "cockney"

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

Frequently Asked Questions about Wuhuami's new breakthrough test: February 28, we look forward to your arrival! Frequently Asked Questions about Wuhuami's new breakthrough test: February 28, we look forward to your arrival! Feb 26, 2024 pm 05:22 PM

Wuhua Mixin has confirmed that it will conduct a breaking test on February 28. This time we will mainly solve the common problems of the breaking test, including whether you have participated in previous tests, are you eligible this time, the start and end of the test, and the pre-download time? Let’s take a look at what device platforms are supported and other content. Frequently Asked Questions about Wuhuami’s new breakthrough test: February 28, we look forward to your arrival! 1. What is the nature of the "breaking test"? This test is a limited billing and file deletion test for Android. After the test, the game data of this test will be deleted. 2. Have you ever participated in the "Opening Test" or "Entry Test"? Do you have the qualifications to participate in the "Breaking Test" this time? If you have participated in the "Opening Test" or "Entry Test", please scan the QR code below to go to " To players who have participated in the closed beta

In-depth comparison of Java Iterator and Iterable: pros and cons analysis In-depth comparison of Java Iterator and Iterable: pros and cons analysis Feb 19, 2024 pm 04:20 PM

Conceptual differences: Iterator: Iterator is an interface that represents an iterator that obtains values ​​from a collection. It provides methods such as MoveNext(), Current() and Reset(), allowing you to traverse the elements in the collection and operate on the current element. Iterable: Iterable is also an interface, representing an iterable object. It provides the Iterator() method, which returns an Iterator object to facilitate traversing the elements in the collection. Usage: Iterator: To use Iterator, you need to first obtain an Iterator object, and then call the MoveNext() method to move to the next

See all articles