ES6常用语法糖(附Babel配置使用方法)
获取数据: 解构赋值
解构赋值
<!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, 一路回车, 会在babel-text生成配置文件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, 保存文件
{ "presets": [ "es2015",
"react",
"stage-3"
], "plugins":[]
}Babel的使用
为了便于项目管理,我们把babel的工具
babel-cli之间安装到babel-test内
npm install --save-dev babel-cli
在package.json 中配置运行命令
build(命令作用为: 把根目录下的js文件夹内所有es6语法的js文件, 在保持原文件名的基础上, 转码输出到lib文件夹)
"build": "babel js -d lib"
build转码
在根目录下新建js文件夹, 并新建两个es6语法的js文件, 使用
npm run build转换, 查看结果
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦