发表于： 2023-03-10 21:27:25
0 106
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>
//对象解构
// const obj = {
// uname: '李白',
// age: 18
// }
//obj.uname
//obj.age
// const uname = '杜甫'
// 解构的语法
// const {uname, age} = {uname: '李白', age: 18}
// //等价于 const uname = obj.uname
// // 要求属性名和变量名必须一致才可以
// console.log(uname)
// console.log(age)
//对象解构的变量名 可以重新改名 旧变量名: 新变量名
// const {uname: username, age} = {uname: '李白', age: 18}
// console.log(uname)
// console.log(username)
// console.log(age)
// 解构数组对象
// const obj = [{
// uname: '李白',
// age: 18
// }]
// const [{uname, age}] = obj
// console.log(uname)
// console.log(age)
// const pig = {
// name: '佩奇',
// family:{
// mother: '猪妈妈',
// father: '猪爸爸',
// sister: '乔治'
// },
// age: 6
// }
// //多级对象解构
// const {name, family: {mother, father, sister}, age} = pig
// console.log(name)
// console.log(mother)
// console.log(father)
// console.log(sister)
// console.log(age)
// const person = [
// {
// name: '佩奇',
// family:{
// mother: '猪妈妈',
// father: '猪爸爸',
// sister: '乔治'
// },
// age: 6
// }
// ]
// const [{name, family: {mother, father, sister}, age}] = person
// console.log(name)
// console.log(mother)
// console.log(father)
// console.log(sister)
// console.log(age)
const msg = {
"code": 200,
"msg": "获得新闻列表成功",
"data": [
{
"id": 1,
"title": '5G商用自己,三大运营',
"count": 58
},
{
"id": 2,
"title": '国际头条',
"count": 55
},
{
"id": 3,
"title": '国内趣事',
"count": 1669
},
]
}
// 1、请将以上msg对象 采用对象解构的方式 只选出 data 方便后面使用渲染页面
// const {data} = msg
// console.log(data)
// 2、上面msg是后台传递过去的数据,我们需要把data选出当做参数传递给函数
// const {data} = msg
// function render({data}) {
// // const {data} = arr
// // 我们只要 data 数据
// // 内部处理
// console.log(data)
// }
// render(msg)
// 3、为了防止msg里面的data名字混淆，需求渲染函数里面的数据改名为 myData
function render({data: myDate}) {
// 数据改名为 myData
// 内部处理
console.log(myDate)
}
render(msg)
</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>
//主要使用场景： 遍历数组的每个元素
// 语法 : 被遍历的数组.forEach(function (当前数组元素，当前元素引号) {
// 函数体
// })
// 参数当前元素是必须写的，索引号可选
// forEach 就是遍历数组 加强版for循环 适合于遍历数组对象
const arr = ['red', 'green', 'pink']
arr.forEach(function (item, index) {
console.log(item) // 数组元素
console.log(index) // 索引号
})
</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>
// function fn() {
// console.log(123)
// }
//箭头函数 基本语法
// const fn = () => {
// console.log(123)
// }
// fn()
// const fn = (x) => {
// console.log(x)
// }
// fn(1)
// 只有一个形参的时候，可以省略小括号
// const fn = x => {
// console.log(x)
// }
// fn(1)
// 只有一行代码的时候，可以省略大括号
// const fn = x => console.log(x)
// fn(1)
// 只有一行代码的时候，可以省略 return
// const fn = x => x + x
// console.log(fn(1))
//箭头函数可以 直接返回一个对象
// const fn = (uname) => ({uname: uname})
// console.log(fn('李白'))
//利用箭头函数求和
// const getSum = (...arr) => {
// let sum = 0
// for (let i = 0; i< arr.length; i++) {
// sum += arr[i]
// }
// return sum
// }
// let result = getSum(2, 3)
// console.log(result)
// 箭头函数 this 是上一层作用域的this 指向
// const fn = () => {
// console.log(this) // window
// }
// fn()
// //对象方法的箭头函数的 this
// const obj = {
// uname: '李白',
// sayHi: () => {
// console.log(this) // window
// }
// }
// obj.sayHi()
const obj = {
uname: '李白',
sayHi: function () {
console.log(this) // 指向 obj
let i = 10
const count = () => {
console.log(this) // 指向 obj
}
count()
}
}
obj.sayHi()
</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>
<style>
* {
padding: 0;
margin: 0;
}
.list {
width: 800px;
height: 600px;
margin: 20px auto;
background: #f3f4f5;
}
.item {
width: 175px;
height: 285px;
background: #f3f4f5;
border: 1px solid #f3f4f5;
border-radius: 5px;
float: left;
margin: 10px;
}
.item:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -4px, 0);
cursor: pointer;
}
.item img {
width: 100%;
}
.item .name {
font-size: 18px;
margin-bottom: 10px;
color: #666;
}
.item .price {
font-size: 22px;
color: firebrick;
}
.item .price::before {
content: "￥";
font-size: 14px;
}
</style>
</head>
<body>
<div class="list">
<!-- <div class="item">-->
<!-- <img src="" alt="">-->
<!-- <p class="name"></p>-->
<!-- <p class="price"></p>-->
<!-- </div>-->
</div>
<script>
const goodsList = [
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
{
id: '4001172',
name: '猫',
price: '200.00',
picture: '../../js2-DOM/images/4.jpg'
},
]
// 1、声明一个字符串变量
let str = ''
//2、遍历数据
goodsList.forEach(item => {
// console.log(item) //得到每一个数组元素 对象
// const {id} = item 解构
const {name, price, picture} = item
str += `
<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>
`
})
document.querySelector('.list').innerHTML = str
</script>
</body>
</html>
返回列表
评论