在这篇文章中,我将分享12个非常有用的JavaScript 技巧。这些技巧可以帮助你减少并优化代码
1)使用!!操作符转换为布尔类型
有时,我们需要检查一些变量是否存在,或者它是否具有有效值,将它们视为true值。做这种验证时,您可以使用!!
(双反)一个简单的!!变量
,它会自动将任何类型的数据转换成布尔类型。当变量为:0
,null
,""
,undefined
或者NaN
时,!!变量 将返回false
,否则将返回true
。在实践中了解它,看看这个简单的例子:
function Account(cash) { this.cash = cash; this.hasMoney = !!cash; }var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // truevar emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false
在这种情况下,如果account.cash
值大于0,account.hasMoney
则为true。
2)使用+操作符转换为数字类型
这个用法太神奇了!这样做很简单,但它只适用于字符串的数字,否则将返回NaN
(不是数字)。看看这个例子:
function toNumber(strNumber) { return +strNumber; }console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
这个用法也可以使用Date
,在这种情况下,它将返回时间戳:
console.log(+new Date()) // 1461288164385
3)Short-circuits conditionals
如果您看到类似的代码:
if (conected) { login(); }
您可以使用&&
将变量(将被验证)和函数的组合起来。例如,上面这段代码可以在缩短为:
conected && login();
您可以这样做来检查对象中是否存在某些属性或函数。类似于以下代码:
user && user.login();
4)使用||来赋一默认值
今天在ES6中有默认参数功能。为了在旧浏览器中模拟此功能,您可以使用||
(OR运算符)将默认值作为要使用的第二个参数。如果第一个参数返回false
第二个参数将被用作默认值。看这个例子:
function User(name, age) { this.name = name || "Oliver Queen"; this.age = age || 27; }var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25
5)在循环中将array.length
缓存起来
这个技巧非常简单,数据较大时用这种方式循环遍历 对性能造成巨大的影响。基本上,几乎所有人都写这个同步for
来遍历一个数组:
for (var i = 0; i < array.length; i++) { console.log(array[i]); }
如果您使用较小的数组 - 这很好,但是如果处理大数组,则此代码将在该循环的每次循环中重新计算数组的大小,这将导致一些延迟。为了避免这种情况,您可以将array.length
缓存到一个变量来使用它,而不是在循环中每次调用array.length:
var length = array.length; for (var i = 0; i < length; i++) { console.log(array[i]); }
为了使其精简,可以写成:
for (var i = 0, length = array.length; i < length; i++) { console.log(array[i]); }
6)检测对象中的属性
当您需要检查某些属性是否存在并避免运行未定义的函数或属性时,此技巧非常有用。如果您打算编写跨浏览器代码,可能您也将使用此技术。例如,我们假设您需要编写与旧版Internet Explorer 6兼容的代码,并希望使用document.querySelector()
,用它们的id来获取一些元素。但是,在这个浏览器中,这个函数不存在,所以要检查这个函数的存在,你可以使用in
运算符,看这个例子:
if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
在这种情况下,如果对象中没有querySelector
函数document
,我们可以使用document.getElementById()
作为备用。
7)获取数组中的最后一个项目
Array.prototype.slice(begin, end)
当你设置begin
和end
参数时,它会剪切数组。但是如果没有设置end
参数,这个函数将自动设置数组的最大值。我认为很少有人知道这个函数可以接受负值,如果你设置一个负数作为begin
参数,你将从数组中获取最后一个元素:
var array = [1, 2, 3, 4, 5, 6]; console.log(array.slice(-1)); // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6]
8)数组截断
这种技术可以锁定数组的大小,这对基于要设置的元素数量删除数组的某些元素非常有用。例如,如果您有一个包含10个元素的数组,但是您只想获得前五个元素,则可以截断数组,使其变小array.length = 5
。看这个例子:
var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3; console.log(array.length); // 3 console.log(array); // [1,2,3]
9)全部替换
String.replace()
函数允许使用String和Regex替换字符串,本身该函数只替换第一个匹配的值。但是您可以使用/g
放在正则表达式的末尾,实现全部替换:
var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
10)合并数组
如果需要合并两个数组,可以使用以下Array.concat()
函数:
var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
但是,它并不是合并大数组最合适的函数,因为它将消耗大量的内存创建一个新的数组。在这种情况下,您可以使用Array.push.apply(arr1, arr2)
,它会将第二个数组合并到第一个数组中,而不是创建新的数组,从而减少内存使用量:
var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
11)将NodeList转换为数组
如果运行该document.querySelectorAll("p")
函数,它将返回一个DOM元素数组,即NodeList对象。但这种对象不具有所有数组的功能,如:sort()
,reduce()
,map()
,filter()
。为了使用更多数组的功能,您需要将NodeList转换为数组。要实现这个功能只需使用这个技巧[].slice.call(elements)
:
var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // Now the NodeList is an array var arrayElements = Array.from(elements); // 这是另一种将NodeList转换成Array的方法
12)对数组随机乱序
想要不使用Lodash、underscore这样的插件来实现数组随机乱序,只需这个神奇的技巧:
var list = [1, 2, 3]; console.log(list.sort(function() { return Math.random() - 0.5})); // [2,1,3]
结论
现在,你已经学到了一些有用的JS技巧,它们主要用于缩减JavaScript代码量,其中一些技巧在许多流行的JS框架都使用到,如Lodash,Underscore.js,Strings.js等。如果你知道其他JS技巧,欢迎分享!
转载于:https://blog.51cto.com/dabaozi/1939959