使用这些必备的 JavaScript 代码段提高开发人员技能、节省时间并优化整体代码质量
在本文中,我将向您展示 12 个基本的 JavaScript 函数,如果您是 Web 或前端开发人员,您应该熟悉这些函数。
您可以将本文和所有 JavaScript 函数用作工具箱,以便在您的软件项目中尽可能使用这些片段。
如果应用,所有片段都将加快您的软件开发过程并节省多个小时的工作!
因此,不要浪费更多时间让我们开始吧!
通常,如果使用 JavaScript,我需要数组的第一个元素。为了可用性,我创建了一个简单的head函数,可用于数组并将返回第一项。
作为奖励,我添加了last从数组中检索最后一项的 JavaScript 函数。
const head = (arr) => arr[0];
const last = (arr) => arr[arr.length - 1];
head([1, 2, 3, 4, 5, 6, 7, 8]); // 1
last([1, 2, 3, 4, 5, 6, 7, 8]); // 8
JavaScript 中的逗号运算符起初可能很复杂。
但是,实际上,这真的很容易!
例如,使用[x,y]always 返回正确的操作数。请参阅以下 JavaScript 片段以更好地理解:
console.log([1, 2, 3, 4][1]); // 2
console.log([1, 2, 3, 4][(1, 2)]); // 3
console.log([1, 2, 3, 4][2]); // 3
在开发网站时,您有时希望将特定内容复制到剪贴板以提高可用性。
在 JavaScript 中,这可以通过直接使用文档(旧方法)或使用导航器组件(新方法)来完成。
function copyToClipboard() {
const copyText = document.getElementById('myInput');
copyText.select();
document.execCommand('copy');
}
// new api
function copyToClipboard() {
navigator.clipboard.writeText(document.querySelector('#myInput').value);
}
解构是一个重要的 JavaScript 主题,在我最新的时事通讯帖子中也有详细解释。
此片段显示了简单的对象重组,仅从对象中提取两个变量。
const user = {
id: 459,
name: 'Paul Knulst',
age: 29,
job: {
role: 'Tech Lead',
},
};
const {
name,
job: { role },
} = user;
console.log(name); // Paul Knulst
console.log(role); // Tech Lead
在 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']
这个概念称为原型继承,本文对此进行了详细介绍。
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'
// }
递归是每个软件开发者必须知道的概念!
此 JavaScript 片段显示了以递归方式实现的斐波那契函数。
const getFibonacci = (n, memo = {}) =>
memo[n] ||
(n <= 2
? 1
: (memo[n] = getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));
console.log(getFibonacci(4)); // 3
console.log(getFibonacci(8)); // 21
这个 JavaScript 片段显示了检查每个 Date 对象是否为周末是多么容易。
您可以更改周数 (6和0) 并将其替换为任何其他工作日 nr 以检查不同的日子。
const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0;
console.log(isWeekend(new Date())); // false
console.log(isWeekend(new Date('2022-10-28'))); // false
console.log(isWeekend(new Date('2022-10-29'))); // true
使用不同的时间格式是一件痛苦的事情。
这个简单的 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
有时你想在打印或使用它们之前检查属性是否存在。
if property !== undefinedJavaScript 有一个内置函数来执行此操作,而不是在使用它之前执行。
const developer = {
name: 'Paul Knulst',
role: 'Tech Lead',
extra: 'Loves DevOps',
company: 'Realcore',
os: 'Windows',
};
const laptop = {
os: 'Windows',
buydate: '27.10.2022',
extra: 'looks cool',
};
console.log('name' in developer); // true
console.log('extra' in developer); // true
console.log('name' in laptop); // false
console.log('extra' in laptop); // true
结合nullish 合并运算符,它可以使您的 JavaScript 代码更清晰!
在某些情况下,您需要知道两个数组是否包含相同的值。
此 JavaScript 片段包含一个函数containSameValues,该函数通过对两个数组进行排序和连接并比较它们的字符串来执行此操作。
const containSameValues = (arr1, arr2) =>
arr1.sort().join(',') === arr2.sort().join(',');
console.log(containSameValues([1, 2, 3], [1, 2, 3])); // true
console.log(containSameValues([1, 2, 3], [2, 3, 4])); // false
console.log(containSameValues([1, 2, 3], [1, 2, 3, 4])); // false
请记住,数组必须是可排序的才能真正正确地比较它们!
这个 JavaScript 函数对我来说非常有用!
它检查变量是否在特定范围内,如果不在范围内,它将把它限制在最接近的最小值或最大值。
const clamp = (min, max, value) => {
if (min > max) {
throw new Error('min cannot be greater than max');
}
return value < min ? min : value > max ? max : value;
};
clamp(0, 6, -5); // 0
clamp(0, 6, 20); // 6
clamp(0, 6, 3); // 3
这不是 JavaScript 函数,但它是交换两个变量的一种非常酷的方法。
它展示了如何在一行中完成,而不是将值放入“临时”对象(必须在其他一些编程语言中完成)
let x = 50;
let y = 100;
console.log(x, y); //50 100
[y, x] = [x, y];
console.log(x, y); //100 50
英文:https://javascript.plainenglish.io/12-essential-javascript-functions-every-web-developer-must-know-a4159111588f
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读
你有没有看过你非常喜欢的网站,是否研究过它的布局方式,有没有想过我自己能不能也能实现一个,甚至比你看的网站更好!所有这些可见的站点界面和特效都是通过前端开发构建的
本文作者介绍了在面试高级开发者职位时的技巧,与面试初级开发者的不同。需要对面试官、公司、职位做提前调研。为了准备面试,你需要调研、调研、再调研。去年,我经历了我软件开发生涯中最令人沮丧的 6 个月。
尽管CSS每年都会发布全新的特性,但实际上这些新功能很少会被web开发人员实际在生产项目中使用到,甚至去了解它们的动力也不会比去多完成几个需求更多。那究竟是什么原因导致的呢?
你想成为一名Web开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验。你上了一些课程,也花了时间在个人编码项目上
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!