JavaScript进阶笔记--解构赋值

解构赋值

数组解构

对于数组中的值赋予对应名字 ==> 将数组的单元值快速批量赋值给一系列变量

 let [a, b, c] = [1, 2, 3];console.log(a); // 1console.log(b); // 2console.log(c); // 3
//利用剩余参数let [x, y, ...z] = [1, 2, 3, 4, 5];console.log(x); // 1console.log(y); // 2console.log(z); // [3, 4, 5]let [name, age, ...rest] = "张三,20,男,180,身高170cm";console.log(name); // 张三console.log(age); // 20console.log(rest); // ["男", "180", "身高170cm"]
//利用剩余参数及逗号来获取需要的数组元素let [, , ...others] = [1, 2, 3, 4, 5];console.log(others); // [3, 4, 5]let [head, ...tail] = [1, 2, 3, 4, 5];console.log(head); // 1console.log(tail); // [2, 3, 4, 5]const arr = [1, 2, 3];const [a1, b1, c1] = arr;console.log(a1); // 1console.log(b1); // 2console.log(c1); // 3const pc = ["he", "lx", "xm", "fz"];const [hr, lx, mi, fz] = pc;console.log(hr); // heconsole.log(lx); // lxconsole.log(mi); // xmconsole.log(fz); // fzfunction getValue() {return [100, 60];}const [x2, y2] = getValue();console.log(x2); // 100console.log(y2); // 60

对象解构

属性名要与变量名相同，也可改变量名

在实际开发中，可以先把整个对象从后端进行获取，然后在函数内部通过解构实现某个特定数据的单独渲染

 const obj = {uname: 'longdong',age: 25};const { uname, age } = obj;console.log(uname);console.log(age);const obj1 = {name: 'longdong',age: 25};const { name: username, age: userage } = obj1;console.log(username);console.log(userage);const objarr = [{uname: 'hotpot',age: 26}]const [{ uname: username1, age: userage1 }] = objarr;console.log(username1);console.log(userage1);//多级对象解构const pig = {name: '佩奇',family: {mother: '猪妈妈',father: '猪爸爸',sister: '乔治'},age: 6}const { name: pigname, family: { mother, father, sister }, age: pigage } = pig;console.log(pigname);console.log(mother);console.log(father);console.log(sister);console.log(pigage);

forEach方法（重点）

用于遍历数组，不返回数组（和map不一样），索引号可以不写

//与map不同的是，forEach()方法只对数组中的每个元素执行一次回调函数，并且没有返回值。const arr = ['pig', 'sheep', 'cow', 'horse', 'goat'];arr.forEach(function (animal) {console.log(animal);})

案例

渲染商品案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>渲染商品案例</h1><div class="list"></div><script>javascript">const list = [{"name": "商品1","price": 100},{"name": "商品2","price": 200},{"name": "商品3","price": 300}];let str = '';//遍历数组list.forEach(item => {//拼接HTML字符串const { name, price } = item;str += `<div class="item"><h2>${name}</h2><p>价格：${price}</p><button>加入购物车</button><button>立即购买</button>      <button>收藏</button><button>关注</button><button>评论</button><button>分享</button><button>举报</button></div>`;});document.querySelector('.list').innerHTML = str; // 渲染商品 HTML    </script>
</body></html>

在这里插入图片描述

价格筛选商品案例

模块划分：

Tab栏切换：可用css伪类选择器focus和actived来进行点击和获取焦点后赋予样式
渲染模块：遍历数组，字符串拼接，赋予标签内容
筛选模块：通过filer方法来筛选数组，再进行渲染，并通过循环来对每个a进行绑定点击事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品渲染</title><style>* {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>
</head><body><div class="filter"><a data-index="1" href="javascript:;">0-100元</a><a data-index="2" href="javascript:;">100-300元</a><a data-index="3" href="javascript:;">300元以上</a><a data-index="4" href="javascript:;">全部区间</a></div><div class="list"><!-- <div class="item"><img src="" alt=""><p class="name"></p><p class="price"></p></div> --></div><script>javascript">// 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: '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',},];function render(goodsList) {let str = '';goodsList.forEach(good => {const { name, price, picture } = good;str += `<div class="item"><img src="${picture}" alt=""><p class="name">${name}</p><p class="price">${price}</p></div> `});document.querySelector('.list').innerHTML = str;};render(goodsList);// 3. 绑定事件const filterBtns = document.querySelectorAll('.filter a');filterBtns.forEach(btn => {btn.addEventListener('click', e => {//阻止默认行为e.preventDefault();if (btn.dataset.index === '1') {render(goodsList.filter(good => good.price >= 0 && good.price <= 100));} else if (btn.dataset.index === '2') {render(goodsList.filter(good => good.price > 100 && good.price <= 300));} else if (btn.dataset.index === '3') {render(goodsList.filter(good => good.price > 300));} else if (btn.dataset.index === '4') {render(goodsList);} else {;}})})</script>
</body></html>

filter方法

用于筛选数组，返回一个新数组，需要有声明一个数组进行接收【可简写】

javascript">const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const fliterArr = arr.filter(item => item > 3);console.log(...fliterArr);const fliterArr2 = arr.filter((item, index) => {return item > 3 && index < 5;});console.log(...fliterArr2);