对象使用的小技巧

对象解构

快速地把对象中的数据赋值到当前环境的变量中

let person = {
	name:'Matt',
	age: 27
}

let { name: personName, age: personAge } = person
// 注意前面要有个声明的关键字 这里是let 两个变量就同时声明了
// 整个看起来就像是反向的字面量对象的生成
// personName 是 Matt
// personAge 是 27


let {name, age} = person
// 这样就是用了和属性名一样的同名变量


let {name, job} = person
// job这个变量没有对应在对象里面的属性 因此它的值就是 undefined

let { name, job="Software engineer" } = person
// 可以添加默认值

​
// 数字和字符串 也可以被解构 但是原始值被解构时会在后台被转换成包装类对象
let { length } = 'foobar';
console.log(length) // 6 这里其实就是字符串包装类的属性length被解构出来了

let { constructor:c } = 4;
console.log(c === Number); // true  这里其实就是数字的包装类的构造函数被解构出来了

null 和 undefined 不能被解构。会报错

​

 嵌套解构

// 把一个对象里面的属性通过解构赋值给另一个对象
let person = {
	name:'name',
	age:27,
	job:{
		title:'Software engineer'
	}
}



// 可以使用嵌套结构 把对象中层级比较深的某个数据取出来赋值给当前环境中的变量
let { job: { title }} = person
console.log(title) // Software engineer

更方便的对象语法

 属性值简写

let name = "Matt"
let person = {
	name   // 相当于是 name:name
};

方法简写

在 ES6 中，您可以在对象字面量中使用简写语法来定义方法，而无需使用 function 关键字：

const obj = {
  methodName() {
    // 方法体
  }
};

原本应该是：

const obj = {
  methodName: function() {
    // 方法体
  }
};

 

在不变性要求下修改对象

  const [friends, setFriends] = useState([
    {
      id: 118836,
      name: "Clark",
      image: "https://i.pravatar.cc/48?u=118836",
      balance: -7,
    },
    {
      id: 933372,
      name: "Sarah",
      image: "https://i.pravatar.cc/48?u=933372",
      balance: 20,
    },
    {
      id: 499476,
      name: "Anthony",
      image: "https://i.pravatar.cc/48?u=499476",
      balance: 0,
    },
  ]);

  function handleSplitBill(value) {
    setFriends((friends) =>
      friends.map((friend) =>
        friend.id === selectedFriend.id
          ? { ...friend, balance: value + friend.balance }
          : friend
      )
    );
  }

主要是{ ...friend, balance: value + friend.balance }。