變量的解構賦值

以iview的src/index.js中Vue.prototype.$IVIEW改造為例練習下怎么使用變量的解構賦值

原來的寫法：

const install = function(Vue, opts = {}) {if (install.installed) return;locale.use(opts.locale);locale.i18n(opts.i18n);Object.keys(iview).forEach(key => {Vue.component(key, iview[key]);});Vue.prototype.$IVIEW = {size: opts.size || '',transfer: 'transfer' in opts ? opts.transfer : '',select: {arrow: opts.select ? opts.select.arrow ? opts.select.arrow : '' : '',customArrow: opts.select ? opts.select.customArrow ? opts.select.customArrow : '' : '',arrowSize: opts.select ? opts.select.arrowSize ? opts.select.arrowSize : '' : ''},cell: {arrow: opts.cell ? opts.cell.arrow ? opts.cell.arrow : '' : '',customArrow: opts.cell ? opts.cell.customArrow ? opts.cell.customArrow : '' : '',arrowSize: opts.cell ? opts.cell.arrowSize ? opts.cell.arrowSize : '' : ''},menu: {arrow: opts.menu ? opts.menu.arrow ? opts.menu.arrow : '' : '',customArrow: opts.menu ? opts.menu.customArrow ? opts.menu.customArrow : '' : '',arrowSize: opts.menu ? opts.menu.arrowSize ? opts.menu.arrowSize : '' : ''},tree: {arrow: opts.tree ? opts.tree.arrow ? opts.tree.arrow : '' : '',customArrow: opts.tree ? opts.tree.customArrow ? opts.tree.customArrow : '' : '',arrowSize: opts.tree ? opts.tree.arrowSize ? opts.tree.arrowSize : '' : ''},cascader: {arrow: opts.cascader ? opts.cascader.arrow ? opts.cascader.arrow : '' : '',customArrow: opts.cascader ? opts.cascader.customArrow ? opts.cascader.customArrow : '' : '',arrowSize: opts.cascader ? opts.cascader.arrowSize ? opts.cascader.arrowSize : '' : '',itemArrow: opts.cascader ? opts.cascader.itemArrow ? opts.cascader.itemArrow : '' : '',customItemArrow: opts.cascader ? opts.cascader.customItemArrow ? opts.cascader.customItemArrow : '' : '',itemArrowSize: opts.cascader ? opts.cascader.itemArrowSize ? opts.cascader.itemArrowSize : '' : ''},colorPicker: {arrow: opts.colorPicker ? opts.colorPicker.arrow ? opts.colorPicker.arrow : '' : '',customArrow: opts.colorPicker ? opts.colorPicker.customArrow ? opts.colorPicker.customArrow : '' : '',arrowSize: opts.colorPicker ? opts.colorPicker.arrowSize ? opts.colorPicker.arrowSize : '' : ''},datePicker: {icon: opts.datePicker ? opts.datePicker.icon ? opts.datePicker.icon : '' : '',customIcon: opts.datePicker ? opts.datePicker.customIcon ? opts.datePicker.customIcon : '' : '',iconSize: opts.datePicker ? opts.datePicker.iconSize ? opts.datePicker.iconSize : '' : ''},timePicker: {icon: opts.timePicker ? opts.timePicker.icon ? opts.timePicker.icon : '' : '',customIcon: opts.timePicker ? opts.timePicker.customIcon ? opts.timePicker.customIcon : '' : '',iconSize: opts.timePicker ? opts.timePicker.iconSize ? opts.timePicker.iconSize : '' : ''},tabs: {closeIcon: opts.tabs ? opts.tabs.closeIcon ? opts.tabs.closeIcon : '' : '',customCloseIcon: opts.tabs ? opts.tabs.customCloseIcon ? opts.tabs.customCloseIcon : '' : '',closeIconSize: opts.tabs ? opts.tabs.closeIconSize ? opts.tabs.closeIconSize : '' : ''},modal: {maskClosable: opts.modal ? 'maskClosable' in opts.modal ? opts.modal.maskClosable : '' : ''}};Vue.prototype.$Loading = LoadingBar;Vue.prototype.$Message = Message;Vue.prototype.$Modal = Modal;Vue.prototype.$Notice = Notice;Vue.prototype.$Spin = Spin;
};

使用解構賦值

const install = function(Vue, opts = {}) {if (install.installed) return;locale.use(opts.locale);locale.i18n(opts.i18n);Object.keys(iview).forEach(key => {Vue.component(key, iview[key]);});/** ==================== obj ================== */let obj = {select:{},      cell:{},            menu:{}, tree:{},        colorPicker:{},     cascader:{}}for (let [key, value] of Object.entries(obj)){({arrow:          value.allow = '', customArrow:    value.customArrow = '', arrowSize:      value.arrowSize =''} = opts[key] ? opts[key] : {})}
//這里不能使用：let cascader = obj.cascader然后在下面使用({itemArrow:          obj.cascader.itemArrow = '',customItemArrow:    obj.cascader.customItemArrow = '',itemArrowSize:      obj.cascader.itemArrowSize = ''} = opts['cascader'] ? opts['cascader'] : {})/** ==================== obj2 ================== */let obj2 = { datePicker:{},  timePicker:{} }for (let [key, value] of Object.entries(obj2)){({icon:           value.icon = '', customIcon:     value.customIcon = '', iconSize:       value.iconSize =''} = opts[key] ? opts[key] : {})}let {closeIcon = '', customCloseIcon ='', closeIconSize = ''} = opts.tabs ? opts.tabs : {}Vue.prototype.$IVIEW = Object.assign({size: opts.size || '',transfer: 'transfer' in opts ? opts.transfer : '',tabs: {closeIcon, customCloseIcon, closeIconSize},modal: {maskClosable: opts.modal ? 'maskClosable' in opts.modal ? opts.modal.maskClosable : '' : ''}}, obj, obj2);Vue.prototype.$Loading = LoadingBar;Vue.prototype.$Message = Message;Vue.prototype.$Modal = Modal;Vue.prototype.$Notice = Notice;Vue.prototype.$Spin = Spin;
};

對象解構（key要對應）
數組解構（位置要對應）
其他......