JS-ES6标准
箭头函数
- 更简洁的语法：箭头函数允许你不使用
function关键字来定义函数。 - 隐式的
return：如果箭头函数的函数体只有一个表达式，那么这个表达式的值会被隐式返回，不需要return关键字。 - 不绑定自己的
this：箭头函数不会创建自己的this上下文，this值由外围最近一层非箭头函数决定。
// 基本形式
let sum = (a, b) => a + b;
// 无参数
let sayHello = () => 'Hello';
// 单参数
let triple = n => n * 3;
// 多行函数体
let add = (a, b) => {
let result = a + b;
return result;
};
// 调用
console.log(add(1, 2));
解构赋值
从数组或对象中提取数据，并将其赋值给变量。
解构赋值可以用于数组、对象、字符串，甚至用于函数参数的默认值。
数组解构
const [变量名1, 变量名2, ...] = 数组
const arr = ['red', 1, true]
// 数组的解构: 根据数组元素的顺序
const [a, b, c, d = 100] = arr
console.log(a, b, c, d)
// 展开运算符..., 剩余参数
const [red, ...res] = arr
console.log(red, res)
对象解构
const obj = {
name: 'xiaoming',
// ES6中方法的简写
sayHi() {
console.log('hi')
},
}
// 1. 根据对象的属性名解构
// 2. 不是根据对象属性的顺序
const { name, sayHi } = obj
// 给不存在的属性赋初始值
const { name = 'new', age = 20 } = obj // xiaoming 20
别名: const {属性名1:别名, 属性名2:别名} = 对象
const obj = {
name: 'xiaoming',
gf: {
name: 'xiaomei',
},
}
const {
name,
gf: { name: gfName },
} = obj
console.log(name, gfName) // xiaoming xiaomei
promise对象
属性
promise对象有两个属性
- 状态
- 结果
状态:
- pending: 准备
- fulfilled: 成功
- rejected: 失败
// 创建一个promise对象
// 1. Promise接收一个函数作为参数
// 2. promise对象(属性和方法)
// - 状态 pending, fulfilled, rejected
// - 结果
// 3. promise状态的改变是单向, 不可逆, 状态的改变是一次性
// 只能从pending => fulfilled / rejected
const p1 = new Promise((resolve, reject) => {
// 当调用resolve函数, 当前promise对象的状态从 pending => fulfilled(成功)
resolve()
// 当调用reject函数, 当前promise对象的状态从 pending => rejected(失败)
reject()
})
console.log(p1)
方法
then方法, 获取promise对象的结果catch方法, 处理失败的情况
const myPromise = new Promise((resolve, reject) => {
// 做一些异步操作，然后：
if (/* 条件成功 */) {
resolve('成功的结果值');
} else {
reject('失败的原因');
}
});
// then方法接受两个参数做为参数
// 第一个函数: 成功的回调函数, 当p1对象的状态是成功时, 会调用
// 第二个函数: 失败的回调函数, 当p1对象的状态是失败时, 会调用
// 返回一个新的promise的对象
const p1 = myPromise.then(
result => {
// 当Promise被解决（resolved）时的代码
console.log(result); // '成功的结果值'
},
err => {
console.log(err); // '失败的原因'
})
myPromise.catch(error => {
// 当Promise被拒绝（rejected）时的代码
console.error(error); // '失败的原因'
});
async...await
async关键字用于声明一个异步函数。这个函数会返回一个 Promise 对象。await关键字用于等待一个异步操作的结果。它只能在async函数内部使用。
// async: 写在函数的前面
// 1. 可以单独使用.
// 2. 将返回值包装成一个promise对象
async function foo() {
// return Promise.resolve(123)
return 123
}
console.log(foo())
// 获取123的值
foo().then((value) => {
console.log(value)
})
// await: 后面跟一个promise
// 1. 不能单独使用. 配合async使用
// 2. 表达式的值 就是 promise的结果
async function test() {
// 如果await后面不是一个promise对象, 会自动转换成promise对象
const res = await foo()
console.log(res)
}
test()
ES Module
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--
1. 在script标签中, 使用type="module", 形成了独立的模块
2. 模块之间是互相独立的. 只能使用本模块中定义的变量, 函数, 类
-->
<script type="module">
const str = 'xiaoming'
</script>
<script type="module">
console.log(str)
</script>
</body>
</html>
导出
export
- 变量
- 函数
- 类
// 导出变量
export const str = 'str'
// 导出函数
export function foo() {
console.log('foo')
}
// 导出类
export class Person {
constructor(n) {
this.name = n
}
}
导入
在一个js文件中, 通过import导入
在一个html文件中, 通过<script type="module">导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module">
// 1. 通过 export 导出
// 2. 通过 import 导入
import { str, foo, Person } from './test.js'
console.log(str)
foo()
const p = new Person('xiaoming')
console.log(p)
</script>
</body>
</html>
默认导入导出
// 一个模块只能有一个默认导出
export default function () {
console.log('hello')
}
// 不写括号: 表示导入 另一个模块中 默认导出的内容
import fn from './02-默认导出.js'
console.log(fn)