第79篇 Vue第一篇 ES6的常用语法
Posted cavalier-chen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第79篇 Vue第一篇 ES6的常用语法相关的知识，希望对你有一定的参考价值。
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
以上是关于第79篇 Vue第一篇 ES6的常用语法的主要内容，如果未能解决你的问题，请参考以下文章