乐趣区

关于javascript:9-个好用的-JavaScript-小技巧

jiezi

黑客的方法论是一种波及不断改进和迭代的构建办法。黑客们认为总有一天会变得更好，而且没有什么是永远不可能实现的。

真正的黑客总是用不同的形式来解决没人关注的问题。

上面给出了一些十分弱小的 JavaScript 小技巧。

1. 全副替换

咱们都晓得 string.Replace() 函数仅能替换掉第一个匹配项。

你能够通过在正则表达式的开端增加 /g 来替换所有呈现的内容。

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

2. 提取惟一值

通过应用 Set 对象和 ... 运算符可能应用惟一值创立一个新数组。

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

3. 将数字转换为字符串

只须要用 + 运算符带和一个空字符串即可。

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number); 
// string

4. 将字符串转换为数字

只须要用 + 运算符即可。然而要留神：它仅实用于“字符串数字”。

the_string = "123";
console.log(+the_string);
// 123the_string = "hello";
console.log(+the_string);
// NaN

5. 随机排列数组中的元素

这样最适宜洗牌了：

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

6. 展平多维数组

只需应用 ... 运算符。

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

7. 条件短路

只须要举个例子就明确了：

if (available) {addToCart();
}

通过简略地应用变量和函数来简化代码：

available && addToCart()

8. 动静属性名

始终以来，我认为必须先申明一个对象，而后能力调配动静属性，然而 …

const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// {name: "Coke", flavour: "Cherry"}

9. 用 length 调整货清空数组

如果要调整数组的大小：

var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]

如果要清空数组：

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []

你还有什么好用的技巧，请留言通知大家。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版