web前端JavaScript常用开发小知识总结

Posted 2021-12-05 爱创乐育知识速递

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

今天爱创小编的分享就到这里了，有学习前端，获取前端更多的是只是的同学的，欢迎大家点赞，关注，私信我！！！