实用的JavaScript代码片段
1、单行If-Else语句
你可能熟悉这样的常规if-else语句:
if (10 < 100) {
console.log("True");
} else {
console.log("False");
}
输出
True
但是,你知道吗,你可以通过使用三元运算符,以更短,更简洁的方式编写上面的代码?
10 <100 ? console.log("True") : console.log?("False")
输出:
True
通常,三元运算符遵循以下简单模式:
condition ? trueExpression : falseExpression
三元运算符也可以链接在一起以形成更长的链。但是,它通常会使代码变得很冗长。明智地使用它们,不会使事情变得更复杂。
2、合并数组
你可以使用传播运算符(...)将一个数组的元素10扩展为另一个数组,例如:
const numbers = [10, 20, 30, 40];
const allNumbers = [...numbers, 50, 60, 70, 80];
console.log(allNumbers);
输出:
[10, 20, 30, 40, 50, 60, 70, 80]
3、从数组中删除重复项
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers);
输出:
[1, 20, 3, 9]
4、将任何内容转换为布尔值
除了true和false之外,JavaScript还将其他类型视为真或假。
0,"",null,undefined,NaN,和false总是假 。
其他一切都为真。
正因为如此,在JavaScript中,你可以将任何值转换为true和false与一元运算符(!):
const bool1 = !0; // true
const bool2 = !100; // false
const bool3 = !"test"; // false
const bool4 = !!"test"; // true
console.log(bool1, bool2, bool3, bool4);
输出:
true false false true
5、交换两个变量而不用第三个变量
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);
输出:
2 1
6、将数字转换为字符串
const num = 1 +“”;
console.log(typeof num);
console.log(num);
输出:
string
1
7、将字符串转换为数字
const numStr = "124";
const num = +numStr;
console.log(typeof num);
console.log(num);
输出:
number
124
8、将变量嵌入到字符串
通过使用反引号将字符串括起来并将变量插入之间,将变量整齐地嵌入到字符串之间${}:
const age = 41;
const sentence = `I'm ${age} years old`;
console.log(sentence);
输出:
I'm 41 years old
9、将字符串拆分为数组
要将字符串拆分为数组,可以使用扩展运算符(...):
const str = "Test"
const strAsArr = [...str]
console.log(strAsArr)
输出:
["T", "e", "s", "t"]
10、可选链接
“可选的链接运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。” — MDN Web文档
假设你有一个data对象,并且想要安全地访问data.test.value。首先,你需要检查:
data是否被定义。
data.test是否被定义。
在data.test.value,你可以调用之前,因为,你显然无法读取undefined属性。
const data = {test:{value:1}}
if(data && data.test){
console.log(data.test.value);
}
输出:
1
幸运的是,使用可选链接的方法,你可以简单明了地编写上面的代码:
const value = data?.test?.value;
console.log(value)
输出:
1
现在,你还可以安全地尝试访问不存在的属性,而不会出现问题:
console.log(data?.this?.does?.not?.exist?.for?.sure)
输出:
undefined
加餐:提高JSON的可读性
我确定你以前用过JSON.stringify()。但是,你可能不使用它的一种方法是对JSON数据进行整齐缩进。
让我们看看如何完成此任务。该JSON.stringify()方法接受两个可选参数:
替换功能,用于过滤显示的JSON。在这种情况下,可以是null,因为我们不需要它。
一个空格值,可以是所需空格的数目或字符串。在这种情况下,让我们使用制表符('\t')缩进JSON对象以使其看起来不错:
const readableJSON = JSON.stringify({ a: 'A', b: 'B' }, null, '\t');
console.log(readableJSON);
输出:
{
"a": "A",
"b": "B"
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。