JavaScript进阶（八）

AVIC_501

已于 2023-05-19 16:54:50 修改

阅读量176

点赞数

文章标签： javascript html5 css

于 2021-09-04 15:51:28 首次发布

本文链接：https://blog.csdn.net/li5306/article/details/120097345

版权

JavaScript+ 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文探讨了封装函数的重要性，通过实例展示了如何进行数组拼接、驼峰命名转换、字符串操作、参数类型处理、回调函数应用、对象操作、数组遍历及数组与DOM操作的封装，以及诸如map、filter、reduce等高级函数的使用。

摘要由CSDN通过智能技术生成

一、为什么要封装函数

函数可以把某些代码逻辑”封装“起来，在需要的时候通过调用函数来使用这些逻辑。
函数可以复用代码，让开发可以写更少的代码，翻遍后期维护代码。

1.0 数组拼接

let str = "get-elements-query-selector-all"

let arr = str.split("-")

for (let i = 1; i < arr.length; i++) {
  arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1)
}

str = arr.join("")

console.log(str) //getElementsQuerySelectorAll

1.1

let str2 = 'get-elements-query-selector-all';

      let arr1 = str2.split('-');

      for(let i = 1; i < arr1.length; i++){
        arr1[i] = arr[i][0].toUpperCase()+arr[1].slice(1);

      }
      str2 = arr1.join('');

二、封装转驼峰逻辑

toUpperCase:方法用于把字符串转换为大写。

<script>
    let str1 = fn("get-elements-by-class-name")
    let str2 = fn("get-elements-query-selector-all")
    let str3 = fn("get-girlfriend-my-amazing-lover")

    function fn(str) {
      let arr = str.split("-")
      for (let i = 1; i < arr.length; i++) {
        arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1)
      }
      str = arr.join("")
      return str
    }

    console.log(str3)
    
</script>

三、封装函数

   //编程数组
   //倒序数组 .reverse
   //在编程字符串
   let str1 = fn('我爱你');//你爱我
   let str2 = fn('ABC');//CBA
   let str3 = fn('猪马牛羊');//羊牛马猪

      function fn(str){

        return ste.split('').reverse().join();
        
    }

四、参数类型

4.0

  function fn(x){
            console.log(x);
       }

    fn(10);
    fn(1+1);
    fn(100 && 200);
    fn(Math.random());//任意随机数

4.1

    function fn(x){
        console.log(x);
    }

    fn('你好');//string
    fn(true);//boolean
    fn(null);//NULL
    fn([11,22,33]);//arr(数组)
    fn({name:'小崔'});//Object
    fn(function(){});//回调函数

五、回调函数

5.0

    function fn(num, y){
        y(num);
    }
    fn(200,function(x){
        console.log(x);
    })

5.1

事件赋值的函数,一般叫事件句柄(事件回调函数)

oBtn.onlick = function(){}
函数 => 一套的逻辑的封装 => 每套逻辑都有若干步骤 => 一套动作的封装. => 一个函数代表一套动作
例：我们吃饭把 => 吃饭就是一种函数封装 =》封装的吃饭的一套动作

<body>
    <!-- 封装一个函数，用于给任意元素添加任意事件，触发任意事件逻辑
     -->
       <div id='div'> 1111</div>
       <button>按钮</button>
</body>

<script>
        let oDiv = document.querySelectorAll('div')[0];
        let oBtn = document.querySelectorAll('button')[0];
     
        fn(oDiv,'onclick',function(){
            alert('谁点我了');

        });

        fn(oBtn, 'onmouseover', function(){//onmouseover 鼠标移入事件
            console.log('鼠标移入');
            console.log('干饭了');
        });

        function fn(el,event, callback){
            el[event] = callback
        }

    
     </script>

六、对象的中括号

<script>
       const obj ={
           name:'赵五',
           age:'18'
       }

       let name = 'age';

        console.log(obj[age]);

        console.log(obj[name]);
    //    console.log(obj.name);



       function fn(obj,key){
            console.log(obj[key]);
       }

       fn(obj, 'name');
       fn(obj, 'age');
    </script>

七、数组遍历

数组遍历 => 数组循环 => 不用for循环来遍历数组的方法。

<script>

       let arr = ['我', '他', '你']
    //    如何用forEach改写for
    // 把循环体内的代码放到forEach的回调函数内。

    // arr.forEach(function (item, i, arr){
    //     console.log(item, i);
    // })
   

    arr.forEach((item, i , arr) =>{
        console.log(item, i);
        console.log(arr);
    })
    </script>

八、forEach处理DOM

html

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

   <script>
        
        let aLi = document.getElementsByTagName('li');

        // aLi.oforEach((item, i) =>{
        //     console.log('item');
        //     item.style.backgroundColor = 'red';
        // })

        Array.from(aLi).forEach((item, i) =>{
            item.style.backgroundColor = 'red';
        });
    </script>

九、forEach封装

<body>
    <div id="wrap">111</div>
</body>

for循环方式

<script>

        let oDiv = document.getElementById('wrap');
        let arr = [11, 22, 33]
 
        for(let i = 0; i < arr.length; i++){
            console.log('arr[i]');
            document.body.innerText += arr[i];
        }
  </script>

for循环方式

    for(let i = 0; i < arr.length; i++){
            alert(arr[i]);
            oDiv.innerHTML += arr[i];
        }

forEach循环方式

     myForEach((item, i, arr) =>{
            console.log(arr[i]);
            document.body.innerText += arr[i];
        });

     myForEach((item, i, arr) =>{
            oDiv.innerHTML += arr[i];
            alert(arr[i]);

        });

    function myForEach(fn){
            for(let i = 0; i < arr.length; i++){
                fn(arr[i], i, arr);
            }
        }

十、map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

    let arr = [11, 22, 33]

       arr.forEach((item, i, arr) =>{
           console.log(item);
           arr[i] += 1;
       })

     arr = arr.map((item, i, arr) =>{
            return item + 1;
        })

    let arr = [100, 200, 300];

     for(let i = 0; i < arr.length; i++){
         arr[i] = arr[i] = '';


     }

      arr = arr.map((item, i, arr) =>{
          arr[i] = arr[i] + '';
      })

arr = arr.map((item, i, arr) =>{
        return item + '';
    })

十一、map封装

<script>
       let arr = [100, 200, 300];

       function myMap(fn){
           let newArr = [];

           for(let i = 0; i < arr.length; i++){
                newArr.push(fn(arr[i],i))
           }

           return newArr
       }

       arr = myMap ((item, i) =>{
           return item + ''
       })

    </script>

十二、filter

filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

    <script>
        let arr = [1, 2, 3, 4];

        let newArr = arr.filter((item, i, arr) =>{
            return item % 2 === 0
        });

    </script>

十三、every和some

<script>
        let arr = [1, 3, 4, 5];

        //  如何判断arr中的所有元素都是奇数?

        // revery用来做判断
        // 返回布尔值
        

        let flag = arr.every((item, i) =>{
            return item % 2 !== 0;

        });

        if(flag){
        alert('全是计数')
        }
 </script>

        // 如何判断数组中是否有奇数=>some


        let flag = arr.some((item, i) =>{
            return item % 2 !== 0
        });

        if(flag){
             alert('有至少一个奇数');
        }

十四、reduce

reduce => 把所有(部分)元素,经过某个逻辑处理后,返回一个结果

<script>
       
        let arr = ['1', '2', 3];

        // 默认的循环次数是length-1
        // 第一次循环
        // total默认是第一个元素
        // item默认是第二个元素(默认从第二个元素开始循环)
        // 非第一次循环
        // total的只是回调函数return的值
        // item就是当前元素
        // num的返回值就是最后一次循环total的值
       let num = arr.reduce((total, item, i) =>{

            // console.log('total',total);
            // console.log('item',item);
            // console.log('i',i);
            return total + item;
        })

   
    </script>

十五、reduce

<script>
        let arr = [{num:10}, {num:20}, {num:30}]

        // let num = arr.reduce((total, item) =>{
        //     return total.num + item.num
        // });
       
        // 如果reduce有第二个参数,则total默认就等于这个参数.(total的默认值就不再是第一个元素)
        // 这是reduce的循环次数就是数组的元素个数
        let num = arr.reduce((total, item) =>{
            return total + item.num
        }, 0);
</script>

十六、定时器

<body>
    <button id='btn'>按钮</button>
</body>

//两个参数。第一个参数是回调函数。时间到了自动触发。
//第二个参数就是延时时间，单位是毫秒，1000ms = 1s;
   serTimeout(() => {

        oBtn.style.backgroundColor = 'red';
    },5000);

<script>
        // 定时器:
        // 1:延时定时器
        // 2:周期定时器

        const oBtn = document.getElementById('btn');
        oBtn.onclick = function(){
        //一个延时十年的定时器，意思是点击之后要过十年才会被触发
            setTimeout(() => {
                oBtn.style.backgroundColor = 'red';

            },1000 * 60 * 60 * 24 * 365 * 10)
        }
</script>

//周期定时器的回调函数每隔指定时间都会重复触发
        setTnterval(() => {

            console.log('定时器')
        }，1000);

十七、关闭定时器

<body>
 <button id='btn1'>开启定时器</button>
 <button id='btn2'>关闭定时器</button>
</body>

const oBtn1 = document.getElementById('btn1');
const oBtn2 = document.getElementById('btn2');

//周期定时器的编号
// 通过这个编号可以关闭指定定时器
let id = '';


//延时定时器编号
let id3 = '';

oBtn2.onclick = function(){

//参数就是指定选择器的编号，关闭周期定时器
clearInterval(id);
clearTimeout(id3);
}


oBtn1.onclick = function(){

//一个延时10年定时器
id3 = setTimeout(() => {

    oBtn = style.backgroundColor = 'red';
},1000 * 60 * 60 * 24 * 365 * 10);

//周期定时器的回调函数每个指定时间都会重复触发。
id = serInterval(() => {

    console.log('定时器')
}，1000)；

}

十八、日期对象

如何获取当前时间?

new =>构造一个对象
Math对象不惜要构造,字符串对象也不用构造
直接量 => 不用构造,写出来就能用的对象,例如:Math,字符串
数组创建可以用构造方式创建,也可以用直接量

<script>
     
    // 直接量
    let arr = [1, 2, 3];

    // 构造数组
    let arr = new Array(1,2,3);

    //日期对象不是直接量，需要new 构造。
    let d = new Date();

    console.log(d);
    console.dir(d);
    
    //获取年份
    console.log(d.getFullYear);
    //获取月份 0-11
    console.log(d.getMonth);
    //获取日数 1-31
    console.log(d.getDate);
    //获取星期几 0-6 （星期天是0）
    console.log(d.getDay());
    //获取当前的小时 0-23
    console.log(d.getHours);
    //获取分钟 0-59
    console.log(d.getMinutes);
    //获取秒数 0-59
    console.log(d.getSeconds);
    //获取19070年1月1日凌晨0点到现在的毫秒数。
    console.log(d.getTime);
   </script>

十九、获取指定时间

//获取当前时间
let d = new Date();

//获取指定时间
let d = new Date('2021-07-16 20:00:00');

//获取1970年1月1日凌晨0点之后1626339497696毫秒的时间
let d = new Date(1626339497696);

let d = new Date();

let t = d.getTime();

//把d的时间设置为24小时之后，精确到毫秒
d.setTime(t + 1000 * 60 * 60 * 24);

console.log(d);