ES6——Day2(const命令+const对象)

1、const命令

A.const命令——概念

   (1)定义:对于const而言,它是用来声明变量的,但是声明的是“常量”。

   (2)性质:一旦声明,常量的值就不会改变。

<script type="text/traceur">
	const Pi=3.1415926;
	console.log(Pi);
	Pi=3;
	console.log(Pi);   //error
</script>


解析:当多次赋值变量的情况下,会显示错误,因为const所定义的常量一旦定义就无法修改,修改即会显示错误。

对于const命令的用法而言,它不可以重复赋值,但可以重复使用参与运算,如下:

<script type="text/traceur">
	const Pi=3.1415926;
	console.log(Pi);    //3.1415926
	console.log(5*Pi);  //15.707963
</script>



B.const命令——块级作用域

之前接触的let定义的变量即有“块级作用域”的概念,对于const命令而言,有这个“块级作用域”的概念吗?以一个案例作为显示。

<script type="text/traceur">
{
	if(false){
		const Pi=3.1415926;
	}
}
console.log(Pi);
</script>
结果:undefined

解析:由于const命令定义的Pi是在块级作用域中体现的,在外部输出Pi显示“undefined”未定义的状态,即表明“const与let都具有块级作用域的概念”。


C.const命令——暂时性死区

<script type="text/traceur">
if(true){
	console.log(Pi);    //unfined;
	const Pi =3.1415926;
};
</script>

结果:undefined

解析:由于console.log在Pi定义之前执行,即会出现暂时性死区。


D.const命令——不可重复声明

<script type="text/traceur">
{
	var a=100;
	const =200;
	console.log(a);
}
</script>

结果:error(显示错误)

解析:由于在块级作用域中有const定义变量即“常量”,其他的定义就是无意义的,所以就会显示错误。



2、const对象

1const单一对象及错误用法

<script type="text/traceur">
const.person={};
person.name="Zhangsan";
person.age=12;
console.log(person.name);   //Zhangsan
console.log(person.age);    //12
console.log(person);        //Object{name:"Zhangsan",age:12}
</script>
在上述const案例中,首先依次输出person对象的属性:name、age,其次输出了person整个对象。

    注意:由于const命令是指向变量所在的地址,所以将变量命名为一个“常量”,就很容易出错。


<script type="text/traceur">
const.person={};
person.name="Zhangsan";
person.age=12;
console.log(person.name);  
console.log(person.age);    
console.log(person);        
person = {};
</script>
上述代码多了一个“person={}”,即会显示错误“person is read-only”,表示person对象是“只读”的,由于person对象重复的赋值,显示错误。

(2)const数组及错误用法

<script type="text/traceur">
const arr=[];
console.log(arr);
console.log(arr.length);
console.log("-----");
arr.push("Hello World!");
console.log(arr);
console.log(arr.length);
console.log("-----");
arr.length=0;
console.log(arr);
console.log(arr.length);
console.log("-----");
</script>

结果:Array[0] 

              0

              -----

              Array[1]

              1

              -----

              Array[0]

              0

              -----

解析:在上述代码段中,arr.push("Hello World!");所表示的就是一个数组,对应的length即为1。

//上述代码的错误用法
arr=["Hello Everyone!"];

结果:“error”

解析:由于const赋值的变量一旦定义就无法改变,当再次对const所定义的数组继续赋值时,便会显示“错误”。

总结:对于const命令的重新赋值,不可以直接性的改变const定义的变量值,而是采用push()方法,给予变量不同的值,再输出相应的结果。


(3)const对象冻结

<script type="text/traceur">
const person=Object.freeze({});
person.name="Zhangsan";
person.age=12;

console.log(person.name);  //undefined
console.log(person.age);   //undefined
console.log(person);       //Object
</script>

解析:由于在定义person对象的时候,使用了freeze()函数,即对象冻结函数,使得person对象下边的属性name、age无法传递参数,显示“undefined”;此外,在person本身而言,还是一个对象,所以返回Object


(3——拓展1)const对象冻结使用[只冻结了“对象”]

<script tyoe="text/traceur">
const person=Object.freeze({
	name:"Zhangsan",
	age:12
});
console.log(person.name);  //Zhangsan
console.log(person.age);     //12
console.log(person);           //Object
</script>
    解析:使用const冻结对象,只是冻结了对象,并没有冻结了对象的属性。

若要使用const对象进行冻结时,必须把需要使用的对象的属性全部列出来,再在外边进行使用。

(3——拓展1)const对象冻结使用[彻底冻结函数:冻结“对象+属性”]

var constantize=(obj) => {
	Object.freeze(obj);      //首先把自己冻结;
	Object.keys(obj).forEach( (key,value) => {   
		if(typeof obj[key] === 'object'){
			constantize(obj[key]);	 //采用递归调用
		};

	});
};

 





### ECMAScript 2015 (ES6) 新特性及用法 #### 让和常数关键字 为了改善变量声明机制,ECMAScript 2015 引入了 `let` 和 `const` 关键字来替代传统的 `var`。这些新的声明方式提供了更严格的语法约束以及更好的作用域管理[^1]。 - **`let`**: 提供块级作用域的支持,意味着由 `{}` 定义的代码块内部可以创建局部变量而不影响外部环境。 - **`const`**: 类似于 `let`,但是用于定义不可重新赋值的常量;一旦初始化后就不能改变其绑定的对象或原始值。 ```javascript // 使用 let 进行块级作用域声明 if (true) { let message = 'Hello'; } console.log(message); // ReferenceError: message is not defined ``` #### 改进的作用域控制 在 ES6 出现前,JavaScript 中仅有两种主要的作用域形式——全局作用域与函数作用域。这使得开发者难以精确地限定某些逻辑单元内的变量可见性范围。通过引入 `let` 和 `const` 实现了更为精细的作用域划分即块级作用域[^3]: - 当在一个大括号包围的结构里(比如循环体或者条件语句),使用这两个关键词声明出来的变量只在这个特定区域内有效; - 防止意外覆盖同名变量并减少潜在错误的发生几率。 #### 对象解构赋值 对象解构允许从数组和对象中提取数据到单独的变量之中,简化了复杂的数据处理流程。这种模式匹配的方式不仅提高了可读性还增强了灵活性。 ```javascript const user = { name: "Alice", age: 25 }; const { name, age } = user; console.log(name); // 输出 Alice console.log(age); // 输出 25 ``` #### 默认参数值 当调用带有默认参数值的函数而未提供相应实参时,默认参数会自动采用预设好的初始值。这一功能减少了冗余判断逻辑的存在必要性,让代码看起来更加整洁。 ```javascript function greet(greeting = "Hi") { console.log(`${greeting}, how are you?`); } greet(); // Hi, how are you? greet('Good day') // Good day, how are you? ``` #### 模板字符串 模板字符串是一种新型表示多行文本的方法,并且可以直接嵌入表达式作为动态部分。利用反引号 `` ` `` 来包裹整个串内容,其中 `${expression}` 表达式的求值结果会被替换进去。 ```javascript const personName = "Bob"; const greetingMessage = `Hello ${personName}`; console.log(greetingMessage); ``` #### 解构赋值增强版 除了简单的对象属性映射外,还可以进一步指定别名、设置默认值甚至执行计算操作等高级技巧。这种方式极大地提升了开发效率的同时保持良好的编码风格。 ```javascript const settings = { theme: 'dark', fontSize: 14 }; // 设置默认字体大小为16px如果不存在的话 const { theme, fontSize = 16 } = settings; console.log(fontSize); // 输出 14 因为设置了具体数值 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值