1. 数组包对象的方式,如何拿到对象的值
const people = [
{ name: 'John', age: 30 },
{ name: 'Mary', age: 25 },
{ name: 'Bob', age: 40 }
];
// 获取第一个对象的name属性值
console.log(people[0].name); // 输出 "John"
// 获取第二个对象的age属性值
console.log(people[1]['age']); // 输出 25
在上面的例子中，我们定义了一个名为people的数组，该数组包含三个对象。我们可以使用数组索引和点号或方括号操作符来访问数组中的对象及其属性的值。例如，people[0].name将返回字符串"John"，而people[1]['age']将返回数字25。
需要注意的是，当使用方括号操作符来访问对象的属性值时，属性名必须用引号括起来。如果属性名中包含特殊字符（例如空格），则必须使用引号括起来。同时，使用方括号操作符还可以动态地访问属性值，例如people[index][propertyName]中的index和propertyName可以是变量。
另外，如果数组中的每个对象具有相同的属性，例如在上面的例子中，每个对象都具有name和age属性，则可以使用map方法来遍历数组并获取每个对象的属性值。以下是一个示例：
const names = people.map(person => person.name);
console.log(names); // 输出 ["John", "Mary", "Bob"]
在上面的例子中，我们使用map方法遍历people数组，并返回每个对象的name属性值。最终，我们得到一个包含所有name属性值的新数组names。
2. setState修改state里面的数组
在React中，可以使用setState方法修改组件的状态。如果状态中包含数组，可以使用setState方法和数组的方法（例如concat、slice、map等）来修改数组。以下是一些常见的示例：
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
numbers: [1, 2, 3, 4, 5]
};
}
// 使用concat方法向数组末尾添加一个新元素
handleAddNumber1() {
const newNumbers = this.state.numbers.concat(6);
this.setState({ numbers: newNumbers });
}
// 使用展开操作符（...）向数组末尾添加一个新元素
handleAddNumber2() {
const newNumbers = [...this.state.numbers, 6];
this.setState({ numbers: newNumbers });
}
// 使用slice方法从数组中删除一个元素
handleDeleteNumber() {
const newNumbers = this.state.numbers.slice(0, -1);
this.setState({ numbers: newNumbers });
}
// 使用map方法更新数组中特定元素的值
handleUpdateNumber(id, newValue) {
const newNumbers = this.state.numbers.map((number, index) => {
if (index === id) {
return newValue;
} else {
return number;
}
});
this.setState({ numbers: newNumbers });
}
render() {
return (
<div>
<h2>Numbers:</h2>
<ul>
{this.state.numbers.map((number, index) => (
<li key={index}>
{number}
<button onClick={() => this.handleUpdateNumber(index, number + 1)}>
Update
</button>
</li>
))}
</ul>
<button onClick={() => this.handleAddNumber1()}>Add Number (concat)</button>
<button onClick={() => this.handleAddNumber2()}>Add Number (spread operator)</button>
<button onClick={() => this.handleDeleteNumber()}>Delete Number</button>
</div>
);
}
}
export default MyComponent;
在上面的例子中，我们定义了一个名为numbers的数组，该数组包含数值1到5。我们定义了几个方法来演示如何使用setState方法和数组的方法来修改数组。例如，handleAddNumber1方法使用concat方法向数组末尾添加一个新元素，而handleAddNumber2方法使用展开操作符（...）来创建一个包含原始数组中所有元素和一个新元素的新数组。handleDeleteNumber方法使用slice方法从数组中删除最后一个元素。handleUpdateNumber方法使用map方法来更新特定索引的元素的值。
在render方法中，我们使用map方法遍历numbers数组，并渲染每个元素及其对应的Update按钮。当按钮被点击时，我们调用handleUpdateNumber方法，并传递要更新的元素的索引和新值。handleUpdateNumber方法将更新特定索引的元素，并使用setState方法将更新后的数组赋值给numbers属性。
