当前位置: 首页 > article >正文

【es6复习笔记】Spread 扩展运算符(8)

在现代前端开发中,JavaScript 的扩展运算符(Spread Operator)是一个非常有用的特性,它允许你将数组或对象展开,以便在函数调用、数组拼接、对象复制等场景中更方便地处理数据。扩展运算符(spread)也是三个点(…)。它可以将一个数组或对象转换成用逗号分隔的参数序列,用于解包。

一、扩展运算符的基本用法

1. 数组的合并

扩展运算符可以用来合并多个数组,它会将数组中的元素展开,然后拼接在一起。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1,...arr2];
console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]
2. 数组的克隆

扩展运算符可以用来克隆一个数组,它会创建一个新的数组,并将原数组的元素复制到新数组中。

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // 输出: [1, 2, 3]
3. 将伪数组转为真正的数组

在 JavaScript 中,document.querySelectorAll 等方法返回的是一个类数组对象(NodeList),而不是真正的数组。使用扩展运算符可以将这些伪数组转换为真正的数组,以便使用数组的方法。

const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // 输出: 包含所有 div 元素的数组
4.数组解包
let tfboys = ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'];
function fn() {
    console.log(arguments);
}
fn(...tfboys); // 输出: ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子']
5.对象解包
let skillOne = { q: '致命打击' };
let skillTwo = { w: '勇气' };
let skillThree = { e: '审判' };
let skillFour = { r: '德玛西亚正义' };
let gailun = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };
console.log(gailun); // 输出: { q: '致命打击', w: '勇气', e: '审判', r: '德玛西亚正义' }

二、扩展运算符的高级用法

1. 函数参数的展开

扩展运算符可以用来展开数组,并将其作为函数的参数传递。

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出: 6
2. 对象的合并

扩展运算符也可以用来合并对象,它会将对象的属性展开,并合并到一个新的对象中。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = {...obj1,...obj2 };
console.log(obj3); // 输出: { a: 1, b: 2, c: 3, d: 4 }
3. 对象的克隆

扩展运算符可以用来克隆一个对象,它会创建一个新的对象,并将原对象的属性复制到新对象中。

const obj1 = { a: 1, b: 2 };
const obj2 = {...obj1 };
console.log(obj2); // 输出: { a: 1, b: 2 }

总结

扩展运算符是 JavaScript 中一个非常强大的特性,它可以让你更方便地处理数组和对象。通过使用扩展运算符,你可以避免编写繁琐的循环和条件语句,从而使你的代码更加简洁和易于维护。


http://www.kler.cn/a/450781.html

相关文章:

  • AtCoder Beginner Contest 385(A~F)题解
  • Java 中压缩图片并应用 EXIF 旋转信息
  • react中使用ResizeObserver来观察元素的size变化
  • 项目亮点案例
  • DataX与DataX-Web安装与使用
  • 独一无二,万字详谈——Linux之文件管理
  • STM32 高级 谈一下IPV4/默认网关/子网掩码/DNS服务器/MAC
  • 电脑文件wlanapi.dll有什么用?找不到wlanapi.dll文件四种详细解决方法
  • 结合实例从HCI层分析经典蓝牙连接和配对过程
  • cursor保存更改操作技巧
  • MimicBrush:智能图像编辑新宠,能否革新你的创意设计?
  • Unity-URP设置单独渲染UI相机
  • 数据结构:算法篇:快速排序;直接插入排序
  • 迪文串口屏_T5L平台_界面状态图标显示和隐藏
  • 51单片机之RTC电子钟
  • 虚幻引擎是什么?
  • 《通义千问AI落地—中》:前端实现
  • Windows如何切换用户访问局域网共享文件夹,如何切换网上邻居的账户
  • 仿闲鱼的二手交易小程序软件开发闲置物品回收平台系统源码
  • 关于如何正确在测试用例中mock静态方法的问题
  • vue2+Three.js或WebGL上传预览CAD文件
  • 实时预警,防范暴力事件 ----AI监控保障监狱安全与秩序
  • WebClient HTTP 请求问题处理模板(泛型响应、忽略 SSL 证书等)
  • 《信管通低代码信息管理系统开发平台》Windows环境安装说明
  • 电感降额和选型规范
  • 点亮核心板小灯 STM32U575