JavaScript 一直在快速变化。在新的 ES2020 中，引入了许多您可能想要查看的很棒的功能。老实说，您可以用许多不同的方式编写代码。它们可能实现相同的目标，但有些更短、更清晰。你可以使用一些小技巧让你的代码更干净、更清晰。这里列出了一些对 JavaScript 开发人员有用的技巧，这些技巧总有一天会对你有所帮助。
方法参数验证
JavaScript 允许您为参数设置默认值。使用它，我们可以实现一个巧妙的技巧来验证您的方法参数。
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(printing ${num}) };
print(2);//printing 2
print()// error
print(null)//printing null
|
格式化 JSON 代码
你现在应该很熟悉了JSON.stringify。但是你知道你可以使用 格式化你的输出stringify吗？其实很简单。
stringify方法需要三个输入：value，replacer和space。后两个是可选参数。这就是我们之前没有使用它们的原因。要格式化我们的 JSON字符，我们必须使用space参数。
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"name": "John",
"Age": 23
}
|
这是我发布到Bit的 React 组件。随意使用 stringify示例。
从数组中获取唯一值
从数组中获取唯一值需要我们使用该filter方法过滤掉重复值。但是有了新的Set原生对象，事情变得非常顺利和容易。
let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
>>> [1, 2, 3, "school", "ball", false, true]
|
从数组中删除假值
在某些情况下，您可能希望从数组中删除虚假值。假值是 JavaScript 中评估为 FALSE 的值。JavaScript 中只有六个假值，它们是：
- undefined
- null
- NaN
- 0
- “” (empty string)
- false
过滤掉这些虚假值的最简单方法是使用以下函数：
myArray
.filter(Boolean);
|
如果你想对你的数组做一些修改，然后过滤新的数组，你可以尝试这样的事情。请记住，原始文件myArray保持不变。
myArray
.map(item => {
// 进行更改并返回新项目
})
.filter(Boolean);
|
将多个对象合并在一起
我有几个实例需要合并两个或多个类，这是我的首选方法。
const user = {
name: 'John Ludwig',
gender: 'Male'
};
const college = {
primary: 'Mani Primary School',
secondary: 'Lass Secondary School'
};
const skills = {
programming: 'Extreme',
swimming: 'Average',
sleeping: 'Pro'
};
const summary = {...user, ...college, ...skills};
|
这三个点在 JavaScript 中也称为展开运算符。您可以在此处阅读更多它们的用途。
对数字数组进行排序
JavaScript 数组带有内置的排序方法。默认情况下，这种排序方法将数组元素转换为字符串并对其执行字典排序。这可能会在对数字数组进行排序时导致问题。因此，这里有一个简单的解决方案来克服这个问题。
[0,10,4,9,123,54,1].sort((a,b) => ab);
>>> [0, 1, 4, 9, 10, 54, 123]
|
您正在提供一个函数来将数字数组中的两个元素与 sort 方法进行比较。这个函数帮助我们接收正确的输出。
禁用右键单击
您可能希望阻止用户右键单击您的网页。尽管这种情况很少见，但在某些情况下您可能需要此功能。
< body oncontextmenu = "return false" >
< div >< /div>
< /body>
|
这个简单的代码段将禁用您的用户的右键单击。
使用别名解构
解构赋值语法是JavaScript表达式，使得它可以从阵列解压缩的值，或从属性的对象，为不同的变量。我们可以根据自己的喜好将它们重命名，而不是坚持使用现有的对象变量。
const object = { number: 10 };
// 抓取数字
const { number } = object;
// 抓取数字并将其重命名为 otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10
|
获取数组中的最后一项
如果要从数组的末尾取元素，可以使用slice带有负整数的方法。
let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]
|