首页 > 其他分享 >ES6解构知多少

ES6解构知多少

时间:2023-06-16 16:44:50浏览次数:27  
标签:ES6 DimensionItemStore ... 知多少 解构 item new 拷贝

最近关于解构踩过两次坑,分别在 react 和 vue

当你发现更改对象无效时,就要思考是不是解构浅拷贝出了问题

理解还未完全透彻,先记录下,作为备份

 

1、解构赋值是浅拷贝(因为它确实不能对多维数组或对象达到深拷贝的作用)

  • 深拷贝:修改新变量的值不会影响原有变量的值。默认情况下基本数据类型(number,string,null,undefined,boolean)都是深拷贝。
  • 浅拷贝:修改新变量的值会影响原有的变量的值。默认情况下引用类型(object)都是浅拷贝。

2、解构需谨慎 

解构会改变原有引用类型的值,如果你用到了proxy,就会有问题

vue react均踩过坑

错误❎
Object.assign(item, new DimensionItemStore())
[...item, ...new DimensionItemStore()]
item = {...item, ...newItem} 正确✅ Object.assign(new DimensionItemStore(), item)
item.x = 'xxx'
item.y = 'yyy

 

标签:ES6,DimensionItemStore,...,知多少,解构,item,new,拷贝
From: https://www.cnblogs.com/qinStore/p/17485939.html

相关文章

  • ES6
    ES6语法目标能够说出使用let关键字声明变量的特点能够使用解构赋值从数组中提取值能够说出箭头函数拥有的特性能够使用剩余参数接收剩余的函数参数能够使用拓展运算符拆分数组能够说出模板字符串拥有的特性ES6相关概念(★★)什么是ES6ES的全称是ECMAScrip......
  • axios-使用解构赋值
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title></title></head><body><buttonid="btnPost">发起POST请求</button><buttonid="btnG......
  • Es6基础知识简介
    //变量提升  //letconst  //块级作用域:在代码块内部声明的变量或函数,具在代码块内部课件,超出该代码则无法访问  if(true){//花括号就是块作用域    //vara=10    leta=10    console.log(a)//10  }  console.log(a) ......
  • ES6新增特性
            ......
  • 差旅知多少
     出差的目的地:出差的开始时间:差旅的工作内容:差旅的交通方式:飞机、高铁、动车、公交、地铁、打车订票规划  双肩背包01、钱包02、身份证03、银行卡04、电脑(电脑支架、电源线、鼠标、鼠标垫)05、手机(充电器)06、充电宝(2w毫安)08、移动存储设备(移动硬盘&U盘)09、耳机......
  • ES6代码暴露的三种方式
    JS模块化主要有CommenJS(node)、JSmodule(es6)。一、CommenJSCommenJS主要是node环境中用于模块化开发,每一个js文件都是一个模块,有自己的作用域,其中的变量和函数都是私有的,对外部js文件不可见。使用module.exports或exports关键字进行对外暴露,*可以在普通的js文件中使用*1......
  • ES6箭头函数=>的用法
    基本语法:参数=>函数体1、当箭头函数没有参数或者有多个参数,要用()括起来。如()=>3+5、(a,b)=>a+b2、函数体是代码块(多行语句)时,用{}如()=>{varresult=a+b;returnresult;}3、当函数返回的是对象时,需要用()将对象包围起来如()=>({id:1,name:'小红'})4.1ES6函数......
  • vue项目之vue-cli创建项目&目录结构&编写规范&es6导入导出语法
    1vue-cli创建项目#单页面应用:spa -以后vue项目就只有一个xx.html页面-定义很多组件,不可能都写在xx.html中#单文件组件(一个组件一个文件) https://v2.cn.vuejs.org/v2/guide/single-file-components.html#ad#一个组件中有的东西 1html内容:以后html都放......
  • vue之vue-cli创建项目、vue项目目录结构、vue项目编写规范、 es6导入导出语法
    目录一、vue-cli创建项目1.1、背景知识单页面应用:spa单文件组件(一个组件一个文件)一个组件中有的东西使用vue-cli创建vue项目,才能使用单文件组件vue-cli脚手架,1.2使用vue-cli创建vue项目1.3vue-cli创建项目vue-cli命令行创建项目使用vue-cli-ui创建运行vue项目方式一:命令行中......
  • 解构赋值语法
    概述解构赋值语法(destructuringassignment)是ECMAScript6(ES6)引入的新特性,允许我们从数组或对象中提取值并将其赋值给变量。它可以简化代码,并提供了一种方便的方式来访问和使用复杂数据结构的值。解构赋值的语法有两种形式:数组解构和对象解构。示例数组解构const[a,b,c]......