2405
浏览量
5
粉丝
7
关注

JS中数据类型转换汇总


2020-08-12 20:49:45 128 0

JS中数据类型转换汇总

JS中的数据类型分为 【基本数据类型】 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined 【引用数据类型】 对象 object 普通对象 数组对象 (Array) 正则对象 (RegExp) 日期对象 (Date) 数学函数 (Math) ... 函数 function

真实项目中,根据需求,我们往往需要把数据类型之间进行转换

把其它数据类型转换为number类型

1.发生的情况

  • isNaN检测的时候:当检测的值不是数字类型,浏览器会自己调用Number方法把它先转换为数字,然后再检测是否为非有效数字
    isNaN('3') =>false
    Number('3')->3
    isNaN(3)->false
    

isNaN('3px') =>true Number('3px')->NaN isNaN(NaN)->true

- 基于parseInt/parseFloat/Number去手动转换为数字类型
- 数学运算:+ - * / %,但是“+”不仅仅是数学运算,还可能是字符串拼接
```javascript
'3'-1 =>2
  Number('3')->3
  3-1->2

'3px'-1 =>NaN

'3px'+1 =>'3px1' 字符串拼接

var i='3';
i=i+1; =>'31'
i+=1; =>'31'
i++; =>4  i++就是单纯的数学运算,已经摒弃掉字符串拼接的规则
  • 在基于“==”比较的时候,有时候也会把其它值转换为数字类型
  • ...

2.转换规律

//=>转换的方法:Number(浏览器自行转换都是基于这个方法完成的)

【把字符串转换为数字】
只要遇到一个非有效数字字符,结果就是NaN
'' ->0
' ' ->0 空格(Space)
'\n' ->0 换行符(Enter)
'\t' ->0 制表符(Tab)


【把布尔转换为数字】
true ->1
false ->0

【把没有转换为数字】
null ->0
undefined ->NaN

【把引用类型值转换为数字】
首先都先转换为字符串(toString),然后再转换为数字(Number)

把其它类型值转换为字符串

1.发生的情况

  • 基于alert/confirm/prompt/document.write等方法输出内容的时候,会把输出的值转换为字符串,然后再输出
    alert(1) =>'1'
  • 基于“+”进行字符串拼接的时候
  • 把引用类型值转换为数字的时候,首先会转换为字符串,然后再转换为数字
  • 给对象设置属性名,如果不是字符串,首先转换为字符串,然后再当做属性存储到对象中(对象的属性只能是数字或者字符串)
  • 手动调用toString/toFixed/join/String等方法的时候,也是为了转换为字符串
    var n=Math.PI;//=>获取圆周率:
    n.toFixed(2) =>'3.14'
    

var ary=[12,23,34]; ary.join('+') =>'12+23+34'

- ...

`2.转换规律`
```javascript
//=>调用的方法:toString

【除了对象,都是你理解的转换结果】
1 ->'1'
NaN ->'NaN'
null ->'null'
[] ->''
[13] ->'13'
[12,23] ->'12,23'
...

【对象】
{name:'xxx'} ->'[object Object]'
{} ->'[object Object]'
不管是啥样的普通对象,最后结果都一样

把其它值转换为布尔类型

1.发生的情况

  • 基于!/!!/Boolean等方法转换
  • 条件判断中的条件最后都会转换为布尔类型
  • ...
    if(n){
    //=>把n的值转换为布尔验证条件真假
    }
    

if('3px'+3){ //=>先计算表达式的结果'3px3',把结果转换为布尔true,条件成立 }


`2.转换的规律`
只有“0/NaN/''/null/undefined”五个值转换为布尔的false,其余都是转换为true


### 特殊情况:数学运算和字符串拼接 “+”
```javascript
//=>当表达式中出现字符串,就是字符串拼接,否则就是数学运算

1+true =>2 数学运算
'1'+true =>'1true' 字符串拼接

[12]+10 =>'1210' 虽然现在没看见字符串,但是引用类型转换为数字,首先会转换为字符串,所以变为了字符串拼接
({})+10 =>"[object Object]10"
[]+10 =>"10"

{}+10 =>10 这个和以上说的没有半毛钱关系,因为它根本就不是数学运算,也不是字符串拼接,它是两部分代码
  {} 代表一个代码块(块级作用域)
  +10 才是我们的操作
  严格写法:{}; +10;

思考题:

12+true+false+null+undefined+[]+'珠峰'+null+undefined+[]+true
=>'NaN珠峰nullundefinedtrue'

12+true ->13
13+false ->13
13+null ->13
13+undefined ->NaN
NaN+[] ->'NaN'
'NaN'+'珠峰' ->'NaN珠峰'
...
'NaN珠峰trueundefined'
'NaN珠峰trueundefined'+[] ->'NaN珠峰trueundefined'
...
=>'NaN珠峰trueundefinedtrue'

特殊情况:“==”在进行比较的时候,如果左右两边的数据类型不一样,则先转换为相同的类型,再进行比较

对象==对象:不一定相等,因为对象操作的是引用地址,地址不相同则不相等

{name:'xxx'}=={name:'xxx'} =>false
[]==[] =>false

var obj1={};
var obj2=obj1;
obj1==obj2 =>true

==========================>上面是重点强调的

对象==数字:把对象转换为数字 对象==布尔:把对象转换为数字,把布尔也转换为数字 对象==字符串:把对象转换为数字,把字符串也转换为数字 字符串==数字:字符串转换为数字 字符串==布尔:都转换为数字 布尔==数字:把布尔转换为数字 ===========================>不同情况的比较,都是把其它值转换为数字,然后再进行比较的

null==undefined:true null===undefined:false null&&undefined和其它值都不相等

NaN==NaN:false NaN和谁都不相等包括自己 ===========================>以上需要特殊记忆

1==true =>true
1==false =>false
2==true =>false  规律不要混淆,这里是把true变为数字1


[]==true:false  都转换为数字 0==1
![]==true:false

[]==false:true  都转换为数字 0==0
![]==false:true  先算![],把数组转换为布尔取反=>false  =>false==false

隔三行变色

第一种

//思路:创建三个样式类 
var oBox = document.getElementById("box"),
    itemList = oBox.getElementsByTagName("li");
for (var i = 0; i < itemList.length; i++) {
    itemList[i].className = 'bg' + (i % 3);

    //=>鼠标滑过:在原有样式类的基础上累加一个HOVER的样式类(由于HOVER在样式表中靠后,它的样式会覆盖原有BG中的样式)
    //=>鼠标离开:把新增的HOVER样式类移除掉即可
    itemList[i].onmouseover = function () {
        this.className += ' hover';
    };
    itemList[i].onmouseout = function () {
        //this.className -= ' hover';
        //this.className = 'bg0 hover' - ' hover';//=>这不是字符串相减,这是数学运算(NaN)
        this.className = this.className.replace('hover', '');
    };
}

//=>点击每一个LI弹出我是第N个LI

第二种



var oBox = document.getElementById("box"),
    itemList = oBox.getElementsByTagName("li");

/*==利用CSS的优先级搞定:默认背景颜色基于样式类完成,鼠标滑过的样式比样式类优先级高一些即可(ID选择器/行内样式)==*/
/*for (var i = 0; i < itemList.length; i++) {
    itemList[i].className = 'bg' + (i % 3);//=>隔三行变色:修改元素的CLASS样式类
    /!*
     * 样式表
     *  ID选择器
     *  标签选择器
     *  样式类选择器
     * 行内样式
     *
     * 这些方式存在优先级的问题:行内、ID、样式类、标签...
     *!/
    itemList[i].onmouseover = function () {
        // this.style.background = 'yellow';
        // this:当前操作的LI
        this.id = 'hover';
    };
    itemList[i].onmouseout = function () {
        // this.style.background = '';
        this.id = '';
    };
}*/


/*for (var i = 0; i < itemList.length; i++) {
    itemList[i].className = 'bg' + (i % 3);//=>默认样式类改变背景色

    //=>在设置新样式之前,我们最好把原有的样式类保存起来
    /!*
     * this:当前操作的元素,也是一个元素对象,有很多的内置属性,我们设置一个自定义的属性,把原有的样式类信息存储进来
     *!/
    itemList[i].myOldClass = itemList[i].className;//=>在改变之前,把原有的样式类信息存储到自定义属性中

    //=>鼠标滑过也想基于样式类完成,不想修改行内样式
    itemList[i].onmouseover = function () {
        //=>滑过:简单粗暴的让CLASS等于HOVER
        this.className = 'hover';
    };
    itemList[i].onmouseout = function () {
        //=>离开:让其还原为原有的样式(原来的样式类可能是 BG0/BG1/BG2 )
        this.className = this.myOldClass;
    };
}*/

for (var i = 0; i < itemList.length; i++) {
    itemList[i].className = itemList[i].myOldClass = 'bg' + (i % 3);
    itemList[i].onmouseover = function () {
        this.className = 'hover';
    };
    itemList[i].onmouseout = function () {
        this.className = this.myOldClass;
    };
}

第三种


var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');

for (var i = 0; i < ulList.length; i++) {
    /*
     * i=0 第一个li i%3=0
     * i=1 第二个li i%3=1
     * i=2 第三个li i%3=2
     * i=3 第四个li i%3=0
     * ...
     */
    var n = i % 3,//=>当前LI的索引模3的余数
        liColor = ulList[i];//=>当前循环找出来的那个LI
    if (n === 0) {
        liColor.style.backgroundColor = 'red';
    } else if (n === 1) {
        liColor.style.backgroundColor = 'yellow';
    } else {
        liColor.style.backgroundColor = 'pink';
    }
}

第四种


var oBox = document.getElementById("box"),
    aList = oBox.getElementsByTagName('li');

/*
function changeColor() {
    for (var i = 0; i < aList.length; i++) {
        aList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue' : ((i % 3 == 1) ? 'lightgreen' : 'lightpink');
    }
}

changeColor();*/

for (var i = 0; i < aList.length; i++) {
    var cur = aList[i];
    //0->false 1->true  2->true
    if (i % 3) {
        //1||2
        //1==true  2==true 需要把布尔转化能为数字再比较
        if (i % 3 == true) {
            //1
            cur.className = "bg1";
        } else {
            //2
            cur.className = "bg2";
        }
    } else {
        cur.className = "bg0";
    }
}

第五种


var oBox = document.getElementById('box'),
    liList = oBox.getElementsByTagName('li');
var max = liList.length - 1;
for (var i = 0; i < liList.length; i += 3) {
    //=>我们每一组循环一次,在循环体中,我们把当前这一组的样式都设置好即可(可能出现当前这一组不够三个,这样会报错)
    liList[i].style.background = '#46aa55';
    i + 1 <= max ? liList[i + 1].style.background = '#aa6053' : null;
    i + 2 <= max ? liList[i + 2].style.background = '#5477aa' : null;
}

/*
 * 三种方案
 *  1.依次遍历每一个LI,通过索引除以3取余数,让当前的LI有不同的背景色
 *  2.第一种的技巧,告别一个个的判断,直接采用数组或者直接找对应样式的方式来完成
 *  3.不是遍历每一个LI,而是遍历每一组
 */
精彩评论
暂无评论