2024-11-03 23:01阅读: 5评论: 0推荐: 0

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)

上一篇JS-数组、函数、类与对象

下一篇JS-DOM与BOM

本文作者：Khru

本文链接：https://www.cnblogs.com/khrushchefox/p/18524166

posted @ 2024-11-03 23:01 Khru 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

JS-ES6标准

JS-ES6标准

箭头函数

解构赋值

数组解构

对象解构

promise对象

属性

方法

async...await

ES Module

导出

导入

默认导入导出

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	// 基本形式
	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 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 obj = {
	name: 'xiaoming',
	gf: {
	name: 'xiaomei',
	},
	}

	const {
	name,
	gf: { name: gfName },
	} = obj
	console.log(name, gfName) // xiaoming xiaomei

	// 创建一个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)

	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: 写在函数的前面
	// 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()

	<!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 const str = 'str'

	// 导出函数
	export function foo() {
	console.log('foo')
	}

	// 导出类
	export class Person {
	constructor(n) {
	this.name = n
	}
	}

	// 一个模块只能有一个默认导出
	export default function () {
	console.log('hello')
	}

	// 不写括号: 表示导入另一个模块中默认导出的内容
	import fn from './02-默认导出.js'
	console.log(fn)