这 11 个前端小知识你不一定知道

英文 | https://niemvuilaptrinh.medium.com/11-social-buttons-for-website-design-a62cf3e143ad

翻译 | 杨小爱

在我大学期间，我的大部分时间里，我都在使用 Java 和 Kotlin 等 JVM 语言。具有讽刺意味的是，我大学毕业后的第一份工作居然是 ReactJS 开发人员。

在过去4年里，我害怕和逃避的语言现在就在我面前。我害怕 JavaScript 的原因，主要是因为很难理解为什么它会以这种方式工作。

将近一年半之后，我才有了信心了，慢慢理解JavaScript的工作方式，希望您在阅读本文后也会更加理解JavaCript。

在这里，我分享一些JavaScript谜团，我敢肯定您从未想过 JavaScript 中存在这些谜团。

现在，我们就开始吧。

01、假值

undefined、null、0、false、NaN、‘’都是假值。您可能已经知道这一点，但您是否知道空字符串也是假的？

见下文：

console.log('' == false); // true
console.log('' === false); // false

02、Filter 函数

您一定在数组上经常使用 filter 函数。如果您想过滤数组中的虚假值，这里有一个提示。只需在过滤器函数中提供布尔值即可。

const arr = [1,4,undefined,null,9,NaN,10,''];
console.log(arr.filter(Boolean)); // [1,4,9,10]

03、Sort 函数

你对 JavaScript 中的 sort 函数了解多少？它对数组进行排序，对吗？嗯，不完全是。

const arr = [1,2,20,10,8];
arr.sort(); // [1, 10, 2, 20, 8]
arr.sort((a,b) => a-b); //[1,2,8,10,20]

上面第 2 行的输出看起来不像一个排序数组。为什么？这是因为，当我们调用不带参数的 sort 方法时，JavaScript 会将数组的元素转换为字符串，然后按字母顺序排序，疯狂吧？

04、交换

很多时候，我会用一个例子来交换数组中的两个元素或两个变量。我曾经为此编写了一个实用程序函数，但这是一种 JavaScript 式的方法。

Inside arrays
let arr = [1,2,3,4,5];
[arr[4],arr[0]] = [arr[0],arr[4]];
console.log(arr); //[5,2,3,4,1]
Just two variables
let a = 10, b = 20;
[a,b] = [b,a];
console.log(a,b); // 20 10

这就是 JavaScript 解构的力量。虽然我用了很长时间来学习解构，但从来没有这样想过。

05、Trim 函数

在许多编程语言中，我们在字符串上有一个修剪方法，可以删除字符串中的任何空格。但是使用 JavaScript 修剪不会删除字符串中的所有空格。见下文。

" shivam bhasin  ".trim(); // "shivam bhasin"
"shivam bhasin".trim(); // "shivam bhasin"

它从您的字符串中删除所有前导和尾随空格，但不是全部。由于我在 Java 中使用字符串的经验，这让我感到困惑。

06、Push 函数

我在我的代码中经常使用 push 方法。虽然我最近知道我们也可以使用 push 来合并数组。

const a = [1,2];
const b = [3,4];
a.push(b); // [1,2,[3,4]] not merged
Array.prototype.push.apply(a,b); // [1,2,3,4] merged

在上面的第 4 行中，合并后的数组将在变量 a 中。

07、isNaN 函数

isNaN 再次成为 JavaScript 中最常用的方法之一。它检查给定的参数是否是数字。但它对于空字符串和填充字符串的行为不同。见下文。

isNaN(1); // false
isNaN(""); // false
isNaN("a"); // true
isNaN("1"); // false

第 1 行对您来说可能很清楚，1 是一个数字，因此它返回 false。

但是，在第 2 行，JavaScript 将空字符串视为 0，这是一个数字，因此无法通过 NaN 测试。

第 3 行也应该清楚，因为“a”是一个字符串，因此不是数字。

同样，在第 4 行中，“1”是一个字符串，但 JavaScript 在内部将其解析为数字 1，因此未能通过 NaN 测试。很奇怪吧？知道这一点后，我开始在参数上使用 parseInt()，然后，再将它们传递给 isNaN 函数。

08、对象的动态键

有时我不得不根据 API 响应或某些计算为我的对象分配动态键。这时，我们如何做到这一点。

const a = "age";
const b = {
     name: 'shivam',
     [a]: 22, // this will become age: 22 at runtime
};

09、Splice和Slice

将近 3 个月后，我意识到 slice 和 splice 在 JavaScript 中是不同的方法。大声笑，我知道。以下是他们的行为方式不同。

slice(s,e);
Here s is the starting index and end is the end index of the new array which will be a sub-array of the original array. Note that the original array will not be changed when using slice.


splice(i,n);
Here i denotes the starting index and n denotes the number of items to be removed starting from index i. Note that splice will alter the original array.

10、浮点数

这几乎令人难以置信，但请留在我身边。在 JavaScript 中添加浮点数的行为非常奇怪。见下文。

console.log(0.1+0.2 === 0.3); // false

这是因为 0.1+0.2 给出了的结果是 0.30000000000000004，它不等于 0.3。

console.log(9007199254740992 + 1); // 9007199254740992  
console.log(9007199254740992 + 2); // 9007199254740994

这看起来很奇怪，直到我知道所有 JavaScript 数字都是根据 IEEE 754 标准以 64 位二进制内部来表示浮点数后，我才理解了这一点。

11、typeOf 运算符

typeOf 是一个一元运算符，它返回一个字符串，表示变量的原始类型。我们知道 JavaScript 主要的对象，所以在大多数情况下，这会返回 object 。这里有一些奇怪的例外。

typeOf NaN; // 'number'

typeOf NaN 是一个看起来很奇怪的数字，但 NaN 从技术上讲是一种数字数据类型。但是，它是一种数值数据类型，其值不能用实际数字表示。见下文。

const nan1 = 2*'a'; // NaN
const nan2 = 4*'b'; // NaN
nan1 === nan2; // false

在上面的例子中， nan1 和 nan2 都不相等，这意味着它们有一些值。只是值不能用数字表示，因此它们是 NaN。看到另一个例外，

typeOf null; // 'object'

如果您在这里做到了，那就太好了。大多数人在此之前就结束了。但是您对它了解得越多，您就越了解世界第一编程语言的工作原理。

这是我与你分享的秘诀。

基本操作 > 方法

如果您想让您的代码更快，那么，尝试使用原始操作而不是进行方法调用。尽可能使用 VanillaJS，它会使您的代码在运行时运行得更快。见下文。

const min = Math.min(a,b); // slow
const min = a<b? a: b; // fast
arr.push(x); // slow
arr[arr.length] = x; // fast

最后，希望您通过我今天与您分享的内容有所收获，如果您觉得它有用，也请您分享给您身边做开发的朋友。

今天内容就到这里了，感谢您的阅读，同时，欢迎您给我点赞，评论加关注。

祝您今天愉快！

学习更多技能

请点击下方公众号