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

测试的数据

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);
   }

可以直接使用测试