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

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

Gen 2月前

335 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)
  • 对象和数组有很多内置方法可以帮助您处理数据。

    注意:在许多示例中,我使用了 箭头函数 。它们类似于 函数表达式 ,但它们 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
返回
作者最近主题: