es6如何在解构赋值时使用别名

前言 背景

最近hooks看得比较多,有一个点很有趣,在这里记录一下。

我们都知道都运用过es6的对象的结构赋值吧。今天讲的是es6结构赋值当中的别名,也就是重命名。

下面举个vue3hook当中的hooks例子,大家很快就能知道其实很多地方都用到了这个:

// 自定义加法hook

javascript 复制代码
// ./useAdd.js

import { ref, watch } from 'vue'

const useAdd = ({ num1, num2 }) => {
    const totalNum = ref(0)
    
    watch([num1, num2], ([num1, num2]) => {
        addFn(num1, num2)
    })
    
    const addFn = (num1, num2) => {
        totalNum.value = num1 + num2
    }
    
    return {
        totalNum,
        addFn
    }
}

export default useAdd
csharp 复制代码
import { ref } = 'vue'
import useAdd from './useAdd.js'

const num1 = ref(0)
const num2 = ref(1)

const { totalNum:addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)

这个例子当中的totalNum就是重命名了addNum

es6解构赋值重命名

有时候数据解构返回来的属性名可能不是我们想要的取名方式,或者重名了,或者另外取一个名字才更贴合当下的开发需求,所以我们不一定想要使用数据结构回来的属性当成我们最终的变量名称。那么就另外取名设置名字。

arduino 复制代码
const app = {
    tt: '张二蛋',
    fb: '二蛋张'
}

const { tt, fb } = app

我们可以在解构的时候重命名这个tweetfb这些属性名。

yaml 复制代码
const { tt: twitter, fb: facebook } = app

在上面例子中,通过使用冒号(:)将属性或变量名为新的名称。

总结:使用别名或者重命名可以再解构赋值过程中,为属性或变量指定更有意义的名称。还有就是在hooks中当多个hooks在一个vue页面使用,不同的hooks返回的变量又存在同名这种情况,就可以用别名避免重名。

解构赋值的用法和别名这几点在hooks中很常见。

祝您开发愉快!

☎️ 希望对大家有所帮助,如有错误,望不吝赐教,欢迎评论区留言互相学习。

相关推荐
鹏多多几秒前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~9 分钟前
Vue: 侦听器(Watch)
前端·javascript·vue.js
JarvanMo10 分钟前
Flutter Debug模式:每个开发者都需要的秘密武器(但大多数人用错了)
前端
玲小珑22 分钟前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦25 分钟前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼27 分钟前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
风若飞34 分钟前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑41 分钟前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia42 分钟前
如何找回Harbor密码
前端
码码哈哈0.042 分钟前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js