发表于： 2023-03-15 20:36:44
0 243
今天的js知识：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 利用 new Object 创建对象
// const obj = new Object()
// console.log(obj)
// 利用构造函数创建对象
// 1、他们命名以大写字面开头
// 2、它们只能 由 'new' 操作符来执行
//封装函数
// function Pig(name, age, gender) {
// this.name = name
// this.age = age
// this.gender = gender
// }
// //创建对象
// const uname1 = new Pig('李白', '18', '男')
// const uname2 = new Pig('杜甫', '19', '男')
// const uname3 = new Pig('白居易', '20', '男')
// console.log(uname1)
// console.log(uname2)
// console.log(uname3)
//案例 利用构造函数创建多个对象
// 1、写一个Goods构造函数
// 2、里面含属性 name 商品名称 price 价格 count 库存数量
// 3、实例化多个商品对象 并且打印到控制台 例如
// 小米 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 hw = new Goods('华为', 3999, 59)
const vo = new Goods('vivo', 1888, 100)
console.log(mi)
console.log(hw)
console.log(vo)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// const str = '李白'
// console.log(str.length)
// const num = 12
// console.log(num.toFixed(2)) // 12.00
// js 底层完成了 把简单数据类型包装为 引用数据类型
// const str = '李白'
// const str = new String('李白')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内置构造函数</title>
</head>
<body>
<script>
// Object 静态方法
// const o = { uname: '李白', age: 18}
// // 1、获得所以的属性名
// console.log(Object.keys(o)) // 返回 ['uname', 'age']
// // 2、获得所以的属性值
// console.log(Object.values(o)) // 返回 ['李白', 18]
// // 3、 对象的拷贝
// // const oo = {}
// // Object.assign(oo, o)
// // console.log(oo)
// Object.assign(o, {gender: '男'})
// console.log(o) // {uname: '李白', age: 18, gender: '男'}
// Array 方法
// forEach 遍历数组 不返回数组 经常用于查找遍历数组元素
// filter 过滤数组 返回新数组 返回的是筛选满足条件的数组元素
// map 迭代数组 返回新数组 返回的是处理之后的数组元素，想要使用返回的新数组
// reduce 累计器 返回累计处理的结果，经常用于求和等
// const arr = [1, 5, 8]
// 1、 没有初始值
// const total = arr.reduce(function (prev, current) {
// return prev + current
// })
// console.log(total)
// const arr = [1, 5, 8]
// // 2、 有初始值
// const total = arr.reduce(function (prev, current) {
// return prev + current
// }, 10)
// console.log(total)
// 3、箭头函数的写法
// const total = arr.reduce( (prev, current) => prev + current, 10)
// console.log(total)
// 案例 计算新资
// 根据数据计算当月支出薪资
const arr = [{
name: '张三',
salary: 10000
},{
name: '李四',
salary: 10000
},{
name: '王五',
salary: 10000
}
]
// const total = arr.reduce((prev, current) => prev + current.salary, 0)
// console.log(total)
// 需求：每个人薪资增长 30%
const total = arr.reduce((prev, current) => prev + current.salary * 1.3, 0)
console.log(total)
</script>
</body>
</html>
返回列表
评论