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

聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景

image

前言

在 JavaScript 中,... 被称为 “扩展运算符” 或 “剩余参数运算符”。

扩展运算符是在 ES6(ECMAScript 2015)中被引入的,目的是为了提高语言的表达能力和代码的可读性。

根据上下文不同,它主要用在数组、对象以及函数调用中,帮助我们更灵活地处理数据结构。

下文说一下它的使用场景。

数组操作

  1. 合并数组

    let array1 = [1, 2];
    let array2 = [3, 4];
    let combinedArray = [...array1, ...array2]; // 结果为 [1, 2, 3, 4]
    
  2. 复制数组

    let originalArray = [1, 2, 3];
    let copiedArray = [...originalArray]; 
    // 结果为 [1, 2, 3]
    
  3. 扩展数组

    function logElements(...elements) {elements.forEach(element => console.log(element));
    }let numbers = [1, 2, 3];
    logElements(...numbers); 
    // 输出 1 2 3
    
  4. 解构数组

    const arr = [1, 2, 3, 4, 5];
    const [first, second, ...rest] = arr;
    console.log(first); // 输出: 1
    console.log(second); // 输出: 2
    console.log(rest); // 输出: [3, 4, 5]
    

对象操作

  1. 合并对象

    let obj1 = { a: 1 };
    let obj2 = { b: 2 };
    let combinedObj = { ...obj1, ...obj2 }; 
    // 结果为 { a: 1, b: 2 }
    
  2. 复制对象

    let originalObj = { a: 1, b: 2 };
    let copiedObj = { ...originalObj }; 
    // 结果为 { a: 1, b: 2 }
    
  3. 扩展对象

    function logProperties(obj) {for (let key in obj) {console.log(key + ': ' + obj[key]);}
    }let user = { name: 'John', age: 30 };
    logProperties({ ...user }); 
    // 输出 name: John 和 age: 30
    

函数调用

函数调用主要是 扩展参数


// 当不确定传入函数的参数数量时,利用扩展运算符将这些参数作为一个数组
function sum(...numbers) {return numbers.reduce((acc, curr) => acc + curr, 0);
}let numbers = [1, 2, 3];
let total = sum(...numbers); 
// 结果为 6

或者

function sum(x, y, z) {return x + y + z;
}//将数组元素作为多个参数传递给函数
const numbers = [1, 2, 3];

总结

... 运算符在 JavaScript 中非常强大且实用。

它使得处理数组和对象的操作更加简洁和直观,尤其是在函数参数、数组或对象的合并和解构时。

不过也要注意这两点:

  • 扩展运算符的复制是浅拷贝,如果对象或数组中含有引用类型的数据,那么拷贝的还是原始对象的引用。
  • 在合并对象时,如果有相同的属性名,后面的属性会覆盖前面的属性。

我是老杨,一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟,是软件项目管理师,也是快乐的程序猿,持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号,相互交流,共同进步!

http://www.lryc.cn/news/415714.html

相关文章:

  • 华为续签了,但我准备离职了
  • RocketMQ 的认证与授权机制
  • 【设计模式】六大原则-上
  • CRC16循环冗余校验
  • Mysql80主从复制搭建;遇到问题 Slave_IO_Running: Connecting和Slave_SQL_Running以及解决过程
  • Yarn网络代理配置指南:在受限网络环境中优化依赖管理
  • AOE网及其求解关键路径
  • 【FPGA】modelsim编译verilog代码产生错误集合
  • Rabbitmq的持久化机制
  • Unity UnityWebRequest封装类
  • JVM内存划分
  • c++ 全排列
  • 未授权访问漏洞系列详解⑤!
  • 【CONDA】库冲突解决办法
  • 【网络世界】数据链路层
  • AllReduce通信库;Reduce+LayerNorm+Broadcast 算子;LayerNorm(层归一化)和Broadcast(广播)操作;
  • 2024.8.5 作业
  • MySQL数据库——数据库的基本操作
  • SQL数据库语句练习
  • 【Python】常用的pdf提取库介绍对比
  • sbatch提交并行作业 运行python程序 指定输入参数从1到100
  • OD C卷 - 中庸行者
  • 最新CSS3横向菜单的实现
  • (2024,LlamaGen,Llama,自回归下一token预测,模型扩展)自回归模型优于扩散:Llama 用于可扩展图像生成
  • 重新安装操作系统的软件都有哪些?
  • 深圳水务展|2025深圳国际水务科技博览会
  • OpenAI not returning a result?
  • [Windows]_[初级]_[GetVersionEx获取系统版本错误的原因]
  • 2024,Java开发在中国市场还有发展前景吗?
  • gcc: string.c_str gcc-8.5的一个问题