预赛

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

(普通)对象具有窗体

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

数组有这样的形式

[value, value, ...]

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

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

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数据类型，即数组和对象(以及如何处理这些数据)。如何解析JSON在问题中解释了解析JSON在JavaScript?．

进一步阅读材料

如何访问数组和对象是基本的JavaScript知识，因此最好阅读MDN JavaScript指南，特别是部分

使用对象 数组 雄辩的JavaScript -数据结构

---

---

访问嵌套数据结构

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

这里有一个例子:

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'];

---

我试图访问一个属性，但我只得到未定义的回来?

大多数情况下，当你获得undefined时，对象/数组根本没有这个名称的属性。

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

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

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

---

如果属性名是动态的，而我事先不知道它们怎么办?

如果属性名未知，或者我们想访问一个对象/数组元素的所有属性，可以使用for…in [MDN]循环用于对象，for [MDN]循环用于数组遍历所有属性/元素。

对象

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

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中，你可以使用Object。key [MDN]获取属性名数组:

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

数组

遍历数据的所有元素。数组中，我们使用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`.
}

One也可以用for…在数组上迭代，但有原因为什么这应该避免:为什么'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)的环境中，你也可以使用for…[MDN]循环，它不仅适用于数组，而且适用于任何可迭代对象:

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

在每次迭代中，对于…Of直接提供了可迭代对象的下一个元素，没有“索引”可以访问或使用。

---

如果我不知道数据结构的“深度”会怎样?

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

但是如果数据结构包含重复的模式，例如二叉树的表示，解决方案通常包括递归地访问数据结构的每一层。

下面是一个获取二叉树第一个叶节点的例子:

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 = { 42岁的代码: 项目:[{ id: 1、 名称:“foo” }, { id: 2 名称:“酒吧” }) }; 函数toArray(obj) { Const result = []; For (const prop in obj) { Const值= obj[道具]; If (typeof value === 'object') { result.push (toArray(值)); }其他{ result.push(价值); ｝ ｝ 返回结果; ｝ console.log (toArray(数据));

---

---

助手

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

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

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

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

这告诉我们数据。[1]是一个对象，展开它后，我们看到它有三个属性，id, name和__proto__。后者是用于对象的原型链的内部属性。但是，原型链和继承不在这个答案的范围之内。

我就是这么做的。

 let groups = [
        {
            id:1,
            title:"Group 1",
            members:[
                {
                    id:1,
                    name:"Aftab",
                    battry:'10%'
                },
                {
                    id:2,
                    name:"Jamal",
                },
                {
                    id:3,
                    name:"Hamid",
                },
                {
                    id:4,
                    name:"Aqeel",
                },
            ]
        },
        {
            id:2,
            title:"Group 2",
            members:[
                {
                    id:1,
                    name:"Aftab",
                    battry:'10%'
                },
                {
                    id:2,
                    name:"Jamal",
                    battry:'10%'
                },
                {
                    id:3,
                    name:"Hamid",
                },
               
            ]
        },
        {
            id:3,
            title:"Group 3",
            members:[
                {
                    id:1,
                    name:"Aftab",
                    battry:'10%'
                },
                
                {
                    id:3,
                    name:"Hamid",
                },
                {
                    id:4,
                    name:"Aqeel",
                },
            ]
        }
    ]
    
    groups.map((item) => {
      //  if(item.id == 2){
        item.members.map((element) => {
             if(element.id == 1){
                 element.battry="20%"
             }
         })
        //}
    })
    
    groups.forEach((item) => {
        item.members.forEach((item) => {
            console.log(item)
    })
    })

以防万一，有人在2017年或以后访问这个问题，并寻找一种容易记住的方法，这里有一篇关于在JavaScript中访问嵌套对象而不被迷惑的详细博客文章

无法读取未定义错误的属性“foo”

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

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

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

用这个符号，你永远不会碰到

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

你基本上检查user是否存在，如果不存在，你立即创建一个空对象。这样，下一层键将始终从一个存在的对象或空对象访问，而不会从undefined访问。

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

为了能够访问嵌套数组，您可以编写自己的数组reduce util。

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.

还有一种出色的类型处理最小库类型可以为您完成所有这些。

老问题，但没有人提到lodash(只是下划线)。

如果你已经在你的项目中使用lodash，我认为在一个复杂的例子中有一种优雅的方法:

选择1

_.get(response, ['output', 'fund', 'data', '0', 'children', '0', 'group', 'myValue'], '')

一样:

选择2

response.output.fund.data[0].children[0].group.myValue

第一个选项和第二个选项之间的区别是，在Opt 1中，如果你在路径中缺少一个属性(未定义)，你不会得到错误，它会返回第三个参数。

对于数组过滤器，lodash有_.find()，但我宁愿使用常规的filter()。但我仍然认为上面的方法_.get()在处理非常复杂的数据时非常有用。我在过去遇到过非常复杂的api，它很方便!

我希望它能对那些正在寻找操作标题所暗示的真正复杂数据的选项的人有用。

jQuery的grep函数允许你过滤数组:

var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; $.grep(data.items, function(item) { if (item.id === 2) { console.log(item.id); //console id of item console.log(item.name); //console name of item console.log(item); //console item object return item; //returns item object } }); // Object {id: 2, name: "bar"} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这里有4种不同的方法来获得javascript的object属性:

Var数据= { 42岁的代码: 项目:[{ id: 1、 名称:“foo” }, { id: 2 名称:“酒吧” }) }; //方法1 让method1 = data.items[1].name; console.log (method1); //方法二 Let method2 = data.items[1]["name"]; console.log (method2); //方法3 Let method3 = data["items"][1]["name"]; console.log (method3); //方法四解构 让{items: [， {name: second_name}]} =数据; console.log (second_name);