JavaScript数据类型转换

63 阅读1分钟

对象转数组

通过Object.keys(obj)方法拿到一个可枚举的数组 ["phone", "phone_city", "sex","income","age"],然后通过foreach遍历这个数组生成{phone:"用户手机号"}这样的对象,给空数组依次push生成的对象,就实现了对象转数组。

        // 要转换的对象
        const obj = {
            "phone": "用户手机号",
            "phone_city": "手机号归属地",
            "sex": "性别",
            "income": "收入",
            "age": "年龄"
        };
        let arr = [];
        Object.keys(obj).forEach(v => {
            let o = {};
            o[v] = obj[v];
            arr.push(o)
        })
        console.log(arr)

转换之后的数组如下: 对象转数组.png

数组转对象

数组转对象实现就比较简单,通过obj[arr[i].value] = arr[i].label给对象的key直接赋上value就ok了。

<script>
        // 要转换的数组
        const arr = [
            { label: '男生', value: 04 },
            { label: '女人', value: 12 },
            { label: '女孩子', value: 13 },
            { label: '大人', value: 41 },
            { label: '儿童', value: 7 }
        ]

        //数组转对象
        function transformational(arr) {
            const obj = {}
            for (let i = 0; i < arr.length; i++) {
                obj[arr[i].value] = arr[i].label
            }
            return obj
        }
        console.log(transformational(arr)) 

转换之后的对象如下: 数组转对象.png

字符串转数组

(1).split拆分

split()方法可以拆分特定字符,也可以拆分""

var str ="上海@上海市@闵行区@吴中路";
var splitAdd = str.split("@");
console.log(splitAdd) // ["上海", "上海市", "闵行区", "吴中路"]
(2).扩展字符串

通过ES6的解构赋值可以实现字符串转数组[...arr]

(3).Array.from()

Array.from()第一个用途就是将类数组结构转换成数组,在这里可以实现字符串转换成数组,当然,Array.from()还有很多用途,比如:克隆一个数组、使用值填充数组、生成值范围、结合Set实现数组去重等等,这里就大概提一手,哈哈。

最终字符串转数组实现如下:
//字符串转数组
        // 第一种 split拆分
        let xixi = "abc".split('')
        // 第二种 [...]
        let haha = [..."abc"]
        // 第三种
        let lala = Array.from("abc")
        console.log(xixi,haha,lala)

字符串转数组.png

==和===

== 比 === 做的事情更多,因为它还要对值的类型进行强制类型转换,强制类型转换也就是使用代码强制的把一种类型的数据转换成另一种类型的数据,比如parseInt,parseFloat Number() String() Boolean() 等等。

在判断之前需要了解一下 前置知识点: 转换成Number类型

    Number('') // 0
    Number('12.3ab') // NaN
    Number("abc123") // NaN
    Number(false) // 0
    Number(undefined) // NaN
    Number(null) // 0
    Number([]) // 0
    Number([111]) // 111
    Number([111, 222]) // NaN
    Number({}) // NaN

了解了上面这些,我们来实践一下。

判断下面三个true or false?
        [] == false  // true or false?
        ![] == []    // true or false?
        ![] == false // true or false?

对比Number转换类型,可以做出基本判断,如下:

  • 第一个:[]转换为数字为0,false转换为数字为0, 所以最后是true
  • 第二个:![]中,[]先转换为ture, 左边为false, false再转为数字0, 右边也转为数字0, 所以最终是true
  • 第三个:![]中,[]先转换为ture,左边为false,同上
当==的一边存在undefined或者null的时候, undefined和null只和它们自身或对方相等
        '' == undefined // false
        '' == null //false
        '0' == undefined // false
        '0' == null // false
         0 == undefined // false
         0 == null // false
         false == undefined // false
         false == null //false

所以当出现undefined或者null的时候,true的情况就只有下面三种

        // 只有以下情况相等
        null == null // true
        undefined == undefined // true
        undefined == null // true 
给兄弟们附上两条掘金链接,不谢!哈哈哈

对JS数组方法有更多想法的,可以点这里==>《JS数组方法合集

面试硬核知识点,有点硬核哟。可以点这里==>《JS硬核