JS剩余参数及解构简解

1.剩余参数

1.1动态参数

arguments => 内置的，包含由函数实参组成的伪数组

<script>
     function sum() {
      let s = 0
      for (let i = 0; i < arguments.length; i++) {
        s += arguments[i]
      }
      console.log(s);
    }
    sum(1, 2, 3) // 6
</script>

1.2.剩余参数

<script>
    function get1(...arr) {
      console.log(arr); 	// 使用时不需要写...
    }
    get1(2, 3)
    
     // 用户最少传3个参数
    function get2(a, b, c, ...arr) {
      console.log(arr);
    }
    get2(1, 2, 3, 4)
</script>

1.3.展开运算符

展开运算符其实是剩余参数不作为参数的应用，常用于对数组的操作。

所谓“展开”其实是将数组的小括号展开

1.3.1应用

<script>
    const arr = [1, 2, 3, 8, 2]
    console.log(...arr);  // 1 2 3 8 2
</script>

应用1：求数组最大值

<script>
    const arr1 = [1, 2, 3]
    console.log(Math.max(...arr1));
</script>

应用2：合并数组

<script>
    const arr2 = [4, 5, 6]
    console.log([...arr1, ...arr2]);
</script>

2.解构

2.1.数组解构

使用解构，可以快速批量赋值给一系列变量的简洁语法

<script>
   const arr = [10, 20, 30]
   a1 = arr[0]
   b1 = arr[1]
   c1 = arr[2]
   
   // 等价于
   const [a2, b2, c2] = arr
   console.log(a2);
   console.log(b2);
   console.log(c2);
</script>

应用：交换值

• 注意：在数组结构前，要加；，与立即执行函数类似

<script>
    let x = 1
    let y = 2
      ;[x, y] = [y, x]   // 注意：在数组结构前，要加;
    console.log(x);
    console.log(y);
</script>

与剩余参数结合

<script>
    const [a1, b1, ...c1] = [1, 2, 3, 4]
    console.log(a1);
    console.log(b1);
    console.log(c1);  // [3,4] 真数组
</script>

为避免undefined，可以进行默认传参

<script>
    const [a2 = 0, b2 = 0] = [1]
    console.log(a2);
    console.log(b2);
</script>

2.2.对象解构

如果不修改变量名，变量名要与属性名一样，且没有与其他变量变量名冲突

<script>
	const { uname, age } = { uname: 'Tom', age: 18 }
    console.log(uname); 	// Tom
    console.log(age);		// 18
</script>

修改对象结构的变量名

• 语法:旧变量名：新变量名

<script>
     const { uname: username, age: userage } = { uname: 'Tom', age: 18 }
    console.log(username);  	// Tom
    console.log(userage);		// 18
</script>

解构数组对象

<script>
    const user1 = [
          {
            uname1: 'Tom',
            age1: 18
          }
        ]
        const [{ uname1, age1 }] = user1
        console.log(uname1);	// Tom
        console.log(age1);		// 18
    </script>

多级对象解构

<script>
	const user2 = {
      uname2: 'Tom',
      friends: {
        friend1: 'Mary',
        friend2: 'Jack',
        friend3: 'Bob',
      },
      age2: 18,
    }
    const { uname2, friends: { friend1, friend2, friend3 }, age2 } = user2
    console.log(uname2);	// Tom
    console.log(age);		// 18
    console.log(friend1);	// Mary
    console.log(friend2);	// Jack
    console.log(friend3);	// Bob
</script>