解构赋值

解构赋值

使用解构从嵌套对象中获取值

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

const  {contact:{phone}}=User
console.log(phone)  // 输出10.

ES6解构过程添加一个默认值和赋值一个新的值

const info = {
  name: 'xiaobe',
  // age:null // 不存在 age 属性或者属性值为undefined，则解构添加默认值
}

const {  name: nickName,age="18" } = info;
console.log(nickName,age)

注意！因为解构是一个强标准类型，所以如果值为null时,是不会赋予默认值的

使用对象解构处理动态名称属性

我们经常将 API 响应数据作为 JavaScript 对象处理。这些对象可能包含动态数据，因此作为客户端，我们甚至可能事先不知道属性键名称。

const User = {
  name: '老王',
  age: ''
}

当我们将键作为参数传递时，我们可以编写一个返回User对象属性值的函数。这里我们使用了[],来接受参数，js会根据这个键对从对象中检索！

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}
const contact = getPropertyValue('contact');
const name = getPropertyValue('name');

console.log(contact, name); // 空  老王

当你想从对象中删除一个属性时，请使用解构赋值和扩展运算符

// 删除属性
function deleteA(obj){
  delete obj.A
  return obj;
}

// 使用解构赋值
const deleteA = ({A, ...rest} = {}) => rest;

解构赋值 (opens new window)、浅谈如何写出高X格的代码 (opens new window)