前端技术es6
es6学习资料:http://es6.ruanyifeng.com/
es6菜鸟教程:https://www.runoob.com/w3cnote/es6-tutorial.html
一、ECMAScript 6 简介
Es6是一套标准,一套规范,而JavaScript就是遵循了这套标准的一个实现。
官方解释:ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
1、ECMAScript 和 JavaScript 的关系
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape (网景)公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)
2、ES6 与 ECMAScript 2015 的关系
ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢?
2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。
ES6 的第一个版本,在 2015 年 6 月发布,正式名称是《ECMAScript 2015 标准》(简称 ES2015)。
2016 年 6 月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小,基本上是同一个标准。根据计划,2017 年 6 月发布 ES2017 标准。
因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。
二、基本语法
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);//Identifier 'n' has already been declared
</script>
2、const声明常量(只读变量)
<script>
//1、声明之后不允许改变
const PI = "3.1415926";
PI=3
console.log(PI); //Uncaught TypeError: Assignment to constant variable.
//2、一旦声明必须初始化,否则会报错
const MY_AGE //Missing initializer in const declaration
</script>
3、结构赋值
结构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
3.1、数组结构
<script>
//传统写法
let a = 1,b = 2,c = 3
console.log(a,b,c)
//es6写法
let [x,y,z] = [10,20,30]
console.log(x,y,z)
</script>
3.2、对象结构
<script>
//定义对象
let user = {"name":"user","age":20}
//传统从对象里面获值
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 str1 = `Hello,
es6 demp example!`
// console.log(str1)
//2 在`符号里面使用表达式获取变量值
let name = "Mike"
let age =20
let str2 = `hell ,${name},age is ${age+1}`
// console.log(str2)
//3在`符号调用方法
function f(){
return "Hello f"
}
let str3 = `demo,${f()}`
console.log(str3)
</script>
控制台输出:
5、声明对象
<script>
const name = "lucy"
const age = 12
//传统方式定义对象
const p1 = {name:name,age:age}
//console.log(p1)
//es6定义变量
const p2 = {name,age}
console.log(p2)
</script>
上述两种方式都可以实现输出:
6、定义方法简写
<script>
//传统方法
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
//person1.sayHi();//Hi
//es6
const person2 = {
sayHello(){
console.log("hello")
}
}
person2.sayHello();
</script>
7、对象拓展运算符
拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
<script>
//1、拷贝对象
let person1 = {name:"Amy",age:15}
let someone = {...person1}
//console.log(someone)
//合并对象
let age = {age:15}
let name = {name:"Tom"}
let person2 = {...age,...name}
console.log(person2)
</script>
8、箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体
<script>
//1、传统方式创建方法
var f1 = function(a){
return a
}
//console.log(f1(1))
//es6写法
var f2 = a =>a
//console.log(f2(2))
// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
//2、复杂一点方法
var f3 = function(a,b){
return a+b
}
//console.log(f3(1,2))
// 前面代码相当于:
var f4 = (a,b) => a+b
console.log(f4(2,2))
</script>