JavaScript Tips

Javascript实现类继承链

const protocols = (...pos) => pos.reduce((c,p)=>p(c),Object);const Foldable = kclass => class extends kclass{
    fold(){
    throw 'Not Implemented';}
}const Mappable = kclass => class extends kclass{
    map(){
    throw 'Not Implemented';}
}class MyClass extends protocols(Mappable,Foldable){
    fold(){
    return 'This is fold implements';}map(){
    return 'This is map implements';}
}console.log(new MyClass())
// 实现MyClass -> Foldable -> Mappable -> Object 的继承链

如上所示，很容易实现了一条继承链，并且很容易扩展它，上述实现类似与面向对象中的接口功能。

迭代空数组时的问题

假设有如下需求

const arr = [22,23,24,25];console.log(arr.map((el,index)=>index))

上述期望值是[0,1,2,3]，也如想的那样，但是在迭代空数组时会出现问题

const arr = new Array(4);console.log(arr.map((el,index)=>index))

结果是[ <4 empty items> ]

解决方案

我们可以使用如下方法hack

const arr = Array.apply(null,new Array(4));console.log(arr.map((el,index)=>index))

new Array(4)的形式创建数组其实只是生成了一个length为4的区域，数组还没有真正的生成，类似与增大数组的length一样，改变数组的大小，真正的数组并没有生成，有些JavaScript环境会显示undefined，其实是不对的

复制到剪切板的方法

const text = document.querySelector('#input').select();// 选中输入框document.execCommand('cut');// 执行命令

字符串排序问题

JavaScript中sort排序默认是只支持英文的，有时使用其他语言，可能会有问题，可以使用localeCompare的方法解决

const arr = ['a','2','3','4'];
arr.sort((a,b)=>a.localeCompare(b))

也可以使用Intl.Conllator().compare

const arr = ['a','2','3','4'];
arr.sort((a,b)=>Intl.Collator().compare)