70个javascript常见面试题

1.undefined 和 null 有什么区别？ 它们是属于虚值

  console.log(!!null); // false
  console.log(!!undefined); // false

undefined是未指定特定值的变量的默认值
null是“不代表任何值的值”
在比较null和undefined时，

2. && 运算符能做什么 逻辑与

    console.log(false && 1 && []); // false
    console.log(" " && true && 5); // 5

  console.log(null == undefined); // true
  console.log(null === undefined); // false

3. || 运算符能做什么

||逻辑或
// 在其操作数中找到第一个真值表达式并返回它
    console.log(null || 1 || undefined); // 1

4. 使用 + 或一元加运算符是将字符串转换为数字的最快方法吗？

+是将字符串转换为数字的最快方法，因为如果值已经是数字，它不会执行任何操作。

5. DOM 是什么？

DOM 代表文档对象模型，是 HTML 和 XML 文档的接口(API)。

6. 什么是事件传播?

当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在“冒泡阶段”中，事件冒泡或向上传播至父级，祖父母，祖父母或父级，直到到达window为止；而在“捕获阶段”中，事件从window开始向下触发元素 事件或event.target。
事件传播有三个阶段：
捕获阶段–事件从 window 开始，然后向下到每个元素，直到到达目标元素。
目标阶段–事件已达到目标元素。
冒泡阶段–事件从目标元素冒泡，然后上升到每个元素，直到到达 window

7. 什么是事件冒泡？

当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。

8. 什么是事件捕获？

当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上。在捕获阶段，事件从window开始，一直到触发事件的元素。

9.event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？

event.preventDefault() 方法可防止元素的默认行为。如果在表单元素中使用，它将阻止其提交。如果在锚元素中使用，它将阻止其导航。如果在上下文菜单中使用，它将阻止其显示或显示。 event.stopPropagation()方法用于阻止捕获和冒泡阶段中当前事件的进一步传播。

10. 如何知道是否在元素中使用了event.preventDefault()方法？

我们可以在事件对象中使用event.defaultPrevented属性。它返回一个布尔值用来表明是否在特定元素中调用了event.preventDefault()。

11. 为什么此代码 obj.someprop.x 会引发错误?

const obj = {};
console.log(obj.someprop.x);

12. 什么是 event.target ？

event.target是发生事件的元素或触发事件的元素。

13. 什么是 event.currentTarget？

event.currentTarget是我们在其上显式附加事件处理程序的元素。

14. == 和 === 有什么区别？

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase

15. 为什么在 JS 中比较两个相似的对象时返回 false？

let a = { a: 1 };
let b = { a: 1 };
let c = a;
console.log(a === b); // 打印 false，即使它们有相同的属性
console.log(a === c); // true

16. !! 运算符能做什么？

!!运算符可以将右侧的值强制转换为布尔值，这也是将值转换为布尔值的一种简单方法。

console.log(!!null); // false 
console.log(!!undefined); // false 
console.log(!!''); // false 
console.log(!!0); // false
 console.log(!!NaN); // false 
 console.log(!!' '); // true
  console.log(!!{}); // true
   console.log(!![]); // true 
   console.log(!!1); // true 
   console.log(!![].length); // false

17. 如何在一行中计算多个表达式的值？

可以使用逗号运算符在一行中计算多个表达式。它从左到右求值，并返回右边最后一个项目或最后一个操作数的值。

let x = 5;
x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10);
function addFive(num) {
  return num + 5;
}

18. 什么是提升？

提升是用来描述变量和函数移动到其(全局或函数)作用域顶部的术语

19. 什么是作用域？

JS 有三种类型的作用域：全局作用域、函数作用域和块作用域(ES6)。

• 全局作用域——在全局命名空间中声明的变量或函数位于全局作用域中，因此在代码中的任何地方都可以访问它们
• 函数作用域——在函数中声明的变量、函数和参数可以在函数内部访问，但不能在函数外部访问。
• 块作用域-在块{}中声明的变量（let，const）只能在其中访问。

20. 什么是闭包？

闭包就是一个函数在声明时能够记住当前作用域、父函数作用域、及父函数作用域上的变量和参数的引用，直至通过作用域链上全局作用域，基本上闭包是在声明函数时创建的作用域。
// 全局作用域

  var globalVar = "abc";
   function a(){
     console.log(globalVar);
   }
  a(); // "abc"

21. JavaScript 中的虚值是什么？

虚值就是是在转换为布尔值时变为 false 的值

22. 如何检查值是否虚值？

使用 Boolean 函数或者 !! 运算符。

23. ‘use strict’ 是干嘛用的

“use strict” 是 ES5 特性，它使我们的代码在函数或整个脚本中处于严格模式。严格模式帮助我们在代码的早期避免 bug，并为其添加限制。

24. JavaScript 中 this 值是什么？

this指的是当前正在执行或调用该函数的对象的值。this值的变化取决于我们使用它的上下文和我们在哪里使用它

25. 对象的 prototype(原型) 是什么？

原型就是对象的蓝图。如果它存在当前对象中，则将其用作属性和方法的回退。它是在对象之间共享属性和功能的方法，这也是JavaScript实现继承的核心。

26. 什么是 IIFE，它的用途是什么？

IIFE或立即调用的函数表达式是在创建或声明后将被调用或执行的函数。创建IIFE的语法是，将function (){}包裹在在括号()内，然后再用另一个括号()调用它，如：(function(){})()

27. Function.prototype.apply 方法的用途是什么？

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数

 const details = {
  message: 'Hello World!'
};
function getMessage(){
  return this.message;
}
getMessage.apply(details); // 'Hello World!'

26. Function.prototype.call 方法的用途是什么？

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

27. Function.prototype.apply 和 Function.prototype.call 之间有什么区别？

apply()方法可以在使用一个指定的 this 值和一个参数数组（或类数组对象）的前提下调用某个函数或方法。call()方法类似于apply()，不同之处仅仅是call()接受的参数是参数列表。

28. Function.prototype.bind 的用途是什么？

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

32. 什么是高阶函数？

高阶函数只是将函数作为参数或返回值的函数。

33. 手动实现 Array.prototype.map 方法

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

34. 手动实现Array.prototype.filter方法

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

35. 手动实现Array.prototype.reduce方法

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

36. arguments 的对象是什么？

arguments对象是函数中传递的参数值的集合。它是一个类似数组的对象，因为它有一个length属性，我们可以使用数组索引表示法arguments[1]来访问单个值，但它没有数组中的内置方法，如：forEach、reduce、filter和map。

37. 如何创建一个没有 prototype(原型)的对象？

const o1 = {};
console.log(o1.toString()); // [object Object]
const o2 = Object.create(null);
console.log(o2.toString());
// throws an error o2.toString is not a function

30. var,let和const的区别是什么？

var声明的变量会挂载在window上，而let和const声明的变量不会：
var声明变量存在变量提升，let和const不存在变量提升:
let和const声明形成块作用域
同一作用域下let和const不能声明同名变量，而var可以

31. 什么是箭头函数？

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

32. 什么是类？

类(class)是在 JS 中编写构造函数的新方法。它是使用构造函数的语法糖，在底层中使用仍然是原型和基于原型的继承。

33. 什么是模板字符串？

模板字符串是在 JS 中创建字符串的一种新方法。我们可以通过使用反引号使模板字符串化。

34. 什么是对象解构？

对象析构是从对象或数组中获取或提取值的一种新的、更简洁的方法。假设有如下的对象：

35. 什么是 ES6 模块？

模块使我们能够将代码基础分割成多个文件，以获得更高的可维护性，并且避免将所有代码放在一个大文件中。在 ES6 支持模块之前，有两个流行的模块。

48. 什么是Set对象，它是如何工作的？

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

49. 什么是回调函数？

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

50. Promise 是什么？

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

36. 什么是 async/await 及其如何工作？

使用 Promise

function callApi() {
  return fetch("url/to/api/endpoint")
    .then(resp => resp.json())
    .then(data => {
      //do something with "data"
    }).catch(err => {
      //do something with "err"
    });
}

在async/await，我们使用 tru/catch 语法来捕获异常。

async function callApi() {
  try {
    const resp = await fetch("url/to/api/endpoint");
    const data = await resp.json();
    //do something with "data"
  } catch (e) {
    //do something with "err"
  }
}

52. 展开(spread )运算符和 剩余(Rest) 运算符有什么区别？

展开运算符(spread)是三个点(…)，可以将一个数组转为用逗号分隔的参数序列

function add(a, b) {
  return a + b;
};
const nums = [5, 6];
const sum = add(...nums);
console.log(sum);

53. 什么是默认参数？

//ES5 Version
function add(a,b){
  a = a || 0;
  b = b || 0;
  return a + b;
}
//ES6 Version
function add(a = 0, b = 0){
  return a + b;
}
add(1); // returns 1

54. 什么是包装对象（wrapper object）？

我们现在复习一下JS的数据类型，JS数据类型被分为两大类，基本类型和引用类型。
基本类型：Undefined,Null,Boolean,Number,String,Symbol,BigInt
引用类型：Object,Array,Date,RegExp等，说白了就是对象。

55. 隐式和显式转换有什么区别）？

隐式强制转换是一种将值转换为另一种类型的方法，这个过程是自动完成的，无需我们手动操作。

console.log(1 + '6'); // 16
console.log(false + true); // 1
console.log(6 * '2'); // 12

56. 什么是NaN？以及如何检查值是否为NaN？

NaN表示“非数字”是 JS 中的一个值，该值是将数字转换或执行为非数字值的运算结果，因此结果为NaN。

let a;
console.log(parseInt('abc')); // NaN
console.log(parseInt(null)); // NaN
console.log(parseInt(undefined)); // NaN
console.log(parseInt(++a)); // NaN
console.log(parseInt({} * 10)); // NaN
console.log(parseInt('abc' - 2)); // NaN
console.log(parseInt(0 / 0)); // NaN
console.log(parseInt('10a' * 10)); // NaN

57. 如何判断值是否为数组？

我们可以使用Array.isArray方法来检查值是否为数组。当传递给它的参数是数组时，它返回true，否则返回false

58. 如何在不使用%模运算符的情况下检查一个数字是否是偶数？

我们可以对这个问题使用按位&运算符，&对其操作数进行运算，并将其视为二进制值，然后执行与运算。

59. 如何检查对象中是否存在某个属性？

第一种使用 in 操作符号：
第二种使用 hasOwnProperty 方法，hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。
第三种使用括号符号obj[“prop”]。如果属性存在，它将返回该属性的值，否则将返回undefined。

60. AJAX 是什么？

即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术，传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。使用AJAX则不需要加载更新整个网页，实现部分内容更新
HTML - 网页结构
CSS - 网页的样式
JavaScript - 操作网页的行为和更新DOM
XMLHttpRequest API - 用于从服务器发送和获取数据
PHP，Python，Nodejs - 某些服务器端语言

61. 如何在 JS 中创建对象？

使用对象字面量：

  const o = {
   name: "Mark",
   greeting() {
      return `Hi, I'm ${this.name}`;
   }
  };
  o.greeting(); //returns "Hi, I'm Mark"

使用构造函数：

function Person(name) {
   this.name = name;
}
Person.prototype.greeting = function () {
   return `Hi, I'm ${this.name}`;
}
const mark = new Person("Mark");
mark.greeting(); //returns "Hi, I'm Mark"

62. 有哪些方法可以处理 JS 中的异步代码？

回调
Promise
async/await
还有一些库：async.js, bluebird, q, co

63. 函数表达式和函数声明之间有什么区别？

hoistedFunc();
notHoistedFunc();
function hoistedFunc(){
  console.log("注意：我会被提升");
}
var notHoistedFunc = function(){
  console.log("注意：我没有被提升");
}

64. 调用函数，可以使用哪些方法？

作为函数调用——如果一个函数没有作为方法、构造函数、apply、call 调用时，此时 this 指向的是 window 对象（非严格模式）

  //Global Scope
  function add(a,b){
    console.log(this);
    return a + b;
  }
  add(1,5); // 打印 "window" 对象和 6
  const o = {
    method(callback){
      callback();
    }
  }
  o.method(function (){
      console.log(this); // 打印 "window" 对象
  });

70. new 关键字有什么作用？

new关键字做了4件事:
创建空对象 {}
将空对象分配给 this 值
将空对象的__proto__指向构造函数的prototype
如果没有使用显式return语句，则返回this