「数据转换五」将虚拟 Dom 转化为真实 Dom & 给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。

[ntscshen]

// 将虚拟 Dom 转化为真实 Dom

// {
//   tag: 'DIV',
//   attrs:{
//   id:'app'
//   },
//   children: [
//     {
//       tag: 'SPAN',
//       children: [
//         { tag: 'A', children: [] }
//       ]
//     },
//     {
//       tag: 'SPAN',
//       children: [
//         { tag: 'A', children: [] },
//         { tag: 'A', children: [] }
//       ]
//     }
//   ]
// }
// 把上诉虚拟Dom转化成下方真实Dom
// <div id="app">
//   <span>
//     <a></a>
//   </span>
//   <span>
//     <a></a>
//     <a></a>
//   </span>
// </div>

const data = {
  tag: 'DIV',
  attrs:{
  id:'app'
  },
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}

const _render = (vnode) => {
  if (typeof vnode === 'number') {
    vnode = String(vnode);
  }
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }
  // 如果不是如上两种情形，呐就是普通DOM了
  // 1. 先创建DOM
  const dom = document.createElement(vnode?.tag);
  const attrs = vnode?.attrs;
  const childrens = vnode?.children;
  // 2. 添加attr
  if (attrs) {
    Object.keys(attrs).forEach(key => {
      dom.setAttribute(key, attrs[key])
    })
  }
  // 3. 添加子集节点

  childrens.length && childrens.forEach(child => {
    dom.appendChild(_render(child))
  })
  return dom
}

_render(data)

// 给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。

// 有效字符串需满足：

//     左括号必须用相同类型的右括号闭合。
//     左括号必须以正确的顺序闭合。

// 示例 1：

// 输入：s = "()"
// 输出：true

// 示例 2：

// 输入：s = "()[]{}"
// 输出：true

// 示例 3：

// 输入：s = "(]"
// 输出：false

const isValid = (str) => {
  if (str.length < 1) return false;
  const tempObj = {
    "{": "}",
    "[": "]",
    "(": ")"
  }
  let result = [];
  for (let i = 0; i < str.length; i++) {
    const cur = str[i];
    if (cur === "(" || cur === "{" || cur === "[" ) {
      result.push(cur);
    } else {
      const item = result.pop();
      if (str[i] !== tempObj[item]) {
        return false;
      }
    }
  }
  if (result.length) return false;
  return true;
}

console.log(isValid('()'));
console.log(isValid('()[]{}'));
console.log(isValid('(]'));