当前位置: 首页 > article >正文

es6 函数解构

对象的解构赋值是内部机制,先找回同名属性,再赋值给对应的变量,真正被赋值的是后者。

let node = {type:'Identifier',name:'foo',loc:{start:{line:1,column:1},end:{line:1,column:4}},method:function(){console.log('method');},range:[0,3]
};
//
let {loc:{start:start1},range:[startIndex]
} = node;
//将loc.start 解构值赋给一个start1变量
console.log('@@@@',start1,startIndex); 
//将mehtod 函数解构赋给method1 函数变量
let {method: method1    
} = node;
method1()

不难理解

<template>
<a-upload name="file" :showUploadList="false" :customRequest="(file) => handleImportXls(file, getImportUrl, reload)"><a-button preIcon="ant-design:import-outlined" type="primary">导入</a-button></a-upload><JImportModal @register="registerModalJimport" :url="getImportUrl" online />
</template><script lang="ts" setup>
const [registerModalJimport, {openModal: openModalJimport }] = useModal();function handleImport() {//调用函数openModal: <T = any>(visible = true, data?: T, openOnSet = true): void//设置visible =true 显示弹出框openModalJimport(true);}</script>

useModal.ts


export function useModal(): UseModalReturnType {const modal = ref<Nullable<ModalMethods>>(null);const loaded = ref<Nullable<boolean>>(false);const uid = ref<string>('');function register(modalMethod: ModalMethods, uuid: string) {if (!getCurrentInstance()) {throw new Error('useModal() can only be used inside setup() or functional components!');}uid.value = uuid;isProdMode() &&onUnmounted(() => {modal.value = null;loaded.value = false;dataTransfer[unref(uid)] = null;});if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;modal.value = modalMethod;loaded.value = true;modalMethod.emitVisible = (visible: boolean, uid: number) => {visibleData[uid] = visible;};}const getInstance = () => {const instance = unref(modal);if (!instance) {error('useModal instance is undefined!');}return instance;};const methods: ReturnMethods = {setModalProps: (props: Partial<ModalProps>): void => {getInstance()?.setModalProps(props);},getVisible: computed((): boolean => {return visibleData[~~unref(uid)];}),getOpen: computed((): boolean => {return visibleData[~~unref(uid)];}),redoModalHeight: () => {getInstance()?.redoModalHeight?.();},// visible 是否显示	openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => {getInstance()?.setModalProps({open: visible,});if (!data) return;const id = unref(uid);if (openOnSet) {dataTransfer[id] = null;dataTransfer[id] = toRaw(data);return;}const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data));if (!equal) {dataTransfer[id] = toRaw(data);}},closeModal: () => {// update-begin--author:liaozhiyang---date:20231218---for:【QQYUN-6366】升级到antd4.xgetInstance()?.setModalProps({ open: false });// update-end--author:liaozhiyang---date:20231218---for:【QQYUN-6366】升级到antd4.x},};return [register, methods];
}
http://www.lryc.cn/news/2395107.html

相关文章:

  • offset三大家族
  • RSTP介绍加实操
  • Elasticsearch父子关系解析
  • 33、请求处理【源码分析】Servlet API参数解析原理
  • 基于深度学习的三维图像生成项目开发方案
  • 面试题——计算机网络:HTTP和HTTPS的区别?
  • Flutter 包依赖升级指南:让项目保持最新状态
  • LeeCode 98. 验证二叉搜索树
  • JVM类加载高阶实战:从双亲委派到弹性架构的设计进化
  • [网页五子棋][用户模块]数据库设计和配置(MyBatis)、约定前后端交互接口、服务器开发
  • maven编译时跳过test过程
  • threejsPBR材质与纹理贴图
  • 深兰科技董事长陈海波受邀出席2025苏商高质量发展(常州)峰会,共话AI驱动产业升级
  • 【计算机网络】子网划分
  • Git入门到精通:30分钟掌握核心技巧
  • Redis7底层数据结构解析
  • Android 异步编程中协程的完整实战示例
  • 多部手机连接同一wifi的ip一样吗?
  • 大语言模型值ollama使用(1)
  • 大模型应用开发之Langchain
  • thc-ssl-dos:SSL 压力测试的轻量级工具!全参数详细教程!Kali Linux教程!
  • 什么是内网ip证书
  • 【速通RAG实战:进阶】17、AI视频打点全攻略:从技术实现到媒体工作流提效的实战指南
  • 立控信息智能装备柜:科技赋能军队装备管理现代化
  • 【freertos-kernel】queue(发送)
  • 【华为云物联网】如何实现在 MQTT.fx 上模拟数据间隔上传一次,并按设定系数变动数据
  • 破解高原运维难题:分布式光伏智能监控系统的应用研究
  • 图标变白,开始菜单栏无法打开程序(以jupyter为例)
  • 大语言模型(LLM)入门 - (1) 相关概念
  • 行为型:访问者模式