有一些 JavaScript 技巧在日常工作中经常被忽视,笔者挑选了 11 个教程中不常提及的例子供大家一起学习!
1. 筛选唯一值
Set 类型是在 ES6 中添加的,类似于字段,但成员的值是唯一的,没有重复的值。组合增强运算符 (...我们可以创建一个新字段来过滤原始字段的重复值。
const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 5]
在 ES6 之前,我们需要更多的处理代码来实现此功能。
此方法的作用域是链表中的值类型为:未定义、null、布尔值、字符串、数字。当它包含对象、函数和数组时,它不适用。
2、短路评估
三目算子是写一些简单逻辑句子的方便快捷的方法
x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';
但是,有时当逻辑复杂时,三目算子可能难以编写和读取。在这种情况下,我们可以使用逻辑和 (&&) 和逻辑或 (||) 运算符来覆盖我们的表达式。
逻辑 AND 和逻辑 OR 运算符总是首先估计其操作数,并且只有在仅靠正确操作数的值难以确定逻辑表达式的结果时才求解其右操作数。这称为“短路评估”
工作原理
AND (&&) 运算符将返回第一个假/“假”值。当所有操作数都为 true 时,返回最后一个表达式的结果。
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
或 (||) 运算符返回第一个 true/'truthy' 值。当所有操作数都为 false 时,返回最后一个表达式的结果。
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
场景示例
当我们请求从服务器获取数据时,我们会在另一个位置使用数据,但获取数据的状态是未知的,例如当我们访问 this.state 的数据属性时。按照常规方法javascript数组转字符串,我们将首先确定这个 this.state.data 的有效性,然后根据有效性情况对其进行区分。
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}
但是我们可以通过前面的方法简化这种逻辑处理
return (this.state.data || 'Fetching Data');
相比之下,我发现这种方法越来越简单方便。
3. 转换布尔类型
常规布尔值只有真和假,但在 JavaScript 中,我们可以将其他值视为“真”或“假”。
除了 0、“”、null、undefined、NaN 和 false,其他所有我们可以认为都是“真实”。
我们可以传递负运算符!将一系列变量转换为“布尔”类型。
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
4.转换字符串类型
我们可以通过 + join 运算符将数字类型的变量转换为字符串类型。
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
5.转换数字类型
对应于前一个javascript数组转字符串,我们可以通过乘法运算符+将字符串类型的变量转换为类型数字
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
在个别上下文中,+ 被解释为连接运算符,而不是乘法运算符。当出现这些情况时(你想返回一个整数,而不是一个浮点数),你可以使用两个波浪号:~~。(注意它是中文格式)。
波浪号 ~,称为“按位 not 运算符”,等效于 -n - 1。所以 ~15 = -16
使用两个~~可以有效地否定操作。这是因为 - (- n - 1) - 1 = n + 1 - 1 = n。也就是说,~-16 = 15
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
6. 快速幂
从 ES7 开始,我们可以使用 power 运算符 ** 作为 power 的缩写,这比之前的 Math.pow(2, 3) 要快。这是一个非常简单实用的观点,但大多数教程都没有专门介绍它。
console.log(2 ** 3); // Result: 8
这不应该与 ^ 符号混淆,^ 符号通常用于表示指数,但在 JavaScript 中有点 XOR 运算符。
在ES7之前,功率的缩写主要基于位左移运算符
其中之一
严格模式的主要用途是避免在全局范围内声明变量。在 JavaScript 中,全局作用域是默认作用域。这意味着在函数外部声明的任何变量都将手动添加到全局范围。
这可能会有问题,因为很容易无意中覆盖全局范围内的现有变量。例如,如果声明与现有全局变量同名的变量,则将覆盖现有变量。
若要防止这些情况,请确保始终在函数中声明变量。这可确保它们不会添加到全局范围。
使用 ==
而不是 ===
在 JavaScript 中,有两种方法可以检测两个值是否相等:== 和 ===。== 运算符检测值是否相等,而 === 运算符检测值和类型是否相等。
大多数情况下,您希望使用 === 运算符,因为它更具限制性。但是,== 在某些情况下可能很有用。例如,如果要比较可能不同类型的两个值,== 会很有帮助,因为它会在比较之前将值转换为相同的类型。
记得绑定这个
当使用 JavaScript 的面向对象特性时,你经常需要在内部引用当前对象。为此,您应该使用 this 关键字。
但是,可以根据调用它的方法更改此值。例如,如果对对象调用 way,这将引用该对象。但是,如果对另一个对象进行相同的调用,这将改为引用该对象。
这可能是一个问题,因为很难跟踪这引用了哪些。若要防止出现这些情况,请确保将 this 的值绑定到当前对象。这可以通过使用绑定方法来实现:
var obj = {
foo: function() {
console.log(this);
}
};
var bar = obj.foo.bind(obj);
bar(); // prints the obj object
在上面的代码中javascript数组转字符串,我们以foo的方式创建了一个对象。然后,我们创建一个名为bar的新变量,并将其设置为在foo上调用bin的结果。这会将 foo 中的值设置为 obj 对象。当我们调用 bar 时,它会将 obj 输出复制到控制台。
修改字符串而不是创建新字符串
在 JavaScript 中,字符串是不可变的。这意味着一旦创建了字符串,就无法对其进行修改。
但是,有几种方法可以更改字符串。例如,replace 方法可用于将字符串的一部分替换为另一个字符串。
var str = "Hello world!";
str.replace(" world", " JavaScript"); // returns "Hello JavaScript!"
左右滑动以查看完整代码
replace 方法实际上不会更改原始字符串,而是返回新更改的字符串。请务必记住这一点,因为在准备创建字符串时,很容易无意中更改字符串。
若要防止这些错误,请确保在更改现有字符串时创建新字符串。您可以使用切片方式执行此操作:
var str = "Hello world!";
var newStr = str.slice(0, 5) + " JavaScript!"; // returns "Hello JavaScript!"
左右滑动以查看完整代码
在上面的代码中,我们使用切片方式创建一个富含原始字符串前五个字符的新字符串。然后我们将其与字符串“JavaScript!连接,它创建一个新字符串,我们可以将其分配给 newStr 变量。
导致内存泄漏
内存泄漏是使用 JavaScript 编程时可能发生的问题。当您坚持引用不再需要的对象时,就是这种情况。
例如,请考虑以下代码:
var arr = [1, 2, 3, 4, 5];
var foo = function() {
arr.push(6);
};
setInterval(foo, 1000);
在上面的代码中,我们创建了一个字段和一个向该字段添加新元素的函数。然后javascript数组转字符串,我们设置一个计时器来每秒调用一次函数。
此代码将导致内存泄漏,因为 arr 字段永远不会被垃圾回收。这是因为 foo 函数引用 arr 字段,并且每秒调用一次 foo 函数。
若要防止此错误,请确保删除对不再需要的对象的引用。在上面的例子中,我们可以使用 clearInterval 方法做到这一点:
var arr = [1, 2, 3, 4, 5];
var foo = function() {
arr.push(6);
};
var interval = setInterval(foo, 1000);
clearInterval(interval);
在上面的代码中,我们将 setInterval 的返回值存储在一个变量中。此返回值是对已创建的间隔的引用。然后,可以使用 clearInterval 方法消除间隔并删除对 arr 链表的引用。
不使用 IIFE
IIFE(即时调用函数表达式)是一个立即执行的函数。IIFE 通常在 JavaScript 中用于创建本地作用域。
例如,请考虑以下代码:
var foo = "foo";
(function() {
var foo = "bar";
})();
console.log(foo); // prints "foo"
在上面的代码中,我们有一个名为foo的全局变量,值为“foo”。然后我们创建一个具有相同名称的局部变量的 IIFE。此局部变量只能在 IIFE 中访问。
当我们将foo的值记录到控制台时,它会输出“foo”。这是因为 IIFE 创建了一个不同于全局范围的新范围。
若要防止此错误,请确保在要创建新作用域时使用 IIFE。
原文链接:
连续三次给小编加鸡腿!