how to use vanilla js iterate the Symbol Object All In One

bug ❌

Uncaught TypeError: UIComponents is not iterable


import * as UIComponents from './index'

console.log(`UIComponents =`, UIComponents);
// UIComponents = Module {Symbol(Symbol.toStringTag): 'Module'}

export const UIComponentsInstall = {
  // 钩子函数
  install: (app: App) => {
    // Uncaught TypeError: UIComponents is not iterable ❌
    for (const component of UIComponents) {
      // 把组件挂载到 Vue 上
      app.component(component.name, component);
    }
  }
}

solutions ✅

Vue 组件注册

// type ???
import type {App} from "vue"


// 自动注册所有组件
import * as UIComponents from './index'

console.log(`UIComponents =`, typeof UIComponents, UIComponents);
// UIComponents = Module {Symbol(Symbol.toStringTag): 'Module'}

export const UIComponentsInstall = {
  // 钩子函数
  install: (app: App) => {
    // Uncaught TypeError: UIComponents is not iterable ❌
    for (const [name, component] of Object.entries(UIComponents)) {
      console.log(`name =`, name);
      console.log(`component.name =`, component.name);
      // 把组件挂载到 Vue 上
      app.component(component.name, component);
    }
  }
}

vanilla js Object.entries

copy(temp1)

Object.entries(temp1)

for (let [key, value] of Object.entries(temp1)) {
    console.log('key, value =', key, value)
}

lodash-es

$ yarn add -D lodash-es @types/lodash-es

loadsh forEach

import * as UIComponents from './index'


export const UIComponentsInstall = {
  // 钩子函数
  install: (app: App) => {
    forEach(UIComponents, (component) => {
      // 把组件挂载到 Vue 上
      app.component(component.name, component);
    })
  }
}

???

let str = "Hello";

// does the same as
// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  alert(result.value); // outputs characters one by one
}

https://javascript.info/iterable

https://www.youtube.com/watch?v=CM_oBrnB4Vk&ab_channel=codebubb

https://www.youtube.com/watch?v=2oU-DfdWM0c&ab_channel=dcode