看来看看这些关于JavaScript基础知识你都掌握了吗？

1. ‘&&’运算符能做什么？

&& 运算符，也称为逻辑与，计算操作数并返回它遇到的第一个假表达式。 如果没有找到错误的表达式，它会返回最后一个真实的表达式。 它采用短路来防止不必要的工作。

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

使用 if 语句。

const router: Router = Router();

router.get('/endpoint', (req: Request, res: Response) => {
   let conMobile: PoolConnection;
   try {
      //do some db operations
   } catch (e) {
   if (conMobile) {
    conMobile.release();
   }
  }
});

使用 && 运算符。

const router: Router = Router();

router.get('/endpoint', (req: Request, res: Response) => {
  let conMobile: PoolConnection;
  try {
     //do some db operations
  } catch (e) {
    conMobile && conMobile.release()
  }
});

2.||可以做什么呢？

|| 运算符，也称为逻辑或，计算操作数并返回它遇到的第一个真值表达式。 它还使用短路来防止不必要的工作。 在ES6引入默认函数参数之前，它被用来初始化函数中的默认参数值。

console.log(null || 1 || undefined); // 1

function logName(name) {
  var n = name || "Mark";
  console.log(n);
}

logName(); // "Mark"

3. undefined 和 null 有什么区别？

在了解 undefined 和 null 的区别之前，我们先来看看它们的相同点。

它们都属于 JavaScript 中的 7 种基本类型。

let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];

它们被认为是假值，这意味着当使用 Boolean(value) 或 !!value 转换为布尔值时，它们的值为假。

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

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

现在，让我们看看它们的区别。

undefined 是未指定特定值的变量或未显式返回值的函数的默认值，例如 console.log(1)，以及对象中不存在的属性，JS 引擎为其分配未定义的值。

let _thisIsUndefined;
const doNothing = () => {};
const someObj = {
  a : "ay",
  b : "bee",
  c : "si"
};

console.log(_thisIsUndefined); // undefined
console.log(doNothing()); // undefined
console.log(someObj["d"]); // undefined

null 是一个值，表示没有任何值。 nullis 显式分配给变量。 在此示例中，当 fs.readFile 方法未抛出错误时，我们将获得一个空值。

fs.readFile('path/to/file', (e,data) => {
   console.log(e); // Print null when no errors occur.
   if(e){
     console.log(e);
   }
   console.log(data);
 });

比较 null 和 undefined 时，使用 == 时得到 true，使用 === 时得到 false。

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

4.什么是事件传播？

当一个事件发生在 DOM 元素上时，它不仅仅发生在那个特定的元素上。 在“冒泡阶段”期间，事件冒泡或传播到其父级、祖父母、曾祖父母或父级，直到到达窗口。

另一方面，在“捕获阶段”期间，事件从窗口开始在元素上触发，并向下传播到事件目标或 event.target。

事件传播分为三个阶段：

捕获阶段：事件从窗口开始，然后向下传播到每个元素，直到到达目标元素。

目标阶段：事件已经到达目标元素。

冒泡阶段：事件从目标元素冒泡，然后上升到每个元素，直到到达窗口。

5.什么是事件冒泡？

当一个事件发生在 DOM 元素上时，它不仅仅发生在那个特定的元素上。 在冒泡阶段，事件冒泡，或者事件发生在它的父级、祖父母、曾祖父母等上，直到它到达窗口。

HTML：

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
  </div>
</div>

JS:

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

addEventListener 方法有第三个可选参数，称为 useCapture，默认为 false。 如果设置为true，事件将发生在捕获阶段而不是冒泡阶段。 如果点击子元素，它会在控制台上分别记录child、parent、grandparent、html、document、window。 这就是事件冒泡。

6.什么是事件捕捉？

当一个事件发生在 DOM 元素上时，它不仅仅发生在那个特定的元素上。 在捕获阶段，事件从窗口开始，一直向下传播到触发事件的元素。

HTML：

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
  </div>
</div>

JS:

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

addEventListener 方法有第三个可选参数，称为 useCapture，默认为 false。 如果设置为true，事件将发生在捕获阶段而不是冒泡阶段。 如果你点击子元素，它会在控制台上分别记录window、document、html、grandparent和parent。 这就是事件捕获。

7. event.preventDefault() 和 event.stopPropagation() 方法有什么区别？

event.preventDefault() 方法防止元素的默认行为。 如果在表单元素中使用，它会阻止提交。 如果在锚元素内使用，它会阻止导航。 如果在上下文菜单中使用，它会阻止其显示或出现。

另一方面，event.stopPropagation() 方法用于防止在捕获和冒泡阶段进一步传播当前事件。

8. 如何确定元素中是否使用了 event.preventDefault() 方法？

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

9. 为什么代码 obj.someprop.x 会抛出错误？

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

显然，代码会抛出错误，因为我们试图访问对象中不存在的属性“someprop”中的属性“x”。 它导致未定义的值。

请记住，访问对象本身或其原型中不存在的属性默认为未定义。 由于 undefined 没有属性“x”，因此尝试访问它会导致错误。

10.什么是event.target？

简单的说，event.target就是事件发生的元素或者触发事件的元素。

HTML：

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
 </div>

JS:

function clickFunc(event) {
  console.log(event.target);
}

如果你点击一个按钮，即使我们将事件附加到最外层的 div，它仍然会打印按钮标签。 因此，我们可以得出结论，event.target 是触发事件的元素。

11.什么是event.currentTarget？

event.currentTarget 是我们明确附加事件处理程序的元素。

HTML：

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
 </div>

JS:

function clickFunc(event) {
  console.log(event.currentTarget);
}

如果你点击了一个按钮，即使你点击了那个按钮，它仍然会打印最外层的div标签。 在此示例中，我们可以得出结论，event.currentTarget 是事件处理程序附加到的元素。

12. 为什么在 JavaScript 中比较两个相似的对象会返回 false？

让我们从以下示例开始：

let a = { a: 1 };
let b = { a: 1 };
let c = a;

console.log(a === b);
// It prints false even though they have the same properties.
console.log(a === c); // true

JavaScript 以不同的方式比较对象和原始类型。 在基本类型中，JavaScript 根据它们的值来比较它们，而在对象中，JavaScript 根据它们的引用或变量存储在内存中的地址来比较它们。

这就是为什么第一个 console.log 语句返回 false，而第二个 console.log 语句返回 true。 a 和 c 具有相同的引用地址，而 a 和 b 则不同。

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

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

let x = 5;

x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10);

function addFive(num) {
  return num + 5;
}

上面的结果最终得到x的值为27，首先我们将x的值自增6，然后调用addFive(6)函数，将6作为参数传给x，结果x为11 。

然后，我们将 x 的当前值乘以 2 并将其赋值给 x，将 x 的值更新为 22。

然后，我们将 x 的当前值减去 5，并将结果赋给 x，从而使 x 更新为 17。

最后，我们递增 x 乘以 10 并将更新后的值赋回给 x，导致 x 的最终值为 27。

14.什么是作用域？

JavaScript 中的作用域是指变量或函数可访问的区域。 JavaScript 具有三种作用域：全局作用域、函数作用域和块作用域 (ES6)。

全局范围：在全局命名空间中声明的变量或函数驻留在全局范围内，使它们可以从代码中的任何位置访问。

//global namespace
var g = "global";

function globalFunc(){
  function innerFunc(){
    console.log(g); // can access "g" because "g" is a global variable
  }
 innerFunc();
}

函数范围：在函数内声明的变量、函数和参数可在函数本身内访问，但不能在函数外访问。

function myFavoriteFunc(a) {
  if (true) {
    var b = "Hello " + a;
  }
  return b;
}

myFavoriteFunc("World");

console.log(a); // Throws a ReferenceError "a" is not defined
console.log(b); // does not continue here

块作用域：在块 {} 内声明的变量（使用 let 或 const）只能在该块内访问。

function testBlock(){
  if(true){
    let z = 5;
  }
  return z;
}

testBlock(); // Throws a ReferenceError "z" is not defined

范围也指一组查找变量的规则。 如果在当前范围内没有找到一个变量，它会在外部范围内搜索，如果在外部范围内没有找到该变量，它将继续搜索，直到到达全局范围。 如果找到变量，就可以使用； 否则，将抛出错误。 这个搜索变量的过程也称为作用域链。

// Global scope
 var variable1 = "Comrades";
 var variable2 = "Sayonara";

 function outer(){
 //External scopes
   var variable1 = "World";
   function inner(){
   // Internal scopes
     var variable2 = "Hello";
     console.log(variable2 + " " + variable1);
   }
   inner();
 }
 outer(); // Hello World

15. JavaScript 中的假值是什么？

const falsyValues = ['', 0, null, undefined, NaN, false];

简而言之，假值是在转换为布尔值时变为假的值。

要检查一个值是否为假，您可以使用布尔函数或 !! 操作员。