擷取資料: 解構指派
解構指派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解構指派</title>
<script>
// 對象解構指派, 符号{}
{
let zhao = {name : "zhaozhao", age: 10};
// 傳統擷取值的方式(鍵為字元串格式)
console.log("name:", zhao["name"], "age:", zhao["age"]);
// 解構指派的方式(會自動比對相應的鍵, 如果解構了不存在的鍵,則值為undefined)
let {age, name, hobby} = zhao;
console.log("name:", name, "age:", age, "hobby:", hobby);
}
// 數組解構指派, 符号[]
{
let zhao = [123, "Mac", "iPhone", 345]
let [zhao1, zhao2, zhao3, zhao4] = zhao;
console.log("數組解構指派結果:", zhao1, zhao2, zhao3, zhao4);
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
填充資料: 模闆文法 (多行字元串)
模闆文法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6新模闆文法</title>
<script>
window.onload = function(){
var el = document.getElementById("app");
{
let age = 5;
let name = 'YY';
let oldHtml = "<p>"+"age = "+age;
oldHtml = oldHtml + " name = "+name;
oldHtml = oldHtml + "</p>";
el.innerHTML = oldHtml;
}
{
let age = 13;
let name = "zhaozhao";
// 新的模闆文法${}需要配合``使用,并且支援換行
let newHtml = `<p>
age = ${age}
name = ${name}
</p>`;
let tmpHtml = el.innerHTML;
// 注意innerHTML的寫法
el.innerHTML = tmpHtml + newHtml;
}
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
規範資料域 :let/const, 塊級作用域
let隻在塊級作用域内有效
let不允許重複聲明
let聲明的變量不可重複指派
設定預設資料: 設定函數預設參數值
設定預設參數值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6常用文法: 函數預設參數</title>
<script>
function DiyConsoleLog(name="zhao", age=15){
console.log("姓名:", name, "年齡:", age)
}
// 無參數調用
console.log("無參數調用:")
DiyConsoleLog()
// 隻傳一個參數
console.log("隻傳一個參數:")
DiyConsoleLog("YY")
// 傳兩個參數
console.log("傳兩個參數(正常調用):")
DiyConsoleLog("YY", 12)
</script>
</head>
<body>
</body>
</html>
規範資料流向: 優雅的箭頭函數(填坑this指向Window問題)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6之箭頭函數</title>
<script>
window.onload = function(){
// 箭頭函數的用法
{
let NewArray = [1, 4];
// 普通函數
NewArray.map(function addOne(item){
result = item + 1
console.log("普通函數:",this,"==>",result)
});
// 箭頭函數
NewArray.map((item)=>{
result = item + 1
console.log("箭頭函數",this,"==>",result)
});
}
console.log("箭頭函數與普通函數的差別: ")
// 箭頭函數的優勢
{
function wrapperfn (){
// 普通函數
this.map(function addOne(item){
result = item + 1
console.log("普通函數:",this,"==>",result)
});
// 箭頭函數
this.map((item)=>{
result = item + 1
console.log("箭頭函數",this,"==>",result)
});
}
let NewArray = [12, 34];
wrapperfn.call(NewArray);
}
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
ES6文法相容低版本浏覽器(将ES6文法裝換到ES5文法):
轉換示意圖
使用Babel:
Babel
Babel相當于一個翻譯, 可以将ES6的文法,裝換為ES5的文法
Babel的安裝
為了友善安裝以及後續的管理, 我們使用npm管理工具, 安裝babel
- 建立一個目錄, babel-test
-
npm init
package.json
- 安裝Babel相關的包
安裝es2015轉碼規則
npm install --save-dev babel-preset-es2015
`
安裝react轉碼規則
npm install --save-dev babel-preset-react
安裝es7提案轉碼規則
npm install --save-dev babel-preset-stage-3
Babel的配置
在babel-test下建立配置檔案 .babelrc
.babelrc
.babelrc
.babelrc
{
"presets": [
"es2015",
"react",
"stage-3"
],
"plugins":[]
}
Babel的使用
- 為了便于項目管理,我們把babel的工具
babel-cli
npm install --save-dev babel-cli
- 在package.json 中配置運作指令
build
"build": "babel js -d lib"
build轉碼
- 在根目錄下建立js檔案夾, 并建立兩個es6文法的js檔案, 使用
npm run build
轉換
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)