前言

类型转换js中主要有以下几种情况:

1、条件判断时;

2、对象转基本类型时;

3、四则运算时;

4、‘==’操作符比较值时;

5、比较运算符时。

一、条件判断时

在条件判断时,除了 undefined, null, false, NaN, '', 0, -0,其他所有值都转为 true,包括所有对象。

二、对象转基本类型时

对象在转基本数据类型时,首先会调用valueof,然后调用tostring;当有Symbol.toPrimitive时,Symbol.toPrimitive的优先级最高;

let a = {
valueOf() {
return 0;
},
toString() {
return '1';
},
[Symbol.toPrimitive]() {
return 2;
}
}

只有当希望值是number或string类型,但传入的是对象时,就会调用valueof或toString方法(这两个方法都可以重写,每个对象都是继承了原生Object中的valueof和toString方法)。

比如在进行加法运算时,一个操作数是对象,就会尝试调用toString方法得到对应的字符串的值。

对于减法或其他操作符都会先调用valueof将值转化为数值,如果没有valueof就会调用toString,如果得到NaN结果就会得到NaN。

值得注意的是当js引擎读到{}时,会把它当作一个语句而不是表达式,直接通过{}调用方法会报错(这里需要详细了解一下细节),默认的,对象调用toString会得到[[object Object],[]调用toString会得到""。

这里这里想到了通过Object.prototype.toString.call(object)来判断对象的类型,这里有个问题为什么当[].toString得到的是''?

function typeOf(obj) {
const toString = Object.prototype.toString;
const map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
return map[toString.call(obj)];
}

  

一些对象转化类型的例子:

let d1 = false + []; //false
let d2 = [] + false; //false
let d3 = false + {}; //false[object Object]
let d4 = {} + false; //[object Object]false//歧义
let d5 = [] + {}; //[object Object]
let d6 = {} + []; //[object Object]//歧义
let d7 = ({} + []); //[object Object]
let d8 = ([] + {}); //[object Object] console.log(typeof d1, d1);
console.log(d2);
console.log(typeof d3, d3);
console.log(d4);
console.log(typeof d5, d5);
console.log(d6);
console.log(typeof d7, d7);
console.log(d8); //结果:
string false
false
string false[object Object]
[object Object]false
string [object Object]
[object Object]
string [object Object]
[object Object]

  

三、四则运算时

‘+’运算符时,一方是字符串类型,另一方也会被转为字符串类型。

 其他运算符,一方是数字,另一方就会被转化为数字。

‘+’运算触发三种类型转换:

    1、将值转换为原始值(?)

    2、将值转换为数字(+‘5’会被转化成数字5)

    3、将值转换为字符串

四、‘==’操作符(两个不相同的类型值)比较值时

两个值不相同时:

   1、null和undefined相等

   2、数值和字符串比较值:字符串会先被转化成数字再进行比较

   3、数值和boolean值比较值:boolean值会先被转化成数字再进行比较

   4、数值或字符串和对象比较值:对象会被先转化为原始值再进行比较

   5、两个对象中的属性值相同,但不是引用的同一个对象,不相等 

两个值相同时:

  1、为Number类型:

      NaN与NaN不相等;

+0与-0相等;

数值或字符串或boolean(同为true或同为false)值相等即相等;

2、null与null相等

  3、undefined与undefined相等

  4、对象引用的同一个才相等

  

boolean值在遇到操作符时,似乎都会转化成数字再进行操作 

Javascript之类型转换(二)的更多相关文章

  1. JavaScript基本概念(二)

    JavaScript 基本概念(二) 操作符和语句 目录 操作符 一元操作符 位操作符 布尔操作符 乘性操作符 其他操作符 语句部分 说起操作符,回忆下上一篇文章末尾说的话. 操作符 一元操作符 ++ ...

  2. JavaScript 入门教程二 在HTML中使用 JavaScript

    一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...

  3. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  4. 一些有用的javascript实例分析(二)

    原文:一些有用的javascript实例分析(二) 5 求出数组中所有数字的和 window.onload = function () { var oBtn = document.getElement ...

  5. 如何对Javascript代码进行二次压缩(混淆)

    如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...

  6. 理解JavaScript继承(二)

    理解JavaScript继承(二) 5.寄生式继承 function object(o) { function F() {} F.prototype = o; return new F(); } fu ...

  7. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  8. 基础JavaScript练习(二)总结

    任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过 ...

  9. 零基础JavaScript编码(二)

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  10. JavaScript中的类型转换(二)

    说明: 本篇主要讨论JavaScript中各运算符对运算数进行的类型转换的影响,本文中所提到的对象类型仅指JavaScript预定义的类型和程序员自己实现的对象,不包括宿主环境定义的特殊对象(比如浏览 ...

随机推荐

  1. hello1.java内容简单介绍

    双击该Hello.java文件以查看它. 在Hello类,称为管理bean类,提供了getter和setter方法name中的Facelets页面表达式中使用属性.默认情况下,表达式语言引用类名,第一 ...

  2. PAT-L2-006(根据后序中序遍历建立树)

    #include <bits/stdc++.h> using namespace std; ; queue <int> q; int a[N]; int b[N]; int n ...

  3. XXS level1

    level1 (1)查看PHP源码,发现可以通过调用window,alert()完成任务 window.alert = function() { confirm("完成的不错!") ...

  4. C语言---辗转相除法 HDU 2503

    Problem Description 给你2个分数,求他们的和,并要求和为最简形式. Input 输入首先包含一个正整数T(T < =1000),表示有T组测试数据,然后是T行数据,每行包含四 ...

  5. php基础-6

    类的继承和方法重写 <?php class people{ public function __construct($name, $age, $sex) { $this->age = $a ...

  6. bootstrap中的container与container-fluid的用法

    使用过bootstrap的同学都知道,其container与container-fluid都是设置文本居中,但两者还是有很大的区别. 官方给出的解释是: .container 类用于固定宽度并支持响应 ...

  7. unzip命令

    unzip命令用于解压缩由zip命令压缩的“.zip”压缩包. 语法 unzip(选项)(参数) 选项 -c:将解压缩的结果显示到屏幕上,并对字符做适当的转换: -f:更新现有的文件: -l:显示压缩 ...

  8. js语言中的新发现和一些总结

    js中定义变量加var和不加var的区别 原创 2016年09月01日 10:17:33 标签: js 3658 这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清 ...

  9. Understanding Complex Event Processing (CEP)/ Streaming SQL Operators with WSO2 CEP (Siddhi)

    转自:https://iwringer.wordpress.com/2013/08/07/understanding-complex-event-processing-cep-operators-wi ...

  10. 海思HI3518由于sensor对齐方式问题导致视频花屏

    https://blog.csdn.net/faihung/article/details/70306446 前几天在验证一台IPC硬件时,遇到一个问题:在其它设备上视频功能运行正常的固件,烧录到客户 ...