美文网首页
js 浅拷贝和深拷贝 开发中数组和对象api总结

js 浅拷贝和深拷贝 开发中数组和对象api总结

作者: jzfai | 来源:发表于2020-07-13 15:48 被阅读0次

测试的数据

let arr=[1,2,3,4,5,6,{name:"arrFai",age:1}]
  let arrObj=[
    {name:"fai",age:1},
    {name:"fai",age:2},
    {name:"fai",age:3},
  ]
  let arrObj2=[
    {name:"fai",age:1},
    {name:"fai",age:2},
    {name:"fai",age:3},
    {name:"fai",age:4},
  ]
  let obj={
    name:'jzfai',age:1,
    objDeep:{
      name:"objDeep",age:20
    }
  }

浅拷贝 Object.assign只对第一层有效

  let obj2=Object.assign({}, obj)
  obj2.name='lilei'
  obj2.objDeep.age=100
  console.log('obj2',obj2);
  console.log("obj",obj);

...arr 浅拷贝 类似Object.assign

  let obj2={...obj}
  obj2.name='lilei'
  obj2.objDeep.age=100
  console.log('obj2',obj2);
  console.log("obj",obj);

浅拷贝数组和对象一样

   let arr2=[...arr]
   arr2.push(100)
   arr2[arr2.length-2].age=100
   console.log('arr2',arr2);
   console.log("arr",arr);

slice

let arr2=arr.slice()
arr2.push(100)
arr2[arr2.length-2].age=100
console.log('arr2',arr2);
console.log("arr",arr);

JSON.parse(JSON.stringify(arr))可以实现深拷贝

   let arr2=JSON.parse(JSON.stringify(arr))
   arr2.push(100)
   arr2[arr2.length-2].age=100
   console.log('arr2',arr2);
   console.log("arr",arr);
   console.log("数组测试-----------------------------");

会改变原始数组的方法有

   push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    forEach()

修改 数组right

   arr.push(100)
   console.log(arr);
   arr.pop()
   console.log(arr);

修改数组left

   arr.shift();
   console.log(arr);
   arr.unshift(1000)
   console.log(arr);
   arr.splice(0,3,100)
   console.log(arr);
   arr.sort((a,b) => {
     return b-a;
   })
   console.log(arr);
   arr.reverse()
   console.log(arr);

注意forEech修改原数组

   arrObj.forEach(value => {
     value.name='baohuan'
     value.fai='111'
   })
   console.log(arrObj);

不改变原始数组的方法有

    filter()
    concat()
    slice()
    map()
    let conArr=arr.concat([1,2,3,4])
    console.log(conArr);

include some find findIndex index 使用总结

    some()是在数组中找是否有符合条件的元素
    如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
    如果没有满足条件的元素，则返回false。
    find（）是在数组中找第一个符合条件的元素
    当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调 
  用执行函数。
    如果没有符合条件的元素返回 undefined。
  /*总结
  * 数组元素：include indexOf(需要数组下标)
  * 数组对象：some findIndex(需要数组下标) 具有回调函数
  * 过滤用filter
  * 改变数组下的对象：map(返回新的数组) forEach(直接改变原数组)
  * */

日常数组操作技巧

 /*
  * 插入数组 arr.push
  * 制定位置删除数组：arr.splice(this.echarSeries.findIndex(item => item.key === key), 1)
  * */

  /*根据arrObj  删除arrObj2 根据age删除
  * */
   byArrObjDeleteArrObj2(arrObj,arrObj2,'age');
   //得到age数组
   function byArrObjDeleteArrObj2(arrObj,arrObj2,objKey){
     arrObj.map(value => {
       return value[objKey]
     }).forEach(value2 => {
       arrObj2.splice(arrObj2.findIndex(item =>item[objKey]===value2),1)
     })
     //根据ageArr数据，遍历删除arrObj2,得到arrObj2新数组
     console.log(arrObj2);
   }

可以直接使用测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  let arr=[1,2,3,4,5,6,{name:"arrFai",age:1}]
  let arrObj=[
    {name:"fai",age:1},
    {name:"fai",age:2},
    {name:"fai",age:3},
  ]
  let arrObj2=[
    {name:"fai",age:1},
    {name:"fai",age:2},
    {name:"fai",age:3},
    {name:"fai",age:4},
  ]
  let obj={
    name:'jzfai',age:1,
    objDeep:{
      name:"objDeep",age:20
    }
  }
  /*
  * 浅拷贝 Object.assign只对第一层有效
  * */
  // let obj2=Object.assign({}, obj)
  // obj2.name='lilei'
  // obj2.objDeep.age=100
  // console.log('obj2',obj2);
  // console.log("obj",obj);
  /*
  * ...arr 浅拷贝 类似Object.assign
  * */
  // let obj2={...obj}
  // obj2.name='lilei'
  // obj2.objDeep.age=100
  // console.log('obj2',obj2);
  // console.log("obj",obj);
  /*
  * 数组和对象一样
  * */
  // let arr2=[...arr]
  // arr2.push(100)
  // arr2[arr2.length-2].age=100
  // console.log('arr2',arr2);
  // console.log("arr",arr);
  /*
  * slice
  * */
  // let arr2=arr.slice()
  // arr2.push(100)
  // arr2[arr2.length-2].age=100
  // console.log('arr2',arr2);
  // console.log("arr",arr);
    /*
  * JSON.parse(JSON.stringify(arr))可以实现深拷贝
  * */
  // let arr2=JSON.parse(JSON.stringify(arr))
  // arr2.push(100)
  // arr2[arr2.length-2].age=100
  // console.log('arr2',arr2);
  // console.log("arr",arr);
  // console.log("数组测试-----------------------------");
  /*
   会改变原始数组的方法有
  * push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    forEach()
  * */
  /*
  * 数组的right
  * */
  //  arr.push(100)
  // console.log(arr);
  //  arr.pop()
  // console.log(arr);
  /*
  * 数组left
  * */
  // arr.shift();
  // console.log(arr);
  // arr.unshift(1000)
  // console.log(arr);
  // arr.splice(0,3,100)
  // console.log(arr);
  // arr.sort((a,b) => {
  //   return b-a;
  // })
  // console.log(arr);
  // arr.reverse()
  // console.log(arr);
  /*
  * 注意forEech修改原数组
  * */
  // arrObj.forEach(value => {
  //   value.name='baohuan'
  //   value.fai='111'
  // })
  // console.log(arrObj);
  /*
  * 不改变原始数组的方法有
  * filter()
    concat()
    slice()
    map()
  * */
  // let conArr=arr.concat([1,2,3,4])
  // console.log(conArr);
  /*
  * include some index
  * */
  /*
  * some()是在数组中找是否有符合条件的元素
    如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
    如果没有满足条件的元素，则返回false。
    find（）是在数组中找第一个符合条件的元素
    当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
    如果没有符合条件的元素返回 undefined。
  * */
  /*总结
  * 数组元素：include indexOf(需要数组下标)
  * 数组对象：some findIndex(需要数组下标) 具有回调函数
  * 过滤用filter
  * 改变数组下的对象：map(返回新的数组) forEach(直接改变原数组)
  * */
  /*
  *
  日常数组操作技巧
  * */
  /*
  * 插入数组 arr.push
  * 制定位置删除数组：arr.splice(this.echarSeries.findIndex(item => item.key === key), 1)
  * */

  /*根据arrObj  删除arrObj2 根据age删除
  * */
  // byArrObjDeleteArrObj2(arrObj,arrObj2,'age');
  // //得到age数组
  // function byArrObjDeleteArrObj2(arrObj,arrObj2,objKey){
  //   arrObj.map(value => {
  //     return value[objKey]
  //   }).forEach(value2 => {
  //     arrObj2.splice(arrObj2.findIndex(item =>item[objKey]===value2),1)
  //   })
  //   //根据ageArr数据，遍历删除arrObj2,得到arrObj2新数组
  //   console.log(arrObj2);
  // }



</script>
</body>
</html>

相关文章

  • JS中对象的复制

    JS中的对象复制分为两种情况：深拷贝和浅拷贝。深拷贝和浅拷贝的区别在于对数组和对象的拷贝，对它们拷贝时浅拷贝只是拷...

  • JS实现深拷贝、instanceof、判断是否为数组

    JS深拷贝 JS中拷贝对象可以按照拷贝的程度可以分为浅拷贝和深拷贝，有些时候我们需要拷贝之后的对象和拷贝之前的对象...

  • js 浅拷贝和深拷贝 开发中数组和对象api总结

    测试的数据 浅拷贝 Object.assign只对第一层有效 ...arr 浅拷贝 类似Object.assign...

  • JS中的深拷贝与浅拷贝

    知乎：js中的深拷贝和浅拷贝？ 掘金: js 深拷贝 vs 浅拷贝 前言 首先深拷贝与浅拷贝只针对 Object,...

  • javascript 数组以及对象的深拷贝

    数组的深拷贝在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示： for 循环实现数组的深...

  • Cloneable 接口

    浅拷贝（shallow clone）和深拷贝（deep clone） 浅拷贝是指拷贝对象时仅仅拷贝对象本身和对象中...

  • C++封装（二）

    第2章 对象成员与对象数组 第3章 深拷贝与浅拷贝 浅拷贝： 深拷贝： 第4章 对象指针 对象指针： 栈中： 对象...

  • 浅拷贝和深拷贝

    本文参考：JavaScript中的浅拷贝和深拷贝js 深拷贝 vs 浅拷贝深入剖析 JavaScript 的深复制...

  • copy和mutableCopy的区别

    copy和mutableCopy的区别 深拷贝和浅拷贝的区别 在OC中对象的拷贝方式有两种:深拷贝和浅拷贝.浅拷贝...

  • js深拷贝和浅拷贝区别

    浅拷贝和深拷贝的区别 1.浅拷贝：将源对象或者原数组的引用 ```直接赋给``` 新对象/新数组 ，新对象/新...

网友评论

      本文标题：js 浅拷贝和深拷贝 开发中数组和对象api总结

      本文链接：https://www.haomeiwen.com/subject/epoacktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|js 浅拷贝和深拷贝 开发中数组和对象api总结|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！