Complex Expressions — Functions, Arrays & Objects

同学们，我们来看今天这一页 Slide，它讲的是 ，LWC 模板里的表达式有多强大，。你可以在 HTML 模板里直接写很多 JavaScript 的表达式，省去不少在 JS 控制器里预处理的步骤。 首先，，函数调用不光能传参，还支持链式调用，。比如你要把一堆物品的名字用逗号连起来，可以直接在模板里写 `{items.map(item => item.name).join(', ')}`，非常直白。 然后你可能会担心，如果某个函数不存在就调用会报错吧？别急，，可选调用表达式， `?.（）` 就派上用场了。写成 `{myFunc?.()}` 就只在 myFunc 确实是个函数时才调用，安全得很。 接下来是，数组表达式，，你可以在模板里，内联创建数组，，也可以做 `join`、`filter`、`map`、`reduce` 这些操作。注意这里的 `reduce` 就是通常说的“归并”。所以临时拼个小数组做展示，完全不用跑回控制器写代码。 同样，，对象表达式，也能内联创建对象字面量，像 `{ { id: 1, label: '我的标签' } }` 这样，在循环里动态拼对象很方便。 安全访问方面，，可选链 `?.`， 和，空值合并运算符 `??`， 提供了双重保障。`?.` 让你在访问深层属性时，即便中间是 null 或 undefined 也不会抛错，直接返回 undefined。而 `??` 能设置默认值，比如 `{data?.name ?? '未命名'}`，如果 name 是 null 或 undefined，就显示“未命名”。 还有，，计算属性，支持用方括号加动态键来访问属性，键名里可以用模板字面量。比如你想取某个对象里的 `{obj['prefix_' + type]}`，一下子就拿到了带前缀的属性值，灵活性极高。 最后是一个工程化的好习惯：如果你有一些，可复用的格式化函数，，比如日期格式化、金额大写转换，，最好把它们放在一个共享的 API 模块组件里，，然后在需要的组件里 `import` 进来。这样逻辑集中、一改全改，后期维护轻松很多。 好了，这一页其实就是让你在模板里把 JavaScript 表达式用得游刃有余，既提高了代码的可读性，又减少了控制器里的冗余代码。记住这些写法，慢慢练习，模板会变得更智能。下节课我们再继续深挖。