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

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

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

1. 数组的合并

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

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

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

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

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

javascript 复制代码
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // 输出: 包含所有 div 元素的数组
4.数组解包
javascript 复制代码
let tfboys = ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'];
function fn() {
    console.log(arguments);
}
fn(...tfboys); // 输出: ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子']
5.对象解包
javascript 复制代码
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. 函数参数的展开

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

javascript 复制代码
function sum(a, b, c) {
  return a + b + c;
}

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

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

javascript 复制代码
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. 对象的克隆

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

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

总结

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

相关推荐
Zuckjet_2 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
sz-lcw2 小时前
MySQL知识笔记
笔记·mysql·adb
2401_863801462 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
古译汉书3 小时前
嵌入式铁头山羊STM32-各章节详细笔记-查阅传送门
数据结构·笔记·stm32·单片机·嵌入式硬件·个人开发
珍宝商店4 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown4 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip5 小时前
实现AI对话光标跟随效果
前端·javascript
2301_800050995 小时前
DNS 服务器
linux·运维·笔记
汇能感知5 小时前
光谱相机的未来趋势
经验分享·笔记·科技
脑花儿5 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库