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

news/2024/7/11 1:31:56 标签: const命令, 冻结对象, freeze, ES6, 不可重复声明

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]);	 //采用递归调用
		};

	});
};

 






http://www.niftyadmin.cn/n/1659405.html

相关文章

ES6——Day2(跨模块常量+全局对象属性)

1、什么是模块&#xff1f; 在面向对象编程设计中&#xff0c;模块至少归属于一个“类”&#xff1b; 在javascript编程中&#xff0c;可以把js文件归属于一个模块。 案例1&#xff1a;module.js <script type"text/traceur"> //module.js export const int…

ES6——Day2(数组的解构赋值)

1、Destructuring ES6允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这称为“解构”。 2、不完全解构 等号左边的模式&#xff0c;只匹配一部分的等号右边的数组。 3、指定默认值 注意&#xff1a;ES6内部使用严格相等运算符&…

ES6——Day3(对象的解构赋值)

解构不仅可以用于数组&#xff0c;也可以用于对象。对象解构赋值与数组解构赋值有什么异同呢&#xff1f; &#xff08;1&#xff09;对象的属性没有次序&#xff0c;变量必须与属性同名&#xff0c;才能渠道正确的值&#xff1b; &#xff08;2&#xff09;指定默认值时&…

ES6——Day3(字符串的解构赋值+函数参数解构赋值)

1、字符串也可以进行解构赋值 形成一个类似于“数组”的对象。 案例1-1&#xff1a;简单的字符串&#xff08;类似于“数组”&#xff09; <script type"text/traceur"> const [a,b,c,d,e] "Hello"; console.log(a); //H console.log(b); //e …

ES6——Day3(解构赋值的用途)

&#xff08;1&#xff09;交换变量的值 案例1-1&#xff1a;ES5 <script type"text/traceur"> //ES5 console.log("ES5:"); var a 100; var b 200; console.log("交换前&#xff1a;"); console.log("a"a); console.log("…

Git——Day1(基本概念)

1、什么是Git&#xff1f;使用Git目的是什么呢&#xff1f; Git是一款免费、开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git是一个开源的分布式版本控制系统&#xff0c;用以有效、高速的处理从很小到非常大的项目版本管理。 Git 是 Linus T…

Git——Day1(github使用)

1、注册github账号 官方地址&#xff1a;github.com 步骤1&#xff1a;点击Sign up进行注册 username --> Email Address --> Password 步骤2&#xff1a;点击Create a account进行创建 步骤3&#xff1a;注册成功&#xff0c;进入github主页&#xff0c;或Sign in进行…

Git——Day1(仓库管理)

1、创建文件 在“用户名/仓库名”页面中&#xff0c;点击“Create new file”进入新界面test/day1.php, &#xff08;1&#xff09;Edit new file 编辑新文件 &#xff08;2&#xff09;Preview 预览文件效果 &#xff08;3&#xff09;Commit new file 提交新文件 下面写…