一.扩展运算符

扩展运算符（spread）：…

作用：它可以将一个数组转为用逗号分隔的参数序列。

总结：不管数字外面有什么符号，全部去掉。

二.最大值案例

<script>
    function _max(array) {
        var max=Math.max(...array);
        return max;

    }
    var array = [1 , 2 , 3];
    console.log(_max(array));
</script>

如果不加上三个点，就会返回NaN，即not a number（不是一个数）。

但是，我们加上三个点之后，就能体现出扩展运算符的作用：转成参数序列，可以进行最大值的判断了。

注意事项：只有max括号里要传参数序列，才能返回正确结果。

总结：Math是数学对象，拥有许多的数学方法。

三.实战运用

1.参数序列

<script>
    console.log(...[1,2,3]); //1 2 3
    console.log(1,...[2,3],4); //1 2 3 4
</script>

2.结合div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>
<script>
    console.log([...document.querySelectorAll('div')]);
</script>

在这里插入图片描述

总结：有几个div，数组元素就有几个。

3.函数调用（合并操作 + 相加操作）

①合并

<script>
    function get(array,...items){
        array.push(...items); // push用来获取元素
        return array;  //返回合并后的数组
    }
    var array=['a','b','c'];
    var items=['d','e'];
    console.log(get(array,items));
</script>

在这里插入图片描述

②相加

<script>
    function add(a,b,c){
        return (a + b + c);  
    }
    var number=[1,2,3];
    console.log(add(...number)); //6
</script>

<script>
    function add(a,b,c,d){
        return (a + b + c + d);  
    }
    var number=[1,2];
    console.log(add(-1,...number,0)); //2
</script>

总结：扩展运算符可以和函数参数结合运用。

4.扩展运算符后面可以放置表达式

扩展运算符 + 三目运算符

<script>
   var x = 2; 
   //如果x>0，就会打印['a','b'];如果x<0,就会打印['b']
   const array = [
       ...(x > 0 ? ['a'] : [] ),  //如果x大于0，就返回a，否则返回空数组
       'b',
   ];
   console.log(array); //['a','b']
</script>

5.与解构赋值结合

<script>
   var list=[1,2,3];
   [a,...rest] = list;  
   console.log([a]); //[1]
   console.log([...rest]); //[2,3]
</script>

const关键字用于常量定义。

<script>
   const list=[first,...other]=[]; 
   console.log(first); // undefined
   console.log(other); // []
</script>

总结：扩展运算符用于数组赋值，并且只能将其放在参数的最后一位，否则会报错。

6.函数的返回值

JavaScript函数只能返回一个函数值，如果要返回多个函数值，只能返回数组和对象。

扩展运算符解决了这个问题，代码如下：

<script>
    var dateFields= readDateFields(database); // 从数据库获取一行数据
    var d = new Date(...dataFields); //通过扩展运算符传入构造函数Date
</script>

7.扩展运算符可以将字符串转成数组

<script>
    console.log([...'hello']); //['h', 'e', 'l', 'l', 'o']
</script>

<script>
    //写法1
    console.log('y\uD81D\uDE84y'.length); //4
    //写法2
    console.log([...'y\uD81D\uDE84y'].length); //3
</script>

上面写法的好处：能够正确识别32位的Unicode字符。

第一种写法：会将32位的Unicode字符识别为2个字符。

第二种写法：识别为1个字符。

因此，正确的写法如下：

<script>
    function length(str){
        return [...str].length;
    }
    console.log(length('y\uD81D\uDE84y')); // 3 
</script>

<script>
    let str = 't\uD83D\uDE96i';
    //str.split('').reverse().join('');
    [...str].reverse().join(''); //可有可无
    console.log(str); // t🚖i
</script>