ES6基础
变量声明
可以完全取代var声明
- 避免重复声明
- 块级作用域
let
const
- 常量
- 防止修改
模板字符串
反单引号,(数字1左边)
let s = 'test';
let str = `你可以
自由
的换行
还可以是一个变量${s}`;
解构赋值
- 两边的结构必须一样
- 右边必须是一个合法的
- 赋值和解构同时完成
let json = {a:11, b:22};
let {a, b} = json;
// a=11, b=22
箭头函数
箭头函数的特性是非常有用的，可以固定this指向当前环境，它的写法也比较简洁
可以简写的情况：
- 有且仅有一个参数，()可以不写
item=>item+5
- 有且仅有一个语句并且是return,{}也可以不写
(a,b)=>a+b
- 相对完整的写法
let arr = [1,2,3];
let arr2 = arr.map(item=>{
return item+1;
});
// arr2 [2,3,4]
参数扩展(rest参数)
ES6引入rest参数（形式为...变量名），用于获取函数的多余参数
function a(val1, val2, ...values){}
数组展开
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1, ...arr2];
// arr3 = [1,2,3,4,5,6]
json展开
let json = {a:1, b:2};
let json2 = {
...json,
c: 3
}
// json2 = {a:1,b:2,c:3};
原生对象扩展
map 映射
arr.map(item=>item+1)
reduce 缩减
arr.reduce((temp, item, index)=>{
return temp + item;
})
filter 过滤
arr.filter(item=>item>2)
forEach 遍历
arr.forEach((item, index)=>{})
JSON
- JSON.stringify()
- JSON.parse()
异步操作
Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
let p = new Promise((resolve, reject)=>{})
p.then(resolve=>{}, reject=>{})
async/await
用同步的方式写代码
async function a(){
let data = await promise;
}
面向对象
class
class Person{
// 构造函数
constructor(name){
// 属性
this.name = name;
}
// 方法
say(){
console.log('my name is'+this.name);
}
}
模块
- CMD
- AMD
- 语言提供模块支持
es6模块
// 导入
import xxx from 'xxx';
// 导出
export let a = 12;
CMD模块
node使用的模块
// 导入
let a = require('./index.js')
// 导出
module.exports = {};
兼容性
目前浏览器并不兼容es6语法，需要babel编译
babel
推荐第二种，编译js
一、直接引入browser.min.js文件
<script src="browser.min.js"></script>
<script type="text/babel">js代码写在这里</script>
二、编译js文件
安装
npm i @babel/core @babel/cli @babel/preset-env -D
npm i @babel/polyfill
# 预设
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
# 命令
babel src -d dest // 编译src下的文件到dest目录
