Svelte中能否在if/for块内同时访问完整对象并解构其属性

当然可以实现啦！你之前的写法触发语法错误，是因为Svelte的模板语法有自己的规则，不能直接在块级作用域里用const声明变量，换个写法就能轻松搞定~

问题出在哪？ #

你尝试的这段代码会报“unexpected token”错误：

{#if object_var}
  {const {prop_var} = object_var} <- 这里不符合Svelte模板语法
  display: {prop_var}
{/if}

这是因为Svelte模板中的表达式不支持直接使用const来声明变量，得用它支持的变量绑定方式来实现。

两种可行的解决方法 #

方法一：在块内用let声明解构变量

这是最贴合你需求的方式，直接在if（或for）块内用let来解构属性，同时还能随时访问原对象：

{#if object_var}
  {let { prop_var } = object_var}
  显示：{prop_var}
  同时访问完整对象的其他属性：{object_var.someOtherProp}
{/if}

这样既拿到了解构后的prop_var，也能正常使用原object_var的所有属性，完全满足你的需求。

方法二：用组件脚本里的响应式解构

如果你希望解构后的变量在整个组件范围内都能使用（不局限于当前块），可以在组件的<script>标签里用响应式声明：

<script>
  export let object_var;
  // 用响应式语句，当object_var变化时自动解构，空对象兜底避免报错
  $: ({ prop_var } = object_var || {});
</script>

{#if object_var}
  显示：{prop_var}
  完整对象：{object_var}
{/if}

根据你的实际使用场景选对应的方法就好~

备注：内容来源于stack exchange，提问作者Alex