你可能想开始在项目中应用的10个有用的javascript提示和实践 JavaScript开发|JavaScript

本文概述

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="http://www.srcmini.com/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; // Intvar b = 2; // Intvar c = '3'; // Stringvar d = " my Number"; // Stringconsole.log(a + b + c + d); // Output : 33 my Number// But expected other thing ...

为避免意外行为, 请将其转换为字符串, 使用concat方法或将它们与加号连接起来, 但将行中的第一个变量设置为string：

var a = 1; // Intvar b = 2; // Intvar c = '3'; // Stringvar d = " my Number"; // Stringconsole.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 Number

7.在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 insteadparameter = 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 returnedreturn age & & age > 17; }

而且, 你不仅可以为返回值创建short if语句, 还可以创建结合& & 和||的更多代码。具有短路声明样式的比较器：

// Execute a request to the server if the token is valid, otherwise refresh itif (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进行区分, 使计算结果为真或假：

// truevar 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 arrayfirstArr.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 arraysArray.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 : resultdoesn't existsfunction example(value){if (value < 6){if (value < 3){if (value =http://www.srcmini.com/= 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; // 123123123123console.log(myName); })(); // 12console.log(myName);

如你所见, 闭包是受尊重的, 并且myName变量在其上下文中仍然具有12值, 因为包装器中的myName属于另一个上下文。这就是使用闭包的要点。
【你可能想开始在项目中应用的10个有用的javascript提示和实践】如果你知道要与社区分享的另一个很棒的技巧, 请不要害羞, 并在评论框中与我们分享！玩得开心