js类型转换和运算规则

前言

本文主要对于js中的数据类型转换进行总结，内容如下：

类型转换规则

运算规则

表达式

常用代码优化

1. 类型转换规则

1.1 原始数据类型

Null
Undefined
Boolean
String
Number
Symbol
BigInt

1.2 引用数据类型

Array
Boolean
Date
Function
NaN
Number
Object
String
null

详情请参考MDN，

引用数据类型都是通过内部方法调用进行转换。

1.3 自动装箱（Autoboxing）

在 JavaScript 中，存在着一种称为自动装箱（Autoboxing）的机制。自动装箱是指 JavaScript 在需要时将基本数据类型（如数字、字符串、布尔值）自动转换为对应的包装对象（Number、String、Boolean）的过程。

当你使用基本数据类型的方法时，JavaScript会自动将基本数据类型转换为包装对象，以便调用对应的方法。

例如：

javascript 复制代码

let num = 10; // 基本数据类型
let numObj = new Number(num); // 手动创建包装对象

console.log(num.toFixed(2)); // 这里会发生自动装箱，将基本数据类型转换为包装对象

num.toFixed(2) 中的 toFixed() 方法需要一个对象，而 num 是一个基本数据类型的数字，但 JavaScript 会在需要时自动将 num 装箱为一个 Number 对象，以便调用 toFixed() 方法。

1.4 具体转换

对于类型转换的规则，主要有以下几种：

原始->数字
原始->字符串
所有->布尔
对象->原始

如果对象需要转成数字，则需要先转换成原始，再从原始转成数字。

总结如图所示：

案例1：重写对象valueOf和toString方法，观察调用方式

js 复制代码

const obj = {
  valueOf() {
    console.log("调用valueOf");
    return {};
  },
  toString() {
    console.log("调用toString");
    return 2;
  },
};
console.log(obj + "");

输出为：

验证了对象先调用valueOf的后调用toString。

案例二：使用Date对象，观察PreferredType是否是string，优先调用toString

js 复制代码

const date = new Date();
Date.prototype.toString = function () {
  console.log("Date调用toString");
  return "string";
};

Date.prototype.valueOf = function () {
  console.log("Date调用valueOf");
  return 1;
};

console.log(1 + date);

输出：

2. 运算规则

在 JavaScript 中，当进行运算时，会遵循一定的规则和优先级。

本次讨论三种运算方式：

算术运算：加法、减法、乘法和除法是最常见的算术运算。
逻辑运算 ：逻辑运算符（如 &&、||、!）用于布尔值之间的运算。
比较运算 ：比较运算符（如 ==、===、!=、!==、<、>、<=、>=）用于比较两个值。

先看一张总结图：

3. 表达式

JavaScript表达式是由操作数（operands）和操作符（operators）组成的代码片段，可以计算出一个值。

例如：

ini 复制代码

1+1
const i = 1
arr[i]
6||11...

4. 常用代码优化

通过上面js的类型转换和运算规则，可以对一些常用代码进行一些优化。

4.1 可省略的比较

js 复制代码

var isFind = false; // isFind是一个boolean
//分别根据isFind做不同的处理
if (isFind === true) {
console.log('处理1');
} else {
console.log('处理2');
}
========优化后========
if (isFind) {
console.log('处理1');
} else {
console.log('处理2');
}

js 复制代码

var user = null; // user是一个对象或者是一个null
// 如果user为null,做一些处理
if (user === null) {
console.log('没有登录，请先登录');
}
========优化后========
if (!user) {
console.log('没有登录，请先登录');
}

4.2 转换为数字

js 复制代码

var page = '10';
page = Number(page)

========优化后========
page = +page

4.3 转换为boolean

js 复制代码

var x = 'aaaa'; // x可能是任何值将x转换为boolean保存到y中

y = Boolean(x);
========优化后========
y = !!x

4.4 使用默认值

js 复制代码

// limit可能是null、undefined、大于0的数字
var limit;
// duration如果是null或undefined, 给与默认值10
if (limit === null II limit === undefined) limit = 10;

========优化后========
limit = limit || 10

4.5 安全的读取对象属性

js 复制代码

Var user = {
name: 'deng',
addr: {
    province:'黑龙江',
    city:'哈尔滨'，
  },
};

// 获取用户居住城市名
// 每个属性都有可能为null或者是undefined
// user 本身也有可能为null或者是undefined

if (user) {
    if (user.addr) {
        console.log(user.addr.city)
    }
}
========优化后========

 console.log(user && user.addr && user.addr.city)

总结

最后总结一下：

介绍了JavaScript中的原始数据类型和引用数据类型，以及自动装箱（Autoboxing）机制。
讨论了不同类型之间的转换规则。
说明算术运算、逻辑运算和比较运算的运算规则。
表达式基本概念。
常用代码优化：提供了一些常见代码优化技巧，包括可省略的比较、转换为数字、转换为布尔、使用默认值和安全的读取对象属性。

如有错误，请指正！O^O