JavaScript,ES5,ES6,ES7,ES8及ES6(ES2015)的基本语法

ECMAScript

JavaScript语言的下一代标准,已于2015年6月正式发布,其目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

JavaScript和ECMAScript

历史,1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布了262号标准文件(ECMA-262)第一版,规定了浏览器脚本语言的标准,并将这种语言称为:ECMAScript,这个版本就是1.0版。

那么,ECMAScript和JavaScript的关系是,前者(ECMAScript)是后者(JavaScript)的规格,后者(JavaScript)是前者(ECMAScript)的一种实现,另外的ECMAScript方言还有Jscript和ActionScript。

ES5ES6ES7与ECMAScript 2015的关系

ES5,ECMAScript5.1,是ECMAScript标准的修正,2011年,ECMAScript 5.1版发布后,就开始制定6.0版了,因此,ES6这个词的原意,是指JavaScript语言的下一个版本。

ES6,ES2015,第一个版本,在2015年6月发布,正式名称是《ECMAScript 2015标准》(简称:ES2015),时间,2016年6月,小幅修订的《ECMAScript 2016标准》(简称 ES2016)如期发布,这个版本可以看作是:ES6.1版,因两者的差异非常小,基本上是同一个标准。根据计划,2017年6月发布ES2017标准。

ES7,ES2016,2016年3月发布,ECMA-262标准第7版的简称,从ES6开始每年发布一个版本,以年份作为名称,因此又称:ECMAScript2016,简称:ES2016,在ES6的基础上添加3项内容:求幂运算符(**)、Array.prototype.includes()方法、函数作用域中严格模式的变更。

ES8,ES2017,2017年6月,ES8是ECMA-262标准第8版的简称,特性:async、await异步解决方案。

ES6(ES2015)的基本语法

1、let声明变量

<script>
	// var声明的变量,没有局部作用域
	// let声明的变量,有局部作用域
	{
		var a = 0
		let b = 1
	}
	console.log(a) // 0
	console.log(b) // Uncaught ReferenceError: b is not defined
script>
<script>
	// var 可以声明多次
	// let 只能声明一次
	var m = 1
	var m = 2
	let n = 3
	let n = 4
	console.log(m) // 2
	console.log(n) // Uncaught SyntaxError: Identifier \'n\' has already been declared
script>

2、const声明常量(只读变量)

<script>
	// 1、声明之后不允许改变
	const PI = "3.1415926"
	PI = 3 // Uncaught TypeError: Assignment to constant variable.
script>
<script>
	// 2、一但声明必须初始化,否则会报错
	const MY_AGE // Uncaught SyntaxError: Missing initializer in const declaration
script>

3、解构赋值

解构赋值是对赋值运算符的扩展,是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值,在代码书写上简洁且易读,语义更加清晰明了,也方便了复杂对象中数据字段获取。

<script>
	//1、数组解构
	// 传统
	let a = 1, b = 2, c = 3
	console.log(a, b, c)
	// ES6
	let [x, y, z] = [1, 2, 3]
	console.log(x, y, z)
script>
<script>
	//2、对象解构
	let user = {name: \'Helen\', age: 18}
	// 传统
	let name1 = user.name
	let age1 = user.age
	console.log(name1, age1)
	// ES6
	let { name, age } = user//注意:结构的变量必须是user中的属性
	console.log(name, age)
script>

4、模板字符串

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,在字符串中加入变量和表达式。

<script>
	// 1、多行字符串
	let string1 = `怜,
		怜怜怜怜怜怜怜怜怜怜怜怜怜怜怜怜怜怜怜`
	console.log(string1)
script>
<script>
	// 2、字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
	let name = "怜"
	let age = 26
	let info = `My Name is ${name},I am ${age 1} years old next year.`
	console.log(info)
script>
<script>
	// 3、字符串中调用函数
	function f(){
		return "是函数!"
	}
	let string2 = `Game start,${f()}`
	console.log(string2); 
script>

5、声明对象简写

<script>
	const age = 26
	const name = "怜"
	// 传统
	const person1 = {age: age, name: name}
	console.log(person1)
	// ES6
	const person2 = {age, name}
	console.log(person2) 
script>

6、定义方法简写

<script>
	// 传统
	const person1 = {
		sayHi:function(){
			console.log("Hi")
		}
	}
	person1.sayHi();
	// ES6
	const person2 = {
		sayHi(){
			console.log("Hi")
		}
	}
	person2.sayHi() 
script>

7、对象拓展运算符

拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

<script>
	// 1、拷贝对象
	let person1 = {name: "怜", age: 26}
	let someone = { ...person1 }
	console.log(someone)
	// 2、合并对象
	let age = {age: 26}
	let name = {name: "怜"}
	let person2 = {...age, ...name}
	console.log(person2) 
script>

8、箭头函数

箭头函数提供了一种更加简洁的函数书写方式,基本语法是:参数 => 函数体,箭头函数多用于匿名函数的定义。

<script>
	// 传统
	var f1 = function(a){
		return a
	}
	console.log(f1(1))
	// ES6
	var f2 = a => a
	console.log(f2(1))
script>
<script>
	// 当箭头函数没有参数或者有多个参数,要用()括起来。
	// 当箭头函数函数体有多行语句,用{}包裹起来,表示代码块,
	// 当只有一行语句,并且需要返回结果时,可以省略{}, 结果会自动返回。
	var f3 = (a,b) => {
		let result = a b
		return result
	}
	console.log(f3(6,2)) // 8
	// 前面代码相当于:
	var f4 = (a,b) => a b
	console.log(f4(6,2)) // 8
script>

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/procedure/22427.html

发表评论

登录后才能评论