碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（es6語法補充）
1、var和let的區別、const常量
es5和es6中var和let的區別：
es5中的var是沒有塊級作用域的，es6中的let是具有塊級作用域的
const的含義與使用：
const修飾常量，表示不可被修改，只在初始化時進行一次賦值，const必須在定義時進行初始化
const修飾的對象不能改變，但是對象內部的屬性可以被改變，學過java的都知道
在es6中，優先使用const，只有在需要改變某一個標識符的時候才用let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6塊作用域let和var</title>
</head>
<body>
<div id="app">
<button>點擊一下0</button>
<button>點擊一下1</button>
<button>點擊一下2</button>
<button>點擊一下3</button>
<button>點擊一下4</button>
<br>
<a href="#">點擊一下0</a>
<a href="#">點擊一下1</a>
<a href="#">點擊一下2</a>
<a href="#">點擊一下3</a>
<a href="#">點擊一下4</a>
<br>
<span style="cursor:pointer">點擊一下0</span>
<span style="cursor:pointer">點擊一下1</span>
<span style="cursor:pointer">點擊一下2</span>
<span style="cursor:pointer">點擊一下3</span>
<span style="cursor:pointer">點擊一下4</span>
</div>
<script src="../js/vue.js"></script>
<script>
/*
■es5和es6中var和let的區別：
es5中的var是沒有塊級作用域的，es6中的let是具有塊級作用域的
■const的含義與使用：
const修飾常量，表示不可被修改，只在初始化時進行一次賦值，const必須在定義時進行初始化
const修飾的對象不能改變，但是對象內部的屬性可以被改變，學過java的都知道
在es6中，優先使用const，只有在需要改變某一個標識符的時候才用let
*/
//這段代碼就是var指明的變量沒有作用域的體現，按理說time在if的外部是不可以打印和不可以修改，但是這裏卻可以修改和打印，這就是沒有作用域的體現
//學過java等其他編程語言的就應該知道這會造成代碼污染，出現不可預測的風險
if (true) {
var time = "2017"
}
console.log(time)
{
time = "2018"
}
console.log(time)
//此段代碼會引起什麼問題呢，當你點擊以上任何按鈕時都只會打印 "第5個按鈕被點擊"，
//爲什麼會造成這種情況呢，var聲明的變量是在for是沒有作用域的，也就是說這個i這個變量並不是只作用於for循環當中，
//那麼循環執行的時候，i這個變量就會被更改，那麼最後點擊事件回調的時候就會出現i已經變成5了，所以所有的按鈕點擊回調console.log
//打印就會打印i的最終值，一般其他編程語言，都是在for循環這種局部作用時，相當於每次都在for內部定義一個i，每個i都是不同的值，
//而局部的變量因爲作用域的原因不會對其他的相同局部變量造成影響，而這裏var因爲因爲沒有作用域，參考上賣弄上面的代碼，外部或者其他代碼塊依然會
//更改之前局部變量的值，所以這裏執行到最後，這個i值就被改爲了5
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
console.log("var第" + i + "個按鈕被點擊");
})
}
//這種閉包的方式可以解決問題，因爲函數是一個作用域
var aHs = document.getElementsByTagName("a");
for (var i = 0; i < aHs.length; i++) {
(function (number) {
aHs[i].addEventListener("click", function () {
console.log("var閉包第" + number + "個按鈕被點擊");
})
})(i)
}
//let聲明的變量是有作用域的，可以解決var遇到的問題，所以這裏打印會按照點擊按鈕的編號打印符合預期的結果
const spanElements = document.getElementsByTagName("span");
for (let i = 0; i < spanElements.length; i++) {
spanElements[i].addEventListener("click", function () {
console.log("let第" + i + "個按鈕被點擊");
})
}
</script>
</body>
</html>
效果
第一個使用var的點擊任何一個都是5，循環到最後的值
第二個閉包後正常
第三個使用let正常
2、對象增強寫法
所謂增強寫法就是將 屬性:屬性值 、 方法名:funtion方法實現 這種寫法進行了簡寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6對象增強寫法</title>
</head>
<body>
<script>
const name = "小張"
const age = 18
const height = 160
//■es5的寫法
const obj = {
name: name,
age: age,
height: height
}
//■es6的寫法，會按照相同名稱變量名自動進行賦值
const obj1 = {
name,
age,
height
}
//■es5的寫法
const obj2 = {
run: function () {
},
eat: function () {
}
}
//■es6的寫法
const obj2 = {
run() {
},
eat() {
}
}
</script>
</body>
</html>
3、高階函數中的filter、map、reduce
■filter方法，filter會遍歷numbers，每次傳入遍歷的當前值，回調函數返回是boolean值，返回true的話，會將value裝進返回的數組中，返回false則不會將值裝入返回數組
■map方法，循環遍歷數組，每次會將返回的值裝入接收的數組中
■reduce方法,遍歷數組，每次向回調函數中，傳入前一次回調返回值和當前遍歷值，最後方法返回最後一次回調函數返回的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter和map和reduce高階函數</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const numbers = [10, 20, 30, 40, 50, 111, 222, 40, 50]
//
//■filter方法，filter會遍歷numbers，每次傳入遍歷的當前值，回調函數返回是boolean值，返回true的話，會將value裝進返回的數組中，返回false則不會將值裝入返回數組
let low100Numbers = numbers.filter(function (value) {
return value < 100;
})
//■map方法，循環遍歷數組，每次會將返回的值裝入接收的數組中
let low100Numbers2 = low100Numbers.map(function (number) {
return number * 2
})
//■reduce方法,遍歷數組，每次向回調函數中，傳入前一次回調返回值和當前遍歷值，最後方法返回最後一次回調函數返回的值
//傳入0是初始化的意思，也就是第一次previousValue = 0，currentValue等於當前循環的值
let total = low100Numbers2.reduce(function (previousValue, currentValue) {
return previousValue + currentValue
}, 0)
// 上面的三個可以簡寫爲函數鏈式寫法
let total = numbers.filter(function (value) {
return value < 100;
}).map(function (number) {
return number * 2
}).reduce(function (previousValue, currentValue) {
return previousValue + currentValue
}, 0)
// 上面的三個可以簡寫爲箭頭函數鏈式寫法
let total = numbers.filter(value => {
return value < 100;
}).map(number => {
return number * 2
}).reduce((previousValue, currentValue) => {
return previousValue + currentValue
}, 0)
// 這種簡寫的寫法就是函數式編程的優勢
</script>
</body>
</html>