• ECMAScript 6.0

    ECMAScript 6.0

    大家好呀！我是小笙，接下来我们来初步了解一部分大前端的内容。

    • 1

    ES6

    ES6基本介绍

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布

    ECMAScript 和 JavaScript 的关系（类似接口和类的关系）：

    ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现

    let变量

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		let name = "罗念笙";
		console.log("name",name); // 逗号：如果是对象，输出对象的完整信息（属性）
		console.log("name"+name); // 加号：如果是对象，只输出Object类型
		// 举例子
		// let l = new Object;
		// l.name = "罗念笙";
		// console.log("name",l); // name {name: '罗念笙'}
		// console.log("name"+l); // name[object Object]
		
		// let注意细节
		// 1. let 声明的变量有严格局部作用域 
		{
			var gender = "男";
			let age = 18;
			console.log(gender); // 男
			console.log(age); // /18
		} 
		console.log(gender); 	// 男
		console.log(age); // age is not defined
		
		// 2. let 只能声明一次, var 可以声明多次 
		let name = "张洛融"; // Identifier 'name' has already been declared
		
		// 3. let 不存在变量提升, var 存在变量提升
		console.log(x); 
		var x;
		
		console.log(y); // Cannot access 'y' before initialization
		let y;
	</script>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    const 声明常量/只读变量

    解构赋值<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1. 常量在定义时，需要赋值 
			// 2. 常量赋值后不能修改
			const AGE; // Missing initializer in const declaration
			const PI = 3.14;
			PI = 5.6; // Assignment to constant variable
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    解构赋值

    是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值（解构赋值是对赋值运算符的扩展 ）

    主要有两种形式： 数组解构和对象解构

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		// 数组解构 [ ]
		let arr = [1,2,3];
		let [x,y,z] = arr;
		console.log(x,y,z) // 1 2 3
		
		let [num1,num2,num3] = [100,200,300];
		console.log(num1,num2,num3); // 100 200 300
		
		// 对象解构 { }
		let obj = new Object;
		obj.name = "罗念笙";
		obj.age = 18;
		let{name,age} = obj; // 名称必须和属性名相同，但是顺序无所谓
		console.log(name,age); // 罗念笙 18
		
		function f1({name, age}){  // 名称必须和属性名相同，但是顺序无所谓
			console.log(name,age)  // 罗念笙 18
		}
		f1(obj);
	</script>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    模板字符串

    模板字符串使用反引号 ` 将字符串包裹

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 模板字符串使用反引号 ` 将字符串包裹
			// 1.可作为普通字符串
			// 2.可用来定义多行字符串，即可以将换行字符串原生输出
			let str1 = `for(int i=0;i<2;i++){
				System.out.println(i);
			}`
			console.log(str1)	
			
			// 3.字符串插入变量和表达式, 使用 ${}
			let name = "罗念笙";
			let message = `姓名 : ${name}`
			let num1 = 34;
			let num2 = 66;
			let sum = `${num1+num2}`;
			console.log(message); // 姓名 : 罗念笙
			console.log(sum); // 100
			
			// 4.字符串中调用函数
			function f1(){
				return "f1被调用...";
			}
			let controlF1 = `${f1()}`;
			console.log(controlF1); // f1被调用...
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    对象相关新特性

    声明对象简写

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 声明对象简写
			const age = 800; 
			const name = "孙悟空";
			let monster = {name,age};
			console.log(monster) // {name: '孙悟空', age: 800}
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    对象方法简写

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 对象方法简写
			let monster2 = { 
				name: "红孩儿", 
				age: 100, 
				sayHi() {  // 传统方式: sayHi:function()
					console.log("name=", this.name, " age=", this.age);  // name= 红孩儿  age= 100
				},
			}
			monster2.sayHi(); 
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    对象拓展运算符

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 对象拓展运算符
			let person = {
				name:"罗念笙",
				age:18,
				eat(){
					console.log("eating....")
				}
			}
			// 浅拷贝
			let person2 =  person;
			person2.name = "张洛融";
			console.log(person.name); // 张洛融
			
			// 深拷贝
			let person3 = {...person};
			person3.name = "XXX";
			console.log(person3.name); // XXX
			console.log(person.name); // 张洛融
			
			// 合并对象(深拷贝)
			let personMessage = {
				gender:"女",
				hobby:"跑步"
			}
			let wholeMessage = {...person,...personMessage};
			console.log(wholeMessage); // {name: '张洛融', age: 18, gender: '女', hobby: '跑步', eat: ƒ}
			person.name = "张洛";
			console.log(wholeMessage); // {name: '张洛融', age: 18, gender: '女', hobby: '跑步', eat: ƒ}
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    箭头函数(重要!!!)

    1. 箭头函数提供更加简洁的函数书写方式
    2. 基本语法是：(参数列表) => { 函数体 }
    3. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
    4. 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
    5. 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
    6. 箭头函数多用于匿名函数的定义

    箭头函数基本使用

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 传统函数
			let addSum = function(m,n){
				return m + n;
			}
			console.log(addSum(6,4)); // 10
			// 1.箭头函数基本使用
			// 基本语法是：(参数列表) => { 函数体 }
			let addSum2 = (m,n) =>{
				return m + n;
			}
			console.log(addSum2(3,4)); // 7
			// 箭头函数优化
			// 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回 
			let addSum3 = (m,n) => m + n;
			console.log(addSum2(3,90)); // 93
			
			// 2.可以把箭头函数当作形参传入(类似Java匿名内部类)
			function f(f4){
				console.log(f4(100));
			}
			f(
				(n) => {
					return n * 12;
				}
			)
			f(
				(n) => {
					return n - 12;
				}
			)
			
			// 传统函数
			var f1 = function (n, m) {
				var res = 0 
				for (var i = n; i <= m; i++) {
					res += i 
				}
				return res 
			}
			console.log(f1(1, 10))  // 55
			// 3.箭头函数灵活使用 
			let f2 = (n, m) => {
				var res = 0 
				for (var i = n; i <= m; i++) { 
					res += i 
				}
				return res 
			};
			console.log(f2(1, 10)); // 55
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    箭头函数+对象解构

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 要求：在方法形参取出 monster 对象的 skill 属性 
			const monster = {
				name: "红孩儿",
				age: 100,
				skill: ['红缨枪', '三位真火']
			} 
			// 传统方式
			function f1(monster) {
				console.log("skill=", monster.skill);
			}
			f1(monster); 
			//箭头函数 
			let f2 = ({skill}) => { 
				console.log("skill=", skill); 
			}
			// 1.f2传入对象monster，含有属性skill 
			// 2.f2形参是{skill}, 根据ES6的对象解构特性, 会把monster对象的skill属性赋给skill 
			// 3.对象解构的前提就是{skill}的 skill 和 monster 的 skill 属性名必须是一致的
			f2(monster); 
			
			// 箭头函数()=> + 解构{}
			let f3 = ({age,name,skill}) => { // {age,name,skill} 顺序无要求
				console.log("skill=", skill, " age=", age, " name=", name);
			}
			f3(monster);
		</script>
	</head>
	<body>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
  • 相关阅读:
    java毕业设计在线毕设选题系统Mybatis+系统+数据库+调试部署
    数据结构二叉排序树应用一
    直播课堂系统12--整合Nacos和gateway
    SSL/TLS工作原理：密钥、证书、SSL握手
    MySQL
    Python下sensor_msgs.msg.PointCloud2数据的高效读取
    信息化工程测试验收管理制度
    砥砺前行 智领未来 | 美格智能2022年半年度经营管理会议顺利召开
    利用dockerfile升级flink的curl
    tensorboard报错解决：No dashboards are active for the current data set
  • 原文地址：https://blog.csdn.net/Al_tair/article/details/125513643