Interviewer: Tell me what new features you know about ES6

Me: Such as extension operators and REST parameters

Interviewer: Ok, what is the difference between them?

I:… πŸ’₯ πŸš€

preface

Three points in ES6… There are two names: the REST parameter and the extension operator.

  • When used in front of a parameter in a function definition, it is called a REST parameter and is used to receive an undefined parameter when the function is called.
  • When combined with a deconstructed assignment, this is called the rest parameter and is used to receive the remaining value, stored in an array.
  • When used in front of a string or array, it is called an extension operator that unwinds the array or string.

Rest parameters

ES6 introduces rest arguments to get arguments to functions instead of arguments;

<! DOCTYPEhtml>
<html>
<head>
    <meta charset="utf-8">
    <title>Rest parameters</title>
</head>
<body>
    <script>
        // ES6 introduces rest arguments to get function arguments instead of arguments;
        // how ES5 gets arguments
        function data() {
            console.log(arguments);
        data("Eldest brother"."The second brother." "."Three elder brother"."Four elder brother");
        // Rest parameters for ES6... The args, rest parameter must come last
        function data(. args) {
           // args is an array
            console.log(args); // fliter some every map
        }
        data("Eldest brother"."The second brother." "."Three elder brother"."Four elder brother");
    </script>
</body>

</html>
Copy the code

Extended operator

. Extended operators that convert arrays to comma-separated sequences of arguments;

The spread operator is also three points (…) . It is like the inverse of the REST argument, unpacking an array into a comma-separated sequence of arguments.

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>Extended operator</title>
</head>

<body>
    <script>
        / /... The extension operator converts an array to a comma-separated sequence of arguments
        // Declare an array...
        const tfboys = [Jackson Yi.'hanah'.'Wang Junkai'];
        // < span style = "max-width: 100%; clear: both; min-height: 1em;
        // Declare a function
        function chunwan() {
            console.log(arguments); } chunwan(... tfboys);// Chunwan (' Yi Yangqianxi ',' Wang Yuan ',' Wang Junkai ')
    </script>
</body>

</html
Copy the code
<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>Extend operator application</title>
</head>

<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <script>
        //1. Array merge
        const kuaizi = ['Wang Taili'."Xiao"];
        const fenghuang = ['chenrui'.'ling flowers'];
        // Traditional merge
        // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
        const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo);

        //2. Array clone
        const sanzhihua = ['E'.'G'.'M'];
        const sanyecao = [...sanzhihua]; // ['E','G','M']
        console.log(sanyecao);
        
        //3. Convert the pseudo-array to a real array
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr); // arguments
    </script>
</body>
</html>
Copy the code