首页 > 其他分享 >ES6扩展运算符(...)

ES6扩展运算符(...)

时间:2024-02-23 17:36:43浏览次数:25  
标签:ES6 console log ... 运算符 数组 return

在 ES6 中,扩展运算符(...)是一种用来展开数组和对象的语法。它可以将一个数组或对象展开,以便在函数调用、数组字面量或对象字面量中使用。

 1 // 1. 在数组中的应用:
 2 let arr = [1,2,245,6]
 3 let arr1 = [...arr,3,5,7]
 4 console.log(arr1) //[1, 2, 245, 6, 3, 5, 7]
 5 
 6 // 2. 在函数调用中的应用:
 7 function set(...num){
 8     console.log(num) //[1, 2, 3]
 9 }
10 set(1,2,3)
11 
12 function set2(a,b,c){
13     console.log(a+b+c) //248
14     return a+b+c
15 }
16 
17 set2(...arr1)
18 
19 // 3.在对象中的应用:
20 let obj ={
21     a : 1
22 }
23 let obj1 = {
24     b: '2'
25 }
26 let obj2 = {...obj,...obj1}
27 console.log(obj2) //{a: 1, b: '2'}

扩展运算符(...)的工作原理其实可以简单理解为将一个可迭代对象(比如数组、字符串等)展开成用逗号分隔的值序列。具体来说,扩展运算符在不同情况下的工作原理如下:

1. 在数组中的工作原理:

当在数组中使用扩展运算符时,它会将数组中的每一项元素都提取出来,然后放置在一个新数组中。这个过程是浅拷贝的,即只复制了引用,而不是深层复制。

2. 在函数调用中的工作原理:

在函数调用中使用扩展运算符时,它会将一个数组或类数组对象转换成用逗号分隔的参数序列,从而便于传递给函数。

3. 在对象中的工作原理:

在对象中使用扩展运算符时,它会将对象中的每个可枚举属性提取出来,然后放置在一个新对象中。

总的来说,扩展运算符的工作原理就是将可迭代对象进行展开操作,方便地将其中的元素组合在一起,或者将其作为参数传递给函数。这样可以简化代码书写,提高代码的可读性和灵活性。

在函数中使用扩展运算符可以带来多种便利的场景,以下是其中一些常见的应用:

 1 // 1. 传递可变数量的参数
 2 function sum(...number){
 3 
 4     return number.reduce((a,b)=>{
 5         console.log(a,b)
 6        return a + b
 7     },0)
 8 }
 9 console.log(sum(1,1,3,4)) //9
10 console.log(sum(1,2,3,4,5)) //15
11 
12 // 2. 与普通参数结合使用
13 function fn(initial,...number){
14     return number.reduce((a,b)=>{
15         console.log(a,b)
16        return a + b
17     },initial)
18 }
19 
20 console.log(fn(10,1,3,4,5)) //23
21 
22 // 3. 与数组结合使用
23 let arr = [1,2,245,6]
24 let arr1 = [...arr,3,5,7]
25 function array(arr,arr1){
26 
27     return [...arr,...arr1]
28 
29 }
30 console.log(array(arr,arr1)) //[1, 2, 245, 6, 1, 2, 245, 6, 3, 5, 7]
31 
32 
33 // 4. 与其他函数返回值结合使用
34 
35 function getMinMax(...numbers) {
36   return [Math.min(...numbers), Math.max(...numbers)];
37 }
38 
39 console.log(getMinMax(3, 1, 4, 1, 5, 9, 2, 6)); // 输出 [1, 9]

 

标签:ES6,console,log,...,运算符,数组,return
From: https://www.cnblogs.com/qinlinkun/p/18030019

相关文章

  • C++的箭头运算符
    以前学类的时候,一个指针指向类的实例,当我们想通过指针访问某些类的成员的时候,书上直接告诉你,使用->来访问这些成员,不能用.运算符。我以前也是默默接受了这个观点,平时也没细想,今天才知道是怎么回事。string*p=string("hello");*p.empty();//错误。会先执行p.empty(),之后再......
  • 八、井号运算符
    八、井号运算符其实,C语言允许在字符串中包含宏参数。在类函数宏(带参宏)中,#号作为一个预处理运算符,可以把记号转换成字符串。例如,如果A是一个宏形参,那么#A就是转换为字符串"A"的形参名。这个过程称为字符串化(stringizing)。如下为示例程序:#include<iostream>#defineADD......
  • windows11系统下ppt突然打不开,报错“PowerPoint启动时提示上次启动失败是否启用安全模
    问题描述:windows11系统下ppt突然打不开,报错:PowerPoint启动时提示上次启动失败是否启用安全模式...ppt文件是正常的,我发到其他设备上是可以正常打开的。我把office卸载了用腾讯文档也无法打开ppt文件。点击用安全模式打开后无反应,即无错误提示也没有打开ppt。以上情况说明:......
  • java运算符(赋值,关系,逻辑,三目,位运算)
    赋值运算符赋值运算符:=+=-=*=/=%=publicclassFuZhiOptDemo{publicstaticvoidmain(Strng[]args){inta1=3;a1+=2;System.out.println("a1:"+a1);a1-=2;System.out.println("a1:"+a1);......
  • ES6中的class浅谈
    在ES6中引入了类(class)的概念,让JavaScript更加接近传统面向对象编程语言。类提供了一种用于创建对象的模板,其中包含了属性和方法的定义。1.定义类使用class关键字可以定义一个类,类名通常以大写字母开头。 1classPerson{234constructor(name,age,work......
  • JavaSE的第六步 —— 运算符优先级问题以及类型转换
    一、运算符优先级一般来说不需要刻意去记这些运算符的优先级,当你对这些运算的先后顺序存在疑惑的时候,不需要多想什么,直接使用()将之括起来就好但大体上的优先级顺序还是需要了解一下的排在首位的就是括号运算符,无论什么时候,你都可以相信括号接下来的运算符就是①、[{一元运算......
  • golang运算符&流程控制
    运算符算数运算funcmain(){ varaint=10 varbint=8 varc=3.14 vard=5.15 fmt.Println(a+b)//18 fmt.Println(a-b)//2 fmt.Println(a*b)//80 fmt.Println(a/b)//1,Go中,如果运算的都是整数,相除后会默认去掉小数,保留整数部分, fmt.Pr......
  • JS展开运算符...
    ...)展开运算符又叫剩余运算符。例子:constitem={age:123}constnewItem={...item,['age']:456}console.log("newItem="+newItem.age) ......
  • 在script标签写export为什么会抛错|type module import ES5 ES6 预处理 指令序言 JavaS
    今天我们进入到语法部分的学习。在讲解具体的语法结构之前,这一堂课我首先要给你介绍一下JavaScript语法的一些基本规则。脚本和模块首先,JavaScript有两种源文件,一种叫做脚本,一种叫做模块。这个区分是在ES6引入了模块机制开始的,在ES5和之前的版本中,就只有一种源文件类型(就......
  • C语言运算符顺序及优先级
    逗号运算符是优先级最低的。通常单目运算符优先级大于双目。三目最小。但需注意,双目运算符中的赋值运算符优先级是最低的。在C语言中,大部分运算符都是从左向右进行计算的,但是也存在一些自右向左的运算符。其中最常见的自右向左的运算符是赋值运算符 = 和逗号运算符 ,。赋......