nljshoxbb / note Goto Github PK
View Code? Open in Web Editor NEW笔记
笔记
文章翻译自 John Howard 12 Extremely Useful Hacks for JavaScript
在这篇文章中,我将分享12个非常有用的JavaScript。这些hack可以减少代码,帮助你优化的运行代码。现在让我们开始开始吧。
有时,我们需要检查一些变量是否存在,或者它是否为有效值,如果有,则将它们视为true
。对于做这样的验证,你可以使用!!
(两个否定操作符),例如!! variable
,它将自动将任何类型的数据转换为布尔值,只有当这些值为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); // true
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false
在这种情况下,如果account.cash
值大于零,则account.hasMoney
将为true
这个技巧是真的强!这样做很简单,但它只适用于字符串数字,否则返回NaN
(不是数字)。看看下面这个例子。
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
如果与Date一起使用,它将返回时间戳
console.log(+new Date()) // 1461288164385
你应该经常看到下面的代码
if (conected) {
login();
}
你可以在变量(这将会被验证)和函数两者之间使用&&(AND运算符)的组合来缩短它。例如,上面的代码可以再缩短为一行
conected && login();
你也可以这样做来检查对象中是否存在某些属性或函数。类似于下面的代码
user && user.login();
现在在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); // 27
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25
这个提示非常简单,在处理大循环时对性能造成巨大的影响。以下例子中,每次操作都会同步迭代一个数组。
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]);
}
为了避免运行未定义的函数或属性,你需要检查某些属性是否存在。如果你打算编写跨浏览器代码,可能会使用此技术。 例如,我们假设你需要编写与旧版Internet Explorer 6兼容的代码,并且想要通过document.querySelector()
来获取ID。 但是在旧版浏览器中,这个函数是不存在,所以要检查这个函数的存在,你可以使用in操作符,看这个例子
if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}
在这种情况下,如果文档对象中没有querySelector
函数,则可以使用document.getElementById()
作为备用
你可以为Array.prototype.slice(begin,end)
设置开始和结束参数来切割数组。 但是如果没有设置结束参数,则该函数将自动设置数组的最大值。 我认为很少有人知道这个函数可以接受负值,如果你设置一个负数作为开始参数,你将从数组中得到最后一个元素
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]
这样做可以锁定数组的大小,这对基于要设置的元素数量并且删除数组的某些元素时非常有用。 例如,如果你有一个包含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]
String.replace()
函数允许使用String和Regex来替换字符串,本质上这个函数只替换第一次出现的字符串。但是你可以通过使用正则表达式末尾加上/ g
来模拟replaceAll()
函数:
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"
如果需要合并两个数组,可以使用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];
如果运行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); // This is another way of converting NodeList to Array
var list = [1, 2, 3];
console.log(list.sort(function() {
return Math.random() - 0.5
})); // [2,1,3]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.