了解JS中的const

前言

在ES6中声明变量可用let也可以使用const,只不过后者声明的是一个内存地址值为不可改变的对象。

基本用法

先来看如下代码感受一下const的使用:
在这里插入图片描述
上面代码表明改变常量的值会报错,一旦在代码里使用const声明的简单类型的数据(数值、字符串、布尔值)其值就不可改变,这有点像Java中final 修饰的基本类型变量为常量。需要注意的是constlet一样只在声明的块级作用域有效。

        {
            const b =123;
        }
        //  Uncaught ReferenceError: b is not defined
        console.log(b)

当使用const声明一个对象和数组时后,此变量的引用便不可修改,但是此变量内部属性还是可以进行修改的。
在这里插入图片描述
定义一个对象person
在这里插入图片描述
控制台输出结果:
在这里插入图片描述
我们在定义一个数组对象:
在这里插入图片描述
控制台输出效果:
在这里插入图片描述
上面代码中,使用const定义的变量保存的是一个地址值,这个地址指向一个对象引用。const保证这个地址值是不可变的,但对象本身是可变的,所以可以变更这个对象内部的属性。

<think>好的,用户想了解JavaScriptconst解构赋值的用法,特别是从对象属性中解构。首先,我需要回忆解构赋值的基本概念,记得ES6引入了解构赋值,可以方便地从数组或对象中提取值到变量中。 用户提到的是使用const进行解构,所以应该强调const在解构中的不可变性。要举例子说明如何从对象中解构属性,比如const {name, id} = this.item。同时需要注意解构的变量必须与属性名一致,否则会是undefined。 然后,用户的问题中提到“from this 属性”,可能是在Vue或React组件中使用this的情况。比如在Vue组件中,this可能指向组件实例,解构this上的属性时要注意作用域,可能需要使用箭头函数或者绑定正确的this。 还要考虑默认值的设置,当解构的属性不存在时,可以给变量默认值,例如const {name = 'default'} = this.item。同时,嵌套对象的解构也需要解释,比如解构对象中的嵌套对象属性。 另外,要提到解构赋值在函数参数中的应用,比如函数参数直接解构传入的对象,这样可以在函数体内直接使用变量。结合用户提供的引用,特别是引用[2]和[3],需要确保内容准确,并正确引用来源。 最后,生成相关问题时要涵盖常见的使用场景、注意事项、默认值、嵌套解构以及与其他语法结合的情况,帮助用户全面理解const解构赋值的用法。</think>### JavaScriptconst解构赋值的用法详解 在JavaScript中,使用`const`进行解构赋值是一种常见且高效的语法特性,它允许从对象或数组中直接提取属性或元素,并将其绑定到变量。以下是具体用法和注意事项: --- #### 1. **基本对象解构** 从对象中提取属性时,变量名必须与对象属性名一致: ```javascript const user = { name: "Alice", age: 30 }; const { name, age } = user; console.log(name); // 输出 "Alice" console.log(age); // 输出 30 ``` 这里通过`const { name, age } = user`直接提取了`user`对象的属性[^2]。 --- #### 2. **从`this`中解构属性** 在类或组件中,可以通过解构`this`上的属性简化代码: ```javascript class User { constructor() { this.item = { id: 1, url: "/profile" }; } getData() { const { id, url } = this.item; // 解构this.item的属性 console.log(id, url); } } ``` 在Vue组件中,类似用法可用于从`this`中提取响应式数据: ```javascript export default { data() { return { item: { name: "Vue", count: 0 } }; }, methods: { logItem() { const { name, count } = this.item; // 直接解构this.item } } } ``` 此方式避免了重复书写`this.item.xxx`,提升代码简洁性[^3]。 --- #### 3. **默认值设置** 若解构的属性可能不存在,可通过默认值避免`undefined`: ```javascript const { name = "Guest", role = "user" } = this.item; ``` 当`this.item.name`未定义时,`name`会默认为`"Guest"`[^3]。 --- #### 4. **嵌套解构** 支持解构嵌套对象的属性: ```javascript const data = { user: { profile: { age: 25 } } }; const { user: { profile: { age } } } = data; console.log(age); // 输出 25 ``` --- #### 5. **函数参数解构** 直接在函数参数中使用解构: ```javascript function printInfo({ name, age }) { console.log(`${name} is ${age} years old`); } printInfo({ name: "Bob", age: 28 }); ``` 这种方式常用于接收配置对象或API响应[^4]。 --- #### 注意事项 - **变量名必须匹配属性名**:若变量名与属性名不一致,需使用别名: ```javascript const { name: userName } = this.item; ``` - **`const`的不可变性**:解构后的变量不可重新赋值,但若解构的是对象/数组,其内部属性仍可修改。 - **严格模式下的默认值**:仅当属性值为`undefined`时,默认值才会生效。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值