关闭

9个强大的Js小技巧

时间: 2019-12-11阅读: 719标签: 技巧

以下是 9 个功能强大的 JavaScript hack 技巧。


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);
// 123

the_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 调整/清空数组

我们基本上覆盖了数组的 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); 
// []

原文:https://dev.to/razgandeanu/9-extremely-powerful-JavaScript-hacks-4g3p

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6827

关闭

你可能不知道的64个非常实用的JS小技巧

何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。每写好一篇文章,都会使用大量的写作技巧。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

在Vue.js编写更好的v-for循环的6种技巧

在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环。首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性

12个Css常用技巧

常见发生场景:假如我们需要通过 input,type=file来上传文件,而这个 input 的默认样式,可以说是非常地丑。所以我们希望通过一张图片,与这个 input 大小一样,位置一致地盖在上面。这个时候,显然,这个时候点击图片

移动端开发必须知道的小技巧

最近在公司写一个混合 app 项目,页面基本全部都是用 H5 完成,嵌入到原生 webview 下。发现一个问题,在 iPhone 6 下 苹果手机的状态栏会挡住页面,导致页面下移,样式错乱,最后网上查找了些解决办法,加了一条 meta 标签解决了问题

分享几个CSS技巧

分享几个CSS技巧包括:创建剪切动画、优化动画性能、实现长宽比、垂直居中等

13 个 JS 数组精简技巧

数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。有时在创建代码时需要替换数组中的特定值,有一种很好的简短方法可以做到这一点

14个 JavaScript 中鲜为人知的技巧

人们通常认为 JavaScript 是一门很容易上手的语言,但是要做到精通却不简单。是的,这是因为 JavaScript 是一种非常古老且非常灵活的语言。它充满了神秘的语法和过时的功能。到目前为止,我已经使用 JavaScript 多年了

值得收藏的有用Js技巧

像其它语言一样,JavaScript中也可以通过一些技巧来完成一些复杂的操作. 接下来我们学习吧:数组去重;数组和布尔;创建一个空对象;合并对象;函数参数必须

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!