扩展运算符（...）在Array、Function和Object中的运用

向右看齐 2023-07-15 02:56 26阅读 0赞

#### `...` 运算符 ####

`...`运算符是`ES6`中新增的扩展运算符，在`ES6`中运用在`Array`和`Function`中，在`ES7`中支持`Object`，`...`运算符是将一个数组转为以逗号分隔的序列。

...[1,2,3]	=>	1,2,3

##### `...`运算符在`Array`中的运用 #####

通过`push`函数，将一个数组添加到另一个数组的尾部。

let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];
    arr1.push(...arr2);
    // 0 1 2 3 4 5

通过`...`展开数组完成数组克隆

var arr1 = [1, 2, 3];
    var arr2 = [...arr1];
    console.log(arr2);
    /// [1, 2, 3]

元素节点也可以展开

[...document.querySelectorAll('div')]
    // [<div>, <div>, <div>]

##### `...`运算符在`Function`中的运用 #####

在函数中传递的参数我们可以通过`...`收集`arguments`

(function(...arg){ 
    	console.log(arg)
    })(1,2,3,4,5)
    // [1, 2, 3, 4, 5]

当一个函数可以可以传递`N`个参数时我们可以使用`...`收集`arguments`参数。  
比如下面的**求和**函数

function sum(...arg) { 
        let sum = 0;
        arg.forEach((num) => { 
            sum += num;
        })
        return sum;
    }
    console.log(sum(1, 2, 3, 4, 5))
    // 15

##### `...` 运算符在Object中的运用 #####

展开`Object`后再进行合成

let username = { 
        name: 'CrazysRabbit',
    }
    let userage = { 
        age: 20,
    }
    let obj = { 
        ...username,
        ...userage
    }
    
    console.log(obj)
    // {name: "CrazysRabbit", age: 20}

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关扩展运算符（...）在Array、Function和Object中的运用

`...` 运算符 `...`运算符是`ES6`中新增的扩展运算符，在`ES6`中运用在`Array`和`Function`中，在`ES7`中支持`Object`，`..

向右看齐/ 2023年07月15日 02:56/ 0 赞/ 27 阅读

相关扩展运算符（...）

ES6引入了rest参数（形式为“…变量名”）。其中rest参数搭配的变量是一个数组可以使用数组的一切操作。 function rest(...values){

桃扇骨/ 2023年06月01日 12:49/ 0 赞/ 3 阅读

相关扩展运算符的一些运用

1、利用扩展运算符求未知个数的数字和 // (...args) 代表接受函数的所有实参，他是一个数组形式 var sum = (...args) => {

「爱情、让人受尽委屈。」/ 2023年02月11日 03:17/ 0 赞/ 44 阅读

相关 JNDI和在Jetty中的运用

转载请注明出处 http://blog.csdn.net/lovingprince -------------------- 第一部分引子我们应用想用统一的方

港控/mmm°/ 2022年09月30日 06:26/ 0 赞/ 224 阅读

相关 ES6中的(...)扩展运算符

很简单啊，我就是想一下啊啊啊啊啊啊啊． -------------------- 扩展运算符（spread）．．．１．（．．．）相当于rest参数的逆运算，将一个数

清疚/ 2022年05月25日 10:51/ 0 赞/ 274 阅读

相关 Es6 - 扩展运算符和rest运算符

扩展运算符和rest运算符它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。对象扩展运算符（。。。） functi

我就是我/ 2022年01月12日 01:51/ 0 赞/ 372 阅读

相关数组的扩展→扩展运算符（...）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2021年12月19日 15:53/ 0 赞/ 373 阅读

相关扩展运算符：扩展对象的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

短命女/ 2021年12月13日 14:29/ 0 赞/ 422 阅读

相关 jquery.validate运用和扩展

一、运用默认校验规则 ![复制代码][copycode.gif] (1)、required:true 必输字段 (2)、

川长思鸟来/ 2021年09月15日 03:20/ 0 赞/ 275 阅读

相关 ES6中的扩展运算符（...）

... 运算符，是ES6里一个新引入的运算法，也叫展开/收集运算符数组的扩展运算符展开 ![watermark_type_ZmFuZ3poZW5naGVpdG

迷南。/ 2021年07月26日 01:50/ 0 赞/ 475 阅读