vue学习（一）ES6常用语法
1 ES6常用语法
1.1 变量提升
例①
# 变量提升
<div id="app">
</div>
<script>
console.log(age); # undefined
var age = 18;
console.log(age) # 18
</script>
例②
# 变量提升
<div id="app">
</div>
<script>
function aa() {
console.log(xiaoqiang) # undefined
if (1){
var xiaoqiang = 'qiang';
console.log(xiaoqiang) # qiang
}
}
aa()
</script>
例③
# 例②的引申 let
<body>
<div id="app">
</div>
<script>
function aa() {
// console.log(xiaoqiang); # 报错
if (1){
let xiaoqiang = 'qiang'; # let 块级作用域
console.log(xiaoqiang) # qiang
}
}
aa()
</script>
</body>
例④
<body>
<div id="app">
</div>
<script>
const s12 = 'high';
console.log(s12) # high
-------------------------------
const s12 = 'high';
const s12 = 'high1';
console.log(s12) # 报错
</script>
</body>
# const 定义一个不变的变量
1.2 模板字符串
<body>
<div id="app">
</div>
<script>
# 反引号与一般引号的区别
var ele = document.getElementById('app');
-------------------------------------
ele.innerHTML = '<ul>' +
'<li>1</li>' +
'<li>2</li>' +
'<li>3</li>' +
'</ul>';
-------------------------------------
ele.innerHTML = `
<ul>
<li>1</li>
<li>2</li> # 形式一
<li>3</li>
</ul>`
-------------------------------------
var xiao = 'qiang';
var age = 18;
var hobby = 'learn';
ele.innerHTML = `
<ul>
<li>${xiao}</li>
<li>${age}</li> # # 形式二
<li>${hobby}</li>
</ul>`
</script>
</body>
1.3 数据的解构
<script>
# 对象
let obj = {
name : 'xiaoqiang',
age:18
};
# 类似于python的**打散
let {name,age}=obj; # 要用一个对象{}来接收
console.log(name);
console.log(age)
</script>
<script>
# 数组
let arry = ['s','12'];
let [a,b] = arry;
console.log(a);
console.log(b)
</script>
1.4 箭头函数
* 1
<script>
let jiantou = x => x+1;
console.log(jiantou(5)) # 6
// 省略了function关键字
// 省略了return返回值
</script>
* 2
<script>
function aa() {
console.log(this) # this的用法
# 打印出的是window
}
aa()
</script>
# 函数的调用的全局的 window调用
* 3
<script>
function aa() {
console.log(this) # {name: "xiaoqiang", aa: ƒ}
}
aa();
let obj = {
name : 'xiaoqiang',
aa:aa
};
obj.aa()
</script>
* 4
<script>
function aa() {
console.log(this) ###
}
aa();
let obj = {
name : 'xiaoqiang',
aa:aa
};
let obj2 = {
name: 'xiaoxiaoqiang',
obj:obj
};
obj.aa();
obj2.obj.aa()
</script>
# this 取决于函数最近的调用者
1.5 类
* 1 单纯的类
<script>
# 定义类要是class，一定要加constructor
class Student{
constructor(){
this.name = 'xiaoqiang';
}
says(say){
console.log(this.name + 'says'+ say)
}
}
// 实例化 要加 new；调用
let xiaoxiao = new Student();
xiaoxiao.says('I love China')
</script>
* 2 类的继承
<script>
----------------------------------------
class Student{
constructor(){
this.name = 'xiaoqiang';
}
says(say){
console.log(this.name + 'says'+ say)
}
}
// 实例化 要加 new；调用
let xiaoxiao = new Student();
xiaoxiao.says('I love China')
----------------------------------------
## ↓ 继承 constructor会报错，要加super
class Stu extends Student{
constructor(){
super();
this.name = 'ganggang'
}
}
let gang = new Stu()
gang.says('Me too')
</script>
1.6 模块
后期补
