本文介绍构造函数的使用以及一些数据类型的使用。
目录
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); //390002.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('好')); // false2.4.4 includes
判断一个字符串是否包含在另一个字符串中 返回布尔值。
// 4.includes
// 注意 区分大小写
const str = '你好你好你好pink';
console.log(str.includes('你好')); //t
console.log(str.includes('pink')); //t本文介绍构造函数的使用以及一些数据类型的使用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
