ECMAScript 6
1. 简介
我们之前学习的js 其实是 ecmascript 5.0 简称 es5
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。
2. 基本语法
ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
1）let声明变量 （常用）
var 声明的变量没有局部作用域
let 声明的变量 有局部作用域
var 可以声明多次
let 只能声明一次
var 会变量提升
let 不存在变量提升
// var 声明的变量没有局部作用域 // let 声明的变量 有局部作用域 { var a = 0 let b = 1 } console.log(a) // 0 console.log(b) // ReferenceError: b is not defined // 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 // var 会变量提升 // let 不存在变量提升 console.log(x) //undefined var x = "apple" console.log(y) //ReferenceError: y is not defined let y = "banana"
2）const声明常量
// 1、声明之后不允许改变 const PI = "3.1415926" PI = 3 // TypeError: Assignment to constant variable. // 2、一但声明必须初始化，否则会报错 const MY_AGE // SyntaxError: Missing initializer in const declaration
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>解构赋值</title> <script> // let arr = ["a","b","c"]; //把数组中的所有元素分别赋值给不同的变量 //之前的写法 // let a = arr[0]; // let b = arr[1]; // let c = arr[2]; //使用es6 数组解构 // let [a,b,c] = arr; // console.log(a,b,c); let person = {"name":"张四","age":10,"gender":"男"}; //之前的写法 // let name = person.name; // let age = person.age; // let gender = person.gender; let {name,age,gender} = person; // 要求： 变量名需要和对象的属性一致 console.log(name,age,gender); </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>模板字符串</title> <script> // let name = '张小包'; // let age = 20; // let gender = "男"; // //以前的写法 // console.log("我的名字叫"+name+"，今天"+age+"岁,我是"+gender+"生"); // //es6 模板字符串 反引号 ` // console.log(`我的名字叫${name},今天${age}岁,我是${gender}生`); // let str = "今天星期四，"+ // "明天就是星期五了，然后"+ // "又要周考了"; let str = `今天星期四， 明天星期五， 后天星期六，没有作业，贼爽`; console.log(str); </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>声明对象</title> <script> //声明对象 let name = '小宝'; let age = 1; //let person = {"name":name,"age":age}; let person = {name,age}; //以变量名作为对象的属性名 console.log(person); </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>声明方法</title> <script> // let name = "外面的"; // let age = 100; // let person = { // "name":"张三", // "age":20, // show:function(){ // //打印当前对象的name 和 age // console.log(this.name,this.age); // console.log(name,age); // } // }; // person.show(); let person = { "name":"张三", "age": 10, show(){ console.log(this.name,this.age); } } person.show(); </script> </head> <body> </body> </html>
7）对象拓展运算符(常用)
拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// 1、拷贝对象 let person1 = {name: "Amy", age: 15} let someone = { ...person1 } console.log(someone) //{name: "Amy", age: 15} // 2、合并对象 let age = {age: 15} let name = {name: "Amy"} let person2 = {...age, ...name} console.log(person2) //{age: 15, name: "Amy"}
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>默认参数</title> <script> function show(a,b=18){ console.log(a,b); } //show(1,2); 1 2 //show(1); 1 18 //show(1,""); 1 //show(1,null); 1 null //show(1,undefined); 1 18 </script> </head> <body> </body> </html>
9）不定参数(常用)
不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。
<!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>不定参数</title> <script> function show(...a){ console.log(a); } //调用方法 show(); show("张三"); show("张三","李四"); show("张三","李四",123); </script> </head> <body> </body> </html>
10）箭头函数(慢慢习惯)
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
<!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>箭头函数</title> <script> // function show(){ // } // let show = function(){ // console.log("展示数据"); // } // let fun1 = function(a){ // return a; // } // let fun1 = (a)=>a; // console.log(fun1(10)); // let fun2 = function(a){ // return a+101; // } // let fun2 =(a)=> a+101; // console.log(fun2(1)); // let fun3 = function(a,b){ // return a+b; // } // let fun3 = (a,b)=> a+b; // console.log(fun3(10,20)); // let fun4 = function (){ // let a = 20; // console.log(a); // } // let fun4 = ()=>{ // let a = 20; // console.log(a); // }; // fun4(); //定时器 // setInterval(function(){ // console.log(new Date().toLocaleString()); // },1000); setInterval(() => { console.log(new Date().toLocaleString()); }, 1000); </script> </head> <body> </body> </html>