04-部分数据类型转换

敲啊敲9527
已于 2023-06-19 09:28:10 修改
阅读量91
点赞数
分类专栏： javaScript部分原理文章标签： javascript 前端 typescript
于 2022-07-25 17:33:01 首次发布
本文链接：https://blog.csdn.net/weixin_44423378/article/details/125979823
版权
javaScript部分原理专栏收录该内容
33 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        数据类型转换又分为显示转换和隐式转换
     -->
    <script>
        //  显示转换主要用到的三个API
        //  Number:将数据类型转换为number类型，String:转换为string类型;Boolean;转换为boolean类型
        console.log(Number('1'));//1
        console.log(Number('1a'));//NaN
        console.log(Number(''));//0
        // 布尔类型
        console.log(Number(true));//1
        console.log(Number(false));//0
        //null
        console.log(Number(null));//0
        //undefined
        console.log(Number(undefined));//NaN
        //Number--转换的对象不为基本数据类型时
        //数组；
        console.log(Number([]));//0
        //对象
        console.log(Number({}));//NaN
        //函数
        console.log(Number(function () { }));//NaN
        console.log(Number(function(){}));//NaN
        //String--转换的对象为基本数据类型时
        //数字
        console.log(String(123));//'123'
        //布尔类型
        console.log(String(true));//'true'
        console.log(String(false));//'false'
        //null
        console.log(String(null)); 'null'
        //undefined
        console.log(String(undefined));//'undefined'
        //String--转换的对象不为基本数据类型时；
        //数组
        console.log(String([]));//''
        //对象
        console.log(String({}));//"[object Object]"
        //函数
        console.log(String(function () { }));//'function(){}'
        //Boolean
        //布尔类型的转换除了下面的情况返回false外。其余一律返回true
        //空字符串'' 数字0和NaN   undefined null 布尔值false
        //隐式转换 一般用到隐式转换的地方在于条件判断 比较运算和加法运算中
        if (0) {
            console.log(1);
        }
        if ('0') {
            console.log(1);
        }
        //在进行‘+’法运算的时候规则有如下；
        //1.一元运算符;进行Number()操作
        console.log(Number(+1));
        console.log(Number(+[]));
        console.log(Number(+{}));//NaN
        //2.二元操作符
        //a.在都为基本数据类型的情况;若存在字符串则优先进行加法(不为字符串类型的则隐式String转换)否则都数字加法(不为数字类型则隐式Number转换)
        console.log(1 + '2');//'12'
        console.log(true + '2'); 'true2'
        console.log(1 + true);//2
        console.log(1 + null);//1
        console.log(1 + undefined);//NaN
        //b.在存在非基本数据类型的情况下：
        //首先需要对数据进行基本类型的转换，先调用valueOf.若返回不是基本类型，再调用toString,当转换后都为基本数据类型后再按照a情况下的方法进行操作
        console.log([] + []);//''
        console.log([] + {});//'[object Object]'
        //对于{}放在左边的情况,不同的浏览器不一样，有的会当做对象，有的会当做是代码块
        //{}+{}
        //NaN 除了加法运算符(+)有可能把运算转为字符串，其他运算符都会把运算自动转成数值
        console.log('2' - '1');//1
        console.log('2' * '3');//6
        //数据比较(非恒等) 两个不同类型数据比较时隐式转换规则
        //a.数字和字符串，布尔类型，数组，对象进行比较时；
        //先转换为数字(Number),再进行比较：
        console.log(1 == '1');//true
        console.log(0 == []);//true
        console.log(1 == true);//true
        console.log(0 == {});//false
        //字符串和布尔类型 数组 对象进行比较时:
        //和布尔类型的比较时转换为数字类型进行比较
        console.log('true' == true);//false
        console.log('1' == true);//true
        console.log('' == false);//true
        console.log('o' == false);//true
        //字符串和数组 对象的比较时 转换为字符串再进行比较
        console.log('1' == [1]);//true
        console.log('' == []);//true
        console.log('1,2' == [1, 2]);//true
        console.log('' == {});//false
        console.log('[object Object]' == {});//true
        //c. undefined 和null进行非全等比较返回true 其他均返回false
        //d.数组和布尔型 数组进行比较时(和对象不相等)
        //和布尔进行比较时 转换为数字再进行比较
        console.log([] == false);//true
        console.log([1] == true);//true
        //和数组比较是比较其地址
        console.log([1] == [1]);//false
        //e.对象和布尔型不相等
        //4.条件运算都转换为布尔型


        // 数字类型转换（掌握）
        Number.parseInt()   //把值/字符串类型 强制转换成整数
        Number.parseFloat() //给定值被解析时返回数字，如果不能解析成数字 NaN 可以传输一个字符串类型的数字
        
         //字符串转换为数组的一些Api 简单类型转复杂类型
         .split() .split()
        // [...args] //展开运算符 [...args]
        // [...chars] //解构赋值  [...chars]
        .Array.from() .Array.from()
        
        //数组转换为字符串Api 复杂类型转简单类型
        .toString() .toString()
        .join() .join()

        // 将对象转换为字符串Api 复杂转简单
        .String() .String() .String()
        .JSON.stringify() .JSON.stringify() .JSON.stringify() .JSON.stringify()

        // 将字符串转对象 简单转复杂
        var str = '{"name":"小明","age":18}';
        var json = JSON.parse(str);
        var json = eval("(" + str + ")");
        var json = (new Function("return " + str))();
        console.log(json);

        // 对象转换为数组Api 复杂转复杂
        Object.values() //返回一个给定对象自身的所有可枚举属性值的数组 
        .Object.values() //返回一个给定对象自身的所有可枚举属性值的数组
        let obj = {
            'name': '前端',
            'url': 'https://www.webadkf.com',
            'des': '专注web前端开发',
        };
        // 需要对象里面的键作为数组则
        Object.keys().map(function (i) {
            return obj[i]
        })
        Object.keys().map(function(i){
            return obj[i]
        })

        //循环方式
        var arr = [];
        for(var i in obj){
            arr.push(obj[i])
        }
        var arr = [];
        for(var i in obj){
            arr.push(obj[i])
        }
        //数组转对象
        Object.assign({}, array) .Object.assign({},array) .Object.assign({},array)
        let array = [1,2,3,4,5];
        let  obj2 ={};
        obj2 = (Object.assign({}, array)) 
        console.log(obj2);
        let array2 = [3,4,2,5,8];
        let obj3 = {};
        obj3 = (Object.assign({},array2));
        console.log(obj3);
        // let array = [1,2,3,4];
        // let obj = {};
        // obj = (Object.assign({},array));
        // console.log(obj);
        //Array.from() 对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
          // 字符串转换为数组 split() 字符串转对象JSON.parse(str) 格式"{"name":"小明"}"
        //   数组转换为字符串Api toString() join() 对象转换为字符串 String() JSON.stringify() 对象转换为数组 Object.values()
        // 数组转对象Object.assign({},[])
        //   string Number Boolean null undefined 
    </script>
</body>

</html>