JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象

简介: 这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。

文章目录

  • 1、工厂方法创建对象
    • 1.1 代码块
    • 1.2、测试结果
  • 2、原型对象
    • 2.1 代码
    • 2.2 测试结果
  • 3、toString
    • 3.1 代码
    • 3.2 测试结果
  • 4、数组
    • 4.1 代码
  • 5、字面量创建数组、数组的方法
    • 5.1 代码
    • 5.2 测试结果
  • 6、forEach遍历
    • 6.1 代码
    • 6.2 测试结果
  • 7、splice和slice
    • 7.1 代码
    • 7.2 测试结果
  • 8、Date对象
  • 9、Math
  • 10、包装类
    • 10.1 代码
  • 11、String对象

1、工厂方法创建对象

1.1 代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>工厂方法创建对象</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*
                   思路:
                      将创建对象的方法封装 在一个函数中,在创建对象的时候直接调用函数。
                                          对象的属性可以在调用函数的时候传参

                    使用工厂方法创建的对象,使用的构造函数都是object
                    所以创建的对象都是object这个类型
                    就导致我们无法区分出多种不同类型的对象

    */

               function createPerson(name,gender,age){
                    var obj = new Object();
                    obj.name = name;
                    obj.gender = gender;
                    obj.age = age;
                    obj.sayName = function(){
                        alert(this.name);
                    }
                    return obj;
               }

               var person1 = createPerson("小红","女",18);
               var person2 = createPerson("小黑", "男", 18);
               var person3 = createPerson("小紫", "女", 18);
               console.log(person1);
               console.log(person2);
               console.log(person3);
               person1.sayName();






    </script>
</head>

<body>

</body>

</html>

1.2、测试结果

在这里插入图片描述

2、原型对象

2.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>原型对象</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*
                    我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
                            这个属性对应着一个对象,这个对象就是我们所谓的原型对象

                    如果函数作为普通函数调用prototype没有任何作用
                      当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,
                          指向该构造函数的原型对象,我们可以通过__proto__来访问属性

                    原型对象就相当于一个公共的区域,所有的同一个类的实例都可以访问到这个原型对象
                        我们可以将对象中共有的内容,统一设置到原型对象中


                    当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,
                        如果没有则会去原型对象中寻找,如果找到则直接使用。如果没有找到则到原型的原型中寻找
                            ,直到找到 Object对象的原型,Object对象的原型没有原型,如果在Object中依然没有找到
                                  则返回undefined


                    以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
                        这样不用为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法



    */

                          function Myclass(){

                          }

                        //   向Myclass的原型中添加属性a
                          Myclass.prototype.a = 123;

                        //  向Myclass的原型中添加一个方法
                          Myclass.prototype.sayHello = function(){
                              alert("hello");
                          }

                        /*

                          原型中写的同名的方法,后写的会覆盖之前写的
                           Myclass.prototype.sayHello = function () {
                                alert("hello yuanxing");
                            }

                        */

                          var mc = new Myclass();
                          mc.sayHello();
                          console.log(mc.a);
                          console.log(Myclass.prototype);
                          console.log(mc.__proto__);


    </script>
</head>

<body>

</body>

</html>

2.2 测试结果

在这里插入图片描述

3、toString

3.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>toString</title>
    <style type="text/css"> </style>

    <script type="text/javascript">


                   function Person(name,gender,age){
                       this.name = name;
                       this.gender = gender;
                       this.age = age;
                   }

                   //修改Person原型的toString
                   Person.prototype.toString = function(){
                       return "Person[name = " + this.name + ",age = " + this.age + ",gender = " + this.gender + "]";
                   }

                   //创建一个person实例
                   var per = new Person("孙悟空","男",18);

                   var per1 = new Person("唐僧","男",18);
                //    per1.toString();
                   console.log(per1.toString());

                //    per.toString = function(){
                //             return "Person[name = "+this.name+",age = "+this.age+",gender = "+this.gender+"]";
                //    }

                   //当我们在页面中打印一个对象时,实际上输出的对象的toString()方法的返回值

                   var result = per.toString();
                   console.log(result);

                   console.log(per.hasOwnProperty("toString"));//false
                   console.log(per.__proto__.hasOwnProperty("toString"));//false
                    console.log(per.__proto__.__proto__.hasOwnProperty("toString"));//true


    </script>
</head>

<body>

</body>

</html>

3.2 测试结果

在这里插入图片描述

4、数组

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数组</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

                  //创建数组对象
                  var arr =  new Array();

                  //使用typeof检查一个数组时,会返回object
                  console.log(typeof arr);

                  /*
                     向数组中添加元素
                            语法:数组[索引] = 值  
                  */

                  arr[0] = 10;
                  arr[1] = 20;
                  arr[2] = 30;
                  arr[3] = 40;

                  /*
                    读取数组中的元素
                            语法:数组[索引]

                            如果读取不存在的索引,不会报错,会返回undefined

                  */

                  console.log(arr[0]);

                /*

                   对于连续的数组,使用length可以获取到数组的长度(元素的个数)
                          修改length的长度大于原长度,多出部分会空出来
                          如果修改的length小于原长度,则多出的部分会被删除

                */
                console.log(arr.length);

                // arr.length = 1;
                // arr.length = 10;

            /*
                向数组的最后一个位置添加元素
                           arr[arr.length] = 值

            */
           arr[arr.length] = 70;




    </script>
</head>

<body>

</body>

</html>

5、字面量创建数组、数组的方法

在这里插入图片描述

5.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>字面量创建数组</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*
            使用字面量创建数组
            语法:[]

            var arr = [];   

            在创建数组的时候,就可以指定数组中的元素


            数组中的元素可以时任意类型的数据类型
              也可以是对象


    */

          var arr = [1,2,"hello","NaN"];
          console.log(arr[2]);

          //对象
          var obj =  {name:"孙悟空"};
          arr[arr.length] = obj;
          console.log(arr);
          console.log(arr[arr.length-1]);

/*
       push()  向数组的末尾添加一个或更多元素,并返回新的长度。
*/
          var array = ["张三","李四","麻子"];
          console.log(array);
          array.push("王五");
          console.log(array);
         var result =  array.push("12","23");
          console.log(array);   
          console.log(result);

/*
        pop()  删除并返回数组的最后一个元素

*/

        var rs = array.pop();
        console.log(array);
        console.log(rs);

/*
         unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
                   向前边添加元素后,后边的元素索引向后移动
*/

        var rss =  array.unshift("武松","武大郎");
        console.log(array);
        console.log(rss);


    </script>
</head>

<body>

</body>

</html>

5.2 测试结果

在这里插入图片描述

6、forEach遍历

6.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数组的遍历</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

/*

               一般我们使用for循环去遍历数组
                 JS中为我们提供了一个方法,用来遍历数组
                 forEach()
                         - 只支持IE8以上的浏览器
                forEach()方法需要一个函数作为参数
                       - 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
                       - 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来
                          我们可以来定义形参,来读取这些内容

                          浏览器会在回调函数中传递三个参数:
                                第一个参数,就是当前正在遍历的元素
                                第二个参数,就是当前正在遍历的元素的索引
                                第三个参数,就是正在遍历的数组


*/

                  //创建一个数组
                var arr = [1,2,3,4,5];
                for(var i = 0; i < arr.length ;i++){
                    console.log(arr[i]);
                }

                arr.forEach(function(value,index,obj){
                    console.log("value= "+value);
                    console.log("index="+index);
                    console.log("obj="+obj);

                });


    </script>
</head>

<body>

</body>

</html>

6.2 测试结果

在这里插入图片描述

7、splice和slice

7.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>slice和splice</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

                 //创建一个数组
                    var arr = ["孙悟空", "猪八戒", "唐僧", "沙悟净", "白骨精"];

        /*
                slice()
                   - 可以用来从数组中取出指定元素
                   - 该方法不会改变元素数组,而是截取到的元素封装到一个新数组中返回
                   - 参数:
                         1、截取开始的位置索引,包括开始索引
                         2、截取结束位置的索引,不包括结束索引
                            第二个参数可以不写,从开始索引往后的所有的元素

                            索引可以传递一个负值,如果传递一个负值,则从后往前计算
                             -1 倒数第一个



        */

                    var result = arr.slice(0,2);
                    console.log(result);
                    console.log(arr);

        /*

                   splice()
                            会影响到原数组,会将指定元素从原始数组中删除
                            并将被删除的元素作为返回值返回

                            - 参数
                                 第一个,表示开始位置的索引
                                 第二个,表示删除的数量
                                 第三个及以后,
                                           可以传递新的元素,这些新的元素会自动插入到开始位置索引前边


        */

          var array = ["孙悟空", "猪八戒", "唐僧", "沙悟净", "白骨精"];

          var result = array.splice(1,2,"张三","李四","王二");
          console.log(array);
          console.log(result);


    </script>
</head>

<body>

</body>

</html>

7.2 测试结果

在这里插入图片描述

8、Date对象

在这里插入图片描述

9、Math

在这里插入图片描述

10、包装类

10.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>包装类</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

/*
           在JS中提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
            String()
                     可以将基本数据类型字符串转换为String对象
            Number() 
                     可以将基本数据类型字符串转换为number对象
            Boolean()
                      可以将基本数据类型字符串转换为Boolean对象



*/


    </script>
</head>

<body>

</body>

</html>

11、String对象

在这里插入图片描述

相关文章
|
7天前
|
JavaScript 前端开发
JavaScript中的箭头函数:现代JS开发的必备特性
JavaScript中的箭头函数:现代JS开发的必备特性
155 107
|
4月前
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
219 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
2月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
62 1
|
4月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
229 24
|
6月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
7月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
148 32
|
6月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象