记一次写TS时，遇到的坑

当有时候想要创建一个 [[],[],[]]的时候，你会用什么方式尼？

[...Array(3)].fill([]);

[...Array(3)].map(i=>[]);

亦或者会想到

Array(3).fill(0).map(i=>[])

来给大家比较下这三个的区别

[...Array(3)].fill([]);

有坑，相信不少人也遇到过,具体的表现可以看一下这段代码

var b = [...Array(3)].fill([]);
b[0].push('qiupu'); 
console.log(b);
// 0: ["qiupu"]
// 1: ["qiupu"]
// 2: ["qiupu"]

这个就不再多解释了，看不懂的可以加下群768901972

[...Array(3)].map(i=>[]);

在JS里写的时候是没有问题的，

var a = [...Array(3)].map(i=>[]); 
a[0].push('qiupu');
console.log(a);
// 0: ["qiupu"]
// 1: []
// 2: []

Array(3).fill(0).map(i=>[])

这个看着和上面那个没什么区别，就多了一次fill(0),那他的意义是什么，就是先填充0，避免了 TS 在转译目标为ES5的将他编译为 Array(20).slice().map(function (i) { return []; })

这篇文章主要是告诉大家，目前的TS的转译可能还存在一定的问题，使用的时候，应该注意下，特别是空值的处理之类的，希望能帮到你

提供一个在线测试工具，方便没有TS环境

评论