JavaScript高级 第二天
一、深入对象
1.创建对象三种方式
(1)利用对象字面量创建对象
const o={
name:'佩奇'
}
(2)利用new Object创建对象
const o = new Object({name: '佩奇'})
console.log(o)
(3)利用构造函数创建对象
看下面
2.构造函数
是一种特殊的函数，主要用来初始化对象
构造函数能快速创建多个类似的对象
function Pig(name,age,gender){
this.name=name
this.age=age
this.gender=gender
}
const Peppa=new Pig('佩奇',6,'女')
-
它们的命名以大写字母开头
-
它们只能由 "new" 操作符来执行
-
使用 new 关键字调用函数的行为被称为
实例化 -
实例化构造函数时没有参数时可以省略
-
new Object 、 new Date 也是实例化构造函数
案例
利用构造函数创建多个对象 需求：
①：写一个Goods 构造函数
②：里面包含属性 name 商品名称 price 价格 count 库存数量
③：实例化多个商品对象，并打印到控制台，例如
小米 1999 20
华为 3999 59
vivo 1888 100
function Goods(name, price, count) {
this.name = name
this.price = price
this.count = count
}
const mi = new Goods('小米', 1999, 20)
const huawei = new Goods('华为', 3999, 59)
const vivo = new Goods('vivo', 1888, 100)
实例化执行过程
-
创建新对象
-
构造函数 this 指向新对象
-
执行构造函数 代码，修改 this ，添加新的属性
-
返回新对象
3.实例成员
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员
实例对象的 属性和方法即为实例成员
为构造函数传入参数，动态创建结构相同但值不同的对象
eg:
function Person() {
//动态添加属性
this.name = '小明'
//实例对象动态添加方法
this.sayHi = function () {
console.log('大家好~')
}
}
const p1 = new Person()
console.log(p1)
console.log(p1.name)
p1.sayHi()
4.静态成员
构造函数的属性和方法被称为静态成员
一般公共特征的属性或方法静态成员设置为静态成员
静态成员方法中的 this 指向构造函数本身
eg：
function Person(name,age){
//省略实例成员
}
//静态属性
Person.eyes=2
Person.arms=2
//静态方法
Person.walk=function(){
console.log('~')
console.log(this.eyes)
}
二、内置构造函数
1.Object
Object是内置的构造函数，用于创建普通对象
eg：
const user=new Object({name:'小明',age:15})
推荐使用字面量方式声明对象，而不是 Object 构造函数
通常获得对象的属性和值的方法：
字面量方式声明对象
const o = {name:'佩奇',age: 6}
for(let k in o){
console.log(k) // name,age
console.log(0[k]) //佩奇 6
三种常用的静态方法：（静态方法就是只有构造函数Object 可以调用的）
1.Object.keys
Object.keys 静态方法获取对象中所有属性（键）
语法：
const o = {name:'佩奇',age: 6}
const arr=Object.keys(o) //获得对象的所有属性，并返回一个数组
console.log(arr) //['name','age']
返回的是一个数组
2.Object.values
Object.values 静态方法获取对象中所有属性值
语法：
const o={name:'佩奇',age:6}
const arr=Object.values(o)
console.log(arr) //['佩奇',6]
返回的是一个数组
3.Object. assign
Object. assign 静态方法常用于对象拷贝
语法：
const o={name:'佩奇',age:6}
const obj={}
Object.assign(obj,o)
console.log(obj) // {name:'佩奇',age:6}
也经常使用的场景给对象添加属性
eg：
const o={name:'佩奇',age:6}
Object.assign(o,{gender:'女'})
console.log(o) // {name:'佩奇',age:6,gender:'女'}
2.Array
Array是内置的构造函数，用于创建数组
eg:
const arr=new Array(3,5)
console.log(arr) //[3,5]
创建数组建议使用字面量创建，不用 Array 构造函数创建
1. 数组常见实例方法
| 方法 | 作用 | 说明 |
|---|---|---|
| forEach | 遍历数组 | 不返回，用于不改变值，经常用于查找打印输出值 |
| filter | 过滤数组 | 筛选数组元素，并生成新数组 |
| map | 迭代数组 | 返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据 |
| reduce | 累计器 | 返回函数累计处理的结果，经常用于求和等 |
前三个先前已经提到
eg：
被遍历的数组.forEach(function(当前数组元素,当前元素索引号)){
//函数体
})
被遍历的数组.filter(function(currentValue,index){
return 筛选条件
})
const arr=[1,2,3]
arr.map(function(item,index){
console.log(item) //item 得到数组所有元素
console.log(index) //index 得到对应的索引号
})
reduce 返回函数累计处理的结果，经常用于求等
基本语法：
arr.reduce(function(){},起始值)
语法：
arr.reduce(function(累计值,当前元素[,索引号][,源数组]){},起始值)
起始值可以省略，如果写就作为第一次累计的起始值
-
如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
-
如果没有起始值，则累计值以数组的第一个数组元素作为起始值开始累计
-
后面每次遍历就会用后面的数组元素累计到累计值里面（类似求和里面的 sum）
eg：
const arr=[1,5,9]
const count=arr.reduce((prev,item)=>prev+item)
console.log(count)
案例
员工涨薪计算成本
需求：
①：给员工每人涨薪30%
②：然后计算需要支出的费用
const arr =[{
name: '张三',
salary: 10000
}, {
name: '李四',
salary: 10000
}, {
name: '王五',
salary: 10000
},
]
const total=arr.reduce((prev,item)=>prev+=item.salary*0.3,0)
console.log(total)
其他方法:
案例
请完成以下需求
const spec = { size: '40cm*40cm' , color: '黑色'}
请将里面的值写到 div 标签里面，展示内容如下：
40cm*40cm/黑色
const spec = { size: '40cm*40cm' , color: '黑色'}
document.querySelector('div').innerHTML=Object.values(spec).join('/')
2.数组常见方法 伪数组转换为真数组
静态方法 Array.from
3.String
在JS中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，之所以具有对象特征的原因是字符串、数值、布尔类型数据是JS底层使用 Object 构造函数“包装”来的，被称为包装类型
1.常见实例方法
案例
显示赠品练习
请将下面字符串渲染到准备好的 p 标签内部，结构必须如左下图所示，展示效果如右图所示：（不放图片了）
const gift = '50g 茶叶,清洗球'
const p=document.querySelector('.name')
const arr=gift.split(',')
p.innnerHTML=arr.map(function(item){
return `<span class='tag'>【赠品】${item}</span><br>`
).join('')
4.Number
Number是内置的构造函数，用于创建数值
常用方法：
toFixed设置保留小数位的长度
eg:
const price=12.345
console.log(price.toFixed(2)) //12.35 四舍五入
