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

作者：佚名 2023-04-11 15:22:06开发 前端 在本文中，我想与您分享 13个基本的都必道 JavaScript 函数，如果您是须知 Web前端开发人员，您应该熟悉这些函数。基本

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

您可以将本文所有 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]); // 1
last([1, 2, 3, 4, 5, 6, 7, 8]); // 8

2. JavaScript 中的逗号运算符

JavaScript 中的逗号运算符起初可能很复杂。

但是，实际上，这真的很容易！

例如，使用 [x,y] 总是返回正确的操作数。请参阅以下 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

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);
}

4. JavaScript 中的嵌套解构

解构是一个重要的 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

5. 为任何对象添加全局可用的函数

在 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)); // 3
console.log(getFibonacci(8)); // 21

8. 检查约会对象是否在周末

这个 JavaScript 片段显示了检查每个 Date 对象是否为周末是多么容易。

您可以更改周数（6 和 0）并将其替换为任何其他工作日编号以检查不同的日子。

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

9. 将 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

10. 检查对象中是否存在属性

有时你想在打印或使用它们之前检查属性是否存在。

JavaScript 没有在使用它之前执行 if property !== undefined ，而是有一个内置函数来执行此操作。

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 代码更清晰！

11. 检查数组是否包含相同的值

在某些情况下，您需要知道两个数组是否包含相同的值。

此 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

请记住，数组必须是可排序的才能真正正确地比较它们！

12.确保变量在指定范围内

这个 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

13、在一行中交换两个变量

这不是 JavaScript 函数，但它是交换两个变量的一种非常酷的方法。

它展示了如何在一行中完成，而不是将值放入“临时”对象（必须在其他一些编程语言中完成）

let x = 50;
let y = 100;
console.log(x, y); //50 100
[y, x] = [x, y];
console.log(x, y); //100 50

结束语

我希望您喜欢这些片段并发现它们对您有所帮助。如果您有任何很棒的 JavaScript 片段，请随时在评论分享它们，以便更多的学习到，让我们一起学习进步。

责任编辑：华轩 来源： web前端开发 JavaScript开发前端

(责任编辑：综合)