请教两段JavaScript代码的运行逻辑、作用及适用场景

1 可选链操作符?.的作用 #

你看到的?不是单独生效的语法，而是和后面的.组成可选链操作符，这是ES2020新增的JS语法。

• 核心作用是安全访问对象属性/调用方法，避免前置值为null/undefined时抛出类型错误。
• 你给出的assocEmails?.includes(email)等价于如下判断逻辑：

  // 先判断assocEmails是否为null/undefined，是就直接返回undefined，否则执行后面的includes调用
  assocEmails == null ? undefined : assocEmails.includes(email)
  

• 对比普通的assocEmails.includes(email)写法：如果assocEmails未定义或者为空，普通写法会直接抛出TypeError中断代码运行，可选链写法会直接返回undefined，不会中断程序。

2 IIFE + 数组方法借用代码解析 #

你初步的判断是正确的，这段代码整体是立即调用函数表达式，拆分说明如下：

2.1 立即调用函数表达式（IIFE）逻辑 #

(function() {
  // 内部代码
})('a','b','c')

• 外层的括号作用是把匿名函数从函数声明转为函数表达式，避免JS解析报错，后面的括号就是立即执行这个函数，括号内的'a'、'b'、'c'是传入函数的实参。
• 函数没有定义形参接收参数，所以所有传入的实参会被存储到函数内置的arguments类数组对象中，此时arguments的内容就是[ 'a', 'b', 'c' ]。

2.2 Array.prototype.includes.call的作用 #

arguments是类数组对象，只具备按索引取值、length属性两个数组特性，本身没有继承数组原型上的includes方法，所以需要通过call借用数组的方法：

• call的第一个参数会指定includes方法运行时的this指向，后面的参数就是传给includes的入参。
• Array.prototype.includes.call(arguments, 'a')等价于把arguments转为真数组后调用includes('a')，所以第一个打印结果为true，第二个查找'd'的结果为false。

2.3 适用场景 #

这类写法在ES6标准发布前非常常用：

• IIFE用来创建独立的函数作用域，避免内部变量泄漏污染全局命名空间。
• 数组原型方法借用可以直接处理arguments、DOM节点集合NodeList等类数组对象，不需要额外做类数组转数组的操作，代码更简洁，性能也更好。

内容的提问来源于stack exchange，提问作者Tonio