01-变量的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var somedody;
// console.log(somebody);
// var somebody = "lingruizhi";
// 变量的提升
function func() {
// console.log(somebody);
if(1){
let somebody = "hexin";
}
}
func();
let age = 81;
age = 18;
const girl = "wangshuang";
// girl = "llal";
</script>
</body>
</html>
02- 模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>文周的爱好</h1>
</div>
<script>
// 给div添加文本
let ele = document.getElementById("app");
ele.innerText = "hello";
let hobby1 = "翻车";
let hobby2 = "背诗";
let hobby3 = "看女主播";
ele.innerHTML = `<ul>
<li>${hobby1}</li>
<li>${hobby2}</li>
<li>${hobby3}</li>
</ul>`
// ele.innerHTML = "<ul><li>"+ ""+ "</li></ul>"
</script>
</body>
</html>
03-函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 箭头函数
// this 当前函数最近的调用者
// 取决于当前的上下文环境
function aa() {
console.log(this)
}
aa();
let obj1 = {
a: 1,
func: aa
}
obj1.func();
let obj2 = {
obj1: obj1,
a: 2
}
obj2.obj1.func();
function myfunc(x) {
return x+1
}
let fun2 = x => x+1;
console.log(fun2(5))
</script>
</body>
</html>
04-数据的解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let obj = {
a: 1,
b: 2,
x: 3,
y: 4
};
let hobby = ["吹牛", "特斯拉", "三里屯"];
let {x, y} = obj;
let [hobby1, hobby2, hobby3] = hobby;
console.log(x);
console.log(y);
console.log(hobby1);
console.log(hobby2);
console.log(hobby3);
</script>
</body>
</html>
05-类的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
class Animal {
constructor(){
this.type = "animal"
};
say(){
console.log("ao~~~~")
}
};
class Dog extends Animal {
// 子类没有this
constructor(){
super()
// 用super方法拿到父类的this
this.type = "dog"
}
say(){
console.log("wang~~~~")
}
}
let dog = new Dog();
console.log(dog.type);
dog.say()
// class Animal():
// def __init__
</script>
</body>
</html>
总结：
ES6的常用语法
变量的定义
-- var 变量的提升 函数作用域以及全局作用域
-- let 块级作用域 {}
-- const 常量 不可以修改
模板字符串
语法 ``
变量 ${}
箭头函数
类比Python的匿名函数
this
-- 普通函数的this取决于函数最近的调用者
-- 箭头函数的this取决于当前上下文的环境
数据的解构
-- 解构对象 let {key， key} = obj
-- 解构数组 let [x, y, x] = array
类的定义
-- 定义类 class
-- 构造方法 constructor
-- 继承 extends
-- 子类没有this 需要用super方法来找到父类的this