es6常用语法
变量的定义：
<!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="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<script>
/*
变量提升
var username;
console.log(username);
var username = "xiaofeng";
console.log(username);
let username = "Peiqi";
*/
// var定义的变量：只有全局作用域和函数作用域
// let定义的变量：有全局作用域和函数作用域,块级作用域{}
/*
if (true){
var username = "zhaozhenyu";
let age = 22;
}
console.log(username);
console.log(age);
*/
//let定义的变量不能重复定义：
/*
var username = "zhaozhenyu";
var username = "zhouxiang";
console.log(username);
let username = "xiedalei";
console.log(username);
*/
console.log(PI);
const PI = 3.1415;
</script>
</body>
</html>
模板字符串：
<!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="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById("app");
// oDiv.innerHTML = "<h1>Hello Vue" +
// "<h2>Hello Vue</h2>" +
// "</h1>";
let username1 = "maweihua";
let username2 = "yangzhiyong";
// 用反引号进行字符串的拼接：
// 用${}来存储变量：
oDiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h2>Hello ${username2}</h2>
`
</script>
</body>
</html>
解构和赋值：
<!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="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<div id="app"></div>
<script>
/*
let ary = [1,2,3];
let [a,b,c] = ary;
console.log(a,b,c);
let obj = {
username:"liyasong",
age:23,
};
let { username: user, age:age} = obj;
console.log(user,age);
*/
let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b);
</script>
</body>
</html>
函数的扩展：
<!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="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 默认值参数：
/*
function foo(x,y) {
number = y || 10;
return number;
}
ret = foo(1,2);
console.log(ret);
*/
// 箭头函数：
// 一个参数：
// let foo = v => v;
// ret1 = foo(10);
// console.log(ret1);
// 0个或者多个参数：
// let bar = (x,y) => {return x + y;};
// ret2 = bar(1,2);
// console.log(ret2);
// 普通函数的this指向调用者的作用域：
function foo() {
console.log(this);
};
// 箭头函数的this指向定义时的作用域：
let bar = () => console.log(this);
let obj = {
foo:foo,
bar:bar,
};
foo();
obj.foo();
obj.bar();
</script>
</body>
</html>
类：
<!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="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<div id="app"></div>
<script>
/*
ES5中实例化对象的方式：
function Person() {
this.username = "guyahui";
this.age = 20;
};
Person.prototype.showInfo = function () {
console.log(this.username);
};
let guyahui = new Person();
*/
// class关键字定义一个类：
// 必须要有constructor构造方法、constructor可以传送空的
// 必须使用new来实例化，否则报错：
/*
class Person{
constructor (username,age){
this.username = username;
this.age = age;
};
showInfo() {
console.log(this.username,this.age);
}
}
let guyahui = new Person("guyahui",18);
guyahui.showInfo();
*/
class Wangjianwei{
constructor(username,age,account=10000){
this.username = username;
this.age = age;
this.account = account;
}
showInfo(){
console.log(this.username,this.age,this.account);
}
}
class Peiqi extends Wangjianwei{
constructor(username,age){
super();
this.username = username;
this.age = age;
}
}
let peiqi = new Peiqi("peiqi",73);
peiqi.showInfo();
</script>
</body>
</html>
对象的单体模式：
<!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="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let obj = {
name:"juyingying",
foo(){
console.log(this.name);
}
};
obj.foo();
</script>
</body>
</html>
