ES6入门学习

最新推荐文章于 2024-07-25 10:08:54 发布

野生技术猫

最新推荐文章于 2024-07-25 10:08:54 发布

阅读量192

点赞数 2

文章标签： es6 node.js

本文链接：https://blog.csdn.net/qq_46053824/article/details/114438885

版权

带你入坑ES6

一、入坑仪式
在这里插入图片描述
二、三个特性——常量、箭头函数、解析构造

（一） js中可以声明常量吗
const声明一个只读的常量。一旦声明，常量的值就不能改变。一旦声明必须立即初始化，不能留到以后赋值。
在这里插入图片描述

名称唯一
var定义的变量在window下，区别const。
var存在变量提升，区别const。
先定义后使用。
var不存在块级作用域，区别const。

（二）const声明的常量真的不能改变吗

特例
2.原因

3.用Object.freeze()可以实现冻结。但是在这里插入图片描述

4.使用Object.freeze()用const声明的常量仍然改变。所以只能实现浅冻结，要更深层次的冻结则要写个封装函数来帮助实现。
在这里插入图片描述

5.Object.keys(obj)

参数：要返回其枚举自身属性的对象

返回值：一个表示给定对象的所有可枚举属性的字符串数组
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
实现将所有深层次的属性冻结。
在这里插入图片描述

6.什么时候用let和const
在这里插入图片描述
好的变成习惯：
优先选用const，很多常量不会改变。当有些变量确实需要改变考虑let，时代吗更加安全。

（三）箭头函数——函数更简单的写法
箭头函数左边结构等于右边（方法体）
左边一个参数小括号可以不写，右边一条语句可以不用写。

1.我无法

<body>
<button id="btn">我是按钮</button>

	<script>
		const oBtn=document.querySelector('#btn');
		oBtn.addEventListener('click',function(){
			this.style.backgroundColor='#f00';
		});
	</script>
</body>

改为箭头函数

<body>
<button id="btn">我是按钮</button>

	<script>
		const oBtn=document.querySelector('#btn');
		oBtn.addEventListener('click',()=>{
			console.log(this);
			this.style.backgroundColor='#f00';}
		);
	</script>

</body>

在这里插入图片描述
箭头函数没有this，会通过作用域链寻找，指向了顶级作用域。

（四）箭头函数任何场景都可以用吗

5场景=>不能随意使用箭头函数
1.箭头函数作为回调函数（上个例子）
2.定义对象里面的方法(可能也会涉及到this指针）
3.箭头函数定义的函数不能使用argument这样的对象
4.不能使用箭头函数做构造函数

<script>
		const Course=(name,price)=>{
			this.name=name;
			this.price=price;
		}
		const c1=new Course('es',500);
		console.log(c1);
	</script>

在这里插入图片描述

5.箭头函数不能建立原型下的方法

script>
		const Course=(name,price)=>{
			this.name=name;
			this.price=price;
		}
		
		Course.prototype.study=()=>{
			console.log(`我要学习${this.name},价格是：${this.price}`);
		}
		const c1=new Course('es',500);
		console.log(c1);
		</script>

在这里插入图片描述
（五）取值有更容易的方式吗——解构赋值
等号右边与左边对应

1.对于对象

<script>
		const Course={
			name:'es6',
			price:500
		};
	
		const{
			name,
			price
		}=Course;
		console.log(name,price);//es6 500
		</script>

2.对于数组

<script>
		const arr=['es5','es6','es7'];
		const[a,b,c]=arr;
		console.log(a);//es5
	</script>

3.更复杂
在这里插入图片描述

遇到重复命名，可以起别名。

（六）准确运用解构赋值
es6解构赋值的应用场景

1.作为函数参数，可设置默认值。
2.JSON应用利用解构赋值得到想要的值
用到axios库
必须用live server打开
==》file协议与http协议
在这里插入图片描述

（七）解决ES6不能被所有浏览器解析的问题
用到BABEL:

需要在node.js环境下进行：

（八）学习建议

1.http://es.xiecheng.live
2.http://www.ecma-international.org/ecma-262/6.0/
3.https://es6.ruanyifeng.com/

野生技术猫

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ES6入门学习

带你入坑ES6一、入坑仪式二、三个特性——常量、箭头函数、解析构造（一） js中可以声明常量吗const声明一个只读的常量。一旦声明，常量的值就不能改变。一旦声明必须立即初始化，不能留到以后赋值。名称唯一var定义的变量在window下，区别const。var存在变量提升，区别const。先定义后使用。var不存在块级作用域，区别const。（二）const声明的常量真的不能改变吗特例2.原因3.用Object.freeze()可以实现冻结
复制链接

扫一扫