目录
1.怎么理解闭包?
2.闭包的作用?
3.闭包可能引起的问题?
4.变量提升
5.函数动态参数
6.剩余参数 ...(实际开发中提倡使用)
7.展开运算符
8.箭头函数
9.解构赋值(数组、对象)
1.怎么理解闭包?
内层函数+外层函数的变量
2.闭包的作用?
实现数据私有化,外部也可以访问函数内部的变量
3.闭包可能引起的问题?
内存泄漏
4.变量提升
仅存在于var声明的变量
1.把所有var声明的变量提升到 当前作用域的最前面
2.只提升声明,不提升赋值
注:
1.变量在未声明即访问的情况下,会报语法错误
2.使用变量在声明前,变量的值为undefined
3.let const 没有变量提升
4.变量提升出现在相同作用域当中
5.实际开发中推荐先声明在访问变量
5.函数提升
函数在声明之前就可以调用
test()
function test() {
console.log('函数被调用了')
}
1.会把函数声明提升到当前作用域的最前面
2.只提升函数声明,不提升函数调用
3.函数表达式必须先声明和赋值,后调用,否则会报错
fun() //-闭包.html:41 Uncaught TypeError: fun is not a function
var fun = function (){
console.log('函数表达式')
}
// fun() 先声明赋值后调用
5.函数动态参数
1)argument是有一个伪数组,只存在于函数中,无法用pop,push等数组方法
2)arguments的作用是动态获取函数的实参
3)可以通过for循环依次得到传递过来的实参
// 动态参数求和
function sum (){
let sum = 0
for(let i = 0;i< arguments.length;i++){
sum+=arguments[i]
}
console.log(sum); //10
}
sum(1,2,3,4)
6.剩余参数 ...(实际开发中提倡使用)
允许将一个不定数量的参数表示为一个数组,是真数组
function getSum(...other) {
console.log(other); //[3, 4, 5, 6, 7, 8]
}
getSum(3,4,5,6,7,8)
// 剩余参数
function getSum(a,b,...other) {
console.log(a,b,other); //3 4 (4) [5, 6, 7, 8]
}
getSum(3,4,5,6,7,8)
7.展开运算符
使用场景:求数组最大值(最小值),合并数组
// 展开运算符
const arr = [1,2,3,4]
console.log(...arr) //1 2 3 4
// 1求数组最大/小值
console.log(Math.max(...arr)) //4
console.log(Math.min(...arr)) //1
// 2合并数组
const arr2 = [5,6,7]
console.log([...arr, ...arr2]) //[1, 2, 3, 4, 5, 6, 7]
8.箭头函数
目的:引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁
使用场景:箭头函数更使用于那些本来需要匿名函数的地方
箭头函数没有arguments 动态函数,但是有剩余参数 ...args
// 箭头函数
const fuc = (a,b) => {
console.log(a,b) //哈哈 呼呼
}
fuc('哈哈','呼呼')
// 省略括号
const fuc = a => console.log(a) //哈哈
fuc('哈哈')
// 省略return
const add = x => x+x
console.log(add(1) ); //2
// 箭头函数可以直接返回一个对象
const objFn = (uname) => ({name:uname})
console.log( objFn('张三')); //{name: '张三'}
9.解构赋值(数组、对象)
// 数组结构
const [a, b, c] = [1, 2, 3]
console.log(a, b, c);
const [a1, b1, ...c1] = [1, 2, 3, 4, 5]
console.log(a1, b1, c1); //1 2 (3) [3, 4, 5]
// 设置默认值
const [a2, b2, c2, d2='444'] = [1, 2, 3]
console.log(a2, b2, c2, d2); //1 2 3 '444'
// 对象解构
const { uname, age } = { uname:'zs', age:18 }
console.log(uname, age); //zs 18
// 可以将变量名重新更改
const { uname:username, age:uage } = { uname:'ls', age:18 }
console.log(username, uage); //zs 18
// 解构数组对象
const pig = [
{
weight:200,
height:50
}
]
const [{weight, height}] = pig
console.log(weight, height); //200 50
// 解构对象多级嵌套
const animal = {
name:'猫咪',
family:{
name1:'小小'
}
}
const {name, family:{name1}} = animal
console.log(name, name1); //猫咪 小小