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 模塊
后期補