JavaScript-如何从数组对象访问数据[关闭]

问题描述 投票:-2回答:1

我当前正在从数据库返回数据,并且返回值是数组的对象。我正在尝试访问此数组并附加要返回的数据。我在访问对象内部数组的索引0时遇到问题。

这里是要返回的对象的示例。

let data = { ["<p>Retail Websites has a profit value of $243,291. In the year 2020 we have seen a growth rate of about 2.3% </p>" ] }

[尝试通过简单的console.log访问它时,console.log[0]

我得到的返回值是不确定的。如果尝试像对象一样进行访问,则无法执行此操作,例如console.log(data.[0]),我不确定如何访问对象内部索引为0的数组中的数据。

javascript arrays object
1个回答
0
投票

初步

JavaScript只有一种数据类型,可以包含多个值:对象。数组是对象的一种特殊形式。

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

数组具有形式

[value, value, ...]

数组和对象都公开键->值结构。数组中的键必须是数字,而任何字符串都可以用作对象中的键。键值对也称为“属性”。

可以使用点符号来访问属性

const value = obj.someProperty;

或括号表示法,如果属性名称不是有效的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];

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

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

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

等等... JSON呢?

JSON是数据的文本表示形式,就像XML,YAML,CSV等一样。要使用此类数据,首先必须将其转换为JavaScript数据类型,即数组和对象(以及如何使用它们进行了解释)。如何在JavaScript中解析JSON问题中说明了如何解析JSON? 。进一步阅读材料

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

Working with Objects
Arrays
Eloquent JavaScript - Data Structures

访问嵌套数据结构

嵌套数据结构是一个数组或对象,它引用其他数组或对象,即其值是数组或对象。可以通过连续应用点或括号符号来访问此类结构。

这里是一个例子:

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

假设我们要访问第二项的名称。

这是我们逐步操作的方法:

我们可以看到数据是一个对象,因此我们可以使用点表示法访问其属性。 items属性的访问方式如下:

data.items

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

data.items[1]

此值是一个对象,我们再次使用点符号来访问name属性。所以我们最终得到:

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

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

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

我正在尝试访问属性,但只返回未定义的内容?

在大多数情况下,当您不确定时,对象/数组根本没有该名称的属性。

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

使用console.log或console.dir并检查对象/数组的结构。您尝试访问的属性可能实际上是在嵌套对象/数组上定义的。

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

如果属性名称是动态的,但我事先不知道该怎么办?

如果属性名称未知,或者我们要访问对象/数组元素的所有属性,则可以在对象的[MDN]循环中使用for ...在[MDN]循环中使用for ...在数组中进行迭代所有属性/元素。

对象

要遍历数据的所有属性,我们可以像这样遍历对象:

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
}

取决于对象的来源(以及您想做什么),您可能必须在每次迭代中测试该属性是否确实是该对象的属性,还是它是继承的属性。您可以使用Object#hasOwnProperty [MDN]进行此操作。

作为hasOwnProperty中for ...的替代,您可以使用Object.keys [MDN]获取属性名称数组:

Object.keys(data).forEach(function(prop) {
  // `prop` is the property name
  // `data[prop]` is the property value
});

数组

要遍历data.items数组的所有元素,我们使用一个for循环:

for(let i = 0, l = data.items.length; i < l; i++) {
    // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
    // we can access the next element in the array with `data.items[i]`, example:
    // 
    // var obj = data.items[i];
    // 
    // Since each element is an object (in our example),
    // we can now access the objects properties with `obj.id` and `obj.name`. 
    // We could also use `data.items[i].id`.
}

[也可以使用for ... in遍历数组,但是有理由应避免这种情况:为什么在数组中将'for(var item in list)'视为数组在JavaScript中是不好的做法?

随着对ECMAScript 5的浏览器支持的增加,用于每个[MDN]的数组方法也成为一个有趣的替代方法:

data.items.forEach(function(value, index, array) {
    // The callback is executed for each element in the array.
    // `value` is the element itself (equivalent to `array[index]`)
    // `index` will be the index of the element in the array
    // `array` is a reference to the array itself (i.e. `data.items` in this case)
}); 

在支持ES2015(ES6)的环境中,您还可以使用for ... of [MDN]循环,它不仅适用于数组,而且适用于任何可迭代的方法:

for (const item of data.items) {
   // `item` is the array element, **not** the index
}

在每次迭代中,for ... of直接为我们提供了可迭代的下一个元素,没有可访问或使用的“索引”。如果我不知道数据结构的“深度”怎么办?

除了未知键之外,它具有的数据结构(即,嵌套对象的数量)的“深度”也可能是未知的。如何访问深层嵌套的属性通常取决于确切的数据结构。

但是如果数据结构包含重复模式,例如作为二叉树的表示形式,解决方案通常包括递归[Wikipedia]访问数据结构的每个级别。

这里是获取二叉树的第一个叶子节点的示例:

function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild); // <- recursive call
    }
    else if (node.rightChild) {
        return getLeaf(node.rightChild); // <- recursive call
    }
    else { // node must be a leaf node
        return node;
    }
}

const first_leaf = getLeaf(root);

访问具有未知键和深度的嵌套数据结构的更通用的方法是测试值的类型并采取相应的措施。

这里是将嵌套数据结构内的所有原始值添加到数组中的示例(假设它不包含任何函数)。如果遇到一个对象(或数组),我们只需对该值再次调用toArray(递归调用)。

function toArray(obj) {
    const result = [];
    for (const prop in obj) {
        const value = obj[prop];
        if (typeof value === 'object') {
            result.push(toArray(value)); // <- recursive call
        }
        else {
            result.push(value);
        }
    }
    return result;
}

助手

由于复杂对象或数组的结构不一定很明显,因此我们可以在每个步骤中检查该值以确定如何进一步移动。 console.log [MDN]和console.dir [MDN]可以帮助我们做到这一点。例如(Chrome控制台的输出):

> console.log(data.items)
 [ Object, Object ]

这里我们看到data.items是一个包含两个都是对象的元素的数组。在Chrome控制台中,对象甚至可以立即展开和检查。

> console.log(data.items[1])
  Object
     id: 2
     name: "bar"
     __proto__: Object

这告诉我们data.items [1]是一个对象,展开后,我们看到它具有三个属性,id,name和__proto__。后者是用于对象原型链的内部属性。但是,原型链和继承超出了此答案的范围。

© www.soinside.com 2019 - 2024. All rights reserved.