Es6学习内容

最新推荐文章于 2023-02-01 18:05:34 发布

棱空城旧梦

最新推荐文章于 2023-02-01 18:05:34 发布

阅读量156

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/wjeud/article/details/123414465

版权

本文深入探讨了JavaScript中的解构赋值，包括不完全解构时值的处理、对象解构的规则及运算符的扩展。通过示例展示了变量名与赋值数组或对象的关系，剩余运算符的使用，以及默认值的设定。同时，复习了算术、比较、赋值和逻辑运算符，以及新增的指数和指数赋值运算符的应用。

摘要由CSDN通过智能技术生成

一、不完全解构

二、对象的解构赋值

三、运算符复习和扩展

一、不完全解构

1. 变量名比等号右侧的值少,且没有其他特殊处理的话，多出的值会被忽略

2. 变量名比等号右侧的值多,多出的变量名值为undefined

3. 剩余运算符(...) ,会将剩下的值以数组的方式存储到c2变量中

4. 默认值,当等号左侧的变量设置了默认值，在等号右侧又可以找到匹配的值，那么变量的值使用等号右侧匹配的值

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>不完全解构</title>
</head>
<body>
    <script>
        // 1. 变量名比等号右侧的值少,且没有其他特殊处理的话，多出的值会被忽略
        let [a,b,c] = [10,15,17,23,31]   //结果:a 10   b 15  c 17
        // 2. 变量名比等号右侧的值多,多出的变量名值为undefined
        let [a1,b1,c1] = [10,15]    // 结果：a1 10   b1 15  c1 undefined
        // console.log(c1);
        // 3. 剩余运算符(...) ,会将剩下的值以数组的方式存储到c2变量中
        let [a2,b2,...c2] = [10,15,17,23,31]   //结果:a2 10   b2 15   c2
        console.log(c2);
        // 4. 默认值,当等号左侧的变量设置了默认值，在等号右侧又可以找到匹配的值，那么变量的值使用等号右侧匹配的值
        let [a3,b3,c3='default'] = [10,15,'zhangsan']   
        console.log(c3);  // 结果:zhangsan
        let [test = 12] = [undefined];
        console.log(test);  // 结果为  12
        let [test1 = 12] = [null];
        console.log(test1);  // 结果为 null 
    </script>
</body>

</html>

二、对象的解构赋值

在js中如何定义对象，对象中有属性值和值() 属性名: 值

在使用对象中的某个值对象名称.属性名

对象的解构赋值有以下3点:

a. 等号左侧要使用花括号({})包裹变量名

b. 变量名要和对象中要要解构的属性名保持一致

c. 等号右侧就是要解构的对象

<!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>对象的解构赋值</title>
</head>
<body>
    <script>
        // js中如何定义对象,对象中有属性和值()    属性名:值
        // let  obj = {
        //     name:"张三",
        //     age:18,
        //     sex:1,
        //     study:function(){}
        // }
        // // 使用对象中的某个值    对象名称.属性名
        // obj.age   // 访问对象中的属性
        // obj.study()   // 调用方法
        /*
         对象的解构赋值
            a. 等号左侧要使用花括号({})包裹变量名
            b. 变量名要和对象中要要解构的属性名保持一致
            c. 等号右侧就是要解构的对象
        */
        let  obj1 = {
            name:"张三",
            age:18,
            sex:1,
            study:function(){}
        }
        let {name,age} = obj1
        console.log(name);
    </script>
</body>
</html>

三、运算符的扩展和复习

运算符: 可以帮助我们完成业务逻辑

运算符的分类有以下几点、

算术运算符

+ - * / % ++ --

比较运算符

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

赋值运算符

= += -= *= /= %=

逻辑运算符大多数情况都会用在条件里边

&& 只有当两边的条件都为真时,整体返回true,其他情况全返回false

|| 只有当两边的条件都为假时,整体返回false,其他情况全返回true

! 非真即假非假即真

= == ===的作用或区别

= 表示赋值 ,就是把等号右边赋值给等号左边的变量

== 表示比较,如果两边的值相等,返回true,否则返回false,忽略数据类型

=== 表示比较两边的值和数据类型都相同时,返回true,否则返回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>运算符扩展</title>
</head>
<body>
    <script>
        // 指数运算符 符号   **
        // 5的3次方  
       console.log( 5**3);
    // 指数赋值运算符  符号  **=
    var a = 2;
    a**=4  // 等价于 a = a**4
    console.log(a);

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