Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
636 views
in Technique[技术] by (71.8m points)

javascript - 如何访问和处理嵌套对象,数组或JSON?(How can I access and process nested objects, arrays or JSON?)

I have a nested data structure containing objects and arrays.

(我有一个包含对象和数组的嵌套数据结构。)

How can I extract the information, ie access a specific or multiple values (or keys)?

(如何提取信息,即访问特定或多个值(或键)?)

For example:

(例如:)

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

How could I access the name of the second item in items ?

(我怎么能访问name中的第二项的items ?)

  ask by Felix Kling translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Preliminaries(初赛)

JavaScript has only one data type which can contain multiple values: Object .

(JavaScript只有一种数据类型,可以包含多个值: Object 。)

An Array is a special form of object.

(数组是对象的一种特殊形式。)

(Plain) Objects have the form

((普通)对象具有以下形式)

{key: value, key: value, ...}

Arrays have the form

(数组具有以下形式)

[value, value, ...]

Both arrays and objects expose a key -> value structure.

(数组和对象都公开key -> value结构。)

Keys in an array must be numeric, whereas any string can be used as key in objects.

(数组中的键必须是数字,而任何字符串都可以用作对象中的键。)

The key-value pairs are also called the "properties" .

(键值对也称为“属性” 。)

Properties can be accessed either using dot notation

(可以使用点表示法来访问属性)

const value = obj.someProperty;

or bracket notation , if the property name would not be a valid JavaScript identifier name [spec] , or the name is the value of a variable:

(或括号表示法 ,如果属性名称不是有效的JavaScript 标识符名称[spec] ,或者名称是变量的值:)

// the space is not a valid character in identifier names
const value = obj["some Property"];

// property name as variable
const name = "some Property";
const value = obj[name];

For that reason, array elements can only be accessed using bracket notation:

(因此,只能使用方括号表示法访问数组元素:)

const value = arr[5]; // arr.5 would be a syntax error

// property name / index as variable
const x = 5;
const value = arr[x];

Wait... what about JSON?(等等... JSON呢?)

JSON is a textual representation of data, just like XML, YAML, CSV, and others.

(JSON是数据的文本表示形式,就像XML,YAML,CSV和其他形式一样。)

To work with such data, it first has to be converted to JavaScript data types, ie arrays and objects (and how to work with those was just explained).

(要使用此类数据,首先必须将其转换为JavaScript数据类型,即数组和对象(以及如何使用它们进行了说明)。)

How to parse JSON is explained in the question Parse JSON in JavaScript?

(如何在JavaScript中解析JSON问题中说明了如何解析JSON )

.

(。)

Further reading material(进一步阅读材料)

How to access arrays and objects is fundamental JavaScript knowledge and therefore it is advisable to read the MDN JavaScript Guide , especially the sections

(如何访问数组和对象是JavaScript的基本知识,因此建议阅读《 MDN JavaScript指南》 ,尤其是本节中的内容。)



Accessing nested data structures(访问嵌套数据结构)

A nested data structure is an array or object which refers to other arrays or objects, ie its values are arrays or objects.

(嵌套数据结构是引用其他数组或对象的数组或对象,即其值是数组或对象。)

Such structures can be accessed by consecutively applying dot or bracket notation.

(可以通过连续应用点或括号符号来访问此类结构。)

Here is an example:

(这是一个例子:)

const data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

Let's assume we want to access the name of the second item.

(假设我们要访问第二项的name 。)

Here is how we can do it step-by-step:

(这是我们逐步执行的方法:)

As we can see data is an object, hence we can access its properties using dot notation.

(如我们所见, data是一个对象,因此我们可以使用点表示法访问其属性。)

The items property is accessed as follows:

(items属性的访问方式如下:)

data.items

The value is an array, to access its second element, we have to use bracket notation:

(该值是一个数组,要访问其第二个元素,我们必须使用括号表示法:)

data.items[1]

This value is an object and we use dot notation again to access the name property.

(该值是一个对象,我们再次使用点符号来访问name属性。)

So we eventually get:

(因此,我们最终得到:)

const item_name = data.items[1].name;

Alternatively, we could have used bracket notation for any of the properties, especially if the name contained characters that would have made it invalid for dot notation usage:

(或者,我们可以对任何属性使用括号符号,特别是如果名称包含使点符号用法无效的字符时:)

const item_name = data['items'][1]['name'];

I'm trying to access a property but I get only undefined back?(我正在尝试访问属性,但只得到undefined返回?)

Most of the time when you are getting undefined , the object/array simply doesn't have a property with that name.

(在大多数情况下,当您undefined ,对象/数组根本没有具有该名称的属性。)

const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined

Use console.log or console.dir and inspect the structure of object / array.

(使用console.logconsole.dir并检查对象/数组的结构。)

The property you are trying to access might be actually defined on a nested object / array.

(您尝试访问的属性可能实际上是在嵌套对象/数组上定义的。)

console.log(foo.bar.baz); // 42

What if the property names are dynamic and I don't know them beforehand?(如果属性名称是动态的,但我事先不知道该怎么办?)

If the property names are unknown or we want to access all properties of an object / elements of an array, we can use the for...in [MDN] loop for objects and the for [MDN] loop for arrays to iterate over all properties / elements.

(如果属性名称是未知的,或者我们要访问对象的所有属性/数组元素,我们可以使用for...in [MDN]环为对象和for [MDN]环对数组遍历所有属性/元素。)

Objects

(对象)

To iterate over all properties of data , we can iterate over the object like so:

(要遍历data所有属性,我们可以像这样遍历对象 :)

for (const prop in data) {
    // `prop` contains the name of each property, i.e. `'code'` or `'items'`
    // consequently, `data[prop]` refers to the value of each property, i.e.
    // either `42` or the array
}

Depending on where the object comes from (and what you want to do), you might have to test in each iteration whether the property is really a property of the object, or it is an inherited property.

(根据对象的来源(以及您要执行的操作),您可能必须在每次迭代中测试该属性是否确实是该对象的属性,还是它是继承的属性。)

You can do this with Object#hasOwnProperty [MDN] .

(您可以使用Object#hasOwnProperty [MDN]进行此操作 。)

As alternative to for...in with hasOwnProperty , you can use Object.keys [MDN] to get an array of property names :

(for...in h


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...