ES6学习--Javascript中的那三个点（...）

最新推荐文章于 2024-04-19 09:46:28 发布
最新推荐文章于 2024-04-19 09:46:28 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： ES6学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ms_yjk/article/details/102693369
版权
本文详细介绍了ES6中的扩展运算符（Spread Operator）和剩余参数（Rest Parameter），它们虽然写作相同但功能各异。扩展运算符用于将数组或可迭代对象展开，常用于函数调用、数组合并等；而剩余参数则能将未匹配的函数参数收集到数组中，方便处理。文中通过实例展示了它们在不同场景的应用，并强调了如何正确使用它们避免改变原数组。
摘要由CSDN通过智能技术生成

看这篇文章之前建议先看：ES6--解构

前言

扩展运算符（Spread Operator）和剩余参数（Rest Parameter）的写法相同，都是在变量或字面量之前加三个点（...），并且只能用于包含Symbol.iterator属性的可迭代对象（iterable）。虽然两者之间有诸多类似，但它们的功能和应用场景却完全不同。扩展运算符能把整体展开成个体，常用于函数调用、数组或字符串处理等；而剩余参数正好相反，把个体合并成整体，常用于函数声明、解构参数等。此处的整体可能是数组、字符串或类数组对象等，个体可能是字符、数组的元素或函数的参数等。

剩余参数（Rest Params）

　在JavaScript的函数中，声明时定义的形参个数可以和传入的实参个数不同。当实参个数大于形参个数时，ES6新增的剩余参数能把没有对应形参的实参收集到一个数组中。

语法

函数调用：

myFunction(...iterableObj);

字面量数组构造或字符串：

[...iterableObj, '4', ...'hello', 6];

构造字面量对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：

let objClone = { ...obj };

一个小例子：


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  End_less__
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JavaScript-ES6--Promises-Example:JavaScript-ES6--Promises-示例

				
			

			

				

					04-29
				

			

		

		

			
				
JavaScript ES6 中的 Promises 是一种处理异步操作的重要机制，它解决了回调地狱的问题，使得异步代码更加清晰和易于管理。Promise 对象代表一个异步操作的最终完成或失败，以及其相应的结果值。在本示例中，我们将...

			
		

	



                

              
                



	

		

			

				
					
es6之扩展运算符 三个点（...）

					
热门推荐

				
			

			

				

					astonishqft的博客
				

				

					09-30
					
					25万+
					
				

			

		

		

			
				
es6之扩展运算符 三个点（...）es6之扩展运算符 三个点（...）对象的扩展运算符数组的扩展运算符总结
es6之扩展运算符 三个点（…）
对象的扩展运算符
理解对象的扩展运算符其实很简单，只要记住一句话就可以：

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...z }; /...

			
		

	



                


  
              

                


	

		

			

				
					
js扩展运算符（spread）是三个点（...）

				
			

			

				

					weixin_30849591的博客
				

				

					09-12
					
					311
					
				

			

		

		

			
				
作用：将一个数组转为用逗号分隔的参数序列。

//该运算符主要用于函数调用。function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42



...

			
		

	





	

		

			

				
					
es6扩展运算符之三个点(...)

				
			

			

				

					筑梦人的博客
				

				

					03-30
					
					3244
					
				

			

		

		

			
				
前言:初识es6三个点,一脸懵逼.查阅资料慢慢对这个运算符有了些许了解,谨以此做个小小的笔记.

1,首先这个三个点的作用是es6的扩展语法,其作用就是把对象中的所有可遍历的参数属性取出来,拷贝到当前对象中.,其中这三个点的作用和Object.assign({},a)的作用是一样的.



2,如果用...拷贝对象中参数属性的时候,和其他的对象进行合并,当其他对象中属性名字和被拷贝的对象参数属性有...

			
		

	



		

			
		



	

		

			

				
					
es6 扩展运算符三个点（...）的用法及总结

				
			

			

				

					weixin_30266885的博客
				

				

					01-11
					
					773
					
				

			

		

		

			
				
不明白的：
1.0 apply()
2.0 合并数组的几种方法（Array.prototype.push.apply(arr1,arr2)）//不理解
3.0Iterator 接口的对象
4.0Map 和Set 结构， Generator 函数
1.0 含义 扩展运算符（spread）是... , 将一个数组转为逗号分隔的参数序列
console.log(...[1,2,3])/...

			
		

	





	

		

			

				
					
ES6学习（三个点）

				
			

			

				

					编程书生的博客
				

				

					11-18
					
					280
					
				

			

		

		

			
				
三个点
以前我们复制数组可能是这样的
str1 = [10,5,6,2]
str2 = Array.from(str1)

现在我们可以用三个点（拓展运算符）
 str1 = [10,5,2,9]
 //str2 = Array.from(str1)
 str2 = [...str1]
 console.log(str2)

同样我们得到：

那么到底这三个点是什么呢？
它起一个拓展、解构的作用，...

			
		

	





	

		

			

				
					
JavaScrip---ES6新语法:展开运算符...（三个点）详解

				
			

			

				

					java小白翻身
				

				

					04-08
					
					4655
					
				

			

		

		

			
				
概念太复杂，你可以这么理解...

概念太复杂，你可以把...理解为展开运算符。

谁可以使用展开运算符来进行展开呢？

1.字符串可以展开，展开成逗号分割的元素集合。

案例：


let str = "abc"
console.log(... str)

答案是什么呢？

当我们展开字符串"abc"的时候，就相当于在那个位置写了a,b,c​！

也就是说console.log(... str)相当于写成了console.log(‘a’,'b','c')。

验证一下刚才的代码，结果



除了字....

			
		

	





	

		

			

				
					
ES6扩展运算符——三个点（...）用法详解

				
			

			

				

					青春木鱼的博客
				

				

					02-06
					
					2536
					
				

			

		

		

			
				
展开语法 (Spread syntax), 可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

			
		

	





	

		

			

				
					
learn-es6:学习es6-javascript

				
			

			

				

					03-30
				

			

		

		

			
				
以上就是ES6中的主要知识点，学习并熟练掌握这些特性，将使你在JavaScript开发中游刃有余，提高编程效率和代码质量。通过实际项目练习和阅读相关文档，你将更好地理解并运用这些概念。在深入学习过程中，不断实践和...

			
		

	





	

		

			

				
					
ES6--javascript判断一个字符串是否存在另一个字符串中

				
			

			

				

					04-07
				

			

		

		

			
				
### ES6 中 JavaScript 判断一个字符串是否存在另一个字符串中的方法  在 JavaScript 的开发过程中，经常会遇到需要判断一个字符串是否存在于另一个字符串中的场景。ES6（ECMAScript 2015）作为 JavaScript 的一个...

			
		

	





	

		

			

				
					
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习

				
			

			

				

					02-24
				

			

		

		

			
				
JavaScript，作为全球最广泛使用的开发语言之一，一直在不断演进以满足开发者的需求。从ES6（ECMAScript 2015）到ES11（ECMAScript 2020），JavaScript...学习并掌握这些知识点，将有助于提升你的JavaScript开发能力。

			
		

	





	

		

			

				
					
es6 扩展运算符 三个点（...）

				
			

			

				

					xingchen678的博客
				

				

					08-03
					
					333
					
				

			

		

		

			
				
本文只写一些简单的用法：



什么意思？

三个点（...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开

字面量一般指[1,2,3]或者{name:'chuichui'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了

说白了就是把衣服脱了，不管是大括号（[]）、花括号（{}），统统不在话下，全部脱掉脱掉！


// 数组
var number = .

			
		

	





	

		

			

				
					
es6扩展运算符 三个点（…）

				
			

			

				

					weixin_43471255的博客
				

				

					07-15
					
					229
					
				

			

		

		

			
				
对象的扩展运算符
1.1  对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

    const a = {a:1,b:2,c:3};
    const b ={...bar}
    console.log(a,b);

输出结果:

{1,2,3}
{1,2,3}

上面的方法等价于:
const a = { a: 1, b: 2 };
const b = Object.assign({}, a); // {

			
		

	





	

		

			

				
					
es6 三点运算符_ES6中三个点

				
			

			

				

					weixin_34688966的博客
				

				

					01-12
					
					329
					
				

			

		

		

			
				
ES6中三个点的使用对象的扩展运算符对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上述方法实际上等价于:let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a:...

			
		

	





	

		

			

				
					
JavaScript 中`...`（三个点）的用法

				
			

			

				

					m0_51232873的博客
				

				

					04-19
					
					675
					
				

			

		

		

			
				
对象的所有可枚举属性复制到一个新对象中，并且可以在这个新对象中添加或覆盖属性。这样，你就可以在保持原有查询参数的基础上，添加或修改。这个用法非常适合于需要基于现有对象添加或修改少量属性的场景。作为扩展运算符用于对象字面量，它将。在JavaScript中，

			
		

	





	

		

			

				
					
javascript上的三个点是啥意思？

				
			

			

				

					m0_61177996的博客
				

				

					09-16
					
					1200
					
				

			

		

		

			
				
javascript上的三个点是啥意思？

			
		

	





	

		

			

				
					
Django+Vue考勤系统答辩PPT.pptx

					
最新发布

				
			

			

				

					10-10
				

			

		

		

			
				
计算机毕业设计答辩PPT

			
		

	





	

		

			

				
					
es6 v-show

				
			

			

				

					08-31
				

			

		

		

			
				
ES6 中没有直接提供类似于 Vue.js 中的 v-show 指令。v-show 是 Vue.js 中用于根据条件控制元素显示与隐藏的指令。ES6 是 ECMAScript 6 的简称，是 JavaScript 的一个版本。

在 ES6 中，你可以通过使用条件语句（如 if/else 或者三元表达式）来实现类似的功能。例如，你可以使用如下的方式来根据条件显示或隐藏元素：

```javascript
const isVisible = true;

if (isVisible) {
  // 显示元素的逻辑
  console.log("Element is visible");
} else {
  // 隐藏元素的逻辑
  console.log("Element is hidden");
}
```

或者，你也可以使用三元表达式：

```javascript
const isVisible = true;

isVisible ? console.log("Element is visible") : console.log("Element is hidden");
```

上述代码中，根据 isVisible 变量的值，控制台会输出不同的信息，你可以在相应的代码块中进行对应的显示或隐藏元素的操作。

请注意，这只是一种在原生 JavaScript 中模拟 v-show 功能的简单示例，实际应用中可能需要根据具体的场景进行更复杂的实现。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值