Learning content Es6

Posted by Sakesaru on Thu, 10 Mar 2022 17:14:30 +0100

catalogue

1, Incomplete deconstruction

2, Deconstruction assignment of object

3, Operator review and extension

1, Incomplete deconstruction

1. If the variable name is less than the value on the right side of the equal sign and there is no other special treatment, the extra value will be ignored

2. There are more variable names than the values on the right side of the equal sign, and the extra variable name value is undefined

3. Residual operator (...), The remaining values are stored as an array in the c2 variable

4. Default value: when the default value is set for the variable on the left side of the equal sign and a matching value can be found on the right side of the equal sign, the value of the variable uses the matching value on the right side of the equal sign

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>Incomplete deconstruction</title>
</head>
<body>
    <script>
        // 1. If the variable name is less than the value on the right side of the equal sign and there is no other special treatment, the extra value will be ignored
        let [a,b,c] = [10,15,17,23,31]   //Results: a 10 B 15 C 17
        // 2. There are more variable names than the values on the right side of the equal sign, and the extra variable name value is undefined
        let [a1,b1,c1] = [10,15]    // Results: A1 10 B1 15 C1 undefined
        // console.log(c1);
        // 3. Residual operator (...), The remaining values are stored as an array in the c2 variable
        let [a2,b2,...c2] = [10,15,17,23,31]   //Results: a 210 B 215 C 2
        console.log(c2);
        // 4. Default value: when the default value is set for the variable on the left side of the equal sign and a matching value can be found on the right side of the equal sign, the value of the variable uses the matching value on the right side of the equal sign
        let [a3,b3,c3='default'] = [10,15,'zhangsan']   
        console.log(c3);  // Result: zhangsan
        let [test = 12] = [undefined];
        console.log(test);  // The result is 12
        let [test1 = 12] = [null];
        console.log(test1);  // The result is null 
    </script>
</body>

</html>

2, Deconstruction assignment of object

How to define an object in js? There are attribute value and value () in the object. Attribute name: value

The name of a value object in the use object Attribute name

 

The deconstruction assignment of objects has the following three points:

a. Wrap the variable name with curly brackets ({}) to the left of the equal sign

b. The variable name should be consistent with the attribute name to be deconstructed in the object

c. To the right of the equal sign is the object to be deconstructed

<!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>Deconstruction assignment of object</title>
</head>
<body>
    <script>
        // How to define an object in js? There are attributes and values () in the object. Attribute name: value
        // let  obj = {
        //     name: "Zhang San",
        //     age:18,
        //     sex:1,
        //     study:function(){}
        // }
        // //Use a value object name in the object Attribute name
        // obj.age / / access the properties in the object
        // obj.study() / / call method
        /*
         Deconstruction assignment of object
            a. Wrap the variable name with curly brackets ({}) to the left of the equal sign
            b. The variable name should be consistent with the attribute name to be deconstructed in the object
            c. To the right of the equal sign is the object to be deconstructed
        */
        let  obj1 = {
            name:"Zhang San",
            age:18,
            sex:1,
            study:function(){}
        }
        let {name,age} = obj1
        console.log(name);
    </script>
</body>
</html>

3, Expansion and review of operators

Operator: it can help us complete business logic

Operators are classified as follows:

 

Arithmetic operator

+ - * / % ++ --

Comparison operator

> < >= <= != == !== ===

Assignment Operators

= += -= *= /= %=

Logical operators are mostly used in conditions

&&Only when the conditions on both sides are true, the whole returns true, and all other cases return false

||Only when the conditions on both sides are false, false is returned as a whole, and true is returned in all other cases

! Not true is false, not false is true

== = = = = = function or difference of

=Indicates assignment, that is, assign the right side of the equal sign to the variable on the left side of the equal sign

==Indicates comparison. If the values on both sides are equal, return true; otherwise, return false and ignore the data type

===Indicates that the values and data types on both sides of the comparison are the same. Return true, otherwise return false

<!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>Operator extension</title>
</head>
<body>
    <script>
        // Exponential operator symbol**
        // The third power of 5  
       console.log( 5**3);
    // Exponential assignment operator symbol**=
    var a = 2;
    a**=4  // Equivalent to a = a**4
    console.log(a);

    </script>
</body>
</html>