ECMAScript 6认知
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMA：国际标准组织
let，var和const命令
let： 是用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
先声明后使用，不存在变量提升，不能重复定义,但是可以修改，（let块级作用域）
var： 既可以先声明后使用，也可以先使用后声明，这样不会报错，会打印undified,
而let必须是先声明后使用，如果没有声明就会报错，为全局作用域
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"> <title>Title</title> </head> <body> <script type="text/javascript"> // <!--声明变量 一个{}为一个作用域 --> // var 既可以先声明后使用，也可以先使用后声明 全局 ---> 变量提升 { var a = 12; } // 变量提升 console.log(a); // let 块级作用域 { let b = 12; } console.log(b); // 报错 // const 只声明常量 ，一旦声明 不可改变 const c = 13; c = 14; console.log(c) // 报错 </script> </body> </html>
模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
<!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"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <ul> <li> </li> </ul> <script type="text/javascript"> // 2： 模板字符串`` , r如果你想插入变量${变量名} var name = 'study',who = 'me'; // var str = name+","+who+"学习使我快乐"; var str = `${name},${who}学习使我快乐`; console.log(str); // study,me学习使我快乐 var url = 'http://www.cnblogs.com/jassin-du/'; $('ul>li').append( `<a href=${url}></a>` ) </script> </body> </html>
箭头函数 =>
// 箭头函数 => var add2 = (a,b)=>{ console.log(a-b) }; add2(5,4); // 1 // 字面量方式声明对象 var person = { name:'lishi', age:18, fav:()=> { // 使用箭头函数会改变this的指向，指向了父级元素 console.log(this); // window console.log(this.name) // lishi } }; person.fav();
对象的单体模式
--- （解决箭头函数的指向问题）
// 4 对象的单体模式 -->解决箭头函数的指向问题 var person2 = { name: 'lishi', fav(){ console.log(this) } }; person2.fav() // 指向对象
面向对象
// 对象的三大特性 封装 继承 多态
// 函数的作用：封装一块代码，复用，作用域 解决代码的重用性 ，我们写“僵尸代码”， 代码可维护性特别差
// 继承的作用：少写 特点：子类继承父类，拥有父类的所有属性和方法，还可以有自己的属性和方法
// 多态: 代码可重性 解耦合
<!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"> <title>Title</title> </head> <body> <script type="text/javascript"> // 对象的三大特征 封装 继承 多态 /* // es5的构造对象方式 使用构造函数来创建对象 // 构造对象唯一的不同，函数名首字母大写 function Animal(name,age) { // 点语法 set语法和get语法 this.name = name; // 属性 this.age = age; // get语法 // this.name 直接console } Animal.prototype.showName = function () { console.log(this.name) }; var a = new Animal("大黄",8); console.log(a.age); // 8 a.showName(); // 大黄 */ // es6 是使用class构造函数 class Animal{ // 里面用对象的单体模式添加函数 constructor(name = "大黄",age = 8){ this.name = name; this.age = age; } showName(){ // 函数 console.log(this.age) } } var a = new Animal(); a.showName(); // 8 </script> </body> </html>