JavaScript：隐式转换、显示转换、隐式操作、显示操作

客官°小女子只卖身不卖艺 2024-03-08 07:54 103阅读 0赞

#### **一、理解js隐式转换** ####

JavaScript 中的隐式转换是指不需要显式地调用转换函数，而是在执行期间自动发生的数据类型的转换。即在使用不同类型的值进行操作时，JavaScript会自动进行类型转换。这种转换通常发生在不同数据类型之间进行运算或比较时。

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td>序号</td> 
   <td style="width:570px;">分类</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td style="width:570px;"><strong>字符串与数字之间的转换</strong><br> 当使用加号（+）运算符将字符串和数字进行拼接时，JavaScript会将数字转换为字符串类型，实现字符串与数字的拼接。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td style="width:570px;"><strong>将字符串转换为数字</strong><br> 当使用减号（-）运算符时，JavaScript会将字符串转换成数字类型进行运算。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td style="width:570px;"><strong>布尔值与数字之间的转换</strong><br> 当使用布尔值和数字进行运算时，JavaScript会将布尔值转换成数字类型，true 转换为 1，false 转换为 0。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td style="width:570px;"><strong>对象和原始值之间的转换</strong><br> 当使用对象和原始值进行运算时，JavaScript会自动将对象转换成原始值类型，例如将对象转换成字符串时会调用对象的 toString() 方法。</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td style="width:570px;"><strong>隐式转换为布尔值</strong><br> 当判断条件中使用非布尔值时，JavaScript会将其转换成布尔值，例如将数字 0、空字符串、null、undefined、NaN等转换为 false，其它值都转换为 true。</td> 
  </tr> 
 </tbody> 
</table>

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td>序号</td> 
   <td>类型</td> 
   <td>实例</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>字符串与数字的相加（隐式转换成字符串）</td> 
   <td>"1" + 2 // "12"</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>字符串与布尔值的相加（隐式转换成字符串）</td> 
   <td>"true" + true // "truetrue"</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>数字与布尔值的相加（隐式转换成数字）</td> 
   <td>1 + true // 2</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>数组与字符串的相加（隐式转换成字符串）</td> 
   <td>[1, 2, 3] + "hello" // "1,2,3hello"</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>数字与字符串的比较（隐式转换成数字）</td> 
   <td>"1" &gt; 2 // false<br> "1" &lt; 2 // true</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>布尔值与数字的相乘（隐式转换成数字）<br> 布尔值与数字的相加（隐式转换成数字）</td> 
   <td>true * 2 // 2<br> true + 1 // 2</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>对象与布尔值的比较（隐式转换成布尔值）</td> 
   <td>if ({}) { <br> &nbsp; // 这里的代码会执行<br> }</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>数字类型作为条件转换为布尔值（隐式转换成布尔值）</td> 
   <td>var num = 0;<br> if (num) { <br> &nbsp; console.log("num is true"); // 不会执行到这<br> }</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td><strong>undefined和null的转换</strong><br> 将undefined转为数字类型时，结果为NaN<br> 将null转为数字类型时，结果为0<br> 将undefined和null转为布尔类型时，结果均为false</td> 
   <td>Number(undefined) // NaN<br> Number(null) // 0<br> Boolean(undefined) // false<br> Boolean(null) // false</td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td>字符串与数字加、减、乘、除</td> 
   <td>"10" + 1 // "101"<br> "10" - 1 // 9<br> "10" * 2 // 20<br> "10" / 2 // 5<br> "10" / "two" // NaN</td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td colspan="2">当一个对象参与加法运算时，会自动调用对象的 <code>valueOf()</code> 方法或 <code>toString()</code> 方法将对象转换成字符串或数字 <p>1、如果对象具有 <code>valueOf()</code> 方法，则 JavaScript 将首先调用该方法。<code>valueOf()</code> 方法返回对象的原始值，通常是一个数字或布尔值。</p> <p>2、如果对象没有 <code>valueOf()</code> 方法，或者 <code>valueOf()</code> 方法返回一个非原始值，则 JavaScript 将尝试调用对象的 <code>toString()</code> 方法。<code>toString()</code> 方法返回一个表示对象的字符串。</p> <p>3、如果对象没有 <code>valueOf()</code> 方法和 <code>toString()</code> 方法，或者两个方法都返回一个非原始值，则 JavaScript 将抛出一个类型错误（TypeError）。</p> <pre><code>let obj = {
  valueOf: function() { return 42; },
  toString: function() { return "42"; }
}

console.log(obj + 1); // 43

let obj2 = {
  toString: function() { return "2"; }
}

console.log(obj2 * 3); // 6

let obj3 = {}

console.log(obj3 + "hello"); // [object Object]hello
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

JavaScript 中的隐式转换有时可能会导致出乎意料、不符合预期的结果，特别是当开发人员不熟悉隐式转换规则时。因此，在编写 JavaScript 代码时，需要对隐式转换进行充分的理解和考虑。同时，为了避免因类型转换造成的不必要的麻烦，例如在使用“==”或“!=”进行比较时，会进行隐式转换，应该尽可能的使用严格相等（“===”或“!==”）操作符进行比较。在编写代码时应尽量避免隐式转换，而是显式地进行类型转换。

#### **二、理解js显式转换** ####

在 JavaScript 中，显式转换是指通过代码的明确操作将一个数据类型转换为另一个数据类型。

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td>序号</td> 
   <td>方法</td> 
   <td>解释</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>parseInt()</td> 
   <td colspan="1">将字符串转换为数字<br> parseInt() 函数用于将整数字符串转换为整数<br> parseFloat() 函数用于将浮点数字符串转换为浮点数<br> 如果无法转换，则返回 NaN。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>parseFloat()</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>Number()</td> 
   <td colspan="1">将字符串、布尔值、undefined 和 null 转换为数字</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>String()</td> 
   <td colspan="1">将数值、布尔值、对象、数组、null 和 undefined 转换为字符串</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>Boolean()函数</td> 
   <td colspan="1">将任何类型的值转换为布尔值。其中，只有 null、undefined、false、空字符串和数字 0 被转换为 false，其他所有值都被转换为 true</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>操作符（+、-、*、/）</td> 
   <td colspan="1">将数值字符串和布尔值转换为数字</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>Object()函数</td> 
   <td colspan="1">将基本类型的数据转换为对应的对象类型。</td> 
  </tr> 
 </tbody> 
</table>

显式转换在编程时非常常见，可以使程序更加明确和可读。但是要注意，如果显式转换不当，也可能会在程序运行时产生错误。因此，在进行显式转换时，要仔细考虑转换的类型和转换的方式，以避免潜在的错误。

#### **三、理解js隐式操作** ####

在 JavaScript 中，有很多隐式操作，这些操作是指在执行时自动发生，而不需要显示的操作（即不需要明确调用的操作）。

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td>序号</td> 
   <td>方法</td> 
   <td>解释</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>隐式类型转换</td> 
   <td>在进行运算或比较时，JavaScript 会自动将不同类型的值转换成同一类型进行操作。例如，字符串和数字进行运算时，JavaScript 会将字符串转换成数字。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>隐式原型链</td> 
   <td>当使用对象的属性时，如果该属性不在该对象的属性列表中，JavaScript 会沿着原型链向上查找该属性。这是一个自动发生的过程，称为隐式原型链。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>隐式闭包</td> 
   <td>当一个函数内部引用了外部的变量时，JavaScript 会自动创建一个闭包。这个闭包会将被引用的变量保存在内存中，直到该闭包被销毁。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>隐式对象创建</td> 
   <td>当使用对象字面量或 new 关键字创建对象时，JavaScript 会自动为该对象创建一个原型对象。</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>隐式函数调用</td> 
   <td>当使用函数调用时，如果函数的调用方式不是以对象方法的形式调用，那么调用的函数会成为全局对象的一个方法，此时 this 指向全局对象。</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>变量提升</td> 
   <td>在JavaScript中，变量和函数的声明会在代码执行前进行“提升”，即将声明提前执行，使得在声明之前就可以使用这些变量或函数。</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>this关键字</td> 
   <td>this关键字在不同的上下文中会有不同的值，例如在函数内部指向函数的执行上下文，而在对象方法中指向该对象。</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>隐式迭代</td> 
   <td>JS中的数组和对象都可以进行迭代操作，例如使用for-in和for-of循环来遍历对象和数组。</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>隐式全局变量</td> 
   <td>如果在函数中没有使用var或let关键字，则会隐式创建一个全局变量。</td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td>隐式递归</td> 
   <td>某些函数会在函数内部调用自身来实现递归操作，这种递归操作是隐式的。</td> 
  </tr> 
 </tbody> 
</table>

#### **四、理解js显式操作** ####

在 JavaScript 中，显式操作是指通过代码的明确操作来实现某种操作或实现某种行为。

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td>序号</td> 
   <td>方法</td> 
   <td>解释</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>赋值操作符（=）</td> 
   <td>将一个值赋给一个变量。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>数学操作符（+、-、*、/、%）</td> 
   <td>用于数学计算，例如将两个数字相加或相乘等。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>比较操作符（&gt;、&lt;、&gt;=、&lt;=、==、!=）</td> 
   <td>用于比较两个值的大小或相等性。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>逻辑操作符（&amp;&amp;、||、！）</td> 
   <td>用于逻辑计算，例如判断两个条件是否同时成立、或者取反一个值等。</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>条件操作符（？：）</td> 
   <td>用于根据条件返回不同的值。</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>函数调用</td> 
   <td>使用函数名称和参数列表来调用一个函数。</td> 
  </tr> 
 </tbody> 
</table>

通过显式操作，我们可以方便地控制程序运行的过程，实现我们想要的功能。同时，显式操作也常常被用来进行数据类型转换、类型检查等操作，进一步增强程序的健壮性和可维护性。

#### 五、欢迎交流指正。 ####

**参考链接**

[笔面试中必不可少的运算符考察，首先，类型是如何相互转换的【渡一教育】\_哔哩哔哩\_bilibili][bilibili]

[JavaScript中的隐形转换][JavaScript]

[JS的隐式转换与显式转换\_js隐式转换和显式转换\_厉飞雨123的博客-CSDN博客][JS_js_123_-CSDN]

[一文带你了解JavaScript的隐式类型转换\_javascript隐式转换\_ajaxsync的博客-CSDN博客][JavaScript_javascript_ajaxsync_-CSDN]

[bilibili]: https://www.bilibili.com/video/BV1Dh411K7dQ/?spm_id_from=pageDriver&vd_source=704e2597123fc066b03283e82eb866c0
[JavaScript]: https://www.zhihu.com/tardis/bd/art/357406830?source_id=1001
[JS_js_123_-CSDN]: https://blog.csdn.net/qq_68568644/article/details/127497900
[JavaScript_javascript_ajaxsync_-CSDN]: https://blog.csdn.net/m0_61342618/article/details/124769707