ES6之结构赋值——vue接口中应用-let { data: list } = data
ES6之结构赋值——vue接口中应用-let { data: list } = dataES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构1、vue中应用场景写法let { data: list } = data作用:es6的结构赋值,这个写法是给对象的变量重命名解析let {foo: baz } = {foo:‘abc’};1、 foo 是用来做匹配的,用来去解构对象里
·
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
});
更多推荐
已为社区贡献72条内容
所有评论(0)