【前端学习-26】【day05】ES6简介、ES6新增语法let const var、箭头函数、剩余函数、解构赋值、内置对象扩展、数组和String的扩展方法、set数据结构

最新推荐文章于 2024-04-30 18:51:44 发布
最新推荐文章于 2024-04-30 18:51:44 发布
阅读量217 收藏
点赞数 1
分类专栏： javascript HTML 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QNANWang/article/details/106297031
版权

【day05 ES6】

一、ES6简介

1.1 什么是ES6？

在这里插入图片描述

1.2 为什么使用ES6？

在这里插入图片描述

二、ES6新增语法

2.1 Let关键字

不存在变量提升，只能先声明再使用
在这里插入图片描述在这里插入图片描述
代码演示：

<script type="text/javascript">
		/*
			let关键字就是用来声明变量的

			使用let关键字声明的变量具有块级作用域

			在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

			防止循环变量变成全局变量

			使用let关键字声明的变量没有变量提升

			使用let关键字声明的变量具有暂时性死区特性

		*/
		
		/* --------let关键字就是用来声明变量的-------- */
		// let a = 10;
		// console.log(a);
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */
		// if (true) {
		// 	let b = 20;
		// 	console.log(b)
		// 	if (true) {
		// 		let c = 30;
		// 	}
		// 	console.log(c);
		// }
		// console.log(b)
		
		/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */

		// if (true) {
		// 	let num = 100;
		// 	var abc = 200;
		// }
		// console.log(abc);
		// console.log(num)
		/* -------防止循环变量变成全局变量--------- */
		// for (let i = 0; i < 2; i++) {}
		// console.log(i);
	
		/*-----使用let关键字声明的变量没有变量提升------*/
		// console.log(a);
		// let a = 100;
		/* -------使用let关键字声明的变量具有暂时性死区特性------- */
		var num = 10
		if (true) {
			console.log(num);
			let num = 20;
		}
	</script>

2.2 let经典面试题

在这里插入图片描述
在这里插入图片描述

2.3 const关键字

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
代码演示：

<script type="text/javascript">
		// 使用const关键字声明的常量具有块级作用域
		// if (true) {
		// 	const a = 10;
		// 	if (true) {
		// 		const a = 20;
		// 		console.log(a);
		// 	}
		// 	console.log(a);
		// }
		// console.log(a);
		
		// 使用const关键字声明的常量必须赋初始值
		// const PI = 3.14;
		
		// 常量声明后值不可更改 
		const PI = 3.14;
		// PI = 100;
		const ary = [100, 200];
		ary[0] = 123;
		ary = [1, 2]
		console.log(ary);
	</script>

2.4 let const var 关键字的区别

在这里插入图片描述

2.5 箭头函数

在这里插入图片描述
在这里插入图片描述
代码演示：

<script type="text/javascript">
		// 箭头函数是用来简化函数定义语法的
		// const fn = () => {
		// 	console.log(123)
		// }
		// fn();
		
		// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
		// const sum = (n1, n2) => n1 + n2;	 
		// const result = sum(10, 20);
		// console.log(result)
		
		// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
		// const fn = v => {
		// 	alert(v);
		// }
		// fn(20)
		
		// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
		
		function fn () {
			console.log(this);
			return () => {
				console.log(this)
			}
		}

		const obj = {name: 'zhangsan'};

		const resFn = fn.call(obj);

		resFn();
	</script>

2.6 箭头函数面试题

<script type="text/javascript">
		var age = 100;
//对象没有作用域，所以这里指向Obj其实是指向全局即window
		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}
		obj.say();
	</script>

2.7 剩余函数

在这里插入图片描述在这里插入图片描述
代码演示：

<script type="text/javascript">
		// const sum = (...args) => {
		// 	let total = 0;
		// 	args.forEach(item => total += item);
		// 	return total;
		// };

		// console.log(sum(10, 20));
		// console.log(sum(10, 20, 30));
		

		let ary1 = ['张三' , '李四', '王五'];
		let [s1, ...s2] = ary1;
		console.log(s1)
		console.log(s2)

	</script>

三、解构赋值

3.1 数组解构

在这里插入图片描述
代码演示：

<script type="text/javascript">
		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary;
		console.log(a)
		console.log(b)
		console.log(c)
		console.log(d)
		console.log(e)
	</script>

3.2 对象解构

在这里插入图片描述
代码演示：

<script type="text/javascript">
		// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
		
		let person = {name: 'lisi', age: 30, sex: '男'};
		// let { name, age, sex } = person;
		// console.log(name)
		// console.log(age)
		// console.log(sex)
		
		let {name: myName} = person;
		console.log(myName)
	</script>

四、ES6的内置对象扩展

一、扩展运算符（展开语法）

4.1 Array的扩展方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码演示：

<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</div>
	<div>5</div>
	<script type="text/javascript">
		// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		// let ary = ["a", "b", "c"];
		// ...ary // "a", "b", "c"
		// console.log(...ary)
		// console.log("a", "b", "c")
		
		// 扩展运算符应用于数组合并
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];
		// // ...ary1 // 1, 2, 3
		// // ...ary1 // 4, 5, 6
		// let ary3 = [...ary1, ...ary2];
		// console.log(ary3)

		// 合并数组的第二种方法
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];

		// ary1.push(...ary2);
		// console.log(ary1)
		
		// 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs)
		var ary = [...oDivs];
		ary.push('a');
		console.log(ary);
	</script>
</body>

4.2 构造函数方法 Array.from()

在这里插入图片描述
在这里插入图片描述
代码演示：

<script type="text/javascript">
		// var arrayLike = {
		// 	"0": "张三",
		// 	"1": "李四",
		// 	"2": "王五",
		// 	"length": 3
		// }

		// var ary = Array.from(arrayLike);
		// console.log(ary)
		
		var arrayLike = {
			"0": "1",
			"1": "2",
			"length": 2
		}

		var ary = Array.from(arrayLike, item => item * 2)
		console.log(ary)
	</script>

4.3 实例方法 find()

在这里插入图片描述
代码演示：

<script type="text/javascript">
		var ary = [{
			id: 1,
			name: '张三'
		}, {
			id: 2,
			name: '李四'
		}];
		let target = ary.find(item => item.id == 3);
		console.log(target)
	</script>

4 .4 实例方法 findIndex（）

在这里插入图片描述
代码演示：

<script type="text/javascript">
		let ary = [10, 20, 50];
		let index = ary.findIndex(item => item > 15);
		console.log(index)
	</script>

4.5 实例方法 includes（）
在这里插入图片描述
代码演示：

<script type="text/javascript">
		let ary = ["a", "b", "c"];

		let result = ary.includes('a')
		console.log(result)
		result = ary.includes('e')
		console.log(result)
	</script>

4.5 String的扩展方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
代码演示：

<script type="text/javascript">
		// let name = `张三`;
		// let sayHello = `Hello, 我的名字叫${name}`;
		// console.log(sayHello);
		
		// let result = {
		// 	name: "zhangsan",
		// 	age: 20
		// };
		// let html = `
		// 	<div>
		// 		<span>${result.name}</span>
		// 		<span>${result.age}</span>
		// 	</div>
		// `;
		// console.log(html);
		
		const fn = () => {
			return '我是fn函数'
		}

		let html = `我是模板字符串 ${fn()}`;
		console.log(html)

	</script>

4.6 String的实例方法：startswith（）和endswith（）

在这里插入图片描述

代码演示：

<script type="text/javascript">
		let str = 'Hello ECMAScript 2015';
		let r1 = str.startsWith('Hello');
		console.log(r1);
		let r2 = str.endsWith('2016');
		console.log(r2)
	</script>

4.7 String的实例方法：repeat（）

在这里插入图片描述
代码演示:

<script type="text/javascript">
		console.log("y".repeat(5))
	</script>

二、set数据结构

5.1 set数据结构

在这里插入图片描述

5.2 实例方法

在这里插入图片描述在这里插入图片描述
代码演示：

<script type="text/javascript">
		// const s1 = new Set();
		// console.log(s1.size)

		// const s2 = new Set(["a", "b"]);
		// console.log(s2.size)

		// const s3 = new Set(["a","a","b","b"]);
		// console.log(s3.size)
		// const ary = [...s3];
		// console.log(ary)
		
		// const s4 = new Set();
		// 向set结构中添加值 使用add方法
		// s4.add('a').add('b');
		// console.log(s4.size)

		// 从set结构中删除值 用到的方法是delete
		// const r1 = s4.delete('c');
		// console.log(s4.size)
		// console.log(r1);

		// 判断某一个值是否是set数据结构中的成员 使用has
		// const r2 = s4.has('d');
		// console.log(r2)

		// 清空set数据结构中的值 使用clear方法
		// s4.clear();
		// console.log(s4.size);
		
		// 遍历set数据结构 从中取值
		const s5 = new Set(['a', 'b', 'c']);
		s5.forEach(value => {
			console.log(value)
		})

	</script>
QNAN-
关注
专栏目录
ECMAS6（ES6）新特性概览（一）：变量声明let与const、箭头函数、模板字面量全面解析
Allen-
05-27 2299
ECMAS6中对JavaScript变量声明方式的重要革新，重点聚焦于let与const的引入，以及箭头函数与模板字面量的使用，这些特性如何重塑了现代JavaScript编程实践。
web前端实战记录
qq_33144001的博客
08-31 253
通过find找到指定条件的对象 let obj = [{id:1},{id:2}] , aid = 1 let item = obj.find((item)=>{ return item.id == aid }) // item =>{id: 1} 判断环境 const prefix = process.env.NODE_ENV === 'development' ? '...
判断一个数组中是否存在某个对象（数组中有多个对象，此时给一个对象，根据对象中的某个key判断出这个数组中是否存在这个对象）
欣欣博客
11-13 2471
数组arr：[{name:'wang':age:18},{name:'zhu':age:21}], 对象obj：{name:'yu',age:22} 根据obj的name判断arr中是否存在obj let index=this.arr.findIndex((item)=&gt;{ if(obj.name===item.name){ return true; ...
高级 JavaScript | Day05 ES6（ES6简介、ES6的新增语法、ES6的内置对象扩展）
qq_53306713的博客
11-11 279
ES6简介、ES6的新增语法、ES6的内置对象扩展
JavaScript 高级_day05_es6-ES6概念&新增语法&内置对象拓展
无
10-11 215
ES6语法 目标 ES6相关概念（★★） 什么是ES6 为什么使用 ES6 ? ES6新增语法 let（★★★） let声明的变量只在所处于的块级有效 不存在变量提升 暂时性死区 经典面试题 小结 const（★★★） 具有块级作用域 声明常量时必须赋值 常量赋值后，值不能修改 小结 let、const、var 的区别 解构赋值（★★★） 数组解构 对象解构 小结 箭头函数（★★★） 小结 面试题 剩余参数（★★） 剩余参数和解构配合使用 ES6 的内置对象扩展 Array 的扩展方法（★★） 扩展运算符（
简述ES6新增的语法 一（基础语法let， const 箭头函数 ， ...运算符等等）
TXW6666的博客
03-20 291
ES6 新增了很多的语法规范，可以对写法和开发有很大的帮助 let声明变量 1.let声明的变量不会挂在window中，不会造成全局变量的污染 2.新增了一个块级作用域{}，以前只有函数作用域，全局作用域 3.let是不允许重复声明同一变量名 4.let不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before init...
20day，21day-函数相关知识，箭头函数，es6相关知识
最新发布
DaB210的博客
04-30 678
20day，21day-函数相关知识，箭头函数，es6相关知识
DAY14JS学习--this指向、ES6特性
weixin_51040108的博客
09-01 116
DAY14JS学习--this指向、ES6特性
ECMAScript--》 ES6语法规范 ## Day1
ztK63LrD的博客
05-25 760
ES6语法规范学习
day05-es6-课件.rar
04-18
4. **解构赋值**：允许我们从数组或对象中按结构赋值，如`let [a, b] = [1, 2]`或`let {key: value} = object`。 5. **类与继承**：ES6引入了基于原型的类语法，但实质仍然是函数。`class`关键字简化了构造函数、`...
day04-es6-课件.rar
04-18
箭头函数是ES6中的一种新函数定义方式，以其简洁的语法深受开发者喜爱。箭头函数使用`=>`符号分隔参数和函数体，例如 `(params) => expression` 或者 `(params) => { statements }`。箭头函数没有自己的`this`值，...
day03-es6-课件.rar
04-18
箭头函数是ES6中的一种新函数定义方式，以其简洁的语法而受到欢迎。例如： ```javascript var add = (x, y) => x + y; ``` 它与传统函数表达式的主要区别在于`this`的绑定规则，箭头函数不创建自己的`this`，...
【JavaScript高级5】ES6概念、let、const、解构、剩余参数、箭头函数、内置对象扩展(Array、String)、Set数据结构
耍酷的李世达的博客
11-08 794
day5ES6相关概念（★★）什么是ES6为什么使用 ES6 ?ES6新增语法let（★★★）let声明的变量只在所处于的块级有效不存在变量提升暂时性死区经典面试题小结const（★★★）具有块级作用域声明常量时必须赋值常量赋值后，值不能修改（常量值对应的内存地址不可更改）小结let、const、var 的区别解构赋值（★★★）数组解构对象解构小结箭头函数（★★★）小结面试题剩余参数（★★）剩余参数和解构配合使用ES6 的内置对象扩展Array 的扩展方法（★★）扩展运算符（展开语法）扩展运算符可以应用于合
HTML-POLO360项目实战
QNANWang的博客
09-26 892
HTML-POLO360项目实战 #使用HTML+CSS 1. 引入reset.css清除默认样式 - 2.解决高度塌陷问题 3.引入外部CSS 4.设置文字居中.行高等 5.相对定位和绝对定位 6.背景不重复 居中等等 7.鼠标移入变色 a:hover{ } ...
HTML—项目实战（注册界面的设计以及实现）
QNANWang的博客
10-09 761
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>启迪数字学院</title> <link rel="stylesheet" type="text/css" href="css/reset1.css" /> <...
【前端学习-03】CSS3之2D转换/移动/旋转/缩放
QNANWang的博客
05-04 392
2D转换 实现元素（盒子）的位移、旋转、缩放 2D转换:改变标签在二维平面上的位置和形状的一种技术，与数学的坐标轴不一样 1.2D转换移动Translate 改变元素在页面中的位置，类似定位。 语法：transform:translate(x,y) X为x轴上移动的位置，Y为Y轴移动位置 若只移动X轴或Y轴，Y不能省略 transfrom：translate(100px,0px) transfr...
【前端学习-19】【01】JQuery的基本使用/顶级对象$/DOM和JQuery对象的区别与转换/隐式迭代实现排他思想/新浪下拉菜单/淘宝精品/tab侧边栏/手风琴/高亮效果显示
QNANWang的博客
05-16 371
基本使用： 1.官网下载JQuery->引入JS->调用 JQuery和DOM对象的区别 两对象的相互转换 使用： 利用隐式迭代实现排他思想 案例：新浪下拉菜单 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
【前端学习-25】【day04】正则表达式、表单验证、用户名验证
QNANWang的博客
05-23 355
【day04正则表达式】一、正则表达式1.1 什么是正则表达式1.2 正则表达式的特点二、正则表达式在js中的应用2.1 创建正则表达式（两种方式）三、正则表达式的特殊字符3.1 边界符3.2 字符类3.3 常用正则表达式3.4 量词符3.5 括号总结3.6 预定义类四、正则表达式中的替换4.1 replace替换案例1：用户名验证案例2：表单验证 一、正则表达式 1.1 什么是正则表达式 1.2 正则表达式的特点 二、正则表达式在js中的应用 2.1 创建正则表达式（两种方式） 代码演示： &lt
【前端学习-24】【day03】函数的定义和调用/this/改变函数内部this指向-call、apply、bind/严格模式/高阶函数/闭包/递归/深浅拷贝
QNANWang的博客
05-22 338
[day03]函数进阶一、函数的定义和调用1.1 函数的定义1.2 函数的调用方式二、this2.1 函数内this的指向2.2 改变函数内部this指向2.2.1 call（）方法2.2.2 apply()方法2.2.3 bind() 方法2.2.4 call apply bind 总结（相同点、不同）三、严格模式3.1 什么是严格模式3.2 开启严格模式3.3 严格模式中的变化四、高阶函数五、闭包5.1 变量作用域5.2 什么是闭包5.3 闭包的作用5.4 闭包的案例（3个应用）5.5 思考题5.6 闭
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值