let { [key]: id = 0, ...rest } = obj-让解构发挥到极限

最新推荐文章于 2022-12-01 16:12:50 发布
最新推荐文章于 2022-12-01 16:12:50 发布
阅读量893 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32135281/article/details/99031723
版权
本文详细探讨了JavaScript中的解构赋值，包括如何在遇到特定问题时使用解构、剩余参数的概念、如何分配新变量名以及如何处理计算对象属性名。通过实例解析了`let { [key]: id = 0, ...rest } = obj`的用法，揭示了其在处理对象属性动态分组和赋值时的灵活性。" 50624125,5115735,在LXC中设置NFS服务器,"['LXC', 'NFS', 'Linux容器', '服务器配置', '网络文件系统']
摘要由CSDN通过智能技术生成 
 
 
最近遇到了一个问题，来自于下面的一段代码：
 
 
let { [key]: id, ...rest } = obj
 
 
在这篇文章里，我想解释下它是在做什么以及它是如何工作的。
 
 
 
  
提醒：因为它非常的晦涩难懂，所以我最终并没有以这种方式实现去做，不过它是非常有趣的，值得去我们去了解。
 
 
 
 
如何遇到这个问题的
 
 
假如我们有以下数组
 
 
const users = [     { name: 'Michael', group: 1 },    { name: 'Lukas', group: 1 },    { name: 'Travis', group: 2 },]
    { name: 'Michael', group: 1 },
    { name: 'Lukas', group: 1 },
    { name: 'Travis', group: 2 },
]
 
 
我们把它按照 group 字段进行分组映射如下：
 
 
{    '1': [        { name: 'Michael' },        { name: 'Lukas' },    ],    '2': [        { name: 'Travis' },    ]}'1': [
        { name: 'Michael' },
        { name: 'Lukas' },
    ],
    '2': [
        { name: 'Travis' },
    ]
}
 
 
如何从 users 对象中删除 group 属性，实现上述效果？
 
 
我们可以利用如下方法：
 
 
users.reduce((result, user) => {  const { group, ...userData } = user  result[group] = result[group] || []  result[group].push(userData)  return result}, {})
  const { group, ...userData } = user
  result[group] = result[group] || []
  result[group].push(userData)

  



                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  六小登登
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
前端开发：JS的解构

				
			

			

				

					软贱开发攻城狮
				

				

					08-29
					
					2149
					
				

			

		

		

			
				
在前端开发过程中，关于数据处理是一个非常重要的操作，尤其是遇到一些复杂的业务场景情况，涉及到数据的处理也是非常麻烦的事情。从后台拿到的数据源，处理成前端需要的格式或者形式，这就需要前端开发者做中转的一系列逻辑处理，甚至涉及到算法处理，所以不要单纯的觉得数据处理就是从后台拿数据然后展示渲染处理即可，其实远不止这些，尤其是在ES6之后，新增了一种从数组或者对象中获取指定元素的方式，也就是本篇博文所要介绍的内容：解构。...

			
		

	



                

              
                



	

		

			

				
					
let { [key]: id = 0, ...rest } = obj-极限解构

				
			

			

				

					Don't disturb me!的博客
				

				

					08-11
					
					395
					
				

			

		

		

			
				
最近遇到了一个问题，来自于下面的一段代码：
let { [key]: id, ...rest } = obj

假如我们有以下数组
const users = [ 
    { name: 'Michael', group: 1 },
    { name: 'Lukas', group: 1 },
    { name: 'Travis', group: 2 },
]

我们把它按照 group 字段进行分组映射如下：
{
    '1': [
        { name: 'Michael' },
 

			
		

	



                


  
              

                


	

		

			

				
					
let obj={} 和 let obj=Object.create(null)

				
			

			

				

					m0_46439976的博客
				

				

					06-01
					
					876
					
				

			

		

		

			
				
//Obj2比Obj1更空
let obj1={};
let obj2=Object.create(null);

console.log(obj1);
console.log(obj1.__proto__);
console.log(obj2);
console.log(obj2.__proto__);





			
		

	





	

		

			

				
					
ES6 入门第一章（let、const 、变量的解构赋值、模板字符串、简化对象写法 ）

				
			

			

				

					Iwltmy的博客
				

				

					11-23
					
					258
					
				

			

		

		

			
				
什么是ECMA
ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名诶Ecma国际。
什么是ECMAScript
ECMAScript 是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。
为什么要学习ES6

ES6的版本变动内容最多，具有里程碑意义
ES6加入许多新的语法特性，编程实现更简单、高效
ES6是前端发展趋势，就业必备技能

let
声明

			
		

	



		

			
		



	

		

			

				
					
ES6学习笔记03——对象赋值

				
			

			

				

					肖大侠拯救地球
				

				

					07-18
					
					319
					
				

			

		

		

			
				

解构赋值




  let obj={
      n1:"p1",
      n2:"p2"
  };
  //变量名==属性名
  let {n1,n2}=obj;
  console.log(n1, n2);//p1 p2

  //变量名!=属性名
  let {n1:x1, n2:x2} = obj;
  console.log(x1, x2); //p1 p2


对象数组嵌套
...

			
		

	





	

		

			

				
					
JavaScript知识梳理 - ES6新特性与重点知识总结（七）

				
			

			

				

					DaXiong1024的博客
				

				

					07-23
					
					313
					
				

			

		

		

			
				
ES6新特性与重点知识总结
一、ES6变量声明

var声明的变量，没有 块级作用域 的限制，let/const 声明的变量，具有 块级作用域 的限制。
var声明的变量存在 变量提升 ，let/const 声明的变量，没有 变量提升 。
const 声明的是常亮，不能重新赋值，声明即赋值。

二、解构赋值

S6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

1.数组结构赋值
let arr = [1, 'hello', [100,200], {a:1, b:2}, true,

			
		

	





	

		

			

				
					
ES6---基础知识3

				
			

			

				

					Pocketful的博客
				

				

					07-23
					
					170
					
				

			

		

		

			
				
1、箭头函数内部的this
（1）箭头函数里面没有自己的this，而是引用外层的this。
在对象内部，自定义的方法中，不是使用箭头函数时，this指向的是当前使用的他的对象（指向他的对象）
let obj = {
    username : "zs",
    //say,  //属性简写 say : say
    say(){     //指向当前的js的模块对象，每一个js文件就是一个模块
                console.log(this);
            },
    

			
		

	





	

		

			

				
					
ES6笔记————let，箭头函数，剩余参数

				
			

			

				

					m0_45293340的博客
				

				

					09-06
					
					1632
					
				

			

		

		

			
				
箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。const obj = { name: '张三'}//this 指向 是obj对象//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象//{ name: '张三'}resFn();//{ name: '张三'}

			
		

	





	

		

			

				
					
ES6知识点

				
			

			

				

					timoru的博客
				

				

					06-14
					
					130
					
				

			

		

		

			
				
ES6知识点

			
		

	





	

		

			

				
					
遍历对象方法之for in

				
			

			

				

					前端泡面人
				

				

					10-12
					
					259
					
				

			

		

		

			
				
遍历对象方法：for...in...

			
		

	





	

		

			

				
					
ES6 - 对象

				
			

			

				

					Dimples_320的博客
				

				

					01-06
					
					670
					
				

			

		

		

			
				
方法描述
Object.assign()	将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象
Object.is()	比较两个值是否相同
Object.keys()	返回一个数组，包含给定对象所有可枚举字符串类型的名称
Object.values	返回一个数组，该数组包含给定对象自己所有可枚举字符串对应的值
Object.entries()	返回一个包含[key,value]给定对象自己的可枚举字符串属性的所有对的数组
Object.formEntries()	从可迭代的[key,value]返回一

			
		

	





	

		

			

				
					
JS中for---in的用法

					
热门推荐

				
			

			

				

					qq_59020839的博客
				

				

					10-17
					
					1万+
					
				

			

		

		

			
				
JS中for---in的用法

			
		

	





	

		

			

				
					
ES6语法笔记(一）

				
			

			

				

					小杨吔包的博客
				

				

					04-22
					
					131
					
				

			

		

		

			
				
1.const 与let

const是声明常量，let是声明变量。二者皆可代替var。此处const声明常量指的是指向的变量地址不变，在简单类型变现为值不变，但是在Object中，指的是引向的变量地址不变，该对象可以任意添加属性。const obj={
    a:1,
   b:2
  }；
  obj.c=3
  //此处不会报错
  obj={}
  //会报错

通常函数的声明也会采用c...

			
		

	





	

		

			

				
					
基础知识常被8：ES6中的相关语法（持续更新中）（超级详细，一笔一笔亲自打印上去的）

				
			

			

				

					一块小砖头的博客
				

				

					08-31
					
					689
					
				

			

		

		

			
				
基础知识常被8：ES6中的相关语法（持续更新中）let，const，var的对比：let1.使用let声明得变量不能再次声明2.具有块级作用域3.let没有变量提升，必须要先定义在使用4.let的声明不会像var声明一样作用到window中const1.const 定义常量必须给初始值2.const 一但定义了就不能修改了3.具有块级作用域（同let）4.常量是独立的，和window对象没有关系（...

			
		

	





	

		

			

				
					
深拷贝、浅拷贝的方法

				
			

			

				

					weixin_51225684的博客
				

				

					12-01
					
					3950
					
				

			

		

		

			
				
/这个方法可以，只不过function和undefined这种情况下无法复制。函数库lodash，也有提供_.cloneDeep用来做深拷贝。接下来我们就以下面这个obj1对象为例子，进行深浅拷贝的演示。1.写一个递归(推荐，比较完美的解决方案)封装一个DeepClone的深拷贝函数。4.JSON转换方法。

			
		

	





	

		

			

				
					
变量的解构赋值

				
			

			

				

					m0_46978034的博客
				

				

					06-19
					
					111
					
				

			

		

		

			
				
解构赋值理解 就是从数组或者对象中提取数据,并赋值给变量(多个)
1.对象得解构赋值
      let obj = {
                uname: 'hh',
                age: 16,
            }
        let {age,uname} = obj //解构赋值真正实现的是；按需索取(根据属性获取对象里面的属性值) 
        console.log(age, uname);

2.数组得解构赋值
   let arr = [1, 2

			
		

	





	

		

			

				
					
let的解构赋值_ES6基础知识01(let,const,解构赋值)

				
			

			

				

					weixin_42148975的博客
				

				

					01-13
					
					666
					
				

			

		

		

			
				
ES6 新增特性整理讲解新增命令1.let命令ES6新增了let命令，用来声明变量。它的用法类似于var，但是也存在新的特性。- **let所声明的变量，只在let命令所在的代码块内有效。适用于for循环**var a = 3;var a = 4;let b = 4;{var a = 5;let b = 5;    //作用域仅在代码块内部let c = "this is inner c";var...

			
		

	





	

		

			

				
					
let obj = Object.create(null) 与 let obj = {} 有什么区别？

				
			

			

				

					www930942的博客
				

				

					11-01
					
					478
					
				

			

		

		

			
				
Object.create(null)创建的对象是非常纯净的，没有任何其它元素


而另一个let创建的对象是带有_proto_的，下面有一些方法与属性，这便是js的原型链继承，它继承了Object的方法和属性


比如说，我只需要用对象来保存一些数据，然后进行循环取用，提高循环效率;这个时候如果对象有原型链，那便会在循环的时候去循环它的各个属性和方法;然而这不是必要的，我们只是要他里面的元素而已，前者会影响循环效率



...

			
		

	





	

		

			

				
					
class Listnode:     def __init__(self,val = 0,next = None):         self.val = val         self.next = next  class MyLinkedList():     def __init__(self):         self.dummyHead = Listnode()         self.size = 0     def get(self,index):         self.dummyHead = self.dummyHead.next         for i in range(index):             self.dummyHead = self.dummyHead.next          return self.dummyHead.val     def addAtHead(self,val):         new_node = Listnode(val,None)         new_node.next = self.dummyHead         self.size +=1         """         dummyHead.next = Listnode(val,dummyHead.next)         """      def addAtTail(self,val:int)->None:         current = self.dummyHead.next         while current:             current = current.next          #current.next = Listnode(val)         self.size +=1          def addAtIndex(self,val:int,index:int)->None:         current = self.dummyHead.next         for i in range(index-1):             current = current.next         current.next = Listnode(val,current.next)          def deleteAtIndex(self,index):         current = dummyHead.next         for i in range(index-1):             current = current.next         current.next = current.next.next      #输入["MyLinkedList", "addAtHead", "addAtTail", "addAtIndex", "get", "deleteAtIndex", "get"][[], [1], [3], [1, 2], [1], [1], [1]]     #输出[null, null, null, null, 2, null, 3] obj = MyLinkedList() obj.addAtHead(1) obj.addAtTail(3) obj.addAtIndex(1,2) param_1 = obj.get(1) obj.deleteAtIndex(1) param_2 = obj.get(1) print(param_1,param_2)                  报错'NoneType' object has no attribute 'next'为什么

					
最新发布

				
			

			

				

					06-07
				

			

		

		

			
				
在addAtTail方法中，当current遍历到链表最后一个节点时，current指向None，而在下一行代码中，current.next是NoneType，因此无法继续执行current.next = Listnode(val)的操作，导致出错。解决方法是在while循环中，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值