ES6+ 特性,箭头函数、解构赋值、模块导入

简介: ES6+ 特性,箭头函数、解构赋值、模块导入
  1. 箭头函数(Arrow Functions)
    箭头函数是 ES6 引入的一种简洁的函数定义方式。它的语法更简洁,并且不会绑定自己的 this 值。箭头函数通常用于简化函数表达式。

基本语法:

const add = (a, b) => a + b;
1
特点:

简洁:省略了 function 关键字、花括号和 return 关键字(如果函数体只有一行代码)。
没有自己的 this:箭头函数会继承外部函数的 this,而不是创建自己的 this。这在处理回调函数时非常有用。
示例:

// 普通函数
function sayHello(name) {
return Hello, ${name};
}

// 箭头函数
const sayHello = name => Hello, ${name};

// 不需要参数的箭头函数
const getRandomNumber = () => Math.random();
1
2
3
4
5
6
7
8
9
10

  1. 解构赋值(Destructuring Assignment)
    解构赋值是一种从数组或对象中提取值的语法,使得赋值操作更加简洁和易读。

数组解构:

const numbers = [1, 2, 3, 4];
const [a, b, c] = numbers;
console.log(a); // 1
console.log(b); // 2
1
2
3
4
对象解构:

const person = {
name: 'John',
age: 30,
city: 'New York'
};
const { name, age } = person;
console.log(name); // John
console.log(age); // 30
1
2
3
4
5
6
7
8
默认值:

const [a, b = 2] = [1];
console.log(b); // 2

const { x = 10 } = {};
console.log(x); // 10
1
2
3
4
5
嵌套解构:

const person = {
name: 'Jane',
address: {
city: 'London',
postcode: 'SW1A 1AA'
}
};
const { name, address: { city } } = person;
console.log(name); // Jane
console.log(city); // London
1
2
3
4
5
6
7
8
9
10

  1. 模块导入(Modules)
    ES6 引入了模块化语法,使得代码可以被分割成多个模块,每个模块都有自己的作用域,支持导入和导出功能。

导出:

命名导出:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
1
2
3
默认导出:

// utils.js
const multiply = (a, b) => a * b;
export default multiply;
1
2
3
导入:

导入命名导出:

// main.js
import { add, subtract } from './utils.js';
console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3
1
2
3
4
导入默认导出:

// main.js
import multiply from './utils.js';
console.log(multiply(2, 3)); // 6
1
2
3
别名导入:

// main.js
import { add as addition, subtract as subtraction } from './utils.js';
console.log(addition(2, 3)); // 5
console.log(subtraction(5, 2)); // 3
1
2
3
4
动态导入(异步加载模块):

// main.js
async function loadModule() {
const module = await import('./utils.js');
console.log(module.add(2, 3)); // 5
}

loadModule();
1
2
3
4
5
6
7
这些 ES6+ 特性在编写现代 JavaScript 应用程序时非常有用,可以帮助你编写更简洁、易维护的代码。

相关文章
|
存储 安全 API
阿里云oss存储简介和如何使用
阿里云OSS存储服务是一种安全、稳定、高效的云存储服务,适用于各种规模的应用和业务场景。它具备出色的持久性和可用性,可以为用户提供高可靠、低成本的存储解决方案。阿里云OSS存储具有广泛的应用场景
4512 0
echarts修改tooltip默认样式(使用formatter函数拼接加工)
echarts修改tooltip默认样式(使用formatter函数拼接加工)
950 0
|
存储 JSON NoSQL
『MongoDB』MongoDB的数据存储格式Bson比Json有哪些优势?
📣读完这篇文章里你能收获到 - MongoDB存储数据格式BSON介绍 - 使用Bson格式的三大优势
1087 1
『MongoDB』MongoDB的数据存储格式Bson比Json有哪些优势?
|
前端开发 Go C++
CSS命名规则规范整理
大家在写css的时候,经常会遇到关于命名的问题。页面上成百甚至上千的class或者id,我们就会越来越感到困扰。 所以,这样我们就很有必要整理自己的一套命名规范。
9804 0
CSS命名规则规范整理
|
8月前
|
机器学习/深度学习 算法 自动驾驶
《从GRPO看强化学习样本效率的飞跃!》
在强化学习领域,样本效率一直是亟待解决的难题。传统算法如Q学习需海量样本才能让智能体学会有效行为模式,尤其在复杂环境中,这成为应用瓶颈。群组相对策略优化(GRPO)应运而生,通过生成动作序列并进行相对评估,摒弃了价值网络,显著提升了样本利用率和计算效率。GRPO在实际应用中展现了巨大优势,如DeepSeek团队利用其大幅减少了训练样本和成本,提高了模型性能。这一创新为资源受限场景及更多领域的强化学习应用打开了新大门。
657 0
《从GRPO看强化学习样本效率的飞跃!》
|
缓存 监控 JavaScript
Node.js中基于node-schedule实现定时任务之详解
Node.js中基于node-schedule实现定时任务之详解
716 0
|
存储 Kubernetes 负载均衡
在K8S中,kube-proxy ipvs 和 iptables 有何异同?
在K8S中,kube-proxy ipvs 和 iptables 有何异同?
|
小程序
微信小程序扫描二维码如何跳转小程序内指定页面并传递参数给目标页面?
微信小程序扫描二维码如何跳转小程序内指定页面并传递参数给目标页面?
微信小程序扫描二维码如何跳转小程序内指定页面并传递参数给目标页面?
|
JSON 网络协议 开发工具
基于Qt实现的TCP端口数据转发服务器
基于Qt实现的TCP端口数据转发服务器
219 0
基于Qt实现的TCP端口数据转发服务器
|
前端开发 JavaScript
umi 中useSearchParams 的使用样例
在umi中,`useSearchParams`是一个React Hook,用于获取和操作URL查询参数。以下是一个使用`useSearchParams`的样例: 首先,确保你已经安装了umi和react-router-dom。 1. 在页面组件中使用`useSearchParams`来获取和操作URL查询参数: ```javascript import { useSearchParams } from 'umi'; export default function SearchPage() { const [searchParams, setSearchParams] = useSea
1516 2