js进阶-函数参数-展开预算符-解构

一.函数参数

动态参数 剩余参数

1.1 动态参数

arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

   function getSum() {
      // arguments 动态参数 只存在于 函数里面
      // 是伪数组 里面存储的是传递过来的实参
      console.log(arguments) // Arguments(3)[2,3,4]
      // console.log(Array.isArray(arguments))   // false
      // let temp =[...arguments]
      // console.log(Array.isArray(temp))  // true
      let sum = 0
      for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i]
      }
    }
    getSum(2, 3, 4) // 求和

普通函数有arguments动态参数
箭头函数没有arguments动态参数

当不确定传递多少个实参的时候，我们怎么办？ arguments动态参数
arguments是什么？1. 伪数组 2.它只存在函数中
arguments的作用是动态获取函数的实参

1.2 剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组
借助…获取的剩余实参，是个真数组

	function getSum(a, b, ...arr) {
      console.log(arr)  // 使用的时候不需要写 ...  []   [3, 4, 5]
    }
    getSum(2, 3)
    getSum(1, 2, 3, 4, 5)

剩余参数和动态参数区别是什么？开发中提倡使用哪一个？
1.动态参数是伪数组
2.剩余参数是真数组

开发中，还是提倡多使用剩余参数。

二.展开运算符

展开运算符(…),将一个数组进行展开
典型运用场景：求数组最大值(最小值)、合并数组等

 	const arr1 = [1, 2, 3]
    // 展开运算符 可以展开数组
    // console.log(Math.max(1, 2, 3))
    // ...arr1  === 1,2,3
    // 1 求数组最大值
    console.log(Math.max(...arr1)) // 3
    console.log(Math.min(...arr1)) // 1
    // 2. 合并数组
    const arr2 = [3, 4, 5]
    const arr = [...arr1, ...arr2]
    console.log(arr)

展开运算符or剩余参数
剩余参数：函数参数使用，得到真数组
展开运算符：数组中使用，数组展开

三.解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

3.1 数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

基本语法：
1.赋值运算符=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2.变量的顺序对应数组单元值的位置依次进行赋值操作

 	// 5.  按需导入赋值
    const [a, b, , d] = [1, 2, 3, 4]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(d) // 4

典型应用交互2个变量

	// 交换2个变量的值
    let a = 1
    let b = 2;
    [b, a] = [a, b]
    console.log(a, b)

3.2 对象解构

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

基本语法：
1.赋值运算符=左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量2.对象属性的值将被赋值给与属性名相同的变量
3.注意解构的变量名不要和外面的变量名冲突否则报错
4.对象中找不到与变量名一致的属性时变量值为undefined

	// 解构的语法
    /const { uname, age } = {age: 18, uname: '科比' }
    // // 等价于 const uname =  obj.uname
    // // 要求属性名和变量名必须一直才可以
    // console.log(uname)
    // console.log(age)

1. 对象解构的变量名 可以重新改名 旧变量名: 新变量名

const { uname: username, age } = { uname: '麦迪', age: 18 }
console.log(username)

2. 解构数组对象

	const pig = [
      {
        uname: '佩奇',
        age: 6
      }
    ]
    const [{ uname, age }] = pig
    console.log(uname)
    console.log(age)

3. 多级对象解构

	const person = [
      {
        name: '佩奇',
        family: {
          mother: '猪妈妈',
          father: '猪爸爸',
          sister: '乔治'
        },
        age: 6
      }
    ]
    const [{ name, family: { mother, father, sister } }] = person
    console.log(name)
    console.log(mother)
    console.log(father)
    console.log(sister)