前端学习（五）---js数据类型的方法超详解

原创已于 2022-03-27 10:47:14 修改 · 1.1k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#css #html5 #学习 #javascript
于 2022-03-27 10:40:44 首次发布
本文深入探讨了JavaScript的基础知识，包括变量定义与操作、数据类型转换、数组与字符串的常用方法，以及数学运算等关键内容。
<!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>
        // number
        var num1 = 3.1415926;
        var str2 = '3.1415926';
        var str3 = 'abc3.14';
        var str4 = '3.14abc';
        console.log(parseFloat(num1))
        console.log(parseFloat(str2))
        console.log(parseFloat(str3))
        console.log(parseFloat(str4))
            // 获取浮点数部分 若为字符串 从第一个字符开始判断 不是数字返回NaN
            // paraseInt此方法与paraseFloat类似 但仅返回整数部分
        var num = 666
        console.log(
            num.toString(),
            typeof num.toString()
        )
        var arr = [1, 3, 4]
        console.log(typeof arr.toString())
            //转为字符串类型





        // 字符串
        var str5 = 'abcdefg123'
        console.log(str5.length)
            // 获取长度
        var str6 = 'hello';
        var str7 = 'world';
        console.log(str6.concat(str7), str6)
        console.log(str6 + str7)
            // 字符串拼接
        var str8 = '123abczhan'
        console.log(str8.indexOf('a'), str8.lastIndexOf('a'))
            // indefOf从前往后找 lastIndexOf从后往前找 只返回第一个找到的索引值
        var str9 = 'zhouyyds'
        console.log(str9.replace('yyds', '666'))
        console.log(str9)
            // 替换 不改变原字符串
        var str10 = 'abcDEFghi'
        console.log(str10.toUpperCase())
        console.log(str10.toLowerCase())
            // 大小写
        var str11 = 'a,b,c,e,f,mnq'
        console.log(str11.split(','), str11, str11.split('c'))
            // split将字符串已特定方式切割成数组不改变原字符串
        var str12 = 'abcdefg'
        console.log(str12.slice(2, 4), str12)
            // slice切片不改变原字符串范围前开后闭 第一个是起始位置


        // math
        console.log(Math.random());
        // 生成一个0到1的随机数
        console.log(Math.random() * 100);
        // 0到100的随机数
        console.log(Math.random() * 90 + 5)
            // 5到95的随机数
        console.log(Math.max(1, 2, 3, 4, 5))
            // 最大数
        console.log(Math.min(2, 3, 4, 1, 6))
            // 最小数
        console.log(Math.ceil(3.14))
            // 向上取整
        console.log(Math.floor(3.14))
            // 向下取整

        console.log('---------------------')


        // 语句
        for (var i = 0; i < 6; i++) {
            if (i == 3) {
                break
            }
            console.log(i)
        }
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {

                if (i == 3) {
                    break
                } else {
                    console.log(i, j)
                }
            }
        }
        // break语句跳出整个循环 若为嵌套循环则跳出内层嵌套循环
        console.log('-------------')
        for (var i = 0; i < 6; i++) {
            if (i == 3) {
                continue
            }
            console.log(i)
        }
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {

                if (i == 3) {
                    continue
                } else {
                    console.log(i, j)
                }
            }
        }
        // continue跳出本次循环
        console.log('--------------------------------------------')
        var fun = function() {
            return 100
        }
        console.log(fun())
        var fun1 = function() {}
        console.log(fun1())
            // 函数默认返回值为undefined
        var haha = function() {
            console.log('hahha')
            return
            console.log('hhhh')
        }
        console.log(haha())
            // 函数进行到return则退出函数执行调用函数以后的部分 若仅return、无返回值也返回undefined

        console.log('------------------------------------------')
        var arr11 = [1, 2]
        var obj = {
            name: 'zhan'
        }
        var str = 'zhan';
        console.log(Array.isArray(arr11))
        console.log(Array.isArray(obj))
        console.log(Array.isArray(str))
            // Array.isArray判断是否为数组

        console.log(Array.of(1, 2, 3, 'zhan'))
            // 将传入参数转换为一个数组
        var arr22 = [1, 2, 3, 4, 5]
        console.log(arr22.pop())
        console.log(arr22)
            // pop删除数组最后一个值并返回该值 改变原数组
        var arr23 = [3, 4, 5, 6]
        console.log(arr23.push('zhan'))
        console.log(arr23)
            // 在数组最后一个位置加上一个值 返回填上值后数组长度 改变原数组

        var arr24 = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr24.shift())
        console.log(arr24)
            // shift删除数组的第一个元素，改变原数组，返回被删除元素

        var arr24 = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr24.unshift(9))
        console.log(arr24)
            // unshift返回数组长度 在第一个位置加上一个值 改变原数组

        var arr24 = [1, 2, 3, 4, 5, 6, 7]
        console.log(
            arr24.reverse()
        )
        console.log(arr24)
            // 反转数组 改变原数组



        var arr24 = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr24.splice(4))
        console.log(arr24)
            // 若只传入一个参数则从该位置开始（包括该位置）截取到最后 改变原数组
        var arr24 = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr24.splice(2, 2))
        console.log(arr24)
            // 若传入两个参数则第一个为开始截取的位置（包括该值）往后的“第二个数值”个数 改变原数组
        var arr24 = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr24.splice(1, 2, 9, 'zhan'))
        console.log(arr24)
            // 第三第四个值是 加在第一个值后的值
            //如何在数组中任何位置添加元素？怎么做   面试题
            // var arr1 = [1,2,3,4,5,6];  //3和4之间加100,200
            // arr1.splice(3,0,100,200)
            // console.log(arr1)
            // 3 0 在下表为3位置加数

        var arr24 = [2, 6, 4, 7, 3, 1]
        console.log(arr24.sort())
        console.log(arr24)
            // 默认升序改变数组
        var arr24 = [2, 6, 4, 7, 3, 1]
        console.log(
                arr24.sort(function(a, b) {
                    return b - a
                })
            )
            // 降序b-a 默认升序a-b
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(
            arr.sort(function(a, b) {
                return Math.random() - 0.5
            })
        )
        console.log(arr)
            // 前后两个数字比较 若传入参数是0则不换位传入参数小于0换位，大于0不换位
            //sort 是对数组进行排序，每次从数组里面挑选两个数 进行运算。
        var arr = ['ad', 'ca', 'bs', 'dg', 'e1']
        console.log(arr.sort())
        console.log(arr.reverse())
            // 可以对首字母排序
            // var arr = ['a', 'c', 'b', 'd', 'e']
            // console.log(arr.sort(function(a, b) {
            //     return b - a
            // })) 降序对它字母没有用
            // 需要反序可以再reverse

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
            // console.log(arr.fill(4))
        arr.fill(4, 2, 5)
        console.log(arr)
            // 改变原数组 第一个参数是覆盖的值 后面前闭后开 覆盖的位置
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(arr.slice(2, 4))
        console.log(arr)
            // 复制某一片段不改变原数组
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(arr.join('*'))
        console.log(arr)
            // 传入参数为连接的值 结果变为字符串 不改变原数组

        var arr1 = [1, 2]
        var arr2 = [3, 4]
        console.log(arr1.concat(arr2))
        console.log(arr1.concat(100))
            // 数组连接
        var arr1 = [1, 2, 3, 4]
        var arr2 = [1, 2, 3, [4, 5, [6]]]
        console.log(arr1.toString())
        console.log(arr2.toString())
            // 变字符串类型

        // includes判断是否包含 返回布尔值

        var arr = [1, 2, 3, 4, 5, 6]
        console.log(
            arr.copyWithin(2, 0, 3)
        )
        console.log(arr)
            // 第一个参数粘贴的起始位置 第二个参数复制起始值 第三个复制终止值左闭右开 改变原数组

        // var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        // arr.forEach(function(item, index, arr) {
        //     console.log(item * 2, index, arr, this)
        // })
        // console.log(arr)
        // 不改变原数组

        var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        console.log(arr.some(function(item, index) {
                return item > 5
            }))
            // 遍历数组寻找是否有满足条件的值返回布尔值

        var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        console.log(arr.every(function(item, index) {
                return item > 1
            }))
            // 遍历数组看其中元素是否全部满足条件返回布尔值

        var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        console.log(arr.filter(function(item, index) {
            return item > 5
        }))
        console.log(arr)
            // fliter筛选数组中满足条件的值并返回 不改变原数组

        var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        console.log(
            arr.map(function(item, index) {
                return item * 2
            })
        )
        console.log(arr)
            // map处理元组中每一个数并返回处理后的元组 不改变原元组

        var arr = [1, 2, 3, [4, 5, [6, 7, 8, [9]]]]
        console.log(arr.flat())
        console.log(arr.flat(Infinity))
            // 默认展开一维 要全展开可以使用infinity 不改变原元组

        var arr = [1, 2, 3]
        console.log(
            arr.reduce(function(pre, item, index) {
                console.log(pre, item, index)
                return item
            }, 100) //此处100为第五个参数值 pre值
        )
        var arr = [1, 2, 3]
        console.log(
            arr.reduce(function(pre, item, index) {
                console.log(pre, item, index)
                return pre + item
            }, 0)
            // 累加器 pre初始值为0 返回的pre+item为和 index每次加一 执行完整个元组 则所有数字加到一起作为最后一个pre值
        )
        var arr = ['a', 'b', 'c']
        console.log(
            arr.reduce(function(pre, item, index) {
                console.log(pre, item, index, typeof pre)
                return pre + item
            }, '')
        )
        //若reduce函数过程中无console.log则返回值为遍历最后一次返回的值
    </script>
</body>

</html>