做网站为什么选择竞网智赢,2022拉人头最暴利的app,合肥app开发公司前十名,仙居住房和城乡建设部网站学习目标#xff1a; 掌握解析赋值 学习内容#xff1a;
解构赋值数组解构对象解构筛选数组filter方法#xff08;重点#xff09; 解构赋值#xff1a;
解构赋值是一种快速为变量赋值的简洁语法#xff0c;本质上仍然是为变量赋值。
分为#xff1a;
数组解构对象解…学习目标 掌握解析赋值 学习内容
解构赋值数组解构对象解构筛选数组filter方法重点 解构赋值
解构赋值是一种快速为变量赋值的简洁语法本质上仍然是为变量赋值。
分为
数组解构对象解构 数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。
基本语法
赋值运算符 左侧的[ ]用于批量声明变量右侧数组的单元值将被赋值给左侧的变量。变量的顺序对应数组单元值的位置依次进行赋值操作。 title数组解构/title
/headbodyscript// const arr [100, 60, 80]// 数组解构 赋值// // const [max, min, avg] arrconst [max, min, avg] [100, 60, 80]// // const max arr[0]// // const min arr[1]// // const avg arr[2]console.log(max) // 100console.log(avg) // 80// 交换2个变量的值let a 1let b 2; //这里必须有分号[b, a] [a, b]console.log(a, b)/script/body注意js前面必须加分号的情况
title必须加分号的两种情况/title
/headbodyscript// 1. 立即执行函数要加// (function () { })();// (function () { })();// 2. 使用数组的时候// const arr [1, 2, 3]const str pink;[1, 2, 3].map(function (item) {console.log(item)})let a 1let b 2;[b, a] [a, b]console.log(a, b)/script小结
数组解构赋值的作用是什么
是将数组的单元值快速批量赋值给一系列变量的简洁语法。
JS前面有哪种情况需要加分号的
立即执行函数
// 1. 立即执行函数要加(function () { })();(function () { })();数组解构
//数组开头的特别是前面有语句的一定要注意加分号
;[b, a] [a, b]练习
title练习-独立完成数组解构赋值/title
/headbodyscript// const pc [海尔, 联想, 小米, 方正];// [hr, lx, mi, fz] pc// console.log(hr,lx,mi,fz);// function getValue() {// return [100, 60]// }// [max,min] getValue()// console.log(max,min);// const pc [海尔, 联想, 小米, 方正]const [hr, lx, mi, fz] [海尔, 联想, 小米, 方正]console.log(hr)console.log(lx)console.log(mi)console.log(fz)//请将最大值和最小值函数返回值解构 max 和 min 两个变量function getValue() {return [100, 60]}const [max, min] getValue()console.log(max)console.log(min)/script/body数组解构细节
变量多单元值少的情况 // 1. 变量多 单元值少 undefinedconst [a, b, c, d] [1, 2, 3]console.log(a) // 1console.log(b) // 2console.log(c) // 3console.log(d) // undefined变量的数量大于单元值数量时多余的变量将被赋值为undefined。
变量少单元值多的情况 // 2. 变量少 单元值多const [a, b] [1, 2, 3]console.log(a) // 1console.log(b) // 2利用剩余参数解决变量少单元值多的情况
// 3. 剩余参数 变量少 单元值多const [a, b, ...c] [1, 2, 3, 4]console.log(a) // 1console.log(b) // 2console.log(c) // [3, 4] 真数组剩余参数返回的还是一个数组。
防止有undefined传递单元值的情况可以设置默认值
// 4. 防止 undefined 传递const [a 0, b 0] [1, 2]const [a 0, b 0] []console.log(a) // 1console.log(b) // 2允许初始化变量的默认值且只有单元值为undefined时默认值才会生效。
按需导入忽略某些返回值 // 5. 按需导入赋值const [a, b, , d] [1, 2, 3, 4]console.log(a) // 1console.log(b) // 2console.log(d) // 4支持多维数组的结构
// const arr [1, 2, [3, 4]]// console.log(arr[0]) // 1// console.log(arr[1]) // 2// console.log(arr[2]) // [3,4]// console.log(arr[2][0]) // 3// 多维数组解构// const arr [1, 2, [3, 4]]// const [a, b, c] [1, 2, [3, 4]]// console.log(a) // 1// console.log(b) // 2// console.log(c) // [3,4]const [a, b, [c, d]] [1, 2, [3, 4]]console.log(a) // 1console.log(b) // 2console.log(c) // 3console.log(d) // 4小结
变量的数量大于单元值数量时多余的变量将被赋值为
undefined。
变量的数量小于单元值数量时可以通过什么剩余获取所有的值
剩余参数...获取剩余单元值但只能置于最末位。 对象解构
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。
基本语法
赋值运算符 左侧的{ }用于批量声明变量右侧对象的属性值将被赋值给左侧的变量。对象属性的值将被赋值给与属性名相同的变量。注意解构的变量名不要和外面的变量名冲突否则报错。对象中找不到与变量名一致的属性时变量值为 undefined。
title对象解构/title
/headbodyscript// 对象解构// 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)// 1. 对象解构的变量名 可以重新改名 旧变量名: 新变量名// const { uname: username, age } { uname: 雪碧宝宝, age: 18 }// console.log(username)// console.log(age)// 2. 解构数组对象const pig [{uname: 佩奇,age: 6}]const [{ uname, age }] pigconsole.log(uname)console.log(age)/script/body多级对象解构 title多级对象解构/title
/headbodyscript// const pig {// name: 佩奇,// family: {// mother: 猪妈妈,// father: 猪爸爸,// sister: 乔治// },// age: 6// }// // 多级对象解构// const { name, family: { mother, father, sister } } pig// console.log(name)// console.log(mother)// console.log(father)// console.log(sister)const person [{name: 佩奇,family: {mother: 猪妈妈,father: 猪爸爸,sister: 乔治},age: 6}]const [{ name, family: { mother, father, sister } }] personconsole.log(name)console.log(mother)console.log(father)console.log(sister)/script/body遍历数组的forEach方法重点
forEach( )方法用于调用数组的每个元素并将元素传递给回调函数。
主要使用场景遍历数组的每个元素。
语法
被遍历的数组.forEach(function(当前数组元素,当前元素索引号){//函数体
})titleforEach遍历数组/title
/headbodyscript// forEach 就是遍历 加强版的for循环 适合于遍历数组对象const arr [red, green, pink]const result arr.forEach(function (item, index) {console.log(item) // 数组元素 red green pinkconsole.log(index) // 索引号})// console.log(result)/script/body注意
forEach主要是遍历数组。参数当前数组元素必须要写的索引号可选。
练习
!DOCTYPE html
html langenheadmeta charsetUTF-8meta 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) //可以得到每一个数组元素 对象{id4001172}// const {id} item 对象解构const { name, price, picture } itemstr div classitemimg src${picture}altp classname${name}/pp classprice${price}/p/div})//3.生成的 字符串 添加给listdocument.querySelector(.list).innerHTML str/script/body/html筛选数组filter方法重点
filter( )方法创建一个新的数组新数组中的元素是通过检查指定数组中符合条件的所有元素。
主要使用场景筛选数组符合条件的元素并返回筛选之后元素的新数组。
返回值返回数组包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
参数currentValue必须写index可选。
因为返回新数组所以不会影响原数组。
语法
被遍历的数组.filter(function(currentValue,index){return 筛选条件
})title筛选数组filter方法/title
/headbodyscriptconst arr [10, 20, 30]// const newArr arr.filter(function (item, index) {// // console.log(item)// // console.log(index)// return item 20// })// 返回的符合条件的新数组const newArr arr.filter(item item 20)console.log(newArr)/script/body练习
!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
