• [JavaScript]构造函数创造对象,基本包装类型

    目录

    深入对象

    利用构造函数创建对象

    构造函数中的this实例化对象

    实例成员&静态成员

    内置构造函数

    1.内置构造函数

    2.基本包装数据类型

    3.Object的静态方法

    ​编辑

    4.数组实例的方法

    5.字符串方法

    6.数值的方法

    深入对象

    利用构造函数创建对象

            // 🏆 构造函数 ：是一种特殊的函数，主要用来初始化对象    

            //为了区分普通函数

            // 1.构造函数函数名首字母需要大写

            //  2.使用new关键字调用函数

            //构造函数的作用：主要是为了创建对象

    构造函数中的this实例化对象

    🏆构造函数里面的this代表了实例化对象

            //   🏆      实例化执行过程

            // 说明：

            // 1. 创建新对象

            // 2. 构造函数this指向新对象

            // 3. 执行构造函数代码，修改this，添加新的属性

            // 4. 返回新对象

            //     🏆new关键字主要做了以下的工作：

            // 创建一个新的对象obj

            // 将对象与构建函数通过原型链连接起来

            // 将构建函数中的this绑定到新建的对象obj上

            // 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

    实例成员&静态成员

            // 成员:对象中的属性和方法

            // 🏆实例成员：

            // 通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。

            // 说明：

            // 1. 实例对象的属性和方法即为实例成员

            // 2. 为构造函数传入参数，动态创建结构相同但值不同的对象

            // 3. 构造函数创建的实例对象彼此独立互不影响。

    1.         function Person() {
    2.             this.uname = 'zs'
    3.             this.sayHello = function () {
    4.                 console.log(1)
    5.             }
    6.         }
    7.         const p1 = new Person()
    8.         console.log(p1.uname)
    9.         p1.sayHello()

            // 🏆静态成员：

            // 在构造函数的属性和方法被称为静态成员

            // 静态成员只能被 构造函数访问

            // 说明：

            // 1. 构造函数的属性和方法被称为静态成员

            // 2. 一般公共特征的属性或方法静态成员设置为静态成员

            // 3. 💎静态成员方法中的 this 指向构造函数本身

    1.         Person.aname = '王五'
    2.         console.log(Person.aname);
    3.  
    4.         Person.hello = function () {
    5.             console.log(this === Person);//ture
    6.         }
    7.         Person.hello()

    内置构造函数

    1.内置构造函数

            // 🏆其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。

            //JS中几乎所有的数据都可以基于构成函数创建。

            //系统几乎为每一数据类型都提供对应构造函数

         /*

            数据类型

            内置构造函数

            number Number()

            String()  string

            boolean  Boolean()

            无  undefined

            无  null

            Array()  array

            object()  object

            function  Function()

            */

            //只要是函数就可以使用new来调用

            new Number();

            new String();

            new Boolean();

    // 小结：

    // 系统内置的构造有哪些？除undefined与null外都有一种对应的构造函数（）

    // 只要是构造函数就是使用new来调用，从而得到对象

    // 不构造函数得到的是不同类型的对象

    //任何一个数据都是其对象的构造函数的实例

    2.基本包装数据类型

           //首先明确一点

            //.运算符是用于对对象的成员进行操作

            let obj = {};

            //通过typeof查看数据是        'object'

            console.log(typeof obj);

            //即然是对象就可以使用.进行成员操作

            obj.age = 20

            let i = 10;

            //通过typeof查看10是       'number'

            console.log(typeof i);

            //数据10它的类型并不是object，尝试在i后面进行.操作

            i.age = 20

            //i里的数据不是对象，但进行.操作，并没有报错，原因是js内部进行处理

            //🏆基本包装数据类型

            //在Js进行，操作时，如果检测到.前面的数据不是对象，会将使用这种数据对象对应的构造函数，临时构造出来一个对象，并在这个临时构造出来的对象上完成本次的.操作。当本次点操作结束后，会将这个临时对象销毁

    // 🏆   能够进行基本包装的数据类型有：

    // number、string、 boolean

    3.Object的静态方法

            // Object是系统提供的构造函数

            // {

            //     key:value,

            //     key:value,

            // }

            /*💎静态方法

                    Object.keys(对象)  获取一个对象上所有的成员名

                    Object.values(对象)  获取一个对象上所有的成员值

                     Object.assign(目标对象,源对象,源对象,...)    用于复制对象的成员

            将源对象上的成员，复制给目标对象，用于复制对象的成员

            */

    1.        let obj = {
    2.             uname: '王建华',
    3.             age: 40,
    4.             gender: '男'
    5.         }
    6.         let arrkeys = Object.keys(obj)
    7.         console.log(arrkeys);
    8.  
    9.         const arr=Object.values(obj)
    10.         console.log(arr);
    11.  
    12.         let a = {
    13.             tel: '13798908',
    14.             email: 'asdhjahd@asd.com'
    15.         }
    16.         Object.assign(obj, a)
    17.         console.log(obj);
    18.         a.tel='1578900'//修改a对象的内容,obj没有发生变化
    19.         console.log(a);

    4.数组实例的方法

            //🏆数组.reduce(）

            // 用于对数组进行遍历，并进行统计

            /*

            //语法：

            数组.reduce(function(){},初始值)

            数组.reduce(function(pre,item,index){

           

            }，初始值）

            说明：

            reduce会重复调用function(pre,item,index){}

            reduce在首次调用时会将 初始值 传递给 pre

            reduce在其后各次调用时，会将从function(pre,item,index){}接收到的返回值传递给 pre

            */

    1.         // 🏆reduce实现累加求和
    2.         // 💎 有初始值时 reduce() 如何运行
    3.         // let arr = [1, 3, 9, 15, 20];
    4.         // let ret = arr.reduce(function (pre, item, index) {
    5.         //     return item + pre;//返回值会作为下一次的pre的值
    6.         // }, 0)
    7.         // console.log(ret);
    1.        //💎 无初始值时 reduce() 如何运行
    2.         //没有起始值
    3.         //第一次循环的时候会将数组里面的第一个元素给temp变量item变量就是数组的第二个元素
    4.         //如果没有起始值 reduce则从数组的第二个元素开始循环/将数组的第一个元素给 temp 变量将数组的第二个元素给 item
    5.         // 如果有起始值 reduce则从数组的第一个元素开始循环将起始值给temp 变量将数组的第一个元素给 item变量
    6.         //如果回调函数里面没有return则第二次以后temp为undefined
    7.         //如果 回调函数里面 有 return则返回值作为下一次的temp变量的值
    1.       const array = [15, 16, 17, 18, 19];
    2.  
    3.         function reducer(previous, current, index, array) {
    4.             const returns = previous + current;
    5.             console.log(`previous: ${previous}, current: ${current}, index: ${index}, returns: ${returns}`);
    6.             return returns;
    7.         }
    8.  
    9.         array.reduce(reducer);
    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     
    8.     Document
    10.  
    12.     
      •         
      • 1
    14. 2
  • 3
  • 4
  • 5

    • 数组find方法

      //🏆用于查找数组中满足条件的第1个元素，如果有则返回满足条件的第一个元素,如果没有这样的元素则返回undefined

            /*

            数组.find(function(item,index){

            return 条件

            }）

    1.  //查找数组>5的第1个元素
    2.         // let arr = [5, 4, 7, 19, 20];
    3.         // let ret = arr.find(function (item, index) {
    4.         //     // console.log(item,index);
    5.         //     return item > 5
    6.         // })
    7.         // console.log(ret);//7
    8.  
    9.  
    10.         const arr = [
    11.             { id: 5, name: 'lisi', age: 25 }
    12.             , { id: 6, name: 'wang', age: 22 }
    13.             , { id: 7, name: 'liu', age: 45 }
    14.  
    15.         ]
    16.         // 获取name为liu的id和年龄
    17.         const res = arr.find(item => item.name === 'liu')
    18.         console.log(res);
    19.         console.log(res.id, res.age);

    5.字符串方法

    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     
    8.     Document
    10.  
    12.     
    14.

    6.数值的方法

    1.         //🏆toFixed用于保留指定位数的小数，进行四舍五入
    2.         let price = 12.357
    3.         let ret = price.toFixed(2)
    4.         console.log(ret);//12.36
    5.  
    6.  
    7.         //🏆tostring()将数组转换为字符串
    8.         let n = 10;
    9.         //将数组转换为字符串
    10.         console.log(typeof String(n))
    11.         console.log(typeof n.toString())

  • 相关阅读:
    分布式存储系统之Ceph集群启用Dashboard及使用Prometheus监控Ceph
    二：OpenCV图片叠加逻辑运算
    docker的基础命令&docker镜像和docker容器操作
    flink处理函数--副输出功能
    VS2010配置gdal1.10.0 gdal1.10.1编译
    SSM+基于java的企业任务流程管理系统开发 毕业设计-附源码221533
    【Python】第十二课 网络爬虫
    Tasks in C#
    《安富莱嵌入式周报》第284期：Matlab2022b发布，支持从 .NET 调用，耳机放大器，牛屎芯片替换，JSON可视化，开源的飞行软件和嵌入式系统框架
    Dubbo 获取本地ip错误
  • 原文地址：https://blog.csdn.net/wusandaofwy/article/details/126430643