目录
作用域&解构&箭头函数
目标：掌握作用域及闭包概念加深对js理解，学习ES6新特性让代码更加简洁便利。
一、作用域
1、全局作用域
<script>标签和.js文件的【最外层】就是所谓的全局作用域，全局作用域中声明的变量，任何其他作用域都可以被访问。
尽量少使用，避免变量污染
为window对象动态添加的属性默认也是全局的，不推荐
函数中未使用任何关键字声明的变量为全局变量，不推荐
2、局部作用域
一、函数作用域
1、在函数内部声明的变量（局部变量）只能在函数内部被访问，外部无法直接访问
2、不用函数内部声明的变量无法互相访问
3、函数执行完毕后，函数内部的变量实际被清空了 垃圾回收机制
二、块级作用域
在JS中使用{}包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问
1、let声明的变量会产生块级作用域、var声明的变量不会产生块级作用域
2、const声明的常量也会产生块级作用域
3、不同代码之间的变量无法互相访问
4、推荐使用let或const
3、作用域链
底层变量查找机制
1、在函数被执行时，会优先查找当前函数作用域中查找变量
2、当前作用域查不到则会一直查找父级作用域直到全局作用域
嵌套关系的作用域串联起来形成了作用域链 ， 相同作用域链中按着从小到大的规则查找变量， 子作用域能访问父作用域，反之不行
4、JS垃圾回收机制
概念：JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收
内存泄漏：不再用到的内存没有及时释放，没有合理回收
1、内存的生命周期
一、内存分配
声明变量、函数、对象的时候、系统自动分配内存
二、内存使用
即读写内存，也就是使用变量、函数等
三、内存回收
使用完毕，有垃圾回收自动回收不再使用的内存
1、全局变量一般不会回收（关闭页面时回收）
2、一般情况下局部变量的值，不用了会被自动回收掉
2、垃圾回收的算法说明
一、引用计数法
1、引用为0时，内存回收
2、有些死循环引用，使内存无法回收从而导致内存泄漏
二、标记清除法
1、标记清除算法将‘不再使用对象’定义为‘无法达到的对象’
2、从根部（在JS就是全局对象）出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的
3、那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收
5、闭包
概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域
简单理解：内层函数+外层函数的变量形成的一种状态
示例：
function outer() {
let num = 20
function inner() {
console.log(num)
}
inner()
}
outer()作用:外部可以访问函数内部的变量
应用：是实现数据的私有化
风险：内存泄漏
6、变量提升var
一、变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问（仅存在于var声明变量）
！！！不推荐使用
二、变量在未声明就被访问时会报语法错误
三、变量在var声明之前即被访问，变量的值为 undefined
四、 let/const 声明的变量不存在变量提升
五、变量提升出现在相同作用域当中
六、只提升变量声明， 不提升变量赋值
七、实际开发中推荐先声明再访问变量
二、函数进阶
1、函数提升
概念：指函数在声明之前即可被调用
作用：函数提升能够使函数的声明调用更灵活
函数表达式不存在提升的现象
函数提升出现在相同作用域当中
建议：使用let或者const，遵循先声明后使用
2、函数参数
一、动态参数（arguments动态传参）
1、 arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参，只存在于函数中
2、arguments 的作用是动态获取函数的实参
3、可以通过for循环依次得到传递过来的实参
二、剩余参数（...自定义数组名）
1、 剩余参数允许我们将一个不定数量的参数表示为一个数组
2、. ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
3、借助 ... 获取的剩余实参，是个真数组
三、展开运算符
展开运算符(…),将一个数组进行展开
不会修改原数组
应用：求数组最大值(最小值)、合并数组等
四、剩余参数与展开运算符的区别
剩余参数：函数参数使用，得到真数组
展开运算符：数组中使用，数组展开
三、箭头函数
1、基本语法
const fn = () => {}
. 箭头函数属于表达式函数，因此不存在函数提升
const fn = x => {}
箭头函数只有一个参数时可以省略圆括号 ()
const fn = (x,y) => x + y
箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被
返回
const fn = (x,y) => ({x,y})
返回对象特殊写法
2、箭头函数参数
一、普通函数：arguments
二、 没有arguments，使用剩余参数写法...args
3、this问题
一、 箭头函数没有this沿用上级作用域this
二、DOM事件回调函数不推荐使用箭头函数
事件回调函数使用箭头函数时，this 为全局的 window
剩余与展开
剩余：解构中使用，函数参数使用
展开：数组展开，对象展开
四、解构赋值
1、数组解构
将数组的单元值快速批量复制给一系列变量的简洁语法
基本语法：const [a, b, c] = [1, 2, 3]或const arr = [1, 2, 3] const[a, b, c] = arr
两种必须加分号的情况
一、立即执行函数
二、解构应用场景 let a = 10 let b = 20; 必须加分号
数组解构细节
一、变量多于单元值（即数组元素）时
多余变量取值为undefined
解决办法：设置默认值
基本语法：const [a = 0, b = 0, c = 0, d = 0] = [1, 2, 3]
二、变量少于单元值时
剩下许多单元值
利用剩余参数将多余的单元值放在一起，返回的还是一个数组
const [a, b, c, ...d] = [1, 2, 3, 4, 5, 6]
三、按需导入
const [a, , c, d] = [1, 2, 3]，c的值为2
多维数组解构
const [a, b, [c, d]] = [1, 2, [3, 4]]
2、对象解构
将对象属性和方法快速批量赋值给一系列变量的简洁语法
基本语法
一、左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
二、声明的变量名必须和属性名保持一致，方便匹配赋值
三、 、、
四、对象中找不到与变量名一致的属性时变量值为 undefined
变量重命名
可以从一个对象中提取变量并同时修改新的变量名，同基本语法中的变量名冲突解决方法一致
多级对象解构
商品渲染案例
<!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 } = item
str += `
<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>五、遍历数组forEach方法
1、forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
2、forEach 主要是遍历数组
3、参数当前数组元素是必须要写的， 索引号可选
六、筛选数组filter方法
1、创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
2、返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组
3、currentValue 必须写， index 可选
案例-商品列表价格筛选
<!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 } = item
str += `
<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.tagName
const { tagName, dataset } = e.target
// 判断
if (tagName === 'A') {
console.log(11)
// arr 返回的新数组
let arr = goodsList
if (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>
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
