前言： 今天小T要跟大家分享的文章是关于Web前端开发工程师必会的JavaScript 开发小技巧。对于Web前端开发或跨平台开发，
今天小T要跟大家分享的文章是关于Web前端开发工程师必会的JavaScript 开发小技巧。对于Web前端开发或跨平台开发，JavaScript越来越流行。以前，它仅被认为是一种Web前端开发脚本语言，但现在它也越来越流行为后端脚本语言。甚至Facebook的React Native也基于JavaScript。因此，了解JavaScript中的一些技巧无疑将是有益的，这些技巧不仅不会阻止我们编写额外的代码行，而且还将使我们的代码清晰高效。下面来和小T一起看一看吧！
1、数组索引考虑一个数组[10、9、8、7、6]，如果我们想将此数组的值分配给任何变量，则我们的定位方法将是const a = array [0]。如果我们想分配多个变量，那么继续这样做将很繁琐。代码1: 旧代码做法
<script>
var array1 = [10, 9, 8, 7, 6];
var x = array1[0];
var y = array1[1];
var z = array1[2];
document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write("z = " + z + "<br>");
</script>
输出：
x = 10
y = 9
z = 8
代码2：更聪明的方式
<script>
var array2 = [10, 9, 8, 7, 6];
var [x, y, z, ...rest] = array2;
document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write("z = " + z + "<br>");
document.write("rest = " + rest + "<br>");
</script>
输出：
x = 10
y = 9
z = 8
rest = 7, 6
因此，像这样分配多个变量可以节省时间和代码。但是，应注意，其余部分是剩余部分的集合数组，而不是每个项目都单独使用。
2、定义函数想法是将一些常见或重复的任务放在一起并创建一个函数，这样我们就可以调用该函数，而不必为不同的输入一次又一次地编写相同的代码。每个人都必须在JavaScript中使用过类似的功能。代码1：以常规形式定义功能。
<!DOCTYPE html>
<html>
<body>
<p>Usual function in JavaScript</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML
= myFunction(4, 3);
</script>
</body>
</html>
输出：
Usual function in JavaScript
12
代码2：还有另一种方法将函数视为变量，而不是一个非常有用的技巧，但仍然是新事物。将函数保持在变量中，它利用像这样的箭头函数。
<!DOCTYPE html>
<html>
<body>
<p>
Function treated as
variable in JavaScript:
</p> <p id="demo"></p>
<script>
var myFunction = (p1, p2) => {
return p1 * p2;
}
document.getElementById("demo")
.innerHTML = myFunction(4, 3);
</script>
</body>
</html>
输出：
Function treated as variable in JavaScript
12
3、在一行中定义功能
现在，这个技巧真的很酷。如果你了解Python，则可能知道lambda函数，该函数的行为与任意函数相同，并且用一行编写。好吧，我们不在JavaScript中使用lambda函数，但是我们仍然可以编写单行函数。
假设我们要计算两个数字a和b的乘积，我们可以在一行脚本中完成。我们不必专门编写return语句，因为这种定义方式已经意味着它将自行返回输出。
<!DOCTYPE html>
<html>
<body>
<p>
Function treated as
variable in JavaScript
</p> <p id="demo"></p>
<script>
const productNum = (a, b) => a * b
document.getElementById("demo")
.innerHTML = myFunction(4, 3);
</script>
</body>
</html>
输出：
Function treated as variable in JavaScript
12
4、布尔值
虽然每种编程语言都只有两个布尔值True和False。JavaScript通过引入使用户能够创建bool的功能使它更进一步。
与True和False不同，它们通常分别称为“ Truthy”和“ Falsy”。为避免混淆，除0，False，NaN，null，“”之外的所有值均默认为Truthy。布尔的这种广泛使用有助于我们有效地检查状况。
<script>
const a = !1;
const b = !!!0;
console.log(a);
console.log(b);
</script>
输出：
False
True
5、过滤布尔值
有时我们可能希望过滤掉所有布尔值，例如从数组中说“ Falsy” 布尔值(0，False，NaN，null，“”)，这可以通过结合使用map和filter函数来完成。在这里，它使用Boolean关键字过滤掉Falsy值。
<script>
arrayToFilter
.map(item => {
// Item values
})
.filter(Boolean);
</script>
Input: [1, 2, 3, 0, "Hi", False, True
]Output: [1, 2, 3, "Hi", True]
6、创建完全空的对象
如果要求在JavaScript中创建一个空的对象，我们的第一个转到方法将在花括号中使用并将其分配给变量。但这不是空白对象，因为它仍然具有JavaScript的对象属性，例如__proto__和其他方法。
可以通过一种方法来创建没有任何对象属性的对象。为此，我们使用字典并将其__proto__定义为空值。
<script>
/* Using .create() method to create
a completely empty object */
let dict = Object.create(null);
// dict.__proto__ === "undefined"
</script>
除非用户另行定义，否则此对象将没有默认的__proto__或其他属性。7、截断数组
<script>
let arrayToTruncate = [10, 5, 7, 8, 3, 4, 6, 1, 0];
/* Specifying the length till where the
array should be truncated */
arrayToTruncate.length = 6;
console.log(arrayToTruncate)
</script>
输出：如所见，我们必须知道要以这种方式截断的数组的长度，否则将导致错误。此处的运行时间为O(k)，其中k是将在数组中保留的元素数。
[10、5、7、8、3、4]
8、合并对象散布运算符(…)的引入使用户可以轻松地合并到一个或多个对象，而先前通过创建一个单独的函数来实现此操作可以实现合并。
代码1：
·
<script>
function mergeObjects(obj1, obj2) {
for (var key in obj2) {
if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key];
}
return obj1; }
</script>
代码2：通过使用扩展运算符，可以轻松实现上述任务，并且代码也很清楚。
<script>
const obj1 = {};
// Items inside the object
const obj2 = {};
// Items inside the object
const obj3 = {...obj1, ...obj2};
</script>
9、条件检查检查和遍历条件是每种编程语言的重要组成部分。在JavaScript中，我们这样做是：
代码1：
<script>
if (codition) { doSomething(); }
</script>
代码2：但是，按位运算符的使用使检查条件更加容易，并且使代码仅一行：
<script>
condition && doSomething();
</script>
10、使用正则表达式替换所有字符经常出现一种情况，每次出现一个字符或一个子字符串，但不幸的是.replace()方法仅替换一个出现的实例。我们可以通过将regex与.replace()方法配合使用来解决此问题。
<script>
var string = "GeeksforGeeks"; // Some string console.log(string.replace(/eek/, "ool"));
</script>
输出：
“ GoolsforGools”
以上就是小T今天为大家分享的关于Web前端开发工程师必会的JavaScript 开发小技巧的文章，希望本篇文章能够对正在从事Web前端开发相关工作的小伙伴们有所帮助，想要了解更多Web前端开发相关知识记得关注IT培训网Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端开发工程师！
文章来源：英文 | https://www.geeksforgeeks.org/javascript-top-10-tips-and-tricks/?ref=rp翻译 | Web前端开发 (ID：Web_qdkf)
【免责声明：本文图片及文字信息均由小T转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】
Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的Web前端开发工程师。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后端开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的Web前端开发工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
文章出自：http://qh.itpxw.cn/peixun/web/202186265.html
文章标题：Web前端开发工程师必会的JavaScript 开发小技巧
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
IT培训网 访问该机构站点 报名留言 加为好友 用户等级:注册会员
用户级别:10
机构名称:IT培训网
联 系 人:罗老师
联系电话:13783581536
联系手机:13783581536
在线客服:
在 线 QQ:
电子邮件:
网站域名:http://www.itpxw.cn
注册时间:2016-07-18 11:07
最后登录:2024-02-20 13:02
今天小T要跟大家分享的文章是关于更适合做Web前端开发的几类...
今天小T要跟大家分享的文章是关于Web前端开发小白必备的学习...
今天小T要跟大家分享的文章是关于0基础小白学Web前端开发的学...
今天小T要跟大家分享的文章是关于Web前端开发工程师必备的排...
