Object.assign和&&

在表达式绑定中有一个这个语法

[Object.assign(...$page.dataset.state.where, $page.dataset.params?.isNav === 'true' && {
    
     rel: 'eq',val: $page.dataset.params.categoryId,key: 'categoryId'}) ]

这里第一个语法是Object.assign

这里的意思是拷贝属性的意思,最后会返回一个对象。

…表示展开的意思,展开会把对象的属性进行展开,第一个参数作为目标,后续的参数都是源。

第二个语法是短路运算符

$page.dataset.params?.isNav === 'true' && {
    
     rel: 'eq',val: $page.dataset.params.categoryId,key: 'categoryId'}

短路运算符会计算左右表达式的值,如果左边的表达式的计算值是false那么就直接返回false,如果不为false就计算右边表达式的值并进行返回。

这里唯一的疑惑是如果计算右边的表达式,那是返回true或者false,还是返回对象。为了验证我们需要在编辑器里测试一下。

打开低码编辑器,打开开发者工具,在控制台里我们先输入这个表达式
在这里插入图片描述
因为我们的变量目前没有值,就直接返回的是false
在这里插入图片描述
如果直接给赋值true,那么就会计算右边表达式的值,计算结果是返回的是一个对象

有了对象之后,我们的源和目标会进行合并,将不同的属性合并为一个对象

这里的对象属性合并和短路运算符在表达式里经常使用,可以动态的给一个变量进行填充属性,在应用搭建的时候还是比较常见的一个技巧。

猜你喜欢

转载自blog.csdn.net/u012877217/article/details/127774393