【译】9个强大的JavaScript技巧

简介: 我喜欢优化!但是,如果站点无法在用户的Internet Explorer 11浏览器中运行,他们不会在乎我的优化代码。我使用Endtest来创建自动测试,并在跨浏览器的云上执行它们。

image.png


我喜欢优化!


但是,如果站点无法在用户的Internet Explorer 11浏览器中运行,他们不会在乎我的优化代码。


我使用Endtest来创建自动测试,并在跨浏览器的云上执行它们。


Netflix使用相同的工具来测试他们的web apps


你应该查看文档


下面是9个极其强大的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对象和Spread运算符就可以创建一个唯一值的数组。


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.碾平多维数组


很简单,使用Spread运算符。


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.使用长度调整/清空数组


我们基本上重写了数组的长度。


如果我们想调整数组:


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); 
// []


相关文章
|
前端开发 JavaScript 测试技术
几个一看就会的实用JavaScript优雅小技巧🌟(三)
几个一看就会的实用JavaScript优雅小技巧🌟(三)
|
前端开发 JavaScript 测试技术
几个一看就会的实用JavaScript优雅小技巧🌟(二)
几个一看就会的实用JavaScript优雅小技巧🌟(二)
|
存储 JavaScript 前端开发
几个一看就会的实用JavaScript优雅小技巧🌟(一)
几个一看就会的实用JavaScript优雅小技巧🌟(一)
|
前端开发 JavaScript 测试技术
几个一看就会的实用JavaScript优雅小技巧🌟(四)
几个一看就会的实用JavaScript优雅小技巧🌟(四)
|
JavaScript 前端开发 数据格式
无法忽视的JavaScript技巧
  好程序员Web前端分享无法忽视的JavaScript技巧。在大家从事web前端的工作中,很容易忽视一些JavaScript的小技巧,今天为大家总结了一些容易被大家忽略的技巧,希望能够对大家有所帮助。
1229 0
|
JavaScript 前端开发 索引
|
前端开发 JavaScript
12个必备的JavaScript装逼技巧
译者按 无论你是初学者还是资深人士,都值得一读! 原文: 12 Amazing JavaScript Shorthand Techniques 译者: Fundebug 为了保证可读性,本文采用意译而非直译。
1108 0
|
JavaScript 前端开发 索引
( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译、持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译、持续更新 ) JavaScript 上分小技巧(二) 第三篇地址:( 译、持续更新 ) JavaScript 上分小技巧(三) #59 - ES6,var vs let var关键字定义的变量根据定义的环境用于function内,function外或者全局;而let定义的变量只用于"块"范围。
1149 0