srcmini本文概述
- 10.仅在外部文件中的脚本
- 9.知道何时比较相等或相同
- 8.注意字符串连接
- 7.在1行中重新声明变量
- 6. if语句缩短
- 5.不要害怕按位非运算符(〜或~~), 它不会被咬
- 4.正确组合2个阵列中的数据
- 3.切换vs
- 2.衡量绩效并解决绩效问题
- 1.使用闭包确保代码安全
如果你是一位有经验的JS开发人员, 也许你会发现其中一些技巧确实是微不足道的。但是, 对于javascript初学者来说, 如果你想提高使用该语言的开发技能, 这些技巧将非常重要和有用。
著名的JavaScript大师和开发人员一直在使用许多这样的技术来编写功能强大, 高效的JavaScript, 现在你将学习如何使用。
10.仅在外部文件中的脚本
用户设备上的缓存文件总比每次都发出新请求要好。每次用户进入网站时, 模板(即博客)总是不同的, 因为博客作者每次都希望创建一个新条目。因此, 该模板不会被缓存, 因此, 如果你的脚本直接写在文档中, 而脚本标记中没有引用它们, 则每次用户访问该网页时都会请求该模板。
如果文档中的脚本很大(超过30行), 则应将其移至外部脚本中：
<div>
Bla bla bla ...
</div>
<script>
//
// More than 30 lines of Javascript in the Document
// that you can move to an external file
//
</script>
<!-- Reference it better in a external script -->
<script src="my/path/tomyscript.js"></script>如果你可以将js代码移动到脚本文件中, 请始终在有能力时执行。
9.知道何时比较相等或相同
如果需要, ==(或！=)比较器执行自动类型转换。 ===(或！==)运算符将不执行任何转换。它比较值和类型, 可以认为它比==更快(jsPref)。
[20] == 20 // true
[20] === 20 // false
'45' == 45 // true
'45' === 45 // false
[] == 0 // true
[] === 0 // false
'' == false // true but [true == "a"] false
'' === false // false ==双重等于(也称为宽松相等)将不比较类型, 但是将转换在语句中比较的值。这称为类型强制, 它被认为是邪恶的操作。
===三重等于(也称为严格相等)将比较类型, 但不会类型转换值, 这意味着它们将按原样进行比较而不进行转换。因为没有类型强制, 所以三元等于更快, 是比较各种值的推荐方法。这意味着两种条件都必须相同才能使条件等于true。
仅当你检查null或未定义时, 才使用==(或！=)。
8.注意字符串连接
你需要在串联过程中确定变量的类型。
分析以下示例：
var a = 1;// Int
var b = 2;// Int
var c = '3'; // String
var d = " my Number"; // String
console.log(a + b + c + d);
// Output : 33 my Number
// But expected other thing ...为避免意外行为, 请将其转换为字符串, 使用concat方法或将它们与加号连接起来, 但将行中的第一个变量设置为string：
var a = 1;// Int
var b = 2;// Int
var c = '3'; // String
var d = " my Number"; // String
console.log("" + a + b + c + d);
console.log(a.toString() + b.toString() + c.toString() + d);
console.log(''.concat(a, b, c, d));
// All of them output : 123 my Number7.在1行中重新声明变量
而不是使用以下占用三行以上的语法检查if语句是否存在：
注意：尽管使用！操作员已经很短了, 使用短路声明就更短了。
var myInitialString = "";
function concatenate(parameter){
// Check if variable exists
// or
// typeof(parameter) == "undefined"
if(!parameter){
parameter = "A previously default value";
}
return myInitialString + parameter;
}请使用短路声明：
var myInitialString = "";
function concatenate(parameter){
// Re-declare with 1 line instead
parameter = parameter || "Use this value instead if parameter doesn't exists";
return myInitialString + parameter;
}如你所知, Javascript中的所有内容都是真实的或虚假的, 虚假的JavaScript值包括：
- 假。
- 0.
- 空字符串(“或”)。
- 空值。
- 未定义。
- NaN(NotANumber)。
||运算符首先计算左侧的表达式, 如果该表达式为真, 则返回该值。如果为假, 它将求值并返回右操作数的值(右侧的表达式)。
6. if语句缩短
继续使用短路声明使if语句比实际短。如果此类的语句返回布尔值, 则可以返回if语句的求值(它返回布尔值)。
function isAdult(age){
// if age parameters exists and its value is greater than 17..
if(age && age > 17){
return true;
}
return false;
}布尔值也将从以下评估中返回：
function isAdult(age){
// If age parameter doesn't exists, falsy is returned
// and if the parameters exists and is greater than 17 truthy is returned
return age && age > 17;
}而且, 你不仅可以为返回值创建short if语句, 还可以创建结合&&和||的更多代码。具有短路声明样式的比较器：
// Execute a request to the server if the token is valid, otherwise refresh it
if (tokenIsValid(token)) {
executeRequest(token);
}else{
refreshToken();
}
// If token is valid is truthy, then the executeRequest will be executed too.
// otherwise the refreshToken will be executed.
tokenIsValid(token) && executeRequest(token) || refreshToken();简洁, 可读(可疑)的一行代码不是吗？
5.不要害怕按位非运算符(〜或~~), 它不会被咬
如果你在第三方代码中看到此运算符, 但你不知道它的含义, 请不要担心它并不常见, 但并非来自另一个世界。
当与整数一起使用时, 〜的单次使用具有特殊效果, 解释此符号的效果就像使用以下函数：
function bitwiseOperator(value){
var result = Math.floor(value);
// return the negative value of the result + 1;
return - (result+ 1);
}它只是返回数字加1的负值。一个众所周知的用法是, 检查数组是否具有带有indexOf函数的项, 而不是用-1进行区分, 使计算结果为真或假：
// true
var hasItemTwo = ~[1, 2, 3].indexOf(2);
if (hasItemTwo) {
console.log("The array contains 2");
}
// instead of
if([1, 2, 3].indexOf(2) != -1){
console.log("The array contains 2");
}没听懂吗？不要惊慌！如果你需要有关此运算符的更多信息, 请阅读本文。
在以下情况下使用双按位NOT：
1.你要将数字从float转换为整数。
2.你想执行与Math.floor()相同的操作, 但是要快得多。
3.你想最小化你的代码。
在以下情况下, 请勿使用双按位NOT：
1.你运行的是Google Chrome(显然吗？)。
2.你关心代码的可读性。
4.正确组合2个阵列中的数据
你需要知道何时使用循环, 何时不使用循环。对于合并2个数组, 你无需遍历第二个数组并将每个项目推入第一个数组, 如下面的示例(不良做法)所示：
var firstArr = ["12", {myObject:12}, 123, "Hi", "Test"];
var secondArr = [9, 5, 23, 12, "Hello", "Second test"];
for(var i = 0;i < secondArr.length;i++){
var item = secondArr[i];
// add item to second array
firstArr.push(item);
}
console.log(firstArr);
// outputs :
// ["12", {myObject:12}, 123, "Hi", "Test", 9, 5, 23, 12, "Hello", "Second test"]尽管它起作用了, 但这并不是最好的方法, 不使用循环就将它们组合起来。
var firstArr = ["12", {myObject:12}, 123, "Hi", "Test"];
var secondArr = [9, 5, 23, 12, "Hello", "Second test"];
// Combine arrays
Array.prototype.push.apply(firstArr, secondArr);
console.log(firstArr);
// outputs :
// ["12", {myObject:12}, 123, "Hi", "Test", 9, 5, 23, 12, "Hello", "Second test"]如果你不知道函数的.call和.apply属性之间的区别, 则可能需要阅读本文, 否则你会迷失这种做法的工作方式。在这种情况下, 我们使用.apply属性将push方法的此上下文更改为第一个数组, 如你所知, .push方法将其接收的所有参数添加到给定数组中, 例如：
var myEmptyArr = [];
myEmptyArr.push(1, 2, 3, 4, 5);
console.log(myEmptyArr);
// [1, 2, 3, 4, 5]因此, 由于apply函数, 第二个参数(第二个数组)的项目将作为参数并附加到第一个数组中。比循环更容易编写不是吗？
3.切换vs
关于是否使用switch语句或一系列if和else语句的经典问题并不是JavaScript独有的, 并且几乎激发了具有这些构造的每种编程语言的讨论。当然, 真正的问题不在单个语句之间, 而是与每个语句能够处理一系列条件语句的速度有关。
如果是示例, 请分析以下内容：
// the variables : result
doesn't exists
function example(value){
if (value < 6){
if (value < 3){
if (value == 0){
return result0;
} else if (value == 1){
return result1;
} else {
return result2;
}
} else {
if (value == 3){
return result3;
} else if (value == 4){
return result4;
} else {
return result5;
}
}
} else {
if (value < 8){
if (value == 6){
return result6;
} else {
return result7;
}
} else {
if (value == 8){
return result8;
} else if (value == 9){
return result9;
} else {
return result10;
}
}
}
}
example(5);
现在, 用switch语句编写的代码相同, switch语句简化了多种条件的外观和性能：
function example(value){
switch(value){
case 0:
return result0;
case 1:
return result1;
case 2:
return result2;
case 3:
return result3;
case 4:
return result4;
case 5:
return result5;
case 6:
return result6;
case 7:
return result7;
case 8:
return result8;
case 9:
return result9;
default:
return result10;
}
}
example(10);你会选择哪一个？
在JavaScript中, 当仅要评估一两个条件时, if语句通常比switch语句快。当有两个以上的条件, 并且条件很简单(不是范围)时, switch语句往往会更快。这是因为在switch语句中执行单个条件所花费的时间通常少于在if语句中执行单个条件所花费的时间, 这使得switch语句仅在存在大量条件时才是最佳选择。
2.衡量绩效并解决绩效问题
是的, 队长很明显！
没有人喜欢缓慢的网站或缓慢的应用程序, 请确保测试你所有繁重的功能并分析可以优化的地方。
你可以在此处阅读有关如何使用Benchmarks或使用Chrome开发人员工具来使用Javascript衡量功能性能的详细文章。
1.使用闭包确保代码安全
将你的代码包装在匿名函数中, 以防止你自己的代码出现问题。几乎每个网站都使用来自不同来源的不同脚本。默认情况下, 在页面上创建的任何函数或变量都在全局”作用域”中定义。如果两个脚本使用相同的确切变量/函数名称, 则可能会成为一个严重的问题。
var myName = 12;
(function(){
var myName = 123123123123;
// 123123123123
console.log(myName);
})();
// 12
console.log(myName);如你所见, 闭包是受尊重的, 并且myName变量在其上下文中仍然具有12值, 因为包装器中的myName属于另一个上下文。这就是使用闭包的要点。
如果你知道要与社区分享的另一个很棒的技巧, 请不要害羞, 并在评论框中与我们分享！玩得开心
评论前必须登录！
注册