262 ES6 ...运算符:扩展运算符、剩余参数(★★)

剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。
用来取代arguments,但比arguments灵活, 只能是最后部分形参参数。
【箭头函数中,不能使用arguments,报错未定义。】

function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
     console.log(arguments); // Arguments(3) [10, 20, 30, ...]
 }
 sum(10, 20, 30)
const sum = (...args) => {
	let total = 0;
	args.forEach(item => total += item);
	return total;
};

console.log(sum(10, 20));  // 30
console.log(sum(10, 20, 30));  // 60 

剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students; 
console.log(s1);  // 'wangwu' 
console.log(s2);  // ['zhangsan', 'lisi']

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>07_3点运算符</title>
</head>

<body>
    <!--
        * 用途
        1. rest(可变)参数
            * 用来取代arguments,但比arguments灵活,只能是最后部分形参参数
            function add(...values) {
                let sum = 0;
                for(value of values) {
                sum += value;
                }
                return sum;
            }
            
        2. 扩展运算符
            let arr1 = [1,3,5];
            let arr2 = [2,...arr1,6];
            arr2.push(...arr1);
    -->

    <script type="text/javascript">
        function fun(a, b, ...values) {
            console.log(arguments); // 伪数组[1, 2, 3, 4, 5, 6]
            //        arguments.forEach(function (item, index) {
            //            console.log(item, index);
            //        });
            console.log(values); // [3, 4, 5, 6]
            values.forEach(function(item, index) {
                console.log(item, index);
            })
        }
        fun(1, 2, 3, 4, 5, 6);

        let arr = [2, 3, 4, 5, 6];
        let arr1 = ['abc', ...arr, 'fg'];
        console.log(arr1); // ["abc", 2, 3, 4, 5, 6, "fg"]
    </script>

</body>

</html>

posted on 2020-01-27 20:03  冲啊!  阅读(126)  评论(0编辑  收藏  举报

导航