ES6之结构赋值——vue接口中应用-let { data: list } = data

ES6之结构赋值——vue接口中应用-let { data: list } = data

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

1、vue中应用场景

写法 let { data: list } = data

作用：es6的结构赋值，这个写法是给对象的变量重命名

解析

let {foo: baz } = {foo:‘abc’};

1、 foo 是用来做匹配的，用来去解构对象里面寻找值的
2、 baz 才是变量名， baz = ‘abc’

var {foo: baz } = {foo:'abc'};
console.log(baz)  //  "abc"

1

//基本用法
<!--let name='张三',age='18',sex='nan';-->

<script type="text/javascript">
    // 一一对应关系
    let [name,age,sex]=['李世民',18,'男']
	console.log(name); // '李世民'
	console.log(age);  // 18
	console.log(sex)   // '男'
</script>

2

//基本用法
<!--let name='张三',age='18',sex='nan';-->

<script type="text/javascript">
    //		let [name,age,sex]=['李世民',18,'男']
    //		console.log(name);
    //		console.log(age);
    //		console.log(sex)
    let{ name,age,sex}={name:'李世民',age:18,sex:'男'}
    // 不用一一对应
    console.log(name);  // '李世民'
    console.log(age); // 18
    console.log(sex) // '男'
</script>

2、实例

1

let node = {
    type: "Identifier",
    name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"

//vue3.0中  实际应用1-拆分数据并重新定义新数据
/**回访业绩提成 */
let visitList = []
state.formData.commissionBackFinish.forEach(item=>{
    let {listData, ...element} = item   //解构赋值  &  拆分数据并重新定义新数据-listData
    element['taskType'] = taskTypeMap['月度回访任务完成率']
    element['seq'] = visitList.length
    element['salaryVisitChildren'] = listData.map((_item, _index)=>{
        _item['seq'] = _index
        return _item
    })
    visitList.push(element)
})

//vue3.0中  实际应用2-获取接口数据res
var res = {data:{name:"李世民",id:12},code:200,foo:'abc',list:[3,4,]};
var {data,list } = res;
console.log(data) // {name:"李世民",id:12}
console.log(list)  // [3,4]

2-获取数组长度

var {length } = [3,4,5,6];
console.log(length)  // 4

//vue3.0中  实际应用
const funMethods = {
    add: () => {
        //添加前先获取length判断此对象字段是否都填
        let { length } = state.tableData;
        if (length > 0) {
            if (!state.tableData[length - 1].bman) {
                return ElMessage.error(`请填写第${length}个被介绍人`);
            }
        }
    }
}

3

// 初始化tree数据——接口中实际应用
const getData = async newVal => {
    await OrganizationManagementApi2.getPerforProConfDepartTree({
        time: newVal
    }).then(res => {
        let {departDtoList, ...others} = res.data||{}
        const nameMap = {
            2: '名称',
            1: '我的考核'
        }
        let name = nameMap[others.flag]
        if(!name){
            state.fomatData = [];
            return
        }

        let result:any = []
        result.push({
            name: nameMap[others.flag],
            ...others,
            children: deepFormatNode(departDtoList||[])
        })
        state.fomatData = result

    });