ES6-简介、语法
ES6
ES6简介
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
1.优点
- 提升JS编写大型的复杂应用程序的能力（这次升级加入了模块化的概念、细化和优化语法、封装了一些方法）。
2.不足
- 对浏览器存在兼容性问题，可以使用Bable：ES6->ES5（转换器）
ES6语法
1.let声明变量
- let申明的变量是有局部作用域
- let声明的变量不能跟已有变量重名
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
{
//let申明的变量是有局部作用域
let a = 1;
//console.log(a);
}
//let声明的变量不能跟现有变量重名
let b = true;
//let b = false;
console.log(b);
script>
head>
<body>
body>
html>
2.const声明常量
- 常量必须初始化
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
const PI = 3.14;
//PI = 3.1415; //Assignment to constant variable
//常量必须初始化
const A = 1;
script>
head>
<body>
body>
html>
3.解构赋值
解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
//数组的解构
let a = 1,b = true,c = "abc";
let [x,y,z] = [2,false,"bcd"];
let res = a + x;
console.log(x,y,z);
//对象的解构
let sid = 1,sname = "mary";
let student1 = {"sid":sid,"sname":sname};
console.log(student1);
let student2 = {sid,sname};
console.log(student2);
let teacher = {"tid":1,"tname":"张雪峰"};
// let id = teacher.tid;
// let name = teacher.tname;
//变量名必须与属性名一致
let {tname,tid} = teacher;
console.log(tname,tid);
script>
head>
<body>
body>
html>
4.模板字符串
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
- 定义多行字符串
- 引用变量
- 调用函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
//使用模板字符串定义多行字符串
let str1 = `hello
world`;
console.log(str1);
//模板字符串引用变量
let name = "mary";
let str2 = `hello ${name}`;
console.log(str2);
//模板字符串调用函数
function show() {
return "tom";
}
let str3 = `hello ${show()}`;
console.log(str3);
script>
head>
<body>
body>
html>
5.定义方法简写
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
let student1 = {
sid:1,
sname:"mary",
sleep:function(){
console.log("睡觉");
},
eat:function(){
console.log("吃饭");
}
};
student1.sleep();
let student2 = {
sid:1,
sname:"tom",
sleep(){
console.log("睡觉");
},
eat(){
console.log("吃饭");
}
};
student2.eat();
script>
head>
<body>
body>
html>
6.对象拓展运算符
- 拓展运算符：（…），用于取出参数对象所有可遍历属性然后拷贝到当前对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
let teacher1 = {"tid":1,"tname":"张雪峰"};
let teacher2 = {...teacher1};
console.log(teacher2);
let stu1 = {"sid":1},stu2 = {"sname":"mary"},stu3 = {"sage":18};
let student = {...stu1,...stu2,...stu3};
console.log(student);
script>
head>
<body>
body>
html>
7.函数的默认参数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function show(a,b=10){
let res = a + b;
console.log(res);
}
show(1,2);
show(1);
script>
head>
<body>
body>
html>
8.不定参数
不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function show(a,...b){
console.log(b.length);
}
show(1);
show(2,true);
show(3,4.2,"abc",true);
script>
head>
<body>
body>
html>
9.箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
- 无参的箭头函数必须在参数的地方写()
- 一个参数的箭头，例：res = >
- 有多个参数的箭头函数必须在参数的地方写()
- 函数体有多行语句时需要将{}写出来
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function show(a) {
return a;
}
//console.log(show(1));
//箭头函数
let showAgain = b => b;
//console.log(showAgain(2));
function f1() {
console.log("Hello World");
}
f1();
//无参的箭头函数必须在参数的地方写()
let f2 = () => console.log("Hello World");
f2();
function f3(a,b) {
var res = a + b;
return res;
}
console.log(f3(3,4));
//有多个参数的箭头函数必须在参数的地方写()
//函数体有多行语句时需要将{}写出来
let f4 = (x,y) => {
var res = x + y;
return res;
}
console.log(f4(3,4));
script>
head>
<body>
body>
html>