ES6+js小技巧...

逻辑或操作符

如果||前面的值是0 '' false null undefined NaN其中的任意一种，则直接返回||后面的值,等同于 if else.

作用:

        给接口返回的空字段(非值字段)设置初始值

obj || {} // 等价于 =>> if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined || isNaN(obj) ){ a = {} } else { a = obj; }

空值合并操作值??

如果没有定义左侧(左侧的值是null或者undefined)则返回右侧。反之则返回左侧

obj ?? {} // 等价于 =>> if( obj === null || obj === undefined ){ a = {} } else { a = obj; }

includes简化if else

if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined || isNaN(obj) ){ ... } 可以使用includes简化为 if([0, '', false, null, undefined].includes(obj)){ // ... }

可选链操作符?.

如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。 在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。

const student = { name: "lwl", address: { state: "New York" }, } // 一层一层判断 console.log(student && student.address && student.address.ZIPCode) // 输出：undefined // 使用可选链操作符 console.log(student?.address?.ZIPCode) // 输出：undefined //也可以用于获取数组元素 const arr = [1, 2, 3, 4] console.log(arr[0]) // 输出：1 console.log(arr[4]) // 输出：undefined // 使用可选链运算符 console.log(arr?.[0]) // 输出：1 console.log(arr?.[4]) // 输出：undefined console.log(arr?.[0]?.toString()) // 输出：'1'

可选链运算符也可以用于方法调用。如果方法存在，它将被调用，否则将返回 undefined

const obj = { foo() { console.log('Hello from foo!') } } obj.foo?.() // 输出：'Hello from foo!' obj.bar?.() // 输出：undefined，因为 bar 方法不存在

逻辑空赋值??=

const a = { duration: 50 }; a.duration ??= 10; console.log(a.duration);// 50 a.speed ??= 25; console.log(a.speed);// 25

数组降维---扁平化------flat()

flatMap()

set操作---去重、交集、并集、差集

交换变量

Object.keys()获取对象的key值并以数组的形式存储

Object.values()获取对象的value值并以数组的形式存储

const info = { name: "Matt", country: "Finland", age: 35 }; // for循环遍历对象的值values let data = []; for (let key in info) { data.push(info[key]); } // for循环遍历对象的键 let keys = []; for (let key in info) {   keys .push(key); }

require和import的区别

区分点	require	import	import()
标准	导入require 导出 exports/module.exports 是 CommonJS 的标准，通常适用范围如 Node.js	import/export是es6的标准,适用于react	import()/export是es6的标准
执行	动态执行---是指在运行时才能确定其执行结果的代码执行方式。在JavaScript中，require函数属于动态执行的代码，也就是说，当JavaScript引擎执行代码时，会在运行时动态地确定所需的模块，并加载这些模块。	静态执行---是指在编译阶段就能够确定其执行结果的代码执行方式。在JavaScript中，import语句属于静态执行的代码，也就是说，当JavaScript引擎执行代码时，会在编译阶段对import语句进行静态分析，确定所导入的模块，并在运行时加载这些模块(因此速度较快)。	动态执行---在运行时根据需要动态加载模块，而不需要在代码加载阶段就加载所有模块
引用原理	赋值过程,common.js是值的拷贝	解构过程,es6是值的引用	import() 函数返回一个 Promise，可以在 Promise 的 then 方法中使用导入的模块 每个文件中调用 import() 函数时，都会创建一个新的 Promise，这个 Promise 表示将要加载并解析对应的模块，因此每个文件都会获得一个不同的模块实例。但是，实际上整个应用程序只有一个 module.js 模块的实例。 这是因为，当第一个文件调用 import() 函数时，会开始加载并解析 module.js 模块，当第二个文件调用 import() 函数时，由于该模块已经被加载并解析过了，因此不会重新加载并解析，而是直接返回已经加载并解析好的模块实例。这也意味着，如果在应用程序中多次调用 import() 函数来导入同一个模块，只有第一次调用会执行真正的加载和解析操作，后续调用都会直接返回缓存的模块实例。
性能	因为 require 是在运行时才引入模块并且还赋值给某个变量，而 import 只需要依据 import 中的接口在编译时引入指定模块所以性能稍高	比require稍高
加载	同步加载	同步加载	需要注意的是，由于 import() 是异步的，因此在模块加载完成之前，模块中导出的变量或函数是无法使用的。因此，在使用 import() 导入模块时，需要使用 Promise 或 async/await 等机制来处理异步操作
tree shaking (摇树优化)	无	有	-
导入方式	使用函数加载 const myModule = require('./myModule');	声明的方式 import { func1, func2 } from './myModule';	函数 import(moduleName).then((module) => {     // 使用模块中的内容   }).catch((error) => {     // 处理错误   });
文件类型	require则可以导入CommonJS模块、AMD模块、UMD模块以及Node.js内置模块等多种类型的模块。	import只能导入ES6模块或者使用Babel等工具转化为ES6模块的代码	-
变量提升	require函数是动态执行的，这意味着它在运行时执行，并且不会在模块内部创建一个局部作用域。因此，使用require导入的变量是可以被提升的。	import语句是静态执行的，意味着它们在模块内部的顶层执行，并且在模块内部创建一个局部作用域。这意味着导入的变量只在模块内部可见，并且不会影响模块外部的变量。因此，使用import导入的变量是不会被提升的。
导出方式	require除了可以使用 module.exports 导出模块，还可以使用 exports 对象。实际上，exports 对象是 module.exports 的一个引用。当使用 exports 导出时，实际上是向 module.exports 对象添加属性和方法 //默认导出 module.exports = {};	// 命名导出 export function func1() {} // 默认导出 export default {}
模块作用域	使用require导入模块时，实际上是将导入模块中的变量直接复制到当前模块的作用域中。(类似于浅拷贝,模块中的普通变量（例如字符串、数字等）是非共享的，而对象的变量则是能被修改共用的)当不同的文件中使用require导入相同的模块时，它们实际上是拥有各自独立的模块实例，彼此之间不会共享模块中的变量。 因此，如果使用require导入的模块中含有可变状态的对象，那么在不同文件中修改该对象的变量会相互影响。这也是require在某些情况下会产生一些难以预测的副作用的原因之一。	在使用import导入模块时，实际上是在模块内部创建了一个指向被导入模块的引用，而不是直接复制模块中的变量。因此，当不同的文件中使用import导入相同的模块时，它们实际上是共享了同一个模块实例，所以可以访问和修改同一个模块中的变量。(相当于深拷贝) 使用import导入的模块，由于是共享同一个模块实例，相对来说更容易管理和控制。
实例	多个实例	单例模式	单例模式

参考文献:一文了解js中导入模块import、import()和require()的区别 - 掘金 (juejin.cn)