数组对象属性方法（二）获取修改、判断属性：es6、.map()、.forEach()、.from()、this.$set()

例：var arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]

 一、获取某属性值

1、es6从数组中获取属性值

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
const [first, second] = arr;// 提取数组中第一个和第二个元素
console.log(first, second); // {id: 1,name: "小明"} {id: 2,name: "小红"}

2、es6从对象中获取属性值

const person = {
    name: '小明',
    age: '10',
    score: {
        Chinese: '88',
        math: '79'
    }
}
const {name, score: {math}} = person;
console.log(name,math); //'小明' '79'

二、获取（修改）所有对象中包含的某属性值

1、.map()

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
const names = arr.map(item => item.name)
console.log(names)// ["小明", "小红", "小蓝"]

        抽取成公共方法

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
function getAttrs(array,attr) {
    return array.map(item => item[attr]);
}
getAttrs(arr,'id') // [1, 2, 3]
getAttrs(arr,'name') // ["小明", "小红", "小蓝"]

        修改属性返回新数组（不修改原数组）

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
let newArr = arr.map(item=>{
    return {id:item.id++,...item};
})
console.log(newArr); //[{id: 2,name: "小明"},{id: 3,name: "小红"},{id: 4,name: "小蓝"}]

2、.forEach()

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
const userName = [];
arr.forEach(item => { userName.push(item.name); })
console.log(userName); //  ["小明", "小红", "小蓝"]

       修改属性（修改原数组）

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
arr.forEach(item => item.id++)
console.log(arr); //[{id: 2,name: "小明"},{id: 3,name: "小红"},{id: 4,name: "小蓝"}]

3、.from()

const arr = [{id: 1,name: "小明"},{id: 2,name: "小红"},{id: 3,name: "小蓝"}]
const n = Array.from(arr,({name})=>name);
console.log(n); // ["小明", "小红", "小蓝"]

三、动态修改、添加属性

this.$set()

        this.$set(要修改的数组，数组下标，要修改/添加的值)

       1、修改、添加数组属性值

var arr = [1, 2, 3];
this.$set(arr, 3, 4);
//console.log(arr);[1, 2, 3，4]
this.$set(arr, 0, 4);
//console.log(arr);[4, 2, 3]

        2、修改、添加对象属性值

var student= {name: '李明'};
this.$set(student, 'name', '陈明');
this.$set(student, 'sex', '男');//追加age属性并赋值
console.log(student); //{name: '陈明', 'sex': '男'}

        3、修改、添加数组对象属性值

materialList:[{name: "小红",fileList: []}]
this.$set(
	this.materialList,index,
	{...this.materialList[index], fileList:[{name:'文件名',url:'http://123456.com'}] }
)
//添加后结果
materialList:[{name: "小红",fileList: [{name:'文件名',url:'http://123456.com'}] }]