JS学习笔记 - - day07

一、数组迭代器方法 – 产生新的数组

1.map()方法,返回值是新数组,会将return返回值添加到新数组中
map(function(ele,index,arr){

})

map方法和forEach方法区别:
map方法会有返回值，返回值是新数组，新数组中的元素是将return后面的返回值， forEach方法没有返回值

2.filter(),返回值是新数组,会将return之后满足条件的元素添加到新数组中
filter(function(ele,index,arr){

})

二、reduce（）方法的使用

1.reduce(function(prev,next,index,arr){},defalutvalue)
prev表示上一次的返回值
next表示下一个元素
index表示下标(next的下标)
arr表示原数组
defalutvalue:设置prev默认值,不设置prev表示数组中第一个元素

1.元素累加

<script>
 var arr = [1, 2, 10, 15, 7, 9];
 // 数组元素累加
        var res = arr.reduce(function (prev, next, index, arr) {
            // console.log(prev, next, index, arr);
            console.log(prev,next);//1 2 / 3 10 /  13 15
            return prev + next
        })
</script>

2.元素累乘

<script>
 // reduce练习1:数组元素累乘
        var res = arr.reduce(function (prev, next, index, arr) {
            console.log(prev,next);
            return prev * next
        },1)

</script>

3.求最大值

<script>
var arr = [1, 2, 10, 15, 7, 9];
        // reduce练习2:求数组中的最大值
        var res = arr.reduce(function (prev, next) {
            return prev >next ? prev : next
        })
        console.log(res);
</script>

4.购物车计算总价

<script>
 var foodlist = [
            {
                title:"鱼香肉丝",
                price:18,
                count:2
            },{
                title:"麻婆豆腐",
                price:10,
                count:1
            },{
                title:"干锅排骨",
                price:88,
                count:1
            },{
                title:"米饭",
                price:2,
                count:5
            }
        ]
        var res = foodlist.reduce(function(prev,next){
            console.log(prev,next);// 0 {} // 36  {}
            return prev + next.price*next.count
        },0)

        console.log(res);
</script>

三、数组其他方法

1.判断数据是否为数组
Array.isArray()方法

2.将类数组转换为真的的数组
类数组: arguments/获取页面中所有的节点
Array.from()

3.reverse()方法:反转数组中的元素,会影响原数组

4. slice(startindex,endindex) : 截取数组
   支持负数: -1表示最后一个元素,-2表示倒数第二个元素
   startindex:开始截取的位置
   endindex(可选):结束的位置
   slice(startinex) [startinex,length)
   slice(startinex,endindex) [startinex,endindex)

四、Math对象方法

1.Math.PI（Π常数）
2.向上取整:Math.ceil()
3.向下取整:Math.floor()
4.四舍五入:Math.round()
5.随机数:Math.random() [0,1)
6.最大值:Math.max()
7.最小值:Math.min()
8. x的y次幂:Math.pow(x,y)

随机数练习

<script>
 // 随机数练习1: [0,10] 之间的随机整数
        console.log(Math.floor(Math.random() * 11)); //[0,11)   10.9999

        var arr = ["a", "b", "c", "d", "e", "f"];

        // 随机数练习2: 随机点名
        var index = Math.floor(Math.random() * 6);
        document.write(arr[index])

        // 随机数练习3: 给body标签设置随机色  rgb [0,255]
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);

        document.querySelector("body").style.backgroundColor = `rgb(${r},${g},${b})`;

        // 随机数练习4: 随机生成4位数的验证码
        var str = "123456789QWERTYUIOPASDFGHJKLZMNXBCVqwertyuioplaksjdhfgzmxncbv";

        var arr = [];
        for (var i = 0; i < 4; i++) {
            var index = Math.floor(Math.random() * 61); //[0,60]
            arr.push(str[index])
        };

        console.log(arr.join(""));
</script>

时间对象方法

 <script src="">
        // 1.年份
        console.log(time.getFullYear()); //2022
        // 2.月份 [0,11]
        console.log(time.getMonth() + 1); //12
        // 3.日期
        console.log(time.getDate()); //29
        // 4.星期几 [0,6] 0表示星期天
        console.log(time.getDay()); //4
        // 4.小时
        console.log(time.getHours()); //16
        // 5.分钟
        console.log(time.getMinutes()); //6
        // 6.秒
        console.log(time.getSeconds());
        // 7.时间戳(1970/1/1 00:00:00 到 现在 的总毫秒数)
        console.log(time.getTime());
        console.log(time.valueOf()); //时间对象的原始值是时间戳
        // 8.指定时间
        console.log(new Date("2023/1/1")); //Sun Jan 01 2023 00:00:00 GMT+0800 (中国标准时间)
        console.log((new Date("2023/1/2 14:12:00")).getDay());
    </script>

<script>
        setInterval(function () {
            // 计算时间差
            var nowtime = new Date();
            var eattime = new Date("2022/12/29 17:30:00");
            // 引用数据类型,先调用valueOf()方法获取原始值,原始值不是基本数据类型,在调用toString()
            console.log(eattime - nowtime);
            var time = eattime - nowtime; //时间差
            
            var hours = Math.floor(time / 1000 / 60 / 60);
            hours = hours < 10 ? "0" + hours : hours

            var minitus = Math.floor(time / 1000 / 60 % 60);
            minitus = minitus < 10 ? "0" + minitus : minitus

            var seconds = Math.floor(time / 1000 % 60);
            seconds = seconds < 10 ? "0" + seconds : seconds

            var mybox = document.querySelector("div");
            mybox.innerHTML = `计算目标时间还有${hours}小时${minitus}分钟${seconds}秒`
            // console.log(seconds);
        }, 1000)
    </script>

定时器

setTimeout(function(){},毫秒数) 隔多少毫秒只执行一次
setInterval(function(){},毫秒数) 每隔多少毫秒数都会执行一次function中的代码