当前位置：网站首页>Function optimization and arrow function of ES6

Function optimization and arrow function of ES6

2022-07-06 20:17:00 【faramita_ of_ mine】

ES6 Function optimization and arrow function of

One 、 Function optimization
- - ① Function parameter defaults
  - ② Uncertain parameters
Two 、 Arrow function
- - ① When a parameter ：
  - ② When there are multiple parameters ：
3、 ... and 、 Arrow function combined with deconstruction expression

One 、 Function optimization

① Function parameter defaults

<!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>
    <script>
        // Function parameter defaults 
        // stay ES6 Before , We can't set the default value for a function parameter , You can only use alternative writing ：
        function add(a, b) {
    
            // Judge b Is it empty , If it is empty, the default value will be given 1
            b = b || 1;
            return a + b;
        }
        // Pass a parameter 
        console.log(add(10));

        // Now it can be written like this ： Write the default value directly to the parameter , If not, the default value will be used automatically 
        function add2(a, b = 1) {
    
            return a + b;
        }
        // Pass a parameter 
        console.log(add2(20));
    </script>
</body>

</html>

② Uncertain parameters

Indeterminate parameters are used to represent the number of indeterminate parameters , Form like ,… Variable name , from … Plus a parameter identifier . Named parameters can only be placed at the end of the parameter list , And there is only one indefinite parameter .

<!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>
    <script>
		// Uncertain parameters 
        function fun(...values){
    
            console.log(values.length)
        }
       fun(1,2)//2
       fun(1,2,3,4)//4
    </script>
</body>

</html>

Two 、 Arrow function

ES6 Shorthand for defining functions in ：

① When a parameter ：

        // Previously declared a method 
        // var print = function (obj){
    
        // console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

② When there are multiple parameters ：

   		// When there are multiple parameters 
        //var sum = function (a, b) {
    
        // return a + b;
        //}
        
        var sum2 = (a, b) => a + b;
        console.log(sum2(11,12));

        // When there are multiple parameters 
        var sum = function (a, b) {
    
            c = a + b;
            return a + c;
        }

        var sum3 = (a, b) => {
    
            c = a + b;
            return a + c;
        }
        console.log(sum3(10,20));

3、 ... and 、 Arrow function combined with deconstruction expression

demand ： Declare an object ,hello Method requires individual properties of the object

   		// The old way ：
        const person ={
    
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        function hello(person){
    
            console.log("hello,"+person.name)
        }
        hello(person);//hello,jack

     	const person ={
    
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        var hello2 = (param)=>console.log("hello,"+param.name);
        hello2(person);//hello,jack

     const person ={
    
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        // Arrow function + deconstruction 
        var hello3 = ({
    name}) =>console.log("hello,"+name);
        hello3(person);//hello,jack