javascript高级部分05----es6之let,const声明变量与解构赋值

最新推荐文章于 2024-03-21 14:20:29 发布

A &......

最新推荐文章于 2024-03-21 14:20:29 发布

阅读量208

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/118055797

版权

1.es6新增用法：let，const声明变量

   1.1  let声明变量，声明的变量属于块级作用域，不能重复声明，没有变量的提升


   1.1.1 let关键字声明的变量属于块级作用域。在函数中一个大括号代表一个块级作用域，用let声明的变量，在函数中只能在块级作用域中有效，但是在全局中的let的用法和var用法是一样的。

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var div = document.querySelectorAll('div');
        for (let i = 0; i < div.length; i++) {
            div[i].onclick = function() {
                console.log(i);
            }
        }
    </script>
</body>

 1.1.2  let关键字声明的变量不存在变量提升

console.log(num);  //报错，let声明的变量，不会有变量提升
        let num = 1;
        console.log(num1);  //undefined；var 声明的变量，会变量提升
        var num1 = 1;

1.1.3  let关键字不能重复声明同一个变量

let num = 1;
        let num = 2;
        console.log(num); //报错，let不能重复声明同一个变量

  1.2 const关键字声明的是常量，不能修改，也是只能在块级作用域中起作用，不存在变量提升，不能重复赋值，声明后必须赋值
  1.2.1 const关键字声明的是一个常量，不能被修改

const num = 1;
        num = 2;
        console.log(num);  //报错，const声明的是一个常量，定义完了之后，不能修改其值

 1.2.2  const关键字只在块级作用域中起作用

if (1) {
            const Name = 'zs';
        }
        console.log(Name);

1.2.3  const声明的常量不存在提升

 console.log(num);  //报错，const声明的常量没有常量提升
        const num = 1;

1.2.4 const声明后必须赋值

const num;
        console.log(num);  //报错，const声明的常量，在声明后必须赋值

1.3 const声明的常量是对象的情况：

const Person = {
            name: '李四'
        };
        Person.name = '张三';
        Person.age = 20;
        console.log(Person);  //不会报错

在这个案例中，在给const声明的对象中改变name属性，添加age属性的时候，Person没有报错，这是因为在声明对象这种复杂数据类型的时候，实际上在栈内存中存在的是对象的地址，在堆内存中存的是实际的对象，引用数据类型的值。这里改变的是Person对象本身，但是地址没有改变。当Person = {}的时候，也把Person的地址改变了。

2.解构赋值
2.1 解构赋值定义：从数组和对象中提取值，对变量进行赋值。

// 数组解构赋值
        let [a, b, c, d, e] = [1, 2, 3, 4, 5];
        console.log(a); //1
        console.log(b); //2
        console.log(c); //3
        console.log(d); //4
        console.log(e); //5
        //数组嵌套再结构赋值
        let [a, b, [c, d]] = [1, 2, [3, 4]];
        console.log(a); //1
        console.log(b); //2
        console.log(c); //3
        console.log(d); //4

//对象的解构赋值
let {x,y,z} = {x:1,y:2,z:3};
    console.log(x,y,z); //1 2 3

    //对象解构赋值解构的是属性值
    let {b:a} = {b:2};
    console.log(a);  //2
    console.log(b);  //undefined

2.2 解构赋值的用途

// 解构赋值的用途
        // 1.可以用于两个变量之间的交换
        let x = 1;
        let y = 2;
        [x, y] = [y, x];
        console.log(x, y);  //2 1
        //2.提取函数返回的多个值
        function fn1(){
            return {name:'张三',age:12};
        }
        let {name,age} = fn1();
        console.log(name,age);  //张三 12
           
        // 3.定义函数参数
        function fn2({a,b,c}){
            console.log(a);
            console.log(b);
            console.log(c);
        }
        fn2({a:1,b:2,c:3})

        //4.函数参数的默认值
        function fn3({z=2}){
             console.log(z);
        }
        fn3({})