当前位置：首页 > news >正文

【JavaScript】09-构造函数+数据常用函数

news 来源：原创 2025/6/17 12:43:02

本文介绍构造函数的使用以及一些数据类型的使用。

1. 深入对象

1.1 创建对象的三种方式

1.1.1 对象字面量创建

1.1.2 new Object创建

1.1.3 构造函数创建

1.2 实例成员和静态成员

1.2.1 实例成员

1.2.2 静态成员

2. 内置构造函数

2.1 基本包装类型

2.2 Object

2.2.1 获得对象里的属性和值

2.2.2 对象的拷贝

2.3 Array

2.3.1 基本语法

2.3.2 练习-计算薪资

2.3.3 其他方法

① find

② every

2.3.4 伪数组转为真数组

2.4 String

2.4.1 split

2.4.2 substring

2.4.3 startsWith

2.4.4 includes

1. 深入对象

1.1 创建对象的三种方式

1.1.1 对象字面量创建

const o = {
    name : 'zzz'
}

1.1.2 new Object创建

    <script>
        const obj = new Object();
        // 追加属性
        obj.uname = 'zzz';
        console.log(obj);
        // 也可以这样
        // const obj = new Object({uname:'pink'});
    </script>

1.1.3 构造函数创建

自定义函数来创建对象

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

常规的 {...} 语法允许创建一个对象。比如创建了A对象，继续创建B对象时需要重新写一遍。

此时可以通过构造函数来快速创建多个类似的对象。

把要创建的所有对象的公共属性抽取出来封装到一个函数

两个约定：

1. 函数命名以大写字母开头

2. 他们只能由 new 操作符来执行

    <script>
        // 创建一个猪 构造函数
        function Pig(uname,age){
            this.uname = uname;  // 将形参赋值给了对象的uname属性 this.uname
            this.age = age;
        }
        const pappe = new Pig('佩奇',6);
        // console.log(new Pig('佩奇',6));  // 也可以
        console.log(pappe);
    </script>

说明：

1. 使用new关键字调用函数的行为被称为实例化

2. 实例化构造函数时没有参数时可以省略 ()

3. 构造函数无需return 返回值即为新创建的对象写了return也是无效的

练习：

写一个Goods构造函数

里面包含属性 name 商品名称，price价格，count 库存数量

实例化多个商品对象，并打印到控制台

<script>
        function Goods(name,price,count){
            // this.name 相当于给创建的对象追加了属性name
            this.name = name;
            this.price = price;
            this.count = count;
        }
        const xiaomi = new Goods('小米',1999,20);
        const Huawei = new Goods('华为',3999,89);
        const vivo = new Goods('vivo',1777,136);
        console.log(xiaomi);
        console.log(Huawei);
        console.log(vivo);
    </script>

1.2 实例成员和静态成员

1.2.1 实例成员

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

    <script>
        // 1.实例成员：实例对象中的属性和方法称为实例成员
        function Pig(name){
            this.name = name;
        }
        const peppa = new Pig('佩奇');
        const joe = new Pig('乔治');
        // 给peppa改名
        peppa.name = '小猪佩奇';  // 也不会影响
        // 给佩奇增加一个实例方法
        // 仍然是与joe互不影响 只是增加在 peppa的实例对象上
        peppa.sayHi = ()=>{
            console.log('hi~');
        }
        console.log(peppa === joe);  // false
        // 两个对象结构相同 但彼此互不影响
    </script>

1.2.2 静态成员

构造函数的属性和方法称为静态方法（静态属性和静态方法）

说明：

1. 静态成员只能构造函数来访问

2. 静态方法中的 this 指向构造函数

比如Date.now() Math.PI Math.random()等

        // 2.静态成员：构造函数的属性和方法称为静态方法
        function Pig(name){
            this.name = name;
        }
        Pig.eyes = 2;  // 静态属性 给Pig加一个eyes的属性
        console.log(Pig.eyes);  // 访问时也需要Pig. 因为这是构造函数的属性

        // 给构造函数增加一个方法 静态方法
        Pig.sayHi = function() {
            console.log(this);  //Pig
        }
        Pig.sayHi();  // 调用构造函数里的方法

实例成员是对实例对象的修改和操作。

而静态成员是对构造函数内部进行操作。

2. 内置构造函数

2.1 基本包装类型

基本数据类型：

字符串数值布尔 undefined null

引用类型：对象

但是有些特殊情况：

    <script>
        const str = 'pink';
        // 实际内部执行：const str = new String('pink')  实例化
        // 这是JS底层完成的 把简单数据类型 包装成 复杂/引用 数据类型
        // 所以可以使用方法
        console.log(str.length);  //4
        const num = 12;
        console.log(num.toFixed(2));  // 保留2位小数 12.00
    </script>

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

2.2 Object

它是内置的构造函数，用于创建普通对象。

// 通过构造函数创建普通对象
const user = new Object({name:'zz',age:18});

下面有常用的静态方法（只有构造函数Object可以调用的）

2.2.1 获得对象里的属性和值

// 普通方法
const o = {name:'zz',age:18};
for(let k in o){
    console.log(k);   // 属性 name age
    console.log(o[k]) // 值 zz 18
}

    <script>
        const o = {uname : 'zz',age : 18};
        // 1.获得所有属性名
        // Object.keys(对象名)  返回的是一个属性名的数组
        console.log(Object.keys(o));  //[uname,age]

        // 2.获得所有属性值
        // Object.values(对象名)  返回一个值的数组
        console.log(Object.values(o));  //['zz',18]
    </script>

2.2.2 对象的拷贝

        // 3. 拷贝已有对象
        const o1 = {};
        // Object.assign(新,被拷贝的)
        Object.assign(o1,o);
        console.log(o1);

使用：

还可以给已有的对象添加新的内容

        // 3.1 给已有对象添加新的内容
        // Object.assign(原对象,新的内容)
        Object.assign(o,{gender:'n'});
        console.log(o);

2.3 Array

内置的构造函数，用于创建数组

const arr = new Array(3,5);
console.log(arr);  // [3,5]

创建数组建议使用字面量创建，不使用Array构造函数创建

但是有一些方法可以使用，主要是实例方法

一些形象描述帮助理解区分：

这里介绍 reduce

它是返回累计处理的结果，经常用于求和等

2.3.1 基本语法

arr.reduce(function(){},起始值)

比如求和：

arr.reduce(function(上一次值,当前值){},初始值)

    <script>
        // arr.reduce(function(上一次值,当前值){},初始值)
        const arr = [1,5,8];

        // 1.没有初始值
        const total = arr.reduce(function(prev,current){
            return prev + current;
        })
        console.log(total);  //14

        // 2.有初始值
        const total1 = arr.reduce(function(prev,current){
            return prev + current;
        },10)
        console.log(total1);   //24

        // 3.箭头函数写法
        const total2 = arr.reduce((prev,current)=>{ return prev + current;},10);
        console.log(total2);  // 24
    </script>

执行流程：

2.3.2 练习-计算薪资

需求：

① 根据数据计算当月支出薪资

    <script>
        const arr = [{
            name: 'a',
            salary: 10000
        },{
            name: 'b',
            salary: 10000
        },{
            name: 'c',
            salary: 10000
        }]

        // 如果不写初始值 这是对象数组 就变成对象的相加了显然不对
        // 所以在这里需要给初始值赋初值 0
        const total = arr.reduce((prev,current) => {
            return prev + current.salary;
        },0)
        console.log(total);  //30000
    </script>

现在每个人涨薪30%

        // 涨薪30%
        const total1 = arr.reduce((prev,current) => {
            return prev + current.salary*1.3;
        },0)
        console.log(total1);  //39000

2.3.3 其他方法

概况：

形象理解：

我们这里介绍 find 和 every

① find

基本使用

    <script>
        const arr = ['red','blue','green'];    
        //function(){} 是回调函数
        const re = arr.find(function(item){
            return item === 'blue';
        })
        console.log(re);
    </script>

应用

        // 应用
        const arr1 = [
            {
                name: '小米',
                price: 1999
            },{
                name: '华为',
                price: 3999
            },{
                name: 'vivo',
                price: 2889
            }
        ]
        // 比如我只想要小米的东西并且返回小米的对象
        const a = arr1.find((item) => item.name === '小米');
        console.log(a);  // 返回的小米的对象{XX}

② every

测试一个数组内的所有元素是否都能通过某个指定函数的测试，并且返回一个布尔值。

基本使用

    <script>
        // every每一个是否都符合条件 都符合就返回true 否则返回false
        const arr1 = [10,20,30]
        const re = arr1.every((item) => {
            return item >= 10;
        })
        console.log(re);  // true
    </script>

如果是some 则要求至少一个满足即可

2.3.4 伪数组转为真数组

静态方法 Array.from()

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const lis = document.querySelectorAll('ul li');  // 获得li的伪数组
        console.log(lis);
        // 转为真数组
        const liss = Array.from(lis);
        console.log(liss);
    </script>
</body>

2.4 String

常见实例方法

主要介绍2-5，1前面已经介绍

2.4.1 split

    <script>
        const str = 'zz,aa';
        // 转换为数组
        const arr = str.split(',') // 原字符串中的分隔标志是 ,
        console.log(arr);  //['zz','aa']

        const str1 = '2025-3-8';
        // 把日期分开存入数组
        const arr1 = str1.split('-'); // 原字符串中分隔标志是 -
        console.log(arr1);
    </script>

2.4.2 substring

字符串的截取

        // 2.substring(开始索引,结束索引)
        const str = 'abcdefg';
        // 2.1 无结束索引
        console.log(str.substring(2));  // cdefg  没有结束的索引就一直截取到结尾
        // 2.2 有结束索引
        console.log(str.substring(3,5));  //de 结束的索引不在截取的部分中

2.4.3 startsWith

检测字符串是否以某字符开头 返回布尔值。

        // 3.startsWith()
        const str1 = '你好';
        console.log(str1.startsWith('你')); // true
        console.log(str1.startsWith('好')); // false

2.4.4 includes

判断一个字符串是否包含在另一个字符串中返回布尔值。

        // 4.includes
        // 注意 区分大小写
        const str = '你好你好你好pink';
        console.log(str.includes('你好'));  //t
        console.log(str.includes('pink'));  //t

本文介绍构造函数的使用以及一些数据类型的使用。