箭头函数和解构赋值

箭头函数和解构赋值

1. 箭头函数

箭头函数是一种声明函数的简洁语法。

<script>
    //   1.箭头函数表达方式
    // let fn=function(){}
    let fn = () => { }

    // 2.函数只有一个参数时可以省略 ()
    // let fn1=(m)=>{}
    let fn1 = m => { return m }
    console.log(fn1(1))

    // 3.函数体只有一行代码时可以省略 {}，并自动做为返回值被返回
    let fn2 = m => m * m
    console.log(fn2(3))
</script>

注意：

• 箭头函数属于表达式函数，不存在函数提升；
• 箭头函数默认不存在this,因为箭头函数中的this指向的是上级作用域中的this;
• 箭头函数中没有 arguments，只能使用 … 动态获取实参。

2. 解构赋值

将数据结构中的数据赋值给变量。

2.1 数组解构

将数组元素快速赋值给一系列变量的简洁语法。

<script>
    // 语法
    // let [变量]=[数组元素值]

    // 场景分析
    // 1.变量数=值数 -- 一一对应赋值
    let [a,b,c,d]=[1,2,3,4]
    console.log(a,b,c,d)

    // 2. 变量数>值数 -- 多余的变量将被赋值为 undefined
    let [e,f,g,h,i]=[1,2,3,4]
    console.log(e,f,g,h,i)

    // 3.变量数<值数 
    // 3.1 有多少个变量，取多少个值
    let[j,k]=[1,2,3,4,5]
    console.log(j,k)

    // 3.2 ...取剩余值 
    let [l,m,...n]=[1,2,3,4,5,6]
    console.log(l,m,n)

    // 4.按需取值 -- 空格补位,一一对应取值
    let [o, ,p, ,q]=[1,2,3,4,5]
    console.log(o,p,q)

    // 多维数组复杂情况
    let [ , ,r,s,t,[x,y,z]]=[1,2,3,4,5,['welcome','to','wonderland']]
    console.log(r,s,t,x,y,z)
</script>

2.2 对象解构

将对象属性和方法快速赋值给一系列变量的简洁语法。

• 语法

<script>
    // 语法 将对象的属性名当做变量名使用
    // let {变量名}={属性值}
    let obj={
        name:'酷盖',
        age:23,
         sex:'男',
    }
    
    let {name,age,sex}=obj
    console.log(name,age,sex)      
</script>

• 对象解构不存在 一 一 对应，属性名和变量名相同则赋值，找不到与变量名一致的属性，则变量值为undefined。

<script>
    let obj={
        name:'酷盖',
        age:23,
         sex:'男',
    }

	// obj中无adress属性，则值为undefined
    let{name,age,adress}=obj
    console.log(name,age,adress)     
</script>

• 若有定义变量与对象中属性名相同，需要修改变量名。

<script>
	let name='奶盖'
    let obj={
        name:'酷盖',
        age:23,
        sex:'男',
    }

	// 冒号 ： 修改变量名
	let {name:uname,age,sex}=obj
    console.log(uname,age,sex)  
</script>

• 多维对象解构

<script>
  	let obj = {
        name: '酷盖',
        age: 23,
        sex: '男',
        user1: {
            name: '小摩托',
            age: 21,
            sex: '女'
        },
        user2: {
            name: '小飞侠',
            age: 21,
            sex: '女'
        }

    }

    let { user1: { name }, user2: { name: uname } } = obj
    console.log(name, uname) 
</script>