demo

import React from 'react';
import moment from 'moment';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.searchTag = this.myTrottle(this.newTask, 800);
  }
  onClick = () => {
    console.log('clicked');
  }

  myDebounce = (fn, wait) => {
    let time = null;
    return () => {
      if (time) clearTimeout(time);
      time = setTimeout(fn, wait);
    }
  }

  myTrottle = (fn, wait) => {
    let available = true;
    return (...args) => {
      if (available) {
        available = false;
        setTimeout(() => {
          available = true;
          // fn.apply(this, args)
          fn(...args);
        }, wait);
      }
    }
  }

  transToTree = async () => {
    const arr = [
      { id: 106, name: '部门6', pid: 101 },
      { id: 107, name: '部门7', pid: 108 },
      { id: 101, name: '部门1', pid: 0 },
      { id: 108, name: '部门8', pid: 0 },
      { id: 102, name: '部门2', pid: 101 },
      { id: 103, name: '部门3', pid: 101 },
      { id: 104, name: '部门4', pid: 103 },
      { id: 105, name: '部门5', pid: 104 },
    ];

    const resArr = [];
    const dataMap = {};
    arr.forEach(item => dataMap[item.id] = { ...item, children: [] });
    console.log('dataMap', dataMap);
    arr.forEach(item => {
      const _id = item.id;
      const _pid = item.pid;
      const _data = dataMap[_id];
      if (!_pid) {
        resArr.push(_data);
      } else {
        dataMap[_pid].children.push(_data);
      }
    });
    console.log(resArr);

    // let tar = {a: 1};
    // let object2 = {b: 2, child: { test: 'aaa' }};
    // let object3 = {c: 3};
    // const rest = {...tar, ...object2, ...object3};
    // console.log(rest);
    // object2.b = 4;
    // object2.child.test = 'bbb';
    // console.log(rest);

    // let arr2 = [1, [2, [3, 4, 5]]];
    // const resArr = this.flatten(arr2);
    // const resArr2 = this.flatten3(arr2);
    // console.log(resArr, resArr2);
    // this.taskRunner();
    // const test = 'jhaasjhggggdjkggasgdjahsfgggfhhdagg';
    // const res = this.lengthOfLongestSubstring(test);
    // console.log(res);
  }

  lengthOfLongestSubstring = function (s) {
    let map = new Map();
    let i = -1
    let res = 0
    for (let j = 0; j < s.length; j++) {
      let char = s[j];
      if (map.has(char)) {
        i = Math.max(i, map.get(char))
      }
      res = Math.max(res, j - i);
      map.set(char, j);
    }
    return res
  }

  mostWord = (book, word) => {
    let map = new Map();
    let cMap = new Map();
    book.forEach(item => {
      map.set(item, (map.get(item) || 0) + 1);
      cMap.set(item)
    })
    // for (const item of book) {
    //   this.map.set(item, (this.map.get(item) || 0) + 1);
    //   this.cMap.set(item)
    // }
    let maxLength = 0;
    let mWord = '';
    book.forEach(w => {
      if (map.get(w) > maxLength) mWord = w;
      maxLength = Math.max(maxLength, map.get(w));
    })
    return { mWord, maxLength };
  }

  flatten = (arr) => {
    return arr.reduce((acc, cur) => {
      // console.log('acc', acc, ' cur:', cur);
      return acc.concat(Array.isArray(cur) ? this.flatten(cur) : cur)
    }, [])
  }
  flatten2 = (arr) => {
    const a = arr.toString();
    const r = a.split(',');
    return r;
  }
  flatten3(arr) {
    return arr.flat(Infinity);
  }

  red() {
    console.log('red A');
  }
  green() {
    console.log('green B');
  }
  yellow() {
    console.log('yellow C');
  }

  task = (timer, light) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (light === 'red') {
          this.red()
        }
        else if (light === 'green') {
          this.green()
        }
        else if (light === 'yellow') {
          this.yellow()
        }
        resolve()
      }, timer)
    })
  }

  taskRunner = async () => {
    await this.task(4000, 'red')
    await this.task(2000, 'green')
    await this.task(1000, 'yellow')
    this.taskRunner();
  }

  clone() {
    const target = {
      field1: 1,
      field2: undefined,
      field3: 'ConardLi',
      field4: {
        child: 'child',
        child2: {
          child2: 'child2'
        }
      }
    };
    let cloneTarget = {};
    for (const key in target) {
      cloneTarget[key] = target[key];
    }
    target.field4.child = 'test';
    console.log(target, cloneTarget);
  };

  deepClone(target) {
    let newObj;
    if (typeof target !== 'object') return target;
    newObj = target instanceof Array ? [] : {};
    for (let key in target) {
      if (typeof target[key] === 'object') {
        newObj[key] = this.deepClone(target[key]);
      } else {
        newObj[key] = target[key];
      }
    }
    return newObj;
  }

  delDom = () => {
    const target = {
      field1: 1,
      field2: undefined,
      field3: 'ConardLi',
      field4: {
        child: 'child',
        child2: {
          child2: 'child2'
        }
      }
    };
    const newObj = this.deepClone(target);
    console.log('newObj', newObj);
    target.field4.child = 'test';
    console.log(target, newObj);

    // const str = 'https://rdc.aliyun.com/ec/order?spm=0mix5K&id=8789144';
    // const strArr = str.split('?');
    // const search = strArr[1];
    // const urlSearchParams = new URLSearchParams(search);
    // // 把键值对列表转换为一个对象
    // const params = Object.fromEntries(urlSearchParams.entries());
    // console.log('params', params);

    // const res = this.twoSum([11,15,2,7],9);
    // console.log('res', res);

    const obj = { foo: 'bar', baz: 42 };
    const rr = Object.entries(obj);
    console.log('rr', rr);
  }
  twoSum = (nums, target) => {
    let map = new Map();
    for (let i = 0, len = nums.length; i < len; i++) {
      if (map.has(target - nums[i])) {
        return [map.get(target - nums[i]), i];
      } else {
        map.set(nums[i], i);
      }
    }
    return [];
  };

  fn(n) {
    if (n == 0) return 0
    if (n == 1) return 1
    return this.fn(n - 2) + this.fn(n - 1)
  }
  // 优化
  fibonacci2(n) {
    const arr = [1, 1, 2];
    const arrLen = arr.length;

    if (n <= arrLen) {
      return arr[n];
    }

    for (let i = arrLen; i < n; i++) {
      arr.push(arr[i - 1] + arr[i - 2]);
    }
    return arr[arr.length - 1];
  }
  lengthOfLongestSubstring = (s) => {
    var str = [], maxLength = 0;
    for (let i = 0; i < s.length; i++) {
      let index = str.indexOf(s[i]);
      if (index != -1) {
        str.splice(0, index + 1);
      }
      str.push(s[i]);
      maxLength = Math.max(maxLength, str.length);
    }
    return maxLength;
  };
  add = (...args) => {
    //求和
    return args.reduce((a, b) => a + b)
  }
  currying = (fn) => {
    let args = []
    return function temp(...newArgs) {
      if (newArgs.length) {
        args = [
          ...args,
          ...newArgs
        ]
        return temp
      } else {
        let val = fn.apply(this, args)
        args = [] //保证再次调用时清空
        return val
      }
    }
  }
  formatMoney = number => {
    let arr = number.toString().split('.');
    let int = arr[0];
    let dots = arr[1] || '';
    let intArr = int.split('');
    let res = '';
    intArr.reverse().forEach((n, index) => {
      console.log('index:', index, index % 3);
      if (index !== 0 && index % 3 === 0) {
        res = n + ',' + res;
      } else {
        res = n + res;
      }
    })
    return res + (!!dots ? '.' + dots : '');
  }

  childNum(num, count) {
    let allplayer = [];
    for (let i = 0; i < num; i++) {
      allplayer[i] = i + 1;
    }
    console.log('allplayer', allplayer);
    let exitCount = 0;    // 离开人数
    let counter = 0;      // 记录报数
    let curIndex = 0;     // 当前下标

    while (exitCount < num - 1) {
      if (allplayer[curIndex] !== 0) counter++;

      if (counter == count) {
        allplayer[curIndex] = 0;
        counter = 0;
        exitCount++;
      }
      curIndex++;
      if (curIndex == num) {
        curIndex = 0
      };
    }
    for (let i = 0; i < num; i++) {
      if (allplayer[i] !== 0) {
        return allplayer[i]
      }
    }
  }

  // 有了上述条件，我们就可以创建一个空数组表示待消除的括号，等待消除的括号都会按顺序累计到里面；
  // 当有新进来的括号时，使用数组最前方的括号查看是否可以消除：如果可以消除，立即删除这个待消除的括号；如果不可以消除，新进括号将加入到这个数组的最前方。
  // 这里我们注意第一点，如果发现一个 “右半括号” 不能和新进括号进行消除，这时候直接返回 falsefalse 即可，因为消除的条件必须是 “左括号+右括号”。遍历完整个字符串后，如果还有剩余待消除的括号，证明不满足题意，返回 falsefalse。该过程时间复杂度为 O(n)O(n) ，空间复杂度为 O(1)O(1) 。

  isValid = (s) => {
    const obj = { ')': '(', ']': '[', '}': '{' };
    const stack = [];
    for (let p of s) {
      if (obj[p]) {
        if (stack.pop() !== obj[p]) return false;
      } else {
        stack.push(p);
      }
    }
    return stack.length === 0;
  };

  test = () => {
    console.log('---test---')
    let result;
    // let res = this.fibonacci2(5);
    // res = this.lengthOfLongestSubstring('dvdf');
    // let addCurry = this.currying(this.add);
    // res = addCurry(1)(2)(3)(4)(5)();
    // res = this.addCur(1)(2)(3);
    // result = this.formatMoney(123.12);
    
    let input = ["WordsFrequency", "get", "get", "get", "get", "get"];
    result = this.mostWord(input);
    // result = this.childNum(30, 3);
    console.log('result', result);
  }

  newTask = (string = 'aaa') => {
    console.log(string);
  }
  
  lozyLoad = () =>{
    // <div class="container">
    //   <img src="loading.gif"  data-src="pic.png">
    //   <img src="loading.gif"  data-src="pic.png">
    //   <img src="loading.gif"  data-src="pic.png">
    //   <img src="loading.gif"  data-src="pic.png">
    //   <img src="loading.gif"  data-src="pic.png">
    //   <img src="loading.gif"  data-src="pic.png">
    // </div>
    var imgs = document.querySelectorAll('img');
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var winHeight= window.innerHeight;
    for(var i=0;i < imgs.length;i++){
        if(imgs[i].offsetTop < scrollTop + winHeight ){
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
  }
  render() {
    return (
      <div className='box'>
        {/* <div className='child' onClick={() => this.searchTag('test')}>CLICK</div> */}
        <div className='child' onClick={this.test}>CLICK</div>

      </div>
    )
  }
}