JavaScript – 小技巧 Tips

1e6 等价于 1 + 后面 6 个零

console.log(1e6 === 1_000_000);

 

模拟 C# 的 Record Deconstruct

复制代码
class Size implements Iterable<number> {
    constructor(
        public width : number, 
        public height: number
    ) {}

    *[Symbol.iterator]() {
        yield this.width;
        yield this.height
    }
}

const size = new Size(100, 200);

const [width, height] =  size; // 100, 200
复制代码

利用 Iterable 可以让对象支持 Array 式 的 Deconstruct.

property 数量可控的情况下,这种方式会比 Object 式 的 Deconstruct 容易重命名。 

TypeScript 类型的问题 

虽然 Generator 可以让对象具有 Deconstruct 的能力,但是类型却并不是 Tuple。

上面例子中碰巧 width 和 height 都是 number 所以才可以这样写,如果是不同类型还是得写 deconstruct 方法。

像下面这样, firstName 的类型会是 string | number

复制代码
const person = {
    firstName : 'Derrick',
    lastName : 'Yam',
    age: 11,

    *[Symbol.iterator]() {
        yield this.firstName;
        yield this.lastName;
        yield this.age;
    }
}

const [firstName, lastName, age] = person; 
复制代码

我们只能另外写一个方法了

复制代码
const person = {
    firstName : 'Derrick',
    lastName : 'Yam',
    age: 11,

    deconstruct() {
       return [this.firstName, this.lastName, this.age] as const;
    }
}
Object.defineProperty(person, 'deconstruct', {
    enumerable: false
});
复制代码

 

Conditional add Property

复制代码
function doSomething(num?: number) {
  const obj = {
    str: '',
    ...(num !== undefined && { num }),
  };
  console.log(obj);
}

doSomething(); // { str: '' } 没有 num 属性
复制代码

 

posted @   兴杰  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示