zoukankan      html  css  js  c++  java
  • js 隐式类型转换

    js是一门弱类型的语言,他在声明变量的时候不需要指定类型,对变量赋值也没有类型的检测,所以js是非常的灵活的,但是有时候也会出现一些非常匪夷所思的问题

    隐式类型转换定义

    console.log(1+'1')
    

    看这句代码 一个数字1 和一个字符串1 他们的类型是不同的 但是我们并没有对他进行任何的操作,但是打印出来的结果是一个11的字符串

    隐式类型转换就是指,数据的类型在不用人工干预的情况下进行转换的行为

    js的数据类型

    这个可真的是老生常谈了,非常常见,简单说一下js有7中数据类型

    基本类型
    • Boolean 布尔值
    • Null 空
    • Undefined 未定义
    • Number 数字
    • String 字符串
    • Symbol es6新增的一种基本数据类型一种类似于标记的一个数据类型我是这么理解的,
      这个接触不多,应该没有人会用这个去做类型转换的吧。。。
    引用类型(Object)
    • Object 类型
    • Array 类型
    • Date 类型
    • RegExp 类型
    • Function 类型

    上边说的这些其实他们都是引用类型(Object)

    js在做数据类型转换的时候都做了什么

    如本片博客的最上边的那个例子,不同的数据类型,再进行转换的时候做了什么,什么时候会触发隐式类型转换呢

    首先是各种的运算符,比如说 + 或者 ==

    console.log(1==true)
    

    只要是涉及到不同数据类型需要计算的时候都会触发隐式类型转换,然后隐式类型中主要有三种转换方式

    • 将值转为原始值,ToPrimitive()。

    • 将值转为数字,ToNumber()。

    • 将值转为字符串,ToString()。

    我之前常见的是toNumber 和 toString,之前我居然不知道这个ToPrimitive是干嘛的 特意谷歌了下。。。

    ToPrimitive 是js的一个内部的算法,是内部执行的时候遵循的一套规则

    他有两个参数 第一个是要转换的值,第二个是期望转换的类型, 只能有三个参数

    • String

    • Number

    • default

    大概的抄一下这个ToPrimitive的运作流程
    如果第二个值是Number的话

    1、如果输入的值已经是一个原始值,则直接返回它 2、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值。 3、否则,调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。 4、否则,抛出TypeError异常。

    如果第二个值是Number的话

    1、如果输入的值已经是一个原始值,则直接返回它 2、否则,调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。 3、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值。 4、否则,抛出TypeError异常。

    那么再给基本类型调用方法的时候,是怎么获取到对象上边的toString和toNumber的呢

    其实就是用到了js的原生类型内建的包装对象

    • String()
    • Number()
    • Boolean()
    • Array()
    • Object()
    • Function()
    • RegExp()
    • Date()
    • Error()
    • Symbol()

    js在操作原始数据类型的属性或者方法的时候会自动给源是类型转换成一个包装对象,然后去调用其原型上边的方法,正所谓万物皆对象~~~

    • 严格等于和宽松等于

    全等操作符(===)比较两个值是否相等,两个被比较的值在比较前都不进行隐式类型转换。 相等操作符(==)比较两个值是否相等,在比较前将两个被比较的值转换为相同类型。(MDN)

    得出的结论就是 == 会在比较之前进行隐式类型转换

    具体规则如下

    • 两个引用类型比较,只需判断它们是不是引用了同一个对象,是返回true,否则为false。
    • undefined 和 null 两者互相比较或者与自身比较,结果是true。它俩与其他任何值比较的都为false。
    • NaN与任何值比较包括它自身结果都是false。
    • 引用类型和基本数据类型进行比较,两者最后都会转换成基本数据类型再进行比较。
    • String,Boolean,Number中的任意两个进行比较,最后都会转为Number类型再进行比较。

    js中常见的各种数据类型运算

    举个例子

    3 + true; // 4
    

    结果是一个数值型,js会先把true转换成数字1

    "2" + 3; // "23"
    2 + "3"; // "23"
    

    如果字符串和数字相加,js会自动把数字转换成字符的,不管数字在前还是字符串在前,结果也是字符串,在传参的时候需要注意

    1 + 2 + "3"; // "33"
    

    像这种 ,因为是从左到右运算的,所以会先得到一个数字3 然后再把3 转换成字符串,最后得到一个33的字符串

    感觉隐式类型转换,平日里随处可见,希望大家多敲多体会吧

  • 相关阅读:
    02-27 朴素贝叶斯
    JQuery UI datepicker 使用方法(转)
    纯CSS兑现侧边栏/分栏高度自动相等(转)
    在触屏设备上面利用html5裁剪图片(转)
    简单几步让CentOS系统时间同步(转)
    百度与谷歌地图坐标转换代码(转)
    jQuery插件开发全解析(转)
    Centos 安装ImageMagick 与 imagick for php步骤详解
    将windows目录共享到linux
    Event事件的兼容性(转)
  • 原文地址:https://www.cnblogs.com/netUserAdd/p/11032300.html
Copyright © 2011-2022 走看看