8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Gen 2月前

332 0

我有一个包含对象和数组的嵌套数据结构。我如何提取信息,即访问特定或多个值(或键)?例如:var data = { code: 42, i...

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

例如:

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

我如何访问 name 中的第二项 items

帖子版权声明 1、本帖标题:如何访问和处理嵌套对象、数组或 JSON?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Gen在本站《dictionary》版块原创发布, 转载请注明出处!
最新回复 (0)
  • P S 2月前 0 只看Ta
    引用 2

    有很多方法可以访问对象中对象数组中的特定名称。对于这种情况,您可以使用 \'data.items[1].name\' 访问它,对于任何自定义名称和其他项目,您可以这样使用 \'data.items[i][nameofvariable] 。这里 i 是数组中的位置,nameofvariable 是您想要访问的键。有关访问的更多详细信息,您可以查看此链接

  • 另一个方便而小巧的库 SelectQL.js 受到结构化查询语言 (SQL) 的启发,用于以简单而熟悉的方式访问和操作对象。它使用 Builder 设计模式支持复杂的对象和数组。

  • 准备工作

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

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

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

    数组的形式为

    [value, value, ...]
    

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

    可以使用 点符号

    const value = obj.someProperty;
    

    括号表示法 ,如果属性名称不是有效的 JavaScript identifier name [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 数据类型,即数组和对象(以及如何使用这些数据类型,我们刚刚已经解释过)。如何解析 JSON 已在问题“ 在 JavaScript 中解析 JSON?” .

    进一步阅读材料

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

    • 使用对象
    • 数组
    • Eloquent JavaScript 数据结构


    访问嵌套数据结构

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

    以下是一个例子:

    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 or 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...in with 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 它来迭代数组,但是有理由避免这样做: 为什么在 JavaScript 中使用数组“for(var item in list)”被认为是不好的做法? .

    随着浏览器对 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)的环境中,你还可以使用 for...of [MDN] 循环,它不仅适用于数组,还适用于任何 iterable :

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

    在每次迭代中, for...of 直接给我们可迭代的下一个元素,没有“索引”可供访问或使用。


    如果我不知道数据结构的“深度”该怎么办?

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

    但是如果数据结构包含重复模式,例如二叉树的表示,则解决方案通常包括 recursively [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));


    助手

    由于复杂对象或数组的结构不一定显而易见,我们可以检查每一步的值来决定如何进一步移动。console.log 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__ 。后者是用于对象原型链的内部属性。不过,原型链和继承超出了本答案的范围。

  • 对于那些无法定义数据的人来说,可以通过可选链式连接来解决。你可以在这个博客中阅读更多相关信息。freecodecamp.org/news/how-the-question-mark-works-in-javascript

  • “JavaScript 只有一种可以包含多个值的数据类型:对象。”——一旦记录和元组提案到达第 4 阶段(甚至是第 3 阶段?),我们就不会忘记更新这一点。

  • 您可以通过这种方式访问

    data.items[1].name
    

    或者

    data["items"][1]["name"]
    

    两种方式都是平等的。

  • 对象和数组有很多内置方法可以帮助您处理数据。

    注意:在许多示例中,我使用了 箭头函数 。它们类似于 函数表达式 ,但它们 this 以词汇方式绑定值。

    Object.keys() , Object.values() (ES 2017) 和 Object.entries() (ES 2017)

    Object.keys() 返回对象键的数组, Object.values() 返回对象值的数组,并 Object.entries() 返回对象键和对应值的数组,格式如下 [key, value] .

    const obj = {
      a: 1
     ,b: 2
     ,c: 3
    }
    
    console.log(Object.keys(obj)) // ['a', 'b', 'c']
    console.log(Object.values(obj)) // [1, 2, 3]
    console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]

    Object.entries() 使用 for-of 循​​环和解构赋值

    const obj = {
      a: 1
     ,b: 2
     ,c: 3
    }
    
    for (const [key, value] of Object.entries(obj)) {
      console.log(`key: ${key}, value: ${value}`)
    }

    使用 Object.entries() for-of 循​​环解构赋值 来迭代结果非常方便 .

    F但-of 循​​环允许您迭代数组元素。语法是 for (const element of array) (我们可以用 或 替换 const var or let 如果我们不打算修改 , const 最好使用 element )。

    解构赋值允许你从数组或对象中提取值并将其赋给变量。在这种情况下, const [key, value] 意味着我们不是将数组赋给 [key, value] element 将该数组的第一个元素赋给 key ,将第二个元素赋给 value 。它相当于这样:

    for (const element of Object.entries(obj)) {
      const key = element[0]
           ,value = element[1]
    }
    

    正如你所见,解构使得这一切变得简单得多。

    Array.prototype.every() Array.prototype.some()

    如果指定的回调函数 该() true 数组的 true 每个 every 方法返回 返回,则() true 某些 true (至少一个)元素 some 方法返回

    const arr = [1, 2, 3]
    
    // true, because every element is greater than 0
    console.log(arr.every(x => x > 0))
    // false, because 3^2 is greater than 5
    console.log(arr.every(x => Math.pow(x, 2) < 5))
    // true, because 2 is even (the remainder from dividing by 2 is 0)
    console.log(arr.some(x => x % 2 === 0))
    // false, because none of the elements is equal to 5
    console.log(arr.some(x => x === 5))

    Array.prototype.find() Array.prototype.filter()

    find() 方法返回 满足所提供回调函数的 第一个 filter() 满足所提供回调函数 所有 的数组

    const arr = [1, 2, 3]
    
    // 2, because 2^2 !== 2
    console.log(arr.find(x => x !== Math.pow(x, 2)))
    // 1, because it's the first element
    console.log(arr.find(x => true))
    // undefined, because none of the elements equals 7
    console.log(arr.find(x => x === 7))
    
    // [2, 3], because these elements are greater than 1
    console.log(arr.filter(x => x > 1))
    // [1, 2, 3], because the function returns true for all elements
    console.log(arr.filter(x => true))
    // [], because none of the elements equals neither 6 nor 7
    console.log(arr.filter(x => x === 6 || x === 7))

    数组.prototype.map()

    map() 方法返回一个数组,其中包含对数组元素调用提供的回调函数的结果。

    const arr = [1, 2, 3]
    
    console.log(arr.map(x => x + 1)) // [2, 3, 4]
    console.log(arr.map(x => String.fromCharCode(96 + x))) // ['a', 'b', 'c']
    console.log(arr.map(x => x)) // [1, 2, 3] (no-op)
    console.log(arr.map(x => Math.pow(x, 2))) // [1, 4, 9]
    console.log(arr.map(String)) // ['1', '2', '3']

    数组.prototype.reduce()

    reduce() 方法通过调用具有两个元素的提供的回调函数将数组减少为单个值。

    const arr = [1, 2, 3]
    
    // Sum of array elements.
    console.log(arr.reduce((a, b) => a + b)) // 6
    // The largest number in the array.
    console.log(arr.reduce((a, b) => a > b ? a : b)) // 3

    reduce() 方法采用可选的第二个参数,即初始值。当您调用的数组 reduce() 可以有零个或一个元素时,这很有用。例如,如果我们想创建一个 sum() 以数组为参数并返回所有元素总和的函数,我们可以这样写:

    const sum = arr => arr.reduce((a, b) => a + b, 0)
    
    console.log(sum([]))     // 0
    console.log(sum([4]))    // 4
    console.log(sum([2, 5])) // 7
  • anu 2月前 0 只看Ta
    引用 9

    这是我最喜欢的答案。您还可以添加一个 for 循环示例,只是一个特定的嵌套数据,例如 Object.keys(data[\'items\']).forEach(function(key) { console.log(data[\'items\'][key].id); console.log(data[\'items\'][key].name); });

  • 如果您尝试 item id 示例结构中的 name ,而不知道它在数组中的位置,最简单的方法是使用 underscore.js 库:

    var data = {
        code: 42,
        items: [{
            id: 1,
            name: 'foo'
        }, {
            id: 2,
            name: 'bar'
        }]
    };
    
    _.find(data.items, function(item) {
      return item.id === 2;
    });
    // Object {id: 2, name: "bar"}
    

    根据我的经验,使用高阶函数而不是 f循环 or for..in 会使代码更容易推理,因此更易于维护。

    仅我的观点。

  • rawr 2月前 0 只看Ta
    引用 11

    有时,使用字符串访问嵌套对象是可行的。简单的方法是第一层,例如

    var obj = { hello: "world" };
    var key = "hello";
    alert(obj[key]);//world
    

    但对于复杂的 JSON,情况通常并非如此。随着 JSON 变得越来越复杂,在 JSON 中查找值的方法也变得越来越复杂。使用递归方法来浏览 JSON 是最好的,而如何利用该递归将取决于要搜索的数据类型。如果涉及条件语句, JSON 搜索 可能是一个很好的工具。

    如果访问的属性已经已知,但是路径很复杂,例如在此对象中

    var obj = {
     arr: [
        { id: 1, name: "larry" },    
        { id: 2, name: "curly" },
        { id: 3, name: "moe" }
     ]
    };
    

    并且你知道你想获取对象中数组的第一个结果,也许你想使用

    var moe = obj["arr[0].name"];
    

    但是,这将导致异常,因为没有具有该名称的对象属性。能够使用此功能的解决方案是展平对象的树形结构。这可以递归完成。

    function flatten(obj){
     var root = {};
     (function tree(obj, index){
       var suffix = toString.call(obj) == "[object Array]" ? "]" : "";
       for(var key in obj){
        if(!obj.hasOwnProperty(key))continue;
        root[index+key+suffix] = obj[key];
        if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"[");
        if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+".");   
       }
     })(obj,"");
     return root;
    }
    

    现在,复杂对象可以被压平

    var obj = previous definition;
    var flat = flatten(obj);
    var moe = flat["arr[0].name"];//moe
    

    下面是 使用此方法的 jsFiddle 演示

  • 要访问嵌套属性,您需要指定其名称,然后搜索该对象。

    如果您已经知道确切的路径,那么您可以在脚本中对其进行硬编码,如下所示:

    data['items'][1]['name']
    

    这些也有效 -

    data.items[1].name
    data['items'][1].name
    data.items[1]['name']
    

    当您事先不知道确切的名称,或者用户为您提供了名称时。 然后需要动态搜索数据结构。 有人建议可以使用循环进行搜索 for ,但有一种非常简单的方法可以使用 Array.reduce .

    const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }
    const path = [ 'items', '1', 'name']
    let result = path.reduce((a,v) => a[v], data)
    

    路径是这样说的:首先获取带有键的对象 items ,该对象恰好是一个数组。然后获取 1 -st 元素(0 索引数组)。最后获取该数组元素中带有键的对象 name ,该对象恰好是字符串 bar .

    如果你有一条很长的路,你甚至可以用它 String.split 来让这一切变得更容易——

    'items.1.name'.split('.').reduce((a,v) => a[v], data)
    

    这只是普通的 JavaScript,没有使用任何第三方库,如 jQuery 或 lodash。

  • 这里提到了获取 javascript 对象属性的 4 种不同方法:

    var data = {
      code: 42,
      items: [{
        id: 1,
        name: 'foo'
      }, {
        id: 2,
        name: 'bar'
      }]
    };
    
    // Method 1
    let method1 = data.items[1].name;
    console.log(method1);
    
    // Method 2
    let method2 = data.items[1]["name"];
    console.log(method2);
    
    // Method 3
    let method3 = data["items"][1]["name"];
    console.log(method3);
    
    // Method 4  Destructuring
    let { items: [, { name: second_name }] } = data;
    console.log(second_name);
  • 简单的解释是:

    var data = {
        code: 42,
        items: [{
            id: 1,
            name: 'foo'
        }, {
            id: 2,
            name: 'bar'
        }]
    };
    
    /*
    1. `data` is object contain `items` object*/
    console.log(data);
    
    /*
    2. `items` object contain array of two objects as elements*/
    console.log(data.items);
    
    /*
    3. you need 2nd element of array - the `1` from `[0, 1]`*/
    console.log(data.items[1]);
    
    /*
    4. and you need value of `name` property of 2nd object-element of array)*/
    console.log(data.items[1].name);
  • 只是想快速评论一下这个问题,因为这个问题的作者没有选出最佳答案。这实际上是最佳答案。所以如果有人正在寻找这个问题的答案,这是最好的答案。

  • 您可以使用 lodash _get 功能:

    var object = { 'a': [{ 'b': { 'c': 3 } }] };
    
    _.get(object, 'a[0].b.c');
    // => 3
    
  • 这个问题相当老了,所以作为当代的更新。随着 ES2015 的出现,有其他方法可以获取所需的数据。现在有一项称为 对象解构 ,用于访问嵌套对象。

    const data = {
      code: 42,
      items: [{
        id: 1,
        name: 'foo'
      }, {
        id: 2,
        name: 'bar'
      }]
    };
    
    const {
      items: [, {
        name: secondName
      }]
    } = data;
    
    console.log(secondName);

    上面的例子 secondName name 一个名为的数组中的键 items ,唯一的 , 意思是跳过数组中的第一个对象。

    值得注意的是,对于这个例子来说,它可能有些过度,因为简单的数组访问更容易阅读,但它在分解一般对象时很有用。

    这是针对您的特定用例的非常简短的介绍,解构可能是一种不寻常的语法,刚开始很难习惯。我建议阅读 Mozilla 的解构赋值文档 以了解更多信息。

  • var ourStorage = {
    
    
    "desk":    {
        "drawer": "stapler"
      },
    "cabinet": {
        "top drawer": { 
          "folder1": "a file",
          "folder2": "secrets"
        },
        "bottom drawer": "soda"
      }
    };
    ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"
    

    或者

    //parent.subParent.subsubParent["almost there"]["final property"]
    

    基本上,在其下方展开的每个后代之间使用一个点,并且当您的对象名称由两个字符串组成时,您必须使用 [\'obj Name\'] 表示法。否则,只需一个点就足够了;

    来源: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects

    除此之外,访问嵌套数组的方式如下:

    var ourPets = [
      {
        animalType: "cat",
        names: [
          "Meowzer",
          "Fluffy",
          "Kit-Cat"
        ]
      },
      {
        animalType: "dog",
        names: [
          "Spot",
          "Bowser",
          "Frankie"
        ]
      }
    ];
    ourPets[0].names[1]; // Outputs "Fluffy"
    ourPets[1].names[0]; // Outputs "Spot"
    

    来源: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays/

    另一个更有用的文档描述了上述情况: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

    通过点步行访问属性: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

  • 以防万一,有人在 2017 年或以后看到这个问题,并寻找一种 容易记住的 如何在 JavaScript 中访问嵌套对象的 详尽博客文章, 而不会被

    无法读取未定义 错误

    1. Oliver Steele 的嵌套对象访问模式

    最简单、最干净的方法是使用 Oliver Steele 的嵌套对象访问模式

    const name = ((user || {}).personalInfo || {}).name;
    

    有了这种符号,你永远不会遇到

    无法读取未定义的属性“名称”

    您基本上会检查用户是否存在,如果不存在,则动态创建一个空对象。这样,下一级键将 始终从存在的对象或空对象访问 ,但永远不会从未定义的对象访问。

    2. 使用数组 Reduce 访问嵌套对象

    为了能够访问嵌套数组,您可以编写自己的数组减少实用程序。

    const getNestedObject = (nestedObj, pathArr) => {
        return pathArr.reduce((obj, key) =>
            (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
    }
    
    // pass in your object structure as array elements
    const name = getNestedObject(user, ['personalInfo', 'name']);
    
    // to access nested array, just pass in array index as an element the path array.
    const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
    // this will return the city from the first address item.
    

    还有一个优秀的类型处理最小库 typy ,可以为您完成所有这些工作。

  • 这个问题主要涉及访问存在的属性。已经有一个关于您所指的问题(并且已经包括了您的大多数解决方案):安全地访问 JavaScript 嵌套对象或使用字符串键访问嵌套的 JavaScript 对象。但无论如何:“不幸的是,您无法使用此技巧访问嵌套数组。”为什么不行?数组是对象,所以它应该同样有效。您能提供一个不适用的例子吗?

返回
作者最近主题: