知识传递之旅:探索JavaScript易混淆问题一

79 阅读9分钟

"困惑与问题若不及时解决,将成为我们前进道路上的拦路虎,让我们畏首畏尾,迟疑不前。"

简介:

本篇文章主要介绍了 JavaScript 中的类型转换、函数绑定以及 this 关键字的用法和特性。通过讲解隐式类型转换、显式类型转换以及 NaN 的判断,帮助读者了解 JavaScript 中的类型转换规则,避免在代码编写中出现意外的结果。

传送门

知识传递之旅:探索JavaScript易混淆问题二

第一篇:基础篇

未来会持续性更新内容😘。

由于篇幅太长😭,分成二部发文,这篇偏向于基础,下一篇就是进阶啦🐯。

第二篇:进阶地址: # 知识传递之旅:探索JavaScript易混淆问题二

老虎 (1).png

类型转换

JavaScript 是一种弱类型语言,类型转换可能导致一些意外的结果。

隐式类型转换

比如,对于加法运算符 +,如果其中一个操作数是字符串,JavaScript 会尝试将另一个操作数转换为字符串并进行字符串拼接。这可能导致一些奇怪的结果

console.log(10 + "5"); // 输出 "105"
console.log(true + true); // 输出 2

//字符串与布尔值相加:布尔值会被转换为字符串,然后进行字符串拼接
console.log("maotou, " + true); // 输出 "maotou, true"
console.log("maotou, " + false); // 输出 "maotou, false"

// 数字与布尔值相加:布尔值会被转换为数字,true 转换为 1,false 转换为 0。
console.log(10 + true); // 输出 11 
console.log(10 + false); // 输出 10

// 数字与 null 或 undefined 相加:null 或 undefined 会被转换为 0。
console.log(10 + null); // 输出 10 
console.log(10 + undefined); // 输出 NaN

在这个例子中,第一个输出结果是因为数字 10 被转换为字符串 "10",然后进行了字符串拼接。而第二个输出结果是因为 true 被转换为数字 1,然后进行了加法运算。


在 JavaScript 中,减号 - 可以用于数学运算,但也有一些情况下会进行类型转换。

//数字与数字相减:
console.log(10 - 5); // 输出 5 
console.log(5.5 - 2.2); // 输出 3.3

// 数字与字符串相减:
console.log(10 - "5"); // 输出 5,将 "5" 转换为数字 5,然后进行减法运算 
console.log(10 - "maotou"); // 输出 NaN,无法将 "maotou" 转换为数字,返回 NaN

// 布尔值与数字相减:
console.log(10 - true); // 输出 9,true 转换为数字 1,然后进行减法运算
console.log(10 - false); // 输出 10,false 转换为数字 0,然后进行减法运算

// null 或 undefined 与数字相减
console.log(10 - null); // 输出 10,null 转换为数字 0,然后进行减法运算
console.log(10 - undefined); // 输出 NaN,undefined 转换为数字 NaN,然后进行减法运算

显式类型转换

字符串转换为数字:使用 parseInt()parseFloat() 可以将字符串转换为整数或浮点数。

console.log(parseInt("6688")); // 输出 6688
console.log(parseFloat("3.1415926")); // 输出 3.1415926

数字转换为字符串:使用 toString() 方法可以将数字转换为字符串。

console.log((66).toString()); // 输出 "66"

字符串转换为布尔值:空字符串、空格字符串和 "0" 被转换为 false,其他非空字符串被转换为 true。

console.log(Boolean("")); // 输出 false
console.log(Boolean(" ")); // 输出 true
console.log(Boolean("0")); // 输出 false
console.log(Boolean("maotou")); // 输出 true

数字转换为布尔值:除了 0 和 NaN,所有数字被转换为 true。

console.log(Boolean(0)); // 输出 false
console.log(Boolean(NaN)); // 输出 false
console.log(Boolean(66)); // 输出 true

null 和 undefined 转换为布尔值:null 和 undefined 被转换为 false。

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

这些是 JavaScript 中常见的类型转换示例,了解这些转换规则可以帮助我们在编写代码时避免出现一些意外的结果。同时,在需要进行类型转换时,我们可以通过显式转换来确保代码的可读性和可靠性。

NaN 的判断

错误写法

const x = NaN; 
console.log(x == NaN); // false (NaN 不等于任何值,包括自身) 

正确写法

const x = NaN; 
console.log(isNaN(x)); // true,使用 isNaN() 函数判断是否为 NaN

原因

NaN(Not-a-Number)是一个特殊的数值,在 JavaScript 中表示无效的数值。由于其特殊性质,NaN 不等于任何值,包括自身。正确的方法是使用 isNaN() 函数来判断一个值是否为 NaN。isNaN() 函数会返回 true,如果参数是 NaN,否则返回 false。

null 和 undefined

null

null 表示一个空值,意味着此处的值不存在。

  1. 可以将 null 赋值给一个变量,用来表示该变量的值为空。
  2. 在进行比较时,null 不等于任何值,包括自身。也就是说,null == nullnull === null 都返回 false
  3. 通常用于显式地将变量清空或初始化为空值。

undefined

undefined 表示一个未定义的值,它在以下几种情况下出现:

  1. 变量声明但未赋值时,默认为 undefined
  2. 访问对象属性或数组元素时,如果属性或元素不存在,则返回 undefined
  3. 函数没有返回值或返回语句缺失时,默认返回 undefined

区分

nullundefined:它们表示没有值,但有细微差异。null 是一个表示空值的特殊对象,而 undefined 表示未定义或不存在的值。

打印

console的打印

具体来说,是可以对输出到console控制台的文字进行CSS控制。

格式如下:

console.log() // 打印日志

console.debug() // 打印调试

console.error() // 打印错误

console.info() // 打印信息

console.warn() // 打印警告

console.assert() // 打印断言

console.clear() // 清空

注意:除非使用浏览器提供的控制台,否则CSS样式在一般的命令行控制台可能不被支持。

如果需要修改命令行控制台的颜色,可以采用下面的方法

chalk在命令行打印颜色

在 Node.js 的命令行中,可以使用 chalk 模块来实现在终端中打印彩色文本。chalk 是一个非常流行的用于在命令行输出颜色的库,它提供了一组简单易用的方法来添加颜色和样式。

安装

npm install chalk

在你的脚本中引入 chalk 模块,并使用其提供的方法来打印彩色文本。以下是一个简单的示例:

// ES5
const chalk = require('chalk');
// ES6
// import chalk from 'chalk';

console.log(chalk.red('红色文字')); 
console.log(chalk.green('绿色文字')); 
console.log(chalk.blue('蓝色文字'));

还有很多用法,参考官方网站: chalk

数组操作

剔除数组的某一个值

要从数组中移除特定元素,可以使用数组的 splice() 方法。splice() 方法可以根据索引位置删除数组中的元素,并返回被删除的元素数组


const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3); // 找到要移除的元素的索引位置

if (index !== -1) {
  array.splice(index, 1); // 使用 splice() 方法移除元素
}

console.log(array); // 输出: [1, 2, 4, 5]

注意: splice() 方法会改变原始数组,如果不希望修改原数组,可以先创建一个副本进行操作

删除数组元素

删除后数组长度不变,原索引下元素变为null。

delete arr[0];

创建二维数组

错误写法

再建数组进行填充,填充创建的数组。

new Array(2).fill(new Array(2).fill(0))

正确写法

new Array(2).fill(null).map(() => new Array(2).fill(0))

原因

由于 .fill() 方法填充的是同一个数组对象的引用,而不是创建多个独立的数组对象。这可能导致当修改其中一个数组元素时,其他数组也会受到影响。正确的做法是使用循环来创建二维数组,以保证每个子数组都是独立的。

也可使用函数来创建二维数组:

function create2DArray(rows, cols) {
  const arr = new Array(rows);
  for (let i = 0; i < rows; i++) {
    arr[i] = new Array(cols).fill(0);
  }
  return arr;
}

对象操作

删除对象

使用 delete 操作符

const pet = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' 
}; 
 
delete pet.gender; 
Object.keys(pet); // ['species', 'age', 'name'] 

判断对象是否为空对象

判断,对象的 key 是不是为空

const obj={}
Object.key(obj).length === 0  说明是空对象

对象的浅拷贝

采用Object.assign

const info = {name: "Maotou", age:18};
const obj = Object.assign({},info);

对象的深拷贝

采用JSON.stringify

const info = {name: "Maotou", age:18};
const obj = JSON.parse(JSON.stringify(info))

采用 ES6 的解构

const info = {name: "Maotou", age:18};
const obj = {...info}

逻辑运算符

注意:在逻辑运算符 或 中,number中 0 是表达 false 的,传递0会被当成,false,寻找下一个

或运算符

逻辑或运算符 (||) 用于在一系列变量或表达式中找到第一个真值(true)并返回它。如果没有真值,则返回最后一个表达式的值。以下是示例:

let message = "";
message = message || "Hello Maotou";
console.log(message); // 输出 "Hello Maotou"

解析:message 是空字符串,被视为假值(false),所以逻辑或运算符会继续检查第二个表达式,最后返回了 "Hello Maotou"。

与运算符

逻辑与运算符 (&&) 用于在一系列变量或表达式中找到第一个假值(false)并返回它。如果没有假值,则返回最后一个表达式的值。以下是示例:

let obj = {
  name: "Maotou"
};

obj = obj && obj.name;
console.log(obj); // 输出 "Maotou"

解析:obj 对象是一个非空对象,被视为真值(true),所以逻辑与运算符返回了 obj.name 的值,即 "Maotou"。

空值合并运算符 (??)

空值合并运算符 (??) 用于检查一个值是否为 nullundefined,如果是,则返回默认值。否则,返回该值本身。以下是示例:

let foo = null;
foo = foo ?? "默认值"
console.log(foo); // "默认值"

解析:foonull,所以空值合并运算符返回了 "默认值"。

区分一下 && 与 ??

确实,空值合并运算符 (??) 和逻辑或运算符 (||) 在某些情况下可以看起来相似,但它们的用法和行为有一些重要的区别

1、左侧操作数的判断

  • 空值合并运算符 (??) 会判断左侧操作数是否为 nullundefined。如果是,则返回右侧操作数作为默认值。

  • 逻辑或运算符 (||) 会判断左侧操作数是否为假值(false)。除了 nullundefined 之外,其他假值包括 false0""NaNOn

2、返回值

  • 空值合并运算符 (??) 只会返回左侧操作数或右侧操作数,不会返回 false 或其他假值。

  • 逻辑或运算符 (||) 在左侧操作数为假值时,会返回右侧操作数的值。如果左侧操作数为真值(true),则返回左侧操作数的值。

&&的替换操作

?.(可选链操作符)通常可以用来替换 &&(逻辑与运算符)的功能,特别是在处理对象属性的访问时,?. 可以用来简化代码,避免因为属性不存在而导致的错误

const obj = { name: "John", age: 30 };

const name = obj && obj.name;
console.log(name); // 输出 "John"

const name = obj?.name;
console.log(name); // 输出 "John"

以上是一些 JavaScript 中常见易混淆问题的扩展和优化。了解这些问题,希望能够帮助到你输出更加稳健和可靠的代码。


下一期:

知识传递之旅:探索JavaScript易混淆问题二