javaScript常识总结

无标签

发布日期: 2021-03-17

更新日期: 2021-04-06

文章字数: 1.5k

阅读时长: 5 分

阅读次数:

1.undefined 和 null 有什么区别？

在理解 undefined 和 null 之间的差异之前，我们先来看看它们的相似类。

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

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

它们是属于虚值，可以使用 Boolean(value)或!!value 将其转换为布尔值时，值为 false。

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

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

接着来看看它们的区别。

undefined 是未指定特定值的变量的默认值，或者没有显式返回值的函数，如：console.log(1)，还包括对象中不存在的属性，这些 JS 引擎都会为其分配 undefined 值。

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 是“不代表任何值的值”。null 是已明确定义给变量的值。在此示例中，当 fs.readFile 方法未引发错误时，我们将获得 null 值。

fs.readFile("path/to/file", (e, data) => {
  console.log(e); // 当没有错误发生时，打印 null
  if (e) {
    console.log(e);
  }
  console.log(data);
});

在比较 null 和 undefined 时，我们使用==时得到 true，使用===时得到 false:

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

2.JavaScript 函数节流和函数防抖之间的区别？

相同点：函数节流和函数防抖，两者都是优化高频率执行 js 代码的一种手段。

函数节流概念：函数节流是指一定时间内 js 方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件

函数防抖概念：函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

两者区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

3. 什么是事件传播?

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

事件传播有三个阶段：

1.捕获阶段–事件从 window 开始，然后向下到每个元素，直到到达目标元素。 2.目标阶段–事件已达到目标元素。 3.冒泡阶段–事件从目标元素冒泡，然后上升到每个元素，直到到达 window。

4. 什么是事件冒泡？

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

5.js 里==和===有什么区别

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回 flase。
1、对于 string,number 等基础类型，==和===是有区别的
类型转换规则：
1）如果等号两边是 boolean、string、number 三者中任意两者进行比较时，优先转换为数字进行比较。

2）如果等号两边出现了 null 或 undefined,null 和 undefined 除了和自己相等，就彼此相等

注意：NaN==NaN //返回 false，NaN 和所有值包括自己都不相等。

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

先看下面的例子：

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

JS 以不同的方式比较对象和基本类型。在基本类型中，JS 通过值对它们进行比较，而在对象中，JS 通过引用或存储变量的内存中的地址对它们进行比较。这就是为什么第一个 console.log 语句返回 false，而第二个 console.log 语句返回 true。a 和 c 有相同的引用地址，而 a 和 b 没有。

7. js 中!和!!的区别及用法？

1、！可将变量转换成 boolean 类型，null、undefined 和空字符串取反都为 false，其余都为 true。

!null = true;
!undefined = true;
!"" = true;
!100 = false;
!"abc" = false;

2、!!一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是 true 或者 false;

例子 1:判断变量 a 为非空，未定义或者非空串才能执行方法体的内容

var a;
if (a != null && typeof a != undefined && a != "") {
  //a有内容才执行的代码
}

实际上我们只需要写一个判断表达：

if (!!a) {
  //a有内容才执行的代码...
}

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

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