main.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. //HTML tree
  2. /*
  3. {
  4. const table = {
  5. tagName: 'table',
  6. attrs: {
  7. border: "1",
  8. },
  9. children: [
  10. {
  11. tagName: 'tr',
  12. children: [
  13. {
  14. tagName: "td",
  15. children: ["1x1"],
  16. },
  17. {
  18. tagName: "td",
  19. children: ["1x2"],
  20. },
  21. ]
  22. },
  23. {
  24. tagName: 'tr',
  25. children: [
  26. {
  27. tagName: "td",
  28. children: ["2x1"],
  29. },
  30. {
  31. tagName: "td",
  32. children: ["2x2"],
  33. },
  34. ]
  35. }
  36. ]
  37. }
  38. function htmlTree(obj){
  39. let string = ""
  40. let tag = obj.tagName
  41. if(tag){
  42. string = `<${tag}`
  43. let attrb = obj.attrs
  44. if(attrb){
  45. for(nameAttrb in attrb){
  46. string += ` style ${nameAttrb} = ${obj.attrs[nameAttrb]}`
  47. }
  48. }
  49. string += '>'
  50. for(child of obj.children){
  51. string += htmlTree(child)
  52. }
  53. string+=`</${tag}>`
  54. }
  55. else {
  56. string = obj
  57. }
  58. return string
  59. }
  60. document.write(htmlTree(table)) //вернет <table border='1' ..
  61. console.log(htmlTree(table))
  62. }
  63. //DOM tree
  64. {
  65. function domTree (parent,obj) {
  66. if(obj.tagName){
  67. let tag = document.createElement(obj.tagName)
  68. if(obj.attrs){
  69. for(nameAttrb in obj.attrs){
  70. tag[nameAttrb] = obj.attrs[nameAttrb]
  71. }
  72. }
  73. parent.append(tag)
  74. for(child of obj.children){
  75. domTree(tag, child)
  76. }
  77. }
  78. else {
  79. parent.append(obj)
  80. }
  81. }
  82. const table = {
  83. tagName: 'table',
  84. attrs: {
  85. border: "1",
  86. },
  87. children: [
  88. {
  89. tagName: 'tr',
  90. children: [
  91. {
  92. tagName: "td",
  93. children: ["1x1"],
  94. },
  95. {
  96. tagName: "td",
  97. children: ["1x2"],
  98. },
  99. ]
  100. },
  101. {
  102. tagName: 'tr',
  103. children: [
  104. {
  105. tagName: "td",
  106. children: ["2x1"],
  107. },
  108. {
  109. tagName: "td",
  110. children: ["2x2"],
  111. },
  112. ]
  113. }
  114. ]
  115. }
  116. domTree(document.body, table)
  117. }
  118. //Deep Copy
  119. {
  120. const table = {
  121. tagName: 'table',
  122. attrs: {
  123. border: "1",
  124. },
  125. children: [
  126. {
  127. tagName: 'tr',
  128. children: [
  129. {
  130. tagName: "td",
  131. children: ["1x1"],
  132. },
  133. {
  134. tagName: "td",
  135. children: ["1x2"],
  136. },
  137. ]
  138. },
  139. {
  140. tagName: 'tr',
  141. children: [
  142. {
  143. tagName: "td",
  144. children: ["2x1"],
  145. },
  146. {
  147. tagName: "td",
  148. children: ["2x2"],
  149. },
  150. ]
  151. }
  152. ]
  153. }
  154. function deepCopy (obj) {
  155. let copy
  156. if (Array.isArray(obj)) {
  157. copy =[]
  158. }
  159. else {
  160. copy = {}
  161. }
  162. if(obj){
  163. Object.keys(obj).forEach(x=>{
  164. if(typeof obj[x] === Object){
  165. copy[x] = deepCopy(obj[x])
  166. }
  167. else copy[x] = obj[x]
  168. })
  169. }
  170. return copy
  171. }
  172. const arr = [1,"string", null, undefined, {a: 15, b: 10, c: [1,2,3,4],d: undefined, e: true }, true, false]
  173. const arr2 = deepCopy(arr) //arr2 и все его вложенные массивы и объекты - другие объекты, которые можно менять без риска поменять что-то в arr
  174. const table2 = deepCopy(table) //аналогично
  175. console.log(arr2)
  176. console.log(table2)
  177. }
  178. */
  179. //My Stringify
  180. {
  181. function stringify (obj) {
  182. let result = ``
  183. if(typeof(obj) === "number" || typeof(obj) === "boolean" || obj === null){
  184. return result += obj
  185. }
  186. if(typeof(obj) === "string"){
  187. return result += `"${obj}"`
  188. }
  189. if(Array.isArray(obj)){
  190. result += "["
  191. if(obj.length > 0){
  192. for(value of obj){
  193. if(value === undefined){
  194. result += `${stringify(null)}`
  195. }
  196. result += `${stringify(value)},`
  197. }
  198. result = result.slice(0, result.length - 1)
  199. }
  200. result += "]"
  201. return result
  202. }
  203. if(typeof(obj) === "object"){
  204. result += '{'
  205. if(Object.keys(obj).length > 0){
  206. for(key in obj){
  207. if(obj[key] === undefined){
  208. continue
  209. }
  210. result += `"${key}":`
  211. result += `${stringify(obj[key])},`
  212. }
  213. result = result.slice(0, result.length - 1)
  214. }
  215. result += '}'
  216. }
  217. return result
  218. }
  219. const arr = [1,"string", null, undefined, {a: 15, b: 10, c: [1,2,3,4],d: undefined, e: true }, true, false]
  220. const jsonString = stringify(arr) //напишите функцию stringify без использования JSON.stringify
  221. console.log(jsonString)
  222. console.log(JSON.parse(jsonString)) //не должно поломаться и должно вернуть структуру, во всем схожую с оригинальным arr или table
  223. }