ECMAScript 6.0

已于 2022-07-05 13:13:21 修改
阅读量326 收藏 1
点赞数 1
分类专栏： javaRoad 文章标签： javascript es6 前端
于 2022-06-29 09:03:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Al_tair/article/details/125513643
版权

ECMAScript 6.0

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

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>

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>

解构赋值

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

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

<!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>

模板字符串

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

<!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>

对象相关新特性

声明对象简写
<!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>
对象方法简写
<!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>

对象拓展运算符

<!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. 箭头函数多用于匿名函数的定义
箭头函数基本使用
<!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>
箭头函数+对象解构
<!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>
Al_tair
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ECMAscript 6.0
01-06
ECMAscript 6.0PDF,先说清楚，这是一个需要对js 5.0和用过模块化框架的有一些基础的人，更容易理解
ECMAScript 6.0.md
09-08
ECMAScript 6.0的一些基本知识点，let,const,var 的区别；String字符串；Set数据结构，其中文件为markdown格式
ECMAScript 6学习总结（1）——ECMAScript 6入门简介
科技D人生
05-26 1640
ECMAScript 6简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什
ECMAScript6.0（一）
小知的博客
03-06 339
一、变量let和const： var： 可以重复声明 无法限制修改无法限制修改 没有块级作用域没有块级作用域 let：不能重复声明，变量~可以修改，块级作用域 const：不能重复声明，常量~不可以修改，块级作用域 &amp;lt;script&amp;gt; window.onload = function() { var aBtn = document.getElementsByT...
Vue语言基础——ECMAScript 6.0
qq_55227591的博客
07-25 732
1.ECMAScript6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。2.一个完整的JavaScript实现由三部分组成文档对象模型（DOM）、浏览器对象模型（BOM）、核心（ECMAScript）3.总的来说，ES就是在设计实现JavaScript脚本语言的语法和基本对象的核心内容时所遵循的标准规范。①{......
web前端开发工程师 ECMAScript 6.0 简称ES6 Typora学习笔记
最新发布
08-16
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。Typora软件记录的学习笔记 适用于小白，内容包含了我们平时常用到的知识，还有一些平时遇到问题的总结。...
ECMAScript6入门优化版.pdf
01-09
ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
《ECMAScript 6 入门-阮一峰》PDF完整版
03-06
这个pdf文件完整的整理了 ECMAScript 6 入门-阮一峰这一书，并进行了格式优化，适合查看和打印。
ES6基础学习
weixin_47918681的博客
10-12 189
1.1什么是ES6 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1.2ES6和JavaScript关系 该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScri
ECMAScript 6入门 高清版.pdf
03-26
编辑推荐 √ 横跨ES2015/2016/2017新标，抢占JavaScript制高点 √ 由千万级名博、布道引领无数前端入行的阮一峰执笔 √ 来自BAT一线实践，精彩案例透彻解读新标|保留语法 √ 新标首著，凝结多年研究心得，剖析ES理解应用难题
ECMAScript_6.0—[概念普及]
Yam的博客
11-03 1869
一、ECMAScript的历史 ES6是ECMAScript标准十余年来变动最大的一个版本，为其 添加了许多新的语法特性。 •1997年ECMAScript1.0诞生。 •1998年6月ECMAScript2.0诞生，包含一些小的更改，用 于同步独立的ISO国际标准。 •1999年12月ECMAScript3.0诞生，它是一个巨大的成功， 在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版 本完全继承。直到今天，我们一开始学习JS，其实就是在学
ECMAScript 6.0 知识点汇总(一)
XIPIKER的博客
08-16 246
简介 ECMAScript 6.0(一下简称ES6)是Javascript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ES6既是一个历史名词，也是一个泛指，含义5.1版以后的Javascript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。 babel介绍 被称为下一代的Javascript编译器。可以将es6的代码转换成
ECMAScript6.0简介
weixin_51359716的博客
01-03 384
什么是ECMAScript ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言。 Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）。因为计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。现名称已不属于首字母缩略字。 与国家政府标准机
EcmaScript6.0
LFZ_521的博客
10-05 153
EcmaScript6.0(以下简称ES6)是javascript(以下简称JS)的下一代标准式的语言，并且是面向大型开发程序的方向发展，向企业级方向发展。 在ES6的新语言中，规范了和完善了以前的JS的诸多的问题。 在ES6中新增了两个定义变量的词： (1).let (2).const let的用法:与原先JS的var用法类似，但更加规范：相比较于var (1):let声明的变量没有变量提升；(...
ECMAScript6.0（ES6）
Joyechen1的博客
11-12 107
ES6
React系列（三）：ECMAScript6.0的使用（上）
JesyWu的博客
01-25 442
随着google和firfox以及node6.0对ES6的支持，ES6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析，为后续的React知识点做好铺垫，主要内容如下： let, const：块级作用域—声明变量 class, extends, super： 类，继承，指代父类 arrow functions：箭头函数 templ
ECMAscript 6.0 学习笔记
Eva_大黎的博客
12-13 290
兼容性 兼容IE10+,chrome,fireFox,移动端，nodeJs 不兼容解决方案： 1、线上转换 2、提前编译：引入browser.js 新特性-变量-函数-数组-字符串-面向对象-Promise-generator-模块化变量 var 的一些弊端 1、可以重复声明 2、无法限制修改 3、没有块级作用域 es6新增变量 let 、const let ：不能重复修改，是变量—可
ecmascript 6.0 官方文档
08-04
ECMAScript 6.0（也被称为ES6或ES2015）是JavaScript编程语言的一种标准，由Ecma International（一个制定电子商务标准的组织）制定并于2015年发布。 ECMAScript 6.0官方文档是一个详细的说明文档，提供了关于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Al_tair

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值