avatar

你不知道的js奇淫技巧

在js中, 有一些常用的奇淫技巧, 可以让你少写很多代码, 但是你不一定见过这种写法, 下面就记录几个js的奇淫技巧, 防止自己在以后看见的时候懵逼

数组去重

1
2
3
var arr = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1];
var uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6, 7, 8]

打乱数组元素

1
2
3
4
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.sort(function() {
return Math.random() - 0.5;
})); // [4, 8, 2, 9, 1, 3, 6, 5, 7]

碾平二维数组

1
2
var entries = [1, [2, 5], [6, 7], 9];
var flatEntries = [].concat(...entries); // [1, 2, 5, 6, 7, 9]

数字转字符串

1
2
var convertedNumber = 1 + "";
console.log(typeof convertedNumber, convertedNumber); // string 5

字符串转数字

1
2
3
4
5
6
convertedString = "123";
console.log(+convertedString); // 123

// 注意 只有能转成数字的字符串前面加"+"才能转成字符串, 否则返回NaN
string = "hello";
console.log(+string); // NaN

全部替换

1
2
3
var example = "potato potato";
console.log(example.replace(/pot/, "tom")); // "tomato potato"
console.log(example.replace(/pot/g, "tom")); // "tomato tomato"

使用短路运算符

1
2
3
4
5
6
7
if (available) {
addToCart();
}

// 通过简单地使用变量和函数来缩短它

available && addToCart();

动态属性名

1
2
3
4
5
6
const dynamic = 'flavour';
var item = {
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item); // { name: "Coke", flavour: "Cherry" }
文章作者: Kwin
文章链接: http://kw1n.cn/2020/03/25/20191210-你不知道的js技巧/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kwin 's Blog
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论