IT服务圈儿

  有温度、有态度的IT自媒体平台

  来源：翻译 | web前端开发 （ID：web_qdkf)

  英文 | eeks.org/javascript-top-10-tips-and-tricks/?ref=rp

  对于Web开发或跨平台开发，JavaScript越来越流行。以前，它仅被认为是一种前端脚本语言js dict 遍历，但现在它也越来越流行为后端脚本语言。甚至Facebook的React Native也基于JavaScript。

  因此，了解JavaScript中的一些技巧无疑将是有益的，这些技巧不仅不会阻止我们编写额外的代码行，而且还将使我们的代码清晰高效。

  1、数组索引

  考虑一个数组[10、9、8、7、6]，如果我们想将此数组的值分配给任何变量，则我们的定位方法将是const a = array [0]。如果我们想分配多个变量，那么继续这样做将很繁琐。

  代码1:旧代码做法

  <pre class="code-snippet__js" data-lang="xml"> ` var array1 = [10, 9, 8, 7, 6]; var x = array1[0]; var y = array1[1]; var z = array1[2]; document.write("x = " + x + " "); document.write("y = " + y + " "); document.write("z = " + z + " "); `</pre>

  输出：

  <pre class="code-snippet__js" data-lang="ini">x = 10`y = 9`z = 8</pre>

  代码2：更聪明的方式

  <pre class="code-snippet__js" data-lang="xml"> ` var array2 = [10, 9, 8, 7, 6]; var [x, y, z, ...rest] = array2; document.write("x = " + x + " ");  document.write("y = " + y + " ");     document.write("z = " + z + " ");     document.write("rest = " + rest + " ");  `</pre>

  输出：

  <pre class="code-snippet__js" data-lang="ini">x = 10`y = 9z = 8rest = 7, 6`</pre>

  因此，像这样分配多个变量可以节省时间和代码。但是，应注意，其余部分是剩余部分的集合数组，而不是每个项目都单独使用。

  2、定义函数

  想法是将一些常见或重复的任务放在一起并创建一个函数，这样我们就可以调用该函数，而不必为不同的输入一次又一次地编写相同的代码。每个人都必须在JavaScript中使用过类似的功能。

  代码1：以常规形式定义功能。

  <pre class="code-snippet__js" data-lang="xml"> `  <p>Usual function in JavaScript
    </p>  function myFunction(p1, p2) { return p1 * p2; } document.getElementById("demo").innerHTML = myFunction(4, 3);  `</pre></p>
  输出：

  <pre class="code-snippet__js" data-lang="bash">Usual function in JavaScript`12`</pre>

  代码2：还有另一种方法将函数视为变量，而不是一个非常有用的技巧，但仍然是新事物。将函数保持在变量中，它利用像这样的箭头函数。

  <pre class="code-snippet__js" data-lang="xml"> `  <p> Function treated as variable in JavaScript: ``    
     </p>  var myFunction = (p1, p2) => { return p1 * p2; } document.getElementById("demo") .innerHTML = myFunction(4, 3);  `</pre></p>
  输出：

  <pre class="code-snippet__js" data-lang="javascript">Function treated as variable in JavaScript`12`</pre>

  3、在一行中定义功能

  现在，这个技巧真的很酷。如果你了解Python，则可能知道lambda函数，该函数的行为与任意函数相同，并且用一行编写。好吧，我们不在JavaScript中使用lambda函数，但是我们仍然可以编写单行函数。

  假设我们要计算两个数字a和b的乘积，我们可以在一行脚本中完成。我们不必专门编写return语句，因为这种定义方式已经意味着它将自行返回输出。

  <pre class="code-snippet__js" data-lang="xml"> `  <p> Function treated as variable in JavaScript ``    
     </p>  const productNum = (a, b) => a * b document.getElementById("demo") .innerHTML = myFunction(4, 3);  `</pre></p>
  输出：

  <pre class="code-snippet__js" data-lang="javascript">Function treated as variable in JavaScript`12`</pre>

  4、布尔值

  虽然每种编程语言都只有两个布尔值True和False。JavaScript通过引入使用户能够创建bool的功能使它更进一步。

  与True和False不同，它们通常分别称为“ Truthy”和“ Falsy”。为避免混淆，除0，False，NaN，null，“”之外的所有值均默认为Truthy。布尔的这种广泛使用有助于我们有效地检查状况。

  <pre class="code-snippet__js" data-lang="xml"> ` const a = !1;     const b = !!!0;  console.log(a); console.log(b); `</pre>

  输出：

  <pre class="code-snippet__js" data-lang="php">False`True`</pre>

  5、过滤布尔值

  有时我们可能希望过滤掉所有布尔值，例如从数组中说“ Falsy”布尔值（0，False，NaN，null，“”），这可以通过结合使用map和filter函数来完成。在这里，它使用Boolean关键字过滤掉Falsy值。

  <pre class="code-snippet__js" data-lang="xml"> `arrayToFilter .map(item => { // Item values }) .filter(Boolean); `</pre>

  <pre class="code-snippet__js" data-lang="php">Input: [1, 2, 3, 0, "Hi", False, True]`Output: [1, 2, 3, "Hi", True]`</pre>

  6、创建完全空的对象

  如果要求在JavaScript中创建一个空的对象，我们的第一个转到方法将在花括号中使用并将其分配给变量。但这不是空白对象，因为它仍然具有JavaScript的对象属性，例如__proto__和其他方法。

  可以通过一种方法来创建没有任何对象属性的对象。为此，我们使用字典并将其__proto__定义为空值。

  <pre class="code-snippet__js" data-lang="xml">    `          let dict = Object.create(null);        // dict.__proto__ === "undefined"      `</pre>

  除非用户另行定义，否则此对象将没有默认的__proto__或其他属性。

  7、截断数组

  <pre class="code-snippet__js" data-lang="xml"> `let arrayToTruncate = [10, 5, 7, 8, 3, 4, 6, 1, 0]; arrayToTruncate.length = 6; console.log(arrayToTruncate) `</pre>

  输出：如所见，我们必须知道要以这种方式截断的数组的长度，否则将导致错误。此处的运行时间为O（k），其中k是将在数组中保留的元素数。

  <pre class="code-snippet__js" data-lang="json">[10、5、7、8、3、4]</pre>

  8、合并对象

  散布运算符（…）的引入使用户可以轻松地合并到一个或多个对象，而先前通过创建一个单独的函数来实现此操作可以实现合并。

  代码1：

  <pre class="code-snippet__js" data-lang="xml"> `function mergeObjects(obj1, obj2) { for (var key in obj2) { if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key]; } return obj1; } `</pre>

  代码2：通过使用扩展运算符，可以轻松实现上述任务js dict 遍历，并且代码也很清楚。

  <pre class="code-snippet__js" data-lang="xml"> `const obj1 = {}; // Items inside the object     const obj2 = {}; // Items inside the object  const obj3 = {...obj1, ...obj2};` </pre>

  9、条件检查

  检查和遍历条件是每种编程语言的重要组成部分。在JavaScript中，我们这样做是：

  代码1：

  <pre class="code-snippet__js" data-lang="xml"> `if (codition) { doSomething(); } `</pre>

  代码2：但是，按位运算符的使用使检查条件更加容易，并且使代码仅一行：

  <pre class="code-snippet__js" data-lang="xml"> ` condition && doSomething(); `</pre>

  10、使用正则表达式替换所有字符

  经常出现一种情况，每次出现一个字符或一个子字符串，但不幸的是.replace（）方法仅替换一个出现的实例。我们可以通过将regex与.replace（）方法配合使用来解决此问题。

  <pre class="code-snippet__js" data-lang="xml"> `    var string = "GeeksforGeeks"; // Some string  console.log(string.replace(/eek/, "ool")); `</pre>

  输出：

  <pre class="code-snippet__js">“ GoolsforGools”</pre>

  *版权声明：转载文章和图片均来自公开网络，版权归作者本人所有，推送文章除非无法确认，我们都会注明作者和来源。如果出处有误或侵犯到原作者权益，请与我们联系删除或授权事宜。