JS 小技巧
前端发展很快，各种技术和框架层出不穷、百花齐放，很多人都喊学不动啦！事实上JavaScript 作为前端的主要语言，虽然它的发展很快，每年都会出一些新特性，但 JavaScript 开发者的发展速度更快一些，因为很多相对较新的功能都已经有很高的使用率。 下面来看看那些具有较高采用率的新特性，2022你应该了解的 JS 小技巧
1. 用??代替||，用于判断运算符左侧的值为null或undefined时，才返回右侧的值
?? 运算符是 ES2020 引入，也被称为null判断运算符( Nullish coalescing operator) 它的行为类似||，但是更严
||运算符是左边是空字符串或false或0等falsy值，都会返回后侧的值。
而??必须运算符左侧的值为null或undefined时，才会返回右侧的值。因此0||1的结果为1，0??1的结果为0
例如
const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: '',
showSplashScreen: false
}
};
const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false
2. 使用?.简化&&和三元运算符
?.也是ES2020 引入，有人称为链判断运算符（optional chaining operator）
?.直接在链式调用的时候判断，判断左侧的对象是否为null或undefined，如果是的，就不再往下运算，返回undefined，如果不是，则返回右侧的值
例如
var street = user.address && user.address.street;
var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined
// 简化
var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value
注：常见写法
obj?.prop 对象属性
obj?.[expr] 对象属性
func?.(...args) 函数或对象方法的调用
3. 使用动态导入import()实现按需加载（优化静态import）
我们可以使用 import 语句初始化的加载依赖项
import defaultExport from "module-name";
import * as name from "module-name";
但是静态引入的import 语句需要依赖于 type="module" 的script标签，而且有的时候我们希望可以根据条件来按需加载模块，比如以下场景：
- 当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它
- 当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低
- 当被导入的模块，在加载时并不存在，需要异步获取
- 当被导入的模块有副作用，这些副作用只有在触发了某些条件才被需要时
这个时候我们就可以使用动态引入import()，它跟函数一样可以用于各种地方，返回的是一个 promise
基本使用如下两种形式
//形式 1
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
//形式2
let module = await import('/modules/my-module.js');
4. 使用顶层 await（top-level await）简化 async 函数
其实上面的代码就有用到
let module = await import('/modules/my-module.js');
顶层 await 允许开发者在 async 函数外部使用 await 字段
5. 使用Proxy替代Object.defineProperty
为什么使用 Proxy 替代 Object.defineProperty，简单总结Proxy的几点优势
- Proxy 是对整个对象的代理，而 Object.defineProperty 只能代理某个属性
- 对象上新增属性，Proxy 可以监听到，Object.defineProperty 不能
- 数组新增修改，Proxy 可以监听到，Object.defineProperty 不能
- 若对象内部属性要全部递归代理，Proxy 可以只在调用的时候递归，而 Object.definePropery 需要一次完成所有递归，性能比 Proxy 差
使用也很简单，Proxy本质是构造函数，通过new即可产生对象，它接收两个参数：
- target表示的就是要拦截（代理）的目标对象
- handler是用来定制拦截行为（13种）
例如响应式reactive的基本实现：
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
// 可以做依赖收集
track(target, key)
return target[key]
},
set(target, key, val) {
target[key] = val
// 触发依赖
trigger(target, key)
}
})
}
6. 使用Array.prototype.at()简化arr.length
Array.prototype.at()接收一个正整数或者负整数作为参数，表示获取指定位置的成员
参数正数就表示顺数第几个，负数表示倒数第几个，这可以很方便的某个数组末尾的元素
例如
var arr = [1, 2, 3, 4, 5]
// 以前获取最后一位
console.log(arr[arr.length-1]) //5
// 简化后
console.log(arr.at(-1)) // 5
7. 使用哈希前缀#将类字段设为私有
在类中通过哈希前缀#标记的字段都将被私有，子类实例将无法继承
例如
class ClassWithPrivateField {
#privateField;
#privateMethod() {
return 'hello world';
}
constructor() {
this.#privateField = 42;
}
}
const instance = new ClassWithPrivateField()
console.log(instance.privateField); //undefined
console.log(instance.privateMethod); //undefined
可以看到，属性privateField和方法privateMethod都被私有化了，在实例中无法获取到
持续更新中。。。。
