JS進階 Day01

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 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>Document</title>
</head><body><script>// 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 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;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>
</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: '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 class="item"><img src=${picture} alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`})// 3.生成的 字符串 添加給 list document.querySelector('.list').innerHTML = str</script>
</body></html>

11.綜合案例-篩選商品案例

<!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 href="javascript:;">全部區間</a></div><div class="list"><!-- <div class="item"><img src="" alt=""><p class="name"></p><p class="price"></p></div> --></div><script>// 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 class="item"><img src=${picture} alt=""><p class="name">${name}</p><p class="price">${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>