01-es6

GGYY__

已于 2022-05-13 16:22:28 修改

阅读量130

点赞数

文章标签： javascript 前端开发语言

于 2022-05-13 14:27:59 首次发布

本文链接：https://blog.csdn.net/weixin_52682120/article/details/124749839

版权

Javascript基础专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、 let 定义变量

变量不能重复声明
不存在变量提升
块级作用域
不影响作用域链

		<script>
			// 1、变量不能重复声明
			let name="小李";
			let name="大敏";
			console.log(name);
			console.log(name);  //Identifier 'name' has already been declared
			
			//2.不存在变量提升
			 console.log(hobby);  //Cannot access 'hobby' before initialization
			 let hobby="看电影";
			
			// 3. 块级作用域 
			 // if else while for 
			 {
				 let boy="易烊千玺";
			 }
			 console.log(boy);  //boy is not defined
			 
			 //4.不影响作用域链
			 {
				 let who="小李";
				 function fn(){
					 console.log(who);
				 }
				 fn();     //小李 
			 }
			 fn();    //小李 
		</script>

let 块级作用域练习

		<style>
			div{
				display: inline-block;
				background-color: pink;
				width: 80px;
				height: 25px;
			}
		</style>
	</head>
	<body>
		<p style="font-weight: bold;">点击切换颜色</p>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>
<script>
	// 1、获取元素
	  let items= document.getElementsByTagName("div");
	// 2. 遍历元素绑定事件
	for(let i=0; i<items.length;i++){
		items[i].onclick=function(){
			//3.改变颜色
			items[i].style.background="green";
		}
	}
	
     //等价于	
	{
		let i=0;
		items[i].onclick=function(){
			//3.改变颜色
			items[i].style.background="green";
		}
	}
	
	{
		let i=1;
		items[i].onclick=function(){
			//3.改变颜色
			items[i].style.background="green";
		}
	}
	  
	  {
	  	let i=2;
	  	items[i].onclick=function(){
	  		//3.改变颜色
	  		items[i].style.background="green";
	  	}
	  }
	  
</script>

2、const 常量

常量大写且一定要赋初始值
一旦赋值就不能修改
块级作用域
.对于数组和对象的元素修改，不算对常量的修改不会报错

		<script>
			// 1、常量大写且一定要赋初始值
			const SCHOOL="黑马程序员";
			
			//2 、一旦赋值就不能修改
			SCHOOL="尚硅谷";
			console.log(SCHOOL);   //Assignment to constant variable.
			
			// 3、块级作用域
			 {
				const PlAY="Song";
			}
			console.log(PlAY);   // PlAY is not defined
			
			
			 // 4.对于数组和对象的元素修改，不算对常量的修改 不会报错。
			 const TEMA=["HAHA","MING","LETMING"];
			 TEMA.push("小李");  //添加
			 console.log(TEMA);
			 TEMA=100;  // Assignment to constant variable.
		</script>

3、解构赋值

ES6 允许按照一定模式从数组和对象中提取值、对变量进行赋值—>解构赋值

		<script>
			//ES6 允许按照一定模式从数组和对象中提取值、对变量进行赋值--->解构赋值
			 // 1.数组的结构
			 const ARR=["张三","李四","王五","赵六"];
			       //解构
			 let [three,four,five,six]=ARR;
			 console.log(three);  //张三
			 console.log(four);   //李四
			 console.log(five);  //王五
			 console.log(six);   //赵六
			 
			//2.对象的结构
			 const PEOPLE={
				 name: "张三",
				 age: 66,
				 hobby: function(){
					 console.log("打游戏");
				 }
			 };
			    //解构
			 let {name,age,hobby}=PEOPLE;
			 console.log(name);
			 console.log(age);
			 console.log(hobby);
		</script>

4、字符串的声明方式[``]

内容中可以直接出现换行符
变量拼接 ${}

		<script>
			// es6 新增加了字符串的声明方式[``]   ''  ""
			// 1.声明
			let str=`我是一个字符串`;
			console.log(str);  
			
			//2.内容中可以直接出现换行符
			let name=`<ul>
			<lI>花花</lI>
			<lI>小白</lI>
			<lI>大黄</lI>
			<lI>大河</lI>
	      	</ul>`;
		
		 //3. 变量拼接  ${}
		   let ss="小李";
		   let love=`${ss}像个小傻子`; 
		   console.log(love) //小李像个小傻子
		   
		</script>

5、简化对象的书写方式

		<script type="text/javascript">
			//允许在{}里面，直接写变量和函数 作为对象的属性和方法
			//简化
			let name="小李";
			let jishu=function(){
				console.log("会java");
			};
			
			const  people={
				 name,
				jishu,
				improve(){
					console.log("还会一点C++");
				}
			}
			console.log(people); 
		</script>

6、箭头函数

<script>
			//0:正常声明一个函数
			let fn=function(){
			}
			
			//1:箭头函数 省略function
			let fn2=(a,b)=>{
				return a+b;
			}
			//调用函数
			let result=fn2(2,4);
			console.log(result);
			
			
			//1 this 是静态的  始终指向函数声明时所在作用域下的this的值
			window.name="小李";
			const People={
				name: "花花"
			};
			
			function getName(){
				console.log(this.name); 
			};
			
			let getName2=()=>{
				console.log(this.name); 
			}
			//直接调用
			getName();   //小李
			getName2();  //小李
			
			//call 方法调用
			getName.call(People); //花花
			getName.call(People); //花花
		</script>

GGYY__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-es6

1、 let 定义变量变量不能重复声明不存在变量提升块级作用域不影响作用域链 <script> // 1、变量不能重复声明 let name="小李"; let name="大敏"; console.log(name); console.log(name); //Identifier 'name' has already been declared //2.不存在变量提升 console.log(hobby); //Cann
复制链接

扫一扫