给数组的每一项添加一个新的属性

前端给数组每项添加新属性和值有多种实现方法： - **使用`map`方法**：可以遍历原始数组，并为每个元素对象添加新属性，同时保留原始对象的所有属性。例如，使用`map`方法为每个元素对象添加一个名为`newProperty`的新属性，属性值为`'newValue'`，代码如下： ```javascript const arr = [ { id: 1 }, { id: 2 }, { id: 3 } ]; const newArr = arr.map(item => ({ ...item, newProperty: 'newValue' })); console.log(newArr); ``` 在处理后端返回的数据时，若返回的数据中没有符合组件的属性，可通过`map`遍历返回的数据，并使用扩展运算符自己添加一个`title`字段来保障组件的渲染，示例代码如下： ```javascript if (res.data.success === true) { this.Checkbox = res.data.resultData.map(item => ({ ...item, title: item.code })); console.log('新数组', this.Checkbox); } ``` - **使用`forEach`方法**：通过`forEach`方法遍历数组，直接为每个元素添加新属性。以下是使用`forEach`方法为数组元素添加`phone`和`sex`属性的示例： ```javascript this.list = [ { name: '张三' }, { name: '李四' } ]; this.list.forEach(item => { item.phone = '54321'; item.sex = '女'; }); console.log('this.list改变后的值', this.list); ``` - **Vue 中使用`$set`方法**：在 Vue 中，双向绑定的属性需在`data`里面预先定义好，否则不会触发双向绑定事件，后续如需新增字段需使用 Vue 的`$set`方法来添加。示例代码如下： ```javascript this.model = { name: '示例对象' }; this.$set(this.model, 'icon', '2222'); ```