江苏龙网

  1. 主页 > 生活百科 > >

13个每个 Web 开发人员都必须知道的基本 JavaScript 函数

JavaScript

在本文中，我想与您分享 13个基本的 JAVAScript 函数，如果您是 Web前端开发人员，您应该熟悉这些函数 。
 

13个每个 Web 开发人员都必须知道的基本 JavaScript 函数

文章插图
 
您可以将本文所有 JavaScript 函数加入收藏至您的工具箱，以便在您的软件项目中尽可能使用这些片段 。
如果应用，所有片段都将加快您的软件开发过程并节省多个小时的工作！
因此，不要浪费更多时间让我们开始吧！
1. 检索任何 JavaScript 数组中的第一个/最后一个项目通常，如果使用 JavaScript，我需要数组的第一个元素 。为了可用性，我创建了一个简单的 head 函数，我可以将其用于数组并将返回第一项 。
作为奖励，我添加了 JavaScript last 函数，它从数组中检索最后一项 。
 const head = (arr) => arr[0];const last = (arr) => arr[arr.length - 1];head([1, 2, 3, 4, 5, 6, 7, 8]); // 1last([1, 2, 3, 4, 5, 6, 7, 8]); // 82. JavaScript 中的逗号运算符JavaScript 中的逗号运算符起初可能很复杂 。
但是，实际上，这真的很容易！
例如，使用 [x,y] 总是返回正确的操作数 。请参阅以下 JavaScript 片段以更好地理解：
console.log([1, 2, 3, 4][1]); // 2console.log([1, 2, 3, 4][(1, 2)]); // 3console.log([1, 2, 3, 4][2]); // 33. 将任何内容复制到剪贴板在开发网站时，您有时希望将特定内容复制到剪贴板以提高可用性 。
在 JavaScript 中，这可以通过直接使用文档（旧方法）或使用导航器组件（新方法）来完成 。
function copyToClipboard() {const copyText = document.getElementById('myInput');copyText.select();document.execCommand('copy');}// new APIfunction copyToClipboard() {navigator.clipboard.writeText(document.querySelector('#myInput').value);}4. JavaScript 中的嵌套解构解构是一个重要的 JavaScript 主题，之前也有详细的分享过 。
但是今天这个代码片段显示了简单的对象重组，仅从对象中提取两个变量 。
【13个每个 Web 开发人员都必须知道的基本 JavaScript 函数】const user = {id: 459,name: 'Paul Knulst',age: 29,job: {role: 'Tech Lead',},};const {name,job: { role },} = user;console.log(name); // Paul Knulstconsole.log(role); // Tech Lead5. 为任何对象添加全局可用的函数在 JavaScript 中，可以使用新方法扩展任何对象 。
以下 JavaScript 片段显示了如何将 toUpperCase 函数添加到数组 。
Array.prototype.toUpperCase = function () {let i;for (let i = 0; i < this.length; i++) {this[i] = this[i].toUpperCase();}return this;};const myArray = ['paul', 'knulst', 'medium'];console.log(myArray); // ['paul', 'knulst', 'medium']console.log(myArray.toUpperCase()); // ['PAUL', 'KNULST', 'MEDIUM']这个概念称为原型继承，本文对此进行了详细介绍 。
6. 在 JavaScript 中将数组本地转换为对象JavaScript 有一个原生函数 Object.fromEntries，可用于将任何输入数组转换为对象 。
const anArray = [['firstname', 'Paul'],['surname', 'Knulst'],['address', 'worldwide'],['role', 'Senior Engineer'],['followers', 'not much'],];const anObj = Object.fromEntries(anArray);console.log(anObj);// {//firstname: 'Paul',//surname: 'Knulst',//address: 'worldwide',//role: 'Senior Engineer',//followers: 'not much'// }7. 递归得到一个数的斐波那契递归是每个软件开发者必须知道的概念！
此 JavaScript 片段显示了以递归方式实现的斐波那契函数 。
const getFibonacci = (n, memo = {}) =>memo[n] ||(n <= 2? 1: (memo[n] = getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));console.log(getFibonacci(4)); // 3console.log(getFibonacci(8)); // 218. 检查约会对象是否在周末这个 JavaScript 片段显示了检查每个 Date 对象是否为周末是多么容易 。
您可以更改周数（6 和 0）并将其替换为任何其他工作日编号以检查不同的日子 。
const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0;console.log(isWeekend(new Date())); // falseconsole.log(isWeekend(new Date('2022-10-28'))); // falseconsole.log(isWeekend(new Date('2022-10-29'))); // true9. 将 24 小时制时间格式转换为 am/pm使用不同的时间格式是一件痛苦的事情 。
这个简单的 JavaScript 片段显示了一个将任何 24 小时制时间转换为上午/下午时间的函数 。
const toAMPMFormat = (h) =>`${h % 12 === 0 ? 12 : h % 12}${h < 12 ? ' am.' : ' pm.'}`;console.log(toAMPMFormat(12)); // 12 pm.console.log(toAMPMFormat(21)); // 9 pm.console.log(toAMPMFormat(8)); // 8 am.console.log(toAMPMFormat(16)); // 4 pm


推荐阅读


上一篇：关于包管理器Npm、Yarn和Pnpm的一些总结

下一篇：Web测试和APP测试的区别是什么？