网站开发人员职位晋升空间,成都高薪seo,做淘客网站 备案,基础精品课程网站1.作用域和作用域链 let不可访问 var可访问#xff0c;因为没有块作用域这一说法 2.JS垃圾回收机制以及算法 下图如上图同理 下图这个三个相互引用的#xff0c;根部找不到#xff0c;就进行清除。 3.JS闭包 4.变量和函数提升(了解) 5.函数剩余参数和展开运算符 还有种写法 … 1.作用域和作用域链 let不可访问 var可访问因为没有块作用域这一说法 2.JS垃圾回收机制以及算法 下图如上图同理 下图这个三个相互引用的根部找不到就进行清除。 3.JS闭包 4.变量和函数提升(了解) 5.函数剩余参数和展开运算符 还有种写法 6.ES6箭头函数的使用 如果只有一个形参的话小括号可以省略 只有一行代码的话 该count函数指向obj 7.数组解构 8.对象解构 // 需求①对象解构并打印
const pig {name: 佩奇, age: 6}
const {name, age} pig
console.log(name) // 输出: 佩奇
console.log(age) // 输出: 6// 需求②将name改为uname
const {name: uname} pig
console.log(uname) // 输出: 佩奇// 需求③数组对象解构
const goods [{goodsName: 小米,price: 1999}
]// 解构数组中的第一个对象
const [firstItem] goods
const {goodsName, price} firstItem
console.log(goodsName) // 输出: 小米
console.log(price) // 输出: 1999// 或者更简洁的一步解构方式
const [{goodsName: product, price: cost}] goods
console.log(product) // 输出: 小米
console.log(cost) // 输出: 1999 解构后台数据
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscript// 1. 这是后台传递过来的数据const msg {code: 200,msg: 获取新闻列表成功,data: [{id: 1,title: 5G商用自己三大运用商收入下降,count: 58},{id: 2,title: 国际媒体头条速览,count: 56},{id: 3,title: 乌克兰和俄罗斯持续冲突,count: 1669},]}// 需求1 请将以上msg对象 采用对象解构的方式 只选出 data 方面后面使用渲染页面// const { data } msg// console.log(data)// 需求2 上面msg是后台传递过来的数据我们需要把data选出当做参数传递给 函数// const { data } msg// msg 虽然很多属性但是我们利用解构只要 data值function render({ data }) {// const { data } arr// 我们只要 data 数据// 内部处理console.log(data)}render(msg)// 需求3 为了防止msg里面的data名字混淆要求渲染函数里面的数据名改为 myDatafunction render({ data: myData }) {// 要求将 获取过来的 data数据 更名为 myData// 内部处理console.log(myData)}render(msg)/script
/body/html
9.forEach遍历数组 10.渲染商品案例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title商品渲染/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;padding-top: 100px;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.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
/headbodydiv classlist!-- div classitemimg src altp classname/pp classprice/p/div --/divscriptconst goodsList [{id: 4001172,name: 称心如意手摇咖啡磨豆机咖啡豆研磨机,price: 289.00,picture: https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg,},{id: 4001594,name: 日式黑陶功夫茶组双侧把茶具礼盒装,price: 288.00,picture: https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg,},{id: 4001009,name: 竹制干泡茶盘正方形沥水茶台品茶盘,price: 109.00,picture: https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png,},{id: 4001874,name: 古法温酒汝瓷酒具套装白酒杯莲花温酒器,price: 488.00,picture: https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png,},{id: 4001649,name: 大师监制龙泉青瓷茶叶罐,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png,},{id: 3997185,name: 与众不同的口感汝瓷白酒杯套组1壶4杯,price: 108.00,picture: https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg,},{id: 3997403,name: 手工吹制更厚实白酒杯壶套装6壶6杯,price: 99.00,picture: https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg,},{id: 3998274,name: 德国百年工艺高端水晶玻璃红酒杯2支装,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg,},]// 1. 声明一个字符串变量let str // 2. 遍历数据 goodsList.forEach(item {// console.log(item) // 可以得到每一个数组元素 对象 {id: 4001172}// const {id} item 对象解构const { name, price, picture } itemstr div classitemimg src${picture} altp classname${name}/pp classprice${price}/p/div})// 3.生成的 字符串 添加给 list document.querySelector(.list).innerHTML str/script
/body/html
11.综合案例-筛选商品案例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title商品渲染/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.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;}.filter {display: flex;width: 990px;margin: 0 auto;padding: 50px 30px;}.filter a {padding: 10px 20px;background: #f5f5f5;color: #666;text-decoration: none;margin-right: 20px;}.filter a:active,.filter a:focus {background: #05943c;color: #fff;}/style
/headbodydiv classfiltera data-index1 hrefjavascript:;0-100元/aa data-index2 hrefjavascript:;100-300元/aa data-index3 hrefjavascript:;300元以上/aa hrefjavascript:;全部区间/a/divdiv classlist!-- div classitemimg src altp classname/pp classprice/p/div --/divscript// 2. 初始化数据const goodsList [{id: 4001172,name: 称心如意手摇咖啡磨豆机咖啡豆研磨机,price: 289.00,picture: https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg,},{id: 4001594,name: 日式黑陶功夫茶组双侧把茶具礼盒装,price: 288.00,picture: https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg,},{id: 4001009,name: 竹制干泡茶盘正方形沥水茶台品茶盘,price: 109.00,picture: https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png,},{id: 4001874,name: 古法温酒汝瓷酒具套装白酒杯莲花温酒器,price: 488.00,picture: https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png,},{id: 4001649,name: 大师监制龙泉青瓷茶叶罐,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png,},{id: 3997185,name: 与众不同的口感汝瓷白酒杯套组1壶4杯,price: 108.00,picture: https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg,},{id: 3997403,name: 手工吹制更厚实白酒杯壶套装6壶6杯,price: 100.00,picture: https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg,},{id: 3998274,name: 德国百年工艺高端水晶玻璃红酒杯2支装,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg,},]// 1. 渲染函数 封装function render(arr) {// 声明空字符串let str // 遍历数组 arr.forEach(item {// 解构const { name, picture, price } itemstr div classitemimg src${picture} altp classname${name}/pp classprice${price}/p/div })// 追加给list document.querySelector(.list).innerHTML str}render(goodsList) // 页面一打开就需要渲染// 2. 过滤筛选 document.querySelector(.filter).addEventListener(click, e {// e.target.dataset.index e.target.tagNameconst { tagName, dataset } e.target// 判断 if (tagName A) {// console.log(11) // arr 返回的新数组let arr goodsListif (dataset.index 1) {arr goodsList.filter(item item.price 0 item.price 100)} else if (dataset.index 2) {arr goodsList.filter(item item.price 100 item.price 300)} else if (dataset.index 3) {arr goodsList.filter(item item.price 300)}// 渲染函数render(arr)}})/script
/body/html
