后端开发教程 - Java、Spring Boot 实战 - msg200.com
提升 Web 开发人员工作效率的 7 个技巧
作为一名软件开发者，提高工作效率有时只需使用合适的工具即可。如果你每天能节省一分钟，一年就能节省多达四个小时，前提是你不休假 :)
因此，以下是我的 7 条有助于节省时间的建议：
更快querySelector
作为 Web 开发者，我们花费大量时间在浏览器上，或者说，在浏览器的开发者工具上。在这些开发者工具的控制台中，您可以通过document.getElementByIdAPI 或更通用的document.querySelectorAPI来选择一个元素document.querySelectorAll。
但是有一种更快捷的方法。您可以使用：
$('.some-class') // instead of document.querySelector
$$('.some-class') // instead of document.querySelectorAll
注意，querySelectorAll返回一个NodeList，而$$返回一个数组。
检查元素
检查元素时（使用 devtools 的检查工具）可以使用的另一个有用功能是$0。检查元素后，您可以通过输入以下命令在控制台中访问它$0：
console对象的权力
如果您正在开发一个 Web 项目，您很可能正在使用它console.log来调试您的应用程序。您知道该console对象还有其他方法可以帮助您更快地调试代码吗？
例如，这console.table是一种不太为人所知的方法，但它非常有用，因为它以数组方式组织您的输出，您可以在其中快速对变量的值进行排序。（console.table将第二个参数作为要保留的列的数组，它将过滤其余的列）：
另一个有用的方法是console.dir。此方法可让您记录 DOM 元素的 javascript 对象而不是其 HTML。
const element = $$('your-component')[0];
console.log(element); // displays the HTML element
console.dir(element); // displays the list of the element's properties
更好的调试方法
这个console对象很棒，但如果你用它来调试代码，可能会花费更多时间。与其在控制台记录，不如在控制台中检查变量，debugger这样你就可以访问该对象所在作用域的所有变量debugger。
请参阅下面的使用示例debugger：
您知道吗designMode？
让我们想象一下以下场景：你正在为一个包含文本的组件添加样式。你想通过修改组件的文本来测试一些特殊情况，比如添加超长的文本，或者根本不添加任何文本。
虽然您可以通过在 DOM 树或源代码中编辑组件的 HTML 来实现这一点，但最简单的方法是将designMode文档的属性设置为'on'，然后直接在网页上更改文本。
在 devtools 中运行document.designMode = 'on'：：
好了，关于调试就说这么多，让我们看看如何在编写代码时提高效率：
利用对象解构
如果您使用 ES6 或任何转换器，则可以通过快速访问对象（和数组）属性来利用解构。
一个很好的用例是声明新变量。以下是一个例子：
// Using it on arrays
const geolocation = [1.420000, 42.10000];
// Slow to type
const long = geolocation[0];
const lat = geolocation[1];
// Fast
const [long, lat] = geolocation;
// Same goes for objects:
const geolocation = { long: 1.420000, lat: 42.10000 }
// Slow to type
const long = geolocation.long;
const lat = geolocation.lat;
// Fast
const { long, lat } = geolocation;
解构的另一个很好的用途是交换变量的值。你可以这样做：
let a = 1;
let b = 2;
[a, b] = [b, a]
console.log(a, b) // 2, 1
ℹ️ 解构是一个很广泛的主题。你可以在这篇文章中阅读更多相关内容。
扩展运算符
最后但同样重要的一点是，这最后一条建议是迄今为止我最喜欢的一条，也是我一直在使用的。得益于扩展运算符，JavaScript 变得比以往任何时候都更加动态。
使用此运算符的一种方法是复制和连接数组和对象：
// For arrays
const arr1 = [0, 1];
const arr2 = [2, 3];
const copyOfArr1 = [...arr1];
const concatenating = [...arr1, ...arr2]; // [0, 1, 2, 3]
// Same works with objects:
const ob1 = { name: 'mark' };
const ob2 = { surname: 'smith' };
const copyOfOb1 = {...ob1};
const concatenating = {...ob1, ...ob2}; // { name: 'mark', surname: 'smith' }
另外，你可以使用扩展运算符将值推送/移出到对象和数组中。以下是一个例子：
let array = [1, 2, 3];
array = [0, ...array, 4]; // [0, 1, 2, 3, 4]
这也适用于对象，但有一个微妙之处，即如果该属性已经在对象中定义，它将被覆盖：
let ob = { name: 'mark', age: 30 };
ob = { ...ob, age: 20 };
console.log(ob); // { name: 'mark, age: 20 }
您可以利用扩展运算符的另一种用途是调用带有参数数组的函数：
const numbers = [1, 2, 3, 4, 5, 6, 7];
Math.max(...numbers); // 7
这篇文章就到这里。希望你喜欢。如果喜欢，请分享给你的朋友和同事。你也可以在 Twitter 上关注我@theAngularGuy，这会对我有很大帮助。
祝你有美好的一天 ！
