一、作用域
确定变量被访问的范围
1.1 局部作用域
函数作用域:在函数内声明的变量只能在函数内部访问
函数的参数也是函数内的局部变量
不同函数内部声明的变量无法互相访问
函数执行完毕,函数内部变量就被清空
块作用域:使用{ }包裹的代码称为块,块内部声明的变量外部有可能无法访问
1.2 全局作用域
<script>标签和.js文件最外层声明的变量是全局作用域,函数内部也可以被访问
尽可能少声明全局变量,防止被污染
1.3 作用域链
本质上是变量查找机制
函数被执行时,优先从当前函数作用域中查找变量
如果当前作用域查找不到,会依次逐级查找父级作用域直到全局作用域
子作用域可以访问父作用域,父作用域无法访问子作用域
1.4 JS垃圾回收机制
内存的生命周期
内存分配 -- 声明变量、函数时,系统自动分配内存
内存使用 -- 读写内存,使用变量、函数
内存回收 -- 使用完毕,由垃圾回收器自动回收不再使用的内存
内存泄漏
程序中分配的内存由于某种原因未释放或无法释放
垃圾回收算法--引用计数法
IE采用的方法,如果该对象被引用一次,次数++,减少一个引用,次数--,如果引用是0,就自动释放内存
如果两个变量相互引用,则无法回收导致内存泄漏
垃圾回收算法--标记清除法
将引用计数法中“不再使用的对象”定义为“无法达到的对象”
从根部出发扫描内存中对象,如果可达就标记,清除那些不被标记的对象
1.5 闭包
内层函数中访问到外层函数的作用域(外部创建的变量)
//闭包的基本写法 函数外部可以调用函数内部的变量
function outer(){
const a = 20
function inner(){
console.log(a)
}
return inner
}
const fun = outer()
fun()
应用:统计函数被调用的次数--数据私有
1.6 变量提升
允许在变量声明之前被访问(var)
如果使用了一个未声明的变量,就把所有var声明的变量提升到当前作用域的最前面,且只提升声明,不提升赋值
二、函数进阶
2.1 函数提升
把所有函数声明提升到当前作用域的最前面,只提升声明不提升调用
2.2 函数参数
动态参数
函数传入参数的数量不确定
function getSum(){
//arguments伪数组
let sum = 0
for(let i = 0; i < arguments.length; i++){
sum+=arguments[i]
}
return sum
}
console.log(getSum(2,3))
console.log(getSum(2,3,4))
console.log(getSum(2,3,4,5))
剩余参数
允许将一个不定量的参数表示为一个数组
function fun(a, b,...arr){
//arr真数组
//提倡使用
console.log(a)
console.log(b)
console.log(arr)
}
fun(1)//1 undefined []
fun(1,2,3,4,5) //1 2 [3,4,5]
展开运算符
将一个数组展开
const arr = [1,2,3,4]
//展开运算符
console.log(...arr) //1 2 3 4
//求数组最值
console.log(Math.max(...arr)) // 4
//合并数组
const arr2 = [5,6,7,8]
const arrMerge = [...arr,...arr2]
console.log(arrMerge) //[1,2,3,4,5,6,7,8]
应用场景:求数组最值、合并数组
2.3 箭头函数
使用更简单的函数写法且不绑定this,适用于本来需要匿名函数的地方
const fn = function(){
console.log(123)
}
//箭头写法
const fnj = () => {
console.log(123)
}
//有参数
const fn1 = function(x){
console.log(x)
}
const fn2 = (x) => {
console.log(x)
}
//如果只有一个形参
const fn3 = x =>{
console.log(x)
}
//只有一行代码省略大括号
const fn4 = x => console.log(x)
//如果是返回值
const fn5 = x => x + x //等价return x+x
//加括号直接返回对象 属性名:属性值
const fun = (uname) =>({uname: uname})
fun('刘德华')
箭头函数没有动态参数,只有剩余参数
箭头函数this
箭头函数不会创建自己的this,只会从自己的作用域链的上一层沿用this
const obj = {
uname:'august',
sayHi: function (){
console.log(this) //obj
const fn = () => console.log(this) //obj
fn()
}
}
obj.sayHi()
三、解构赋值
3.1 数组解构
将数组的单元值快速批量赋值给一系列变量
const arr = [10,20,30]
const [min,avg,max] = arr
//等价于
//const min = arr[0]
//const avg = arr[1]
//const max = arr[2]
//变量值快速交换
let a = 1
let b = 2; //分号必须有
[b, a] = [a, b]
console.log(a, b) //2 1
js中必须加分号的情况
//1 立即执行函数 (function f(){})(); //2 数组开头 ;[a, b] = [b, a]
3.2 对象解构
//要求属性名和变量名一致
const {uname, age} = {uname:'august', age:18}
//等价于
//const uname = obj.uname
//const age = obj.age
console.log(uname, age) //august 18
//如果要改名
const {uname:username, age:userage} = {uname:'seven',age:7}
console.log(username,userage) //seven 7
//数组对象
const goods = [
{
goodsName:'小米',
price:1999
}
]
const [{goodsName, price}] = goods
console.log(goodsName, price)
//多级对象解构
const pig = {
name:'佩奇',
family:{
mother:'猪妈',
father:'猪爸',
brother:'乔治'
},
age:6
}
const {name,family:{mother,father,brother},age} = pig
console.log(name,mother,father,brother)
forEach()
与map类似,但是没有返回值
arr.forEach(function(item,index){
//函数体
})