JavaScript技巧汇总，值得收藏！

JavaScript包含各种对典型编程思想有用的一些技巧，在实际开发中，我们通常希望减少代码行数；因此，今天这些技巧代码希望可以帮助到你。

1、与Javascript对象相关的

1)、对象解构

将对象的值解构为变量是另一种在传统点表示法之外读取其值的方法。

下面的示例比较了用于读取对象值的经典点表示法和对象解构快捷方式。

2）、Object.entries()

Object.entries() 是 ES8 中引入的一项功能，它允许您将文字对象转换为键/值对数组。

3）、Object.values()

Object.values() 也是 ES8 中引入的新特性，与 Object 具有类似的功能。entries() 但这没有关键部分：

4）、对象循环速记

传统的 JavaScript for 循环语法是 for (let i = 0; i < x; i++) { … }。通过引用迭代器的数组长度，此循环语法可用于遍历数组。共有三个 for 循环快捷方式，它们提供了用于遍历数组中的对象的各种方法：

for…of 创建一个循环遍历内置字符串、数组和类似数组的对象，甚至是 Nodelist

for...in 在记录属性名称和值的字符串时访问数组的索引和对象文字上的键。

Array.forEach 使用回调函数对数组元素及其索引执行操作

5）、对象属性简写

在 JavaScript 中定义对象字面量让生活变得更轻松。ES6 在为对象赋予属性方面提供了更多的简单性。如果变量名和对象键相同，则可以使用速记符号。

通过在对象字面量中声明变量，您可以在 JavaScript 中快速将属性分配给对象。为此，必须使用预期的键命名变量。这通常在您已经有一个与对象属性同名的变量时使用。

6）、Javascript For 循环

如果你想要简单的 JavaScript 并且不想依赖第三方库，这个小技巧很有用。

如果您想访问文字对象中的键，这也适用：

7）、Array.forEach 的简写：

2、与Javascript数组相关的

1）、数组解构

ES6 的一个有趣的新增功能是解构赋值。解构是一种 JavaScript 表达式，可以将数组值或对象属性分离到单独的变量中。换句话说，我们可以通过从数组和对象中提取数据来将数据分配给变量。

2）、Spread Operator

得益于 ES6 中引入的展开运算符，JavaScript 代码使用起来更加高效和愉快。它可以代替特定的数组函数。展开运算符中有一系列的三个点，我们可以用它来连接和克隆数组。

与 concat() 函数不同，您可以使用扩展运算符将一个数组插入另一个数组中的任意位置。

3、与Javascript字符串相关

1）、多行字符串

如果您曾经发现自己需要在代码中编写多行字符串，那么您可以这样写：

但是有一种更简单的方法，只需使用反引号即可完成。

2）、将字符串转换为数字

您的代码可能偶尔会收到必须以数字格式处理的字符串格式的数据。这不是一个大问题；我们可以快速转换它。

3）、模板文字

我们可以在不使用 (+) 的情况下将许多变量附加到字符串中。模板文字在这里派上用场。用反引号包裹你的字符串，用 ${ } 包裹你的变量，以利用模板文字。

模板字面量为我们省去了许多使用 + 运算符连接字符串的麻烦。

4、与指数有关的

1）、指数幂速记

将第一个操作数乘以第二个操作数的幂的结果是求幂运算符 ** 返回的结果。它与 Math.pow 相同，只是 BigInts 也被接受为操作数。

2）、十进制底指数

这个可能以前见过。本质上，这是一种写整数的奇特方法，没有最后的零。例如，表达式 1e8 表示 1 后跟八个零。它表示十进制基数 100,000,000，JavaScript 将其解释为浮点类型。

5、其他操作的 JavaScript 简写

1）、短路评估

短路评估也可以替代 if...else 子句。当变量的预期值为 false 时，此快捷方式使用逻辑或运算符 || 为变量提供默认值。

2）、默认参数

if 语句用于定义函数参数的默认值。在 ES6 中，您可以在函数声明本身中定义默认值。如果没有传递任何值或未定义，则默认函数参数允许使用默认值初始化参数。

以前都是在函数体中测试参数值，如果没有定义就赋值。

默认情况下，JavaScript 中的函数参数是未定义的。然而，设置不同的默认设置通常是有利的。在这里，默认设置可能很有用。

3）、隐式返回函数

我们经常使用关键字 return 来指示函数的最终输出。单语句箭头函数将隐式返回其计算结果（该函数必须省略方括号 {} 才能这样做）。

对于多行语句，例如表达式，我们可以将返回表达式包裹在括号 () 中。

4）、声明变量

在函数的开头声明变量赋值是个好主意。这种精简方法可以帮助您在一次创建大量变量时节省大量时间和空间。

但是，请注意，出于易读性考虑，许多人更喜欢用手写方式声明变量。

5）、可选链接

我们可以使用点表示法访问对象的键或值。我们可以通过可选链接更进一步并读取键或值，即使我们不确定它们是否存在或是否已设置。如果键不存在，则可选链接的值未定义。

下面是一个可选链的例子：

6）、双位非运算符

JavaScript 中的内置 Math 对象通常用于访问数学函数和常量。一些函数提供了有用的技术，让我们可以在不引用 Math 对象的情况下调用它们。

例如，我们可以通过使用两次按位非运算符来获得整数的 Math.floor() ~~。

写在最后

这些是已被证明的一项宝贵技巧，因为它简洁明了，使编码变得有趣并且代码行易于记忆。但是请记住，它们的使用不能以牺牲代码的其他方面为代价。

相关推荐：

Vue-Router路由与配置使用

JS中各种姿势的遍历，你知道几个？

5分钟科普：带你了解web3.0究竟是什么？