feat: update

whu-luojian · Mar 4, 2021 · e26844a · e26844a
1 parent 086dc30
commit e26844a
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 1 deletion.
diff --git a/src/2021-02-01/question-1.ts b/src/2021-02-01/question-1.ts
@@ -0,0 +1,50 @@
+/**
+ * 给定一个 dom 元素，生成 dom 的唯一 css 选择器
+ */
+
+enum NODE_TYPE {
+
+}
+
+// 获取元素所在父级 children 的索引
+const getDomIndex = (el: HTMLElement): number => {
+  if (!el.parentNode) {
+    return -1
+  }
+  const list = el.parentNode.children
+  if (!list) {
+    return -1
+  }
+  return Array.prototype.indexOf.call(list, el)
+}
+
+// 生成元素的 selector，用于拼接
+const getSelector = (el: HTMLElement): string => {
+  if (el.id) {
+    return '#' + el.id
+  } else {
+    const i = getDomIndex(el)
+    return el.tagName.toLowerCase() + (i >= 0 ? `:nth-child(${i + 1})` : '')
+  }
+}
+
+// 生成元素唯一选择器
+const getDomUniqueSelector = (el: HTMLElement, arr: string[] = []): string => {
+  if (!el || !el.parentNode || !el.parentNode.children) {
+    return ''
+  }
+  const name = el.nodeName.toLowerCase()
+
+  if (name === 'body') {
+    arr.unshift('body')
+    return arr.join('>')
+  }
+
+  arr.unshift(getSelector(el))
+
+  if (el.id) {
+    return arr.join('>')
+  }
+
+  return getDomUniqueSelector(el.parentNode as HTMLElement, arr)
+}
diff --git a/src/2021-02-23/question-1.ts b/src/2021-02-23/question-1.ts
@@ -0,0 +1,43 @@
+/**
+ * 实现深拷贝
+ */
+
+const getType = (a: any) => {
+  return toString.call(a).slice(8, -1)
+}
+
+const cloneDeep = (obj: any) => {
+  if (obj === null) {
+    return null
+  }
+
+  if (!(typeof obj === 'object')) {
+    return obj
+  }
+
+  const newObj = obj instanceof Array ? [] : {}
+
+  if (obj instanceof Array) {
+    obj.forEach(item => {
+      // @ts-ignore
+      newObj.push(cloneDeep(item))
+    })
+  } else {
+    Object.keys(obj).forEach(key => {
+      // @ts-ignore
+      newObj[key] = cloneDeep(obj[key])
+    })
+  }
+
+  return newObj
+}
+
+const obj1 = {
+  a: 1,
+  b: {
+    c: [1, 2],
+    d: null
+  }
+}
+
+console.log(cloneDeep(obj1))
diff --git a/src/2021-02-24/question-1.html b/src/2021-02-24/question-1.html
@@ -0,0 +1,21 @@
+<!-- css 居中 -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .parent {
+      height: 400px;
+      position: relative;
+    }
+  </style>
+</head>
+<body>
+  <div class="parent">
+    居中div中的字
+  </div>
+</body>
+</html>
diff --git a/src/2021-02-24/question-2.ts b/src/2021-02-24/question-2.ts
@@ -0,0 +1,14 @@
+/**
+ * let const 如何实现局部作用域，const 如何实现不可修改
+ * 
+ * https://zhuanlan.zhihu.com/p/28140450
+   https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/133
+   https://262.ecma-international.org/6.0/#sec-lexical-environments （如果是 const， 会CreateImmutableBinding(dn, true)）
+   https://stackoverflow.com/questions/23948198/variable-environment-vs-lexical-environment/54673945
+ */
+
+/**
+ * const
+ * 如果是 const， CreateImmutableBinding(dn, true)
+ *
+ */
diff --git a/src/2021-03-03/question-1.ts b/src/2021-03-03/question-1.ts
@@ -0,0 +1,53 @@
+/**
+ * 手写 JSON.stringfy
+ */
+
+function jsonStringfy(data) {
+  let type = typeof data
+  if (type !== 'object') {
+    // 处理非 null 的基础数据类型和 Function
+    // NaN、Infinity、-Infinity 序列化返回 "null"
+    if (Number.isNaN(data) || data === Infinity || data === -Infinity) {
+      return "null"
+    } else if (type === 'function' || type === 'undefined' || type === 'symbol') {
+      return undefined
+    } else if (type === 'string') {
+      return '"' + data + '"'
+    }
+    return String(data)
+  } else {
+    if (data === null) {
+      return "null"
+    } else if (data instanceof Date) {
+      // 日期转为字符串
+      return jsonStringfy(data.toJSON())
+    } else if (data instanceof Array) {
+      // 处理数组每一项
+      let result = []
+      data.forEach((item, index) => {
+        result[index] = jsonStringfy(item)
+      })
+      result = "[" + result + "]"
+      return result.replace(/'/g, '"')
+    } else {
+      // 处理普通对象
+      let result = []
+      Object.keys(data).forEach((item) => {
+        // key 如果是 symbol 对象，忽略
+        if (typeof item !== 'symbol') {
+          // 键值为 undefined、function、symbol，忽略
+          if (data[item] !== undefined && typeof data[item] !== 'function' && data[item] !== 'symbol') {
+            result.push('"' + item + '"' + ":" + jsonStringfy(data[item]))
+          }
+        }
+      })
+      return ("{" + result + "}").replace(/'/g, '"')
+    }
+  }
+}
+
+let a = {
+  a: [1, 'a', null]
+}
+
+console.log(jsonStringfy(a) === JSON.stringify(a))
diff --git a/src/2021-03-04/question-1.ts b/src/2021-03-04/question-1.ts
@@ -0,0 +1,42 @@
+/**
+ * 数组扁平化
+ */
+
+// 1. 递归实现
+const flatten = (arr: any[]): any[] => {
+  let result: any[] = []
+  for (let i = 0; i < arr.length; i++) {
+    if (Array.isArray(arr[i])) {
+      result = result.concat(flatten(arr[i]))
+    } else {
+      result.push(arr[i])
+    }
+  }
+  return result
+}
+
+// 2. reduce 实现
+const flatten2 = (arr: any[]): any[] => {
+  return arr.reduce((pre, cur) => {
+    return pre.concat(Array.isArray(cur) ? flatten2(cur) : cur)
+  }, [])
+}
+
+// 3. 扩展运算符实现 (some + concat + 扩展运算符)
+const flatten3 = (arr: any[]): any[] => {
+  while (arr.some(item => Array.isArray(item))) {
+    arr = [].concat(...arr)
+  }
+  return arr
+}
+
+// 4. split + toString 共同处理，处理纯数字数组
+const flatten4 = (arr: any[]): any[] => {
+  return arr.toString().split(',').map(item => +item)
+}
+
+// 5. 使用 es6 的 flat 函数：arr.flat(depth)，depth 为展开深度，默认为 1
+const flatten5 = (arr: any[]): any[] => {
+  // 传入 Infinity，表示无论多少层都要展开
+  return arr.flat(Infinity)
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -42,7 +42,7 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx"
-, "src/2020-12-03/question-2.ts"  ],
+, "src/2020-12-03/question-2.ts", "src/2021-02-23/question-1.ts", "src/2021-03-03/question-1.ts"  ],
   "exclude": [
     "node_modules"
   ]