JS:变量定义和赋值

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/caozp913/article/details/102531524

三种定义定量的方式

1、var

定义的是属于函数级作用域的变量,如果在函数里面定义,那么只在函数里有效。如果不在函数里面定义,则全局有效(即使是在括号里)。var变量的值可以更改。var变量支持重复定义,后面的定义会覆盖前面的。比如:

<script>
    var money = 100; //此时全局有效
    function test(){
        var price = 100; //此时只在函数内有效
    }
    if(money > 50){
        var account = 1000; //此时仍然全局有效,这种情况的处境有些尴尬
    }   
    var money = 200; //支持重复定义
</script>

var定义方式不再推荐使用,由于其具有重复定义性,非块级作用域特性,导致过于松散而无法安全掌控。

2、let

定义临时变量,具有块级作用域特性。let类型变量不允许重复定义,但是值可以改变。

<script>
       let money = 100; //此时全局有效
       if(money > 50){
           let account = 1000; //此时只在当前括号里有效
       }   
       money = 200; //值可以改变
       let money = 300; //不支持重复定义
</script>

3、const

定义常量,具有块级作用域特性。和let一样不允许重复定义,但是const定义的是一个常量,所以值不可变。

<script>
        const money = 100; //此时全局有效
        if(money > 50){
            const account = 1000; //此时仍然全局有效,这种情况的处境有些尴尬
        }   
        money = 200; //不能改变其值,会出错
        const money = 300; //且不能重复定义
</script>

值得注意的是如果定义的是引用类型的变量,则指的是地址不可改变,值是可以改变的

如果也不想让值被修改,可以调用Object.freeze(引用变量)方法来处理

<script>
    const person = {
            name:"李寻欢",
            age:15
        }

    Object.freeze(person); //将对象“冻结”,使其值也不可变
</script>

在JS中,存在变量提升这一行为。变量提升指的是将声明移到作用域的顶端。

var类型的自动提升

<script>
        //对于var变量来说,此时会输出undefined,但是并不会报错
        console.log(color);
        var color = "red";

        //因为会有自动的变量提升
        //此时相当于
        var color;
        console.log(color);
        color = "red";
</script>

应该尽可能避免这一情况的发生。

let和const类型的自动提升

let和const类型虽然也存在变量提升行为,但是如果在定义之前就使用,则会出现ReferenceError的错误,这被称为let或者const变量的临时性死区。因此,不管使用什么样的变量,都最好在使用之前就定义。

总结下来就是:默认情况下使用const,在变量需要重新赋值的时候才使用let,不用var来定义变量。在变量使用之前就应该定义好,避免出现变量提升。


变量赋值

正常赋值就不多讲了,和java中几乎一样。这里稍微讲下es6中新增的解构赋值。

解构,通常用于给变量赋值,可以理解成从一个大的数据整体中依次拿出数据赋值给多个对应的变量,按照我的理解,解构主要是对象解构和数组解构。比如:

const json = {a:12, b:15};
const {a, b} = json;

const arr = [12, 13, 14];
const [a, b, c] = arr;

上面的示例代码中,会从右边的对象或者数组中依次获取数据分别赋值给左边的变量。这种操作即称为解构赋值。其中有几点需要注意:

1、左右结构必须保持一致。但是数据的个数可以不一致,如果等号右边比较多,就把左边要的给赋予值;如果左边数量多,剩余的就为undefined,此时可以直接在定义处给多余的变量赋默认值。比如

const family = {
    father: Tom, 
    mother: Marry
};

//左边多余的赋予默认值
const {father, mother, brother = 'no brother'} = family;
console.log(father); // Tom
console.log(mother); // Marry
console.log(brother); // no brother

// 也可以为对应键取别名,此时如果输出原名称会显示未定义
const {father: dad, mother: mom} = family;
console.log(dad);
console.log(mom);

2、右边得是个合法的东西,比如const {a, b} = {12, 15}就不允许;

3、定义和解构赋值得同时完成,不能先定义,之后再解构赋值。

数组解构可以很方便的将两个变量值进行交换。

let a = 10;
let b = 20;

[a, b] = [b, a];

猜你喜欢

转载自blog.csdn.net/caozp913/article/details/102531524