JavaScipt小技巧

1. 展开运算符

展开运算符太有用了&＃xff0c;不提也罢。它允许对数组或字符串等迭代符进行扩展。这对于添加新的值是非常有用的。

let arr &＃61; [1, 2, 3, 4, 5]let newArr &＃61; [...arr, 6, 7]// newArr -> [1, 2, 3, 4, 5, 6, 7]let obj &＃61; [{name: "GME", desc: "To the moon"}, {name: "John", desc: "Doe"}]let newObj &＃61; [...obj, {name: "Jane", desc: "Doe"}]// newObj &＃61; [{...}, {...}, {...}]

这是非常有用的&＃xff0c;我已经用过几次了。主要用于更新React中的状态。

2. Set Object

Set对象是Javascript中的一种新的对象类型&＃xff0c;可以用来创建没有重复的数组。当你想拥有一个唯一值的列表时&＃xff0c;这很有用。

let arr &＃61; ["a", "a", "a", "b", "b", "c"]let withSet &＃61; [...new Set(array)]// withSet -> ["a", "b", "c"]

当唯一值很重要的时候&＃xff0c;我个人已经用过几次了。语法很容易记住&＃xff0c;而且Set还有更多的功能&＃xff0c;比如.has()函数可以检查Set是否有特定的值。

3. 三元运算符

三元运算符是一个速记的条件运算符。它对于根据其他条件设置值很有用。例如&＃xff0c;在React中&＃xff0c;如果所有的数据都已加载&＃xff0c;那么就可以根据条件来设置View。

let v &＃61; 4let x &＃61; ""let y &＃61; ""if(v > 0){x &＃61; "positive"} else {x &＃61; "negative"}// Do thislet x &＃61; v > 0 ? &＃39;positive&＃39; : &＃39;negative&＃39;// And you can chain them! but is hard to read.let x &＃61; v > 0 ? y.length > 0 ? &＃39;Y <0&＃39; : &＃39;Y > 0&＃39; : &＃39;V > 0&＃39;

它比使用常规的if要短得多&＃xff0c;如果不嵌套&＃xff0c;它的可读性也很强。我一直在使用这个&＃xff0c;特别是在React或React Native中编程Javascript时。

4. 模板字符串

模板字符串是Javascript中字符串的一种形式。它们用反引号&＃xff08;&＃96;&＃xff09;代替常规引号。它们使用${expression}接受表达式&＃xff0c;并且它们可以跨越多行。

let x &＃61; string textlet multiX &＃61; string text line 1 string text line 2let exprX &＃61; string text ${x} string text// -> string text string text string text

我开始越来越多地使用这些。在编写GraphQL查询语句的时候非常好用&＃xff0c;基本上是GraphQL查询的标准。

5. ?操作符

?操作符或可选的链式运算符是一个很有用的运算符&＃xff0c;用于检查一个值是否已经被设置&＃xff0c;当它被设置后再继续。

if(data && data.subdata && data.subdata.name &＃61;&＃61;&＃61; "cool") {console.log("hi")}// Is the same asif(data?.subdata?.name &＃61;&＃61;&＃61; "cool") {console.log("hi")}

我已经写了无穷无尽的if语句来检查一个值是否被设置过&＃xff0c;这肯定会帮助解决这个问题。

6. ??操作符

??操作符是一个检查一条语句左值是否为空的操作符&＃xff0c;如果为真&＃xff0c;它将返回右边的值。

const x &＃61; null ?? &＃39;string&＃39;;// x: "string"const y &＃61; 12 ?? 42;// y: 12

当空值检查或返回一个尚未加载的字符串时&＃xff0c;这可能非常有用。