JS常用小技巧

直接使用,注意查看浏览器支持情况

箭头函数 (Arrow function)

MDN

方法声明的简明写法
注意箭头函数本身没有this指向,内部的this,为调用的外层this

(x) => x
(x) => { return x }

模板字符串 (Template literals)

MDN

字符串中使用变量及换行

// 换行使用
`line1
line2`

// 变量
`params: ${a},${b} , answer: ${a + b}`

// 转义字符
`\u00A9` // 你
`\u{2F804}` // ©
    
`\unicode` // 报错 错误的unicode
String.raw`\unicode` // \\unicode 输出原始字符串

// 方法参数使用可省略括号
[1,2,3,4].join`,`
'abcd'.split``

非操作符 (Not operator)

转换为bool类型

!!undefinded // false

空值合并运算符 (Nullish coalescing operator)

MDN

运算符前为nullundefinded返回运算符之后的内容

null ?? "suffix" // suffix
undefined ?? "suffix" // suffix
0 ?? "suffix" // 0
[] ?? "suffix" // []

可选链 (Optional chaining)

MDN

判断引用nullish的简明写法

let obj = null;
obj.val // error: Uncaught TypeError
obj?.val // undefinded
obj?.['val'] // undefinded

let obj1 = {};
obj.func() // error: Uncaught TypeError
obj.func?.() // undefinded

析构赋值 (Destructuring assignment)

MDN

展开对象内容进行赋值

// 对象析构
let {a, b} = obj // 相当于:let a = obj.a; let b = obj.b
let {a:alias} = obj // 相当于:let alias = obj.a

// 数组析构
let arr = [1, 2, 3]
let [a, b] = arr // a = 1, b = 2
let [a, ...rest] = arr // rest = [2, 3]

// 交换元素
let [a, b] = [b, a]
// 跳跃取值
let [,,three] = arr // three = 3

// 实现方法返回多变量
let [res1, res2] = func()