Front-End interview answers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    var obj = {
    a: {
    b: {
    c: 'hi',
       d: {
    e:'hi'
       }
       },
    l1: { t:123,t2:'hi',t3:'hi'},
        l2: 345
       },
    test: {oo:'OO'}
    };

  function find(obj = {}, tar = '', path = []) {
    for(let k in obj) {

      if(obj[k] === tar) {
        path.push(k);
        console.log(`Find ${tar} and path is  ${path.join('->')}`);
        path.pop();
      }

      if(typeof obj[k] === 'object') {
        let arr = path;
        arr.push(k);
        find(obj[k], tar, arr, k);
      }
    }
    path.pop();
  }

  find(obj,'hi');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <ul id="list" class="foo">
    <li>#0</li>
    <li>
      <span>#1</span>
    </li>
    <li>#2</li>
    <li>#3</li>
    <li>
      <ul>
        <li>#4</li>
      </ul>
    </li>
      ...
    <li>
      <a href="//v2ex.com">#99998</a>
    </li>
    <li>#99999</li>
    <li>#100000</li>
  </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
  // init DOM
  var fragment = document.createDocumentFragment();
  var list = document.createElement('div');
  list.id = 'list';

  // iife
  void function() {
  var li;
  for( var i = 0; i < 10; i++) {
    if(i === 1) {
      li = make(['li',['span',`#${i}`]]);
      fragment.appendChild(li)
    } else if(i === 4) {
      li = make(['li',['ul',['li',`#${i}`]]]);
      fragment.appendChild(li);
    } else if(i === 6) {
      li = make(['li',['a',{href:'//test.com'},`###${i}`]]);
      fragment.appendChild(li);
    }

    else {
      li = make(['li',`#${i}`]);
      fragment.appendChild(li);
    }

  }
  list.appendChild(fragment);
  document.body.appendChild(list);
  }();

  // add class
  list.addClass += 'bar';

  // remove ele
  // nth-of-type is 1-base
  var li3 = list.querySelector('li:nth-of-type(3)');
  li3.parentNode.removeChild(li3);

  // add ele
  var li8 = list.querySelector('li:nth-of-type(8)');
  list.insertBefore(make(['li','<test.com/>']),li8);

  // show li num in current list when clicked
  list.addEventListener('click',liHandle);

  function liHandle(e) {
    var target = e.target || e.srcElement;
    if(target.id === 'list') {
      console.log('not a li');
      retrun;
    }
    while(target.nodeName !== 'LI') {
      target = target.parentNode;
    }
    var parentUI = target.parentNode;
    var children = parentUI.childNodes;
    var count = 0;
    var node;
    for(var i = 0; i < children.length; i++) {
      node = children[i];
      if(node.nodeName === 'LI') {
        count++;
      }
      if(node === target) {
        alert(`NO. ${count} of the current list`);
        break;
      }
    }

  }

  // create DOM
  // arguments is array
  // return DOM element
  function make(desc) {
    if(!Array.isArray(desc)) desc = [...desc];
    var el = document.createElement(desc.shift());
    for(var i = 0; i < desc.length; i++) {
      if(Array.isArray(desc[i])) {
        el.appendChild(make(desc[i]));
      } else if (
        typeof desc[i] === 'object'
        && desc[i] !== null
      ) {
        for(var k in desc[i]) {
          el[k] = desc[i][k];
        }
      } else {
        el.appendChild(document.createTextNode(desc[i]));
      }
    }
    return el;
  }