es扩展运算符中的一些细节

今天在使用的过程中发现了一个bug所以就测试了一下做记录

简介

扩展运算符应该是es6添加的特性如：

let age = {age: 15}; 
let name = {name: "Amy"}; 

let person = {...age, ...name}; 

console.log(person); 
// {age: 15, name: "Amy"}

本文还涉及到对象简化语法中的简化get、set语法

在执行下面方法的时候ts与js表现不一致

const x = {
  ...{
    get yyy() {
      console.log("执行了yyy的get");
      return "yyy:" + Math.random().toString();
    },
  },
  ...{
    get zzz() {
      console.log("执行了zzz的get");
      return "zzz:" + Math.random();
    },
  },
  get xxx() {
    console.log("执行了xxx的get");
    return "xxx:" + Math.random();
  },
};
console.log("初始化完成");

console.log("---------------------------------------");

console.log(x.xxx);
console.log(x.xxx);
console.log(x.xxx);

console.log("---------------------------------------");

console.log(x.yyy);
console.log(x.yyy);
console.log(x.yyy);

console.log("---------------------------------------");

console.log(x.zzz);
console.log(x.zzz);
console.log(x.zzz);

下面是在ts中执行的截图

解析：

ts在执行上面语法时将xxx所属对象和zzz所属对象放到了yyy里面也就是第一个使用...语法的对象

另一个是js中运行情况

解析：

js执行时将yyy和zzz放到了主对象xxx所属对象中

总结

并且并初始执行的对象的随机操作都不管用了，代表已经变成了值，而不在是set方法，这个问题希望大家注意可能不小心就入坑了，解决办法好像也没有，只能在用到get时就不再使用get否则这种不一致的行为可能让开发环境和生产环境运行结果不一致