问题：提取页面dom节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div class="parent">
  11.       <div class="children-1">
  12.         <div class="children-1-1">
  13.           <div class="children-1-2">
  14.             <div class="children-1-3"></div>
  15.           </div>
  16.         </div>
  17.       </div>
  18.       <div class="children-2">
  19.         <div class="children-2-1">
  20.           <div class="children-2-2">
  21.             <div class="children-2-3"></div>
  22.           </div>
  23.         </div>
  24.       </div>
  25.       <div class="children-3">
  26.         <div class="children-3-1">
  27.           <div class="children-3-2">
  28.             <div class="children-3 3"></div>
  29.           </div>
  30.         </div>
  31.       </div>
  32.     </div>
  33.   </body>
  34. </html>

1.深度遍历(DFS)

  • 核心思想-递归
    1. function deepTravel(node,nodeList=[]){
    2.   if(node.children === null) return;
    3. nodeList.push(node)
    4. let children = node.children
    5. for(let i = 0 ;i < children.length; i++){
    6.     deepTravel(children[i],nodeList)
    7. }
    8. return nodeList;
    9. }

2.广度遍历(BFS)

  1. function boardTravel(node){
  2.     let nodeList = []; //result
  3.   let stack = [];
  4.   stack.push(node)
  5.   while(stack.length){
  6.       item = stack.shift();
  7.     nodeList.push(item);
  8.     for(let i = 0 ;i<item.children.length; i++){
  9.         if(item.children[i]) stack.push(item.children[i])
  10.     }
  11.   }
  12.   return nodeList;
  13. }

3.数组平铺flat

  • 递归的应用

    1. function getDataType(data){
    2.   return Object.prototype.toString.call(data).slice(8,-1)
    3. }
    4. function flat(arr,res=[]){
    5. for(let i = 0 ;i<arr.length; i++){
    6.     if(getDataType(arr[i]) === 'Array'){
    7.       flat(arr[i],res)
    8.   }else{
    9.       res.push(arr[i])
    10.   }
    11. }
    12. return res;
    13. }
    14. arr = [[1, 2, [3, [4, 5]]], [6, 7], [[8], [9, [10]]]];
    15. flat(arr)

    4.单个对象深度遍历

  • 递归和while循环之间转换

    1. obj = {
    2.       value: 1,
    3.       children: {
    4.         value: 1,
    5.         children: {
    6.           value: 2,
    7.           children: {
    8.             value: 3,
    9.             children: null
    10.           }
    11.         }
    12.       }
    13.     };
    14. // 递归
    15. function getValue(obj,res=[]){
    16.   res.push(obj.value)
    17. if(obj.children){
    18.     getValue(obj.children)
    19. }
    20. return res;
    21. }
    22. //while
    23. function getValue1(obj,res=[]){
    24.   while(obj){
    25.     res.push(obj.value)
    26.   obj = obj.children;
    27. }
    28. }

5.深度克隆（深度优先）

  1. function deepCopy(sourceObj,target={}){
  2.   let keys = Object.keys(sourceObj)
  3.   keys.forEach(key=>{
  4.     if(typeof sourceObj[key] !== 'object'){
  5.       target[key] = sourceObj[key]
  6.     }else{
  7.       deepCopy(sourceObj[key],target[key]={})
  8.     }
  9.   })
  10.   return target;
  11. }

6.深度克隆（广度优先）

  1.   //广度优先复制
  2. function widthDeepCopy(source, target = {}) {
  3.   let keys = Object.keys(source);
  4.   let stack = [];
  5.   stack = [...keys];
  6.   while (stack.length) {
  7.     curKey = stack.shift();
  8.     if (source[curKey] !== "object") {
  9.       target[curKey] = source[curKey];
  10.     } else {
  11.       target = target[curKey] = {};
  12.       stack.push(...Object.keys(source[curKey]));
  13.     }
  14.     console.log(curKey)
  15.   }
  16.   return target;
  17. }