当前位置: 首页 > 面试题库 >

JavaScript如何访问和处理嵌套对象,数组或JSON?

扶杜吟
2023-03-14
问题内容

我有一个包含对象和数组的嵌套数据结构。如何提取信息,即访问特定或多个值(或键)?

例如:

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

如何访问name中的第二项items


问题答案:

Preliminaries

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

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

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

数组具有以下形式

[value, value, ...]

数组和对象都公开一个key -> 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
[?]。

访问嵌套数据结构

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

这是一个例子:

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

假设我们要访问name第二个项目。

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

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

data.items

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

data.items[1]

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

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

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

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

我正在尝试访问物业,但我只能undefined回来?

大多数时候,当你获取时undefined,对象/数组根本没有具有该名称的属性。

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

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

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

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

如果属性名称未知或我们要访问的对象的所有属性/数组元素,我们可以使用for...in
[MDN]
环为目的和for
[MDN] 环用于在所有属性/元素阵列进行迭代。

对象

要遍历的所有属性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
}

根据对象的来源(以及你要执行的操作),你可能必须在每次迭代中测试该属性是否确实是该对象的属性,还是它是继承的属性。你可以使用[Object#hasOwnProperty
[MDN]] 进行此操作。

作为for...inwith的替代hasOwnProperty,你可以使用[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的浏览器支持的增加,数组方法[forEach
[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)的环境中,你还可以使用 [MDN] 循环,该循环不仅适用于数组,而且适用于任何
可迭代的方法 :[ for...of
][]

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);



const root = {

    leftChild: {

        leftChild: {

            leftChild: null,

            rightChild: null,

            data: 42

        },

        rightChild: {

            leftChild: null,

            rightChild: null,

            data: 5

        }

    },

    rightChild: {

        leftChild: {

            leftChild: null,

            rightChild: null,

            data: 6

        },

        rightChild: {

            leftChild: null,

            rightChild: null,

            data: 7

        }

    }

};

function getLeaf(node) {

    if (node.leftChild) {

        return getLeaf(node.leftChild);

    } else if (node.rightChild) {

        return getLeaf(node.rightChild);

    } else { // node must be a leaf node

        return node;

    }

}



console.log(getLeaf(root).data);

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

这是一个将嵌套数据结构内的所有原始值添加到数组中的示例(假设它不包含任何函数)。如果遇到一个对象(或数组),则只需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;
}



const data = {

  code: 42,

  items: [{

    id: 1,

    name: 'foo'

  }, {

    id: 2,

    name: 'bar'

  }]

};





function toArray(obj) {

  const result = [];

  for (const prop in obj) {

    const value = obj[prop];

    if (typeof value === 'object') {

      result.push(toArray(value));

    } else {

      result.push(value);

    }

  }

  return result;

}



console.log(toArray(data));

Helpers

由于复杂对象或数组的结构不一定很明显,因此我们可以检查每个步骤的值来决定如何进一步移动。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]是一个对象,展开后,我们看到它具有三个属性idname__proto__。后者是用于对象原型链的内部属性。但是,原型链和继承超出了此答案的范围。



 类似资料:
  • 我有一个包含对象和数组的嵌套数据结构。如何提取信息,即访问特定或多个值(或键)? 例如: 如何访问中第二个项目的?

  • 尝试使用所有独特的硬币进行选择过滤器,但无法正确到达其末尾。 在循环浏览数据时,我可以得到所有硬币的列表。 我还想使用Set方法和spread操作符来获得唯一的值,但我不知道如何组合所有这些。

  • 问题内容: 我有基于json的数据结构,其中包含嵌套对象。为了访问特定的数据元素,我一直将对对象属性的引用链接在一起。例如: 如果未定义b或bc,则将失败并显示错误。但是,我想获得一个值(如果存在的话),否则只是未定义。无需检查链中每个值是否存在的最佳方法是什么? 我想尽可能地保持这种方法,所以我不必添加大量的辅助方法,例如: 要么 我也想尝试避免使用try / catch构造,因为这不是错误,因

  • 本文向大家介绍如何使用JavaScript map()方法访问嵌套对象?,包括了如何使用JavaScript map()方法访问嵌套对象?的使用技巧和注意事项,需要的朋友参考一下 假设以下是我们的嵌套对象- 使用用typeof一起访问嵌套对象。以下是代码- 示例 要运行上述程序,您需要使用以下命令- 在这里,我的文件名为demo119.js。 输出结果 这将产生以下输出-

  • }; 因此,我创建了一个对象变量“stock”。包含不同产品的代码、名称、成本和数量。 后来,我创建了一个函数“viewAllStock()”来在我的网站(超文本标记语言)中创建一个表。但是当我运行这个程序时,我在我创建的“产品代码”单元格下得到它 产品代码 [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] 那么,如何使用Javascript在网站(超文本标记语言)中获取标题“

  • 问题内容: 我有以下数组,当我做得到: 我试图按如下方式访问数组: 但这显示了我: 未定义0 注意: 我从 Facebook SDK 4 获得此数组,所以我不知道原始的数组结构。 作为示例,如何访问数组中的值? 问题答案: 要访问或您如何使用两个不同的运算符。 数组 要访问数组元素,您必须使用,或者您不会看到太多,但也可以使用is 。 声明数组和访问数组元素之间的区别 定义数组和访问数组元素是两件