深拷贝和浅拷贝---操作临时变量时，原始数据不改变

• 需求：

  如下图，点击更多指标时，底部弹出多选项，选中的选项则替换列表后两列的表头及该表头对应的表体数据。
  最多可选两项，当选择后没有点确认按钮则不改变列表数据；只有点了确认才会改变列表数据。
  

• 思路：

  1、选择选项的时候，需要将选中的项放到临时数组里，如果点击了确认则将临时数组的数据赋值给原始数组；如果点击了关闭，则将原始数组的数据重新再赋值给临时数组。始终保持关闭弹框时，临时数组和原始数组的数据一致。
  2、最初，直接讲原始数据赋值给临时数组，导致改变临时数组时，原始数组里的数据也会被改变。后面通过
  const tempItems = this.data.items1.map(arr => { return {...arr} })
const tempSelectList = this.data.selectList1.map(arr1 => { return {...arr1} })
  map进行深拷贝之后，得以实现改变临时数组时，原始数组数据不变。

• 代码：

  <!--pages/boxOfficeModule/boxOfficeList/boxOfficeList.wxml-->
  <view>
    <view class="listBox">
      <view class="boxOfficeList">
        <view class="dailyList">票房排名</view>
        <view class="moreIndex" bindtap="showModel">更多指标<image class="moreImg" src="../../../images/more.png"></image></view>
      </view>
      <view class="tableList">
        <view class="listHead">
          <view>排名</view>
          <view>影片名</view>
          <view class="dayBoxOff">当日票房(万)</view>
           <!-- 后两列表头 -->
          <view wx:for='{{ selectList }}' wx:key="index">{{ item.nameC }}</view>
      </view>
        <view class="li" wx:for="{{list}}" wx:key="sort" wx:for-index="i" data-videoId="{{item.videoId}}" data-vType="{{item.vType}}" data-platformIds="{{item.platformId}}" data-periodCount="{{item.periodCount}}" bindtap="goDetail">
          <view>
            <view>{{ item.top }}</view>
          </view>
          <view>
            <view class="name">
              <text class="newTip" wx:if="{{item.issueDay<=3}}">new </text>{{ item.name.length > 6? item.name[0] + item.name[1] + item.name[2] + item.name[3] + item.name[4] + item.name[5] + '...' : item.name }}
            </view>
            <view class="file">上映{{item.issueDay ? item.issueDay : '--'}}天
              <image wx:if="{{item.platformId1 == '1'}}" class="imgStyle1 aqy" src="../../../images/aqy.png"></image>
              <image wx:if="{{item.platformId2 == '2'}}" class="imgStyle1 yk" src="../../../images/yk.png"></image>
              <image wx:if="{{item.platformId3 == '3'}}" class="imgStyle1 tx" src="../../../images/tx.png"></image>
            </view>
          </view>
          <view>
            <view class="dayBoxOff">{{ item.income }}</view>
          </view>
          <!-- 后两列表体数据 -->
          <view wx:for="{{selectList}}" wx:key="index" wx:for-index="index"  wx:for-item="item2" class="activeLi">
            {{ showList[i]['async' + index] ? showList[i]['async' + index] : '--' }}
          </view>
        </view>
      </view>
    </view>
    <cover-view class='{{bg}}' style="display:{{backgroundVisible ? 'block':'none'}}"></cover-view>
    <cover-view class="element-wrapper" animation="{{animation}}" style="display:{{show ? 'block':'none'}}">
      <cover-view class="element">
        <cover-view class='picker_header'>
          <cover-view class="left-bt" catchtap="hidden">关闭</cover-view>
          <cover-view class="right-bt" catchtap="sure">确认</cover-view>
        </cover-view>
        <cover-view class="box">
          <cover-view class="{{item.checked ? 'all' : 'notAll'}} check" wx:for='{{ items }}' wx:key="index" data-index='{{index}}' catchtap='moreIndicators'>{{ item.name }}</cover-view>
        </cover-view>
        <cover-view class="tip"><cover-view class="">*</cover-view><cover-view style="width: 600rpx;">最多选择2项，最少选择1项</cover-view></cover-view>
      </cover-view>
    </cover-view>
  </view>
  

  // pages/boxOfficeModule/boxOfficeList/boxOfficeList.js
  var app = getApp()
  var util = require('../../../utils/util.js')
  
  var action = '';
  var moveY = 200;
  var animation = animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 400,
      timingFunction: "ease",
      delay: 0
  })
  animation.translateY(moveY + 'vh').step()
  Page({
    /**
     * 页面的初始数据
     */
    data: {    
      show: false,
      backgroundVisible: false,
      animation: animation,
      bg: 'background',
  
      items: [],
      
      items1: [{
        name: '排名比',
        value: '01',
        checked: false,
        nameC: '排名比',
        backendName: 'topR'
      },
      {
        name: '日环比',
        value: '04',
        checked: true,
        nameC: '日环比',
        backendName: 'incomeR'
      },
      {
        name: '累计票房',
        value: '05',
        checked: true,
        nameC: '累计票房(万)',
        backendName: 'tIncome'
      },
      {
        name: '当日观影人次',
        value: '07',
        checked: false,
        nameC: '当日观影人次(万)',
        backendName: 'ev'
      },
      {
        name: '累计观影人次',
        value: '09',
        checked: false,
        nameC: '累计观影人次(万)',
        backendName: 'tEv'
      },
      {
        name: '制作成本',
        value: '12',
        checked: false,
        nameC: '制作成本(万)',
        backendName: 'cost'
      }
      ],
      selectList1: [{
        name: '日环比',
        value: '04',
        checked: true,
        nameC: '日环比',
        backendName: 'incomeR'
      },
      {
        name: '累计票房',
        value: '05',
        checked: true,
        nameC: '累计票房(万)',
        backendName: 'tIncome'
      }
      ],
      queryParam: {
        dateStart: '',
        dateStop: '',
        platformId: 0
      },
      selectList: [],
      showList: [],
      list: [],
      tempItems: [],
      tempShowList: [],
      tempSelectList: [],
    },
    
    animationEvents: function (that, moveY, action) {
      that.animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 400,
        timingFunction: "ease",
        delay: 0
      })
      that.animation.translateY(moveY + 'vh').step()
      if (action == 'show') {
        that.setData({
          animation: that.animation.export(),
          show: true,
          backgroundVisible: true,
          bg: 'bg',
          disableScroll: 'disableScroll'
        });
      } else if (action == 'hide') {
        that.setData({
          animation: that.animation.export(),
          show: false,
          backgroundVisible: false,
          bg: 'background',
          disableScroll: ''
        });
      }
    },
    // 点击更多指标，显示底部弹框
    showModel: function(e) {
      moveY = 0;
      action = 'show';
      this.animationEvents(this, moveY, action);
    },
    // 确认按钮，将操作后临时变量的数据赋值给原始变量，进行页面更新
    sure(e) {
      moveY = 200;
      action = 'hide';
      this.animationEvents(this, moveY, action);
      const items = this.data.items.map(arr => {
        return {...arr}
      })
      const selectList = this.data.tempSelectList.map(arr1 => {
        return {...arr1}
      })
      if (this.data.tempShowList.length !== 0) {
        this.setData({
        "showList": this.data.tempShowList,
      })
      }
      this.setData({
        "selectList": selectList,
        "tempItems": items,
      })
    },
    // 关闭按钮，将原始数据重新赋值
    hidden(e) {
      const tempItems = this.data.tempItems.map(arr => {
        return {...arr}
      })
      const selectList = this.data.selectList.map(arr1 => {
        return {...arr1}
      })
      const showList = this.data.showList.map(arr1 => {
        return {...arr1}
      })    moveY = 200;
      action = 'hide';
      this.animationEvents(this, moveY, action);
      this.setData({
        "items": tempItems,
        "tempSelectList": selectList,
        "tempShowList": showList
      })
    },
    // 选择指标的点击事件，最多选两个，最少选一个。触发之后，改变临时变量的数据
    moreIndicators(e) {
      const index = e.currentTarget.dataset.index
      const item = this.data.items[index]
  
      if (this.data.tempSelectList.length == 2 && item.checked == false) {
        wx.showToast({
          title: '最多选择2项！',
          icon: 'none',
          duration: 2000
        })
        return
      } else if (this.data.tempSelectList.length == 1 && item.checked == true) {
        wx.showToast({
          title: '最少选择1项！',
          icon: 'none',
          duration: 2000
        })
        return
      }
      item.checked = !item.checked
      this.setData({
        items: this.data.items
      })
      const checked = this.data.items[index].checked
      if (checked) {
        this.data.tempSelectList.push(this.data.items[index])
        this.setData({
          "tempSelectList": this.data.tempSelectList
        })
  
        this.setData({
          "tempShowList": []
        })
        this.data.list.forEach(listItem => {
          const obj = {}
          this.data.tempSelectList.forEach((selectListItem, i) => {
            obj['async' + i] = listItem[selectListItem.backendName]
          })
          this.data.tempShowList.push(obj)
        })
        this.setData({
          "tempShowList": this.data.tempShowList
        })
      } else {
        const itemValue = this.data.items[index].value
        const selectIndex = this.data.tempSelectList.findIndex(item => item.value === itemValue)
        this.data.tempSelectList.splice(selectIndex, 1)
        this.setData({
          "tempSelectList": this.data.tempSelectList
        })
  
        this.setData({
          "tempShowList": []
        })
        this.data.list.forEach(listItem => {
          const obj = {}
          this.data.tempSelectList.forEach((selectListItem, i) => {
            obj['async' + i] = listItem[selectListItem.backendName]
          })
          this.data.tempShowList.push(obj)
        })
        this.setData({
          "tempShowList": this.data.tempShowList
        })
      }
    },
    getList: function (query) {
      this.setData({
        "list": [],
        "showList": []
       })
      util.dataInformation('加载中', `/box/day/boxData/list`, 'GET', query, res => {
        wx.hideLoading()
        if(!res.data.data){
          this.setData({
            list: []
          })
        }else{
          var data = res.data.data.list
          let backDate = res.data.data.info.date
          let backTime = new Date(backDate).getTime()
          this.setData({
            "list": data,
            "showList": [],
          })
          this.data.list.forEach(listItem => {
            const obj = {}
            this.data.selectList.forEach((selectListItem, i) => {
              obj['async' + i] = listItem[selectListItem.backendName]
            })
            this.data.showList.push(obj)
          })
          this.setData({
            "showList": this.data.showList,
          })
        }
      })
    },
      /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      if (options && options.dateTime) {
        var time = options.dateTime - 0
        this.setData({
          "platformIdIndex": options.platformIdIndex,
          "queryParam.platformId": options.platformIdIndex
        })
      } else {
        var time = new Date().getTime() - 24*60*60*1000
      }
      const prevDate = util.formatDate(time, 'yyyy-mm-dd')
      // 将整个更多指标的选项及选中的项分别赋值给临时变量
      const tempItems = this.data.items1.map(arr => {
        return {...arr}
      })
      const tempSelectList = this.data.selectList1.map(arr1 => {
        return {...arr1}
      })
      this.setData({
        "queryParam.dateStart": prevDate,
        "items": this.data.items1,
        "selectList": tempSelectList,
        "tempItems": tempItems,
        "tempSelectList": this.data.selectList1
      })
      this.getList(this.data.queryParam)
    },
  })
  
  

  /* pages/boxOfficeModule/boxOfficeList/boxOfficeList.wxss */
  /* 列表头部 */
  .boxOfficeList {
    height: 76rpx;
    line-height: 76rpx;
    overflow: hidden;
  }
  .dailyList {
    display: inline-block;
    font-size: 26rpx;
    color: #000000;
    padding-left: 35rpx;
  }
  .moreIndex {
    float: right;
    /* display: inline-block; */
    font-size: 24rpx;
    color: #333333;
    padding-right: 22rpx;
  }
  .moreImg {
    width: 9rpx;
    height: 17rpx;
    padding-left: 8rpx;
  }
  /* 列表样式 */
  .tableList {
    /* margin-top: 18rpx; */
    font-size: 21rpx;
  }
  /* 表头样式 */
  .listHead {
    display: flex;
    /* flex-direction: wrap; */
    text-align: center;
    align-items: center;
    height: 70rpx;
    /* line-height: 66rpx; */
    background-color: #F7F7F7;
    color: #333;
    font-size: 24rpx;
  }
  .listHead view:nth-child(1){
    flex: 1;
  }
  .listHead view:nth-child(2){
    text-align: left;
    flex: 2.2;
  }
  .listHead view:nth-child(3){
    flex: 1.5;
  }
  .listHead view:nth-child(4){
    flex: 1.5;
  }
  .listHead view:nth-child(5){
    flex: 1.5;
    position: relative;
  }
  .downArrow {
    width: 12rpx;
    height: 6rpx;
    margin-bottom: 6rpx;
  }
  /* 下拉列表 */
  .selectBox {
    width: 100%;
  }
  .selectList {
    position: absolute;
    width: 15%;
    text-align: center;
    height: 118rpx;
    border-radius: 2px;
    box-shadow: 0 0 2px #999;
    background: #fff;
    z-index: 999;
    margin-left: 26rpx;
  }
  .selectItem {
    text-align: center !important;
  }
  /* 表体样式 */
  .dayBoxOff {
    color: #E8380D;
  }
  
  .newTip {
    color: #E1BC74;
    font-size: 24rpx;
  }
  .li {
    display: flex;
    flex-direction: row;
    text-align: center;
    background-color: #fff;
    color: #333;
    justify-content: center;
    height: 100rpx;
    line-height: 100rpx;
  }
  .li:nth-child(2n-1) {
    background-color: #F7F7F7;
  }
  .li view:nth-child(1) {
    flex: 1;
    font-size: 26rpx;
  }
  .imgStyle {
    width: 39rpx;
    height: 39rpx;
    padding-top: 21rpx;
  
  }
  .imgStyle1 {
    padding-left: 10rpx;
  }
  .li view:nth-child(2) {
    position: relative;
    flex: 2.2;
    text-align: left;
    line-height: 70rpx;
    font-size: 23rpx;
  }
  .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 24rpx;
    color: #000000;
    line-height: 62rpx;
    height: 58rpx;
  }
  .fileNum {
    padding-left: 4rpx;
  }
  /* 上映样式 */
  .li view:nth-child(2) .file {
    font-size: 20rpx;
    color: #999;
    line-height: 8rpx;
  }
  .li view:nth-child(2) .file  view {
    display: inline-block;
  }
  .li view:nth-child(3) {
    flex: 1.5;
    font-size: 24rpx;
    color: #333;
  }
  .activeLi {
    font-size: 24rpx;
    color: #000;
  }
  .mg {
    width: 24rpx;
    height: 26rpx;
  }
  .yk {
    width: 25rpx;
    height: 20rpx;
  }
  .aqy {
    width: 24rpx;
    height: 19rpx;
  }
  .tx {
    width: 20rpx;
    height: 20rpx;
  }
  .li view:nth-child(4) {
    flex: 1.5;
    font-size: 24rpx;
    color: #333;
  }
  .li view:nth-child(5) {
    flex: 1.5;
    font-size: 24rpx;
    color: #333;
  }
  
  
  /* 图表 */
  .chart-title {
    color: #333;
    font-size: 28rpx;
    padding-left: 11rpx;
    margin: 30rpx 0 0 24rpx;
    text-align: left;
  }
  .chart-map {
    width: 100%;
    height: 400rpx;
  }
  .chart-map ec-canvas {
    width: 100%;
    height: 100%;
  }
  
  /* 更多指标 */
  .element-wrapper {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 10000;
  }
  
  .background {
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
  }
  
  .bg {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 300vh;
    position: absolute;
    top: 0;
    transition-property: background-color;
    transition-timing-function: ease;
    transition-duration: 1s;
    transition-delay: 0;
    z-index: 999;
  }
  
  .element {
    position: absolute;
    width: 100%;
    height: 38vh;
    bottom: 0;
    background-color: #fff;
  }
  .picker_header {
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .element .right-bt {
    font-size: 28rpx;
    color: #E8380D;
    text-align: right;
    line-height: 66rpx;
    padding-right: 30rpx;
    display: inline-block;
  }
  .left-bt {
    font-size: 28rpx;
    color: #666;
    text-align: left;
    line-height: 66rpx;
    padding-left: 30rpx;
    display: inline-block;
  }
  
  .element .line {
    display: block;
    position: fixed;
    height: 1px;
    width: 100%;
    margin-top: 89rpx;
    background-color: #eee;
  }
  
  .box {
    color: #333;
    font-size: 24rpx;
    font-family:PingFang SC;
    padding-top: 10rpx;
    text-align: left;
    padding-left: 14rpx;
    background-color:#fff;
    border-top: 1rpx solid #E1E1E1;
  }
  
  .check {
    /* display: inline-block; */
    float: left;
    width:225rpx;
    height:73rpx;
    line-height: 73rpx;
    background:#fff;
    border-radius:7rpx;
    margin: 8rpx !important;
    text-align: center;
    color: #E8380D;
    border: 1rpx solid #E8380D;
  }
  
  .all {
    color: #fff;
    background-color: #E8380D;
  }
  
  .notAll {
    color: #E8380D;
    background-color: #fff;
  }
  .tip {
    display: flex;
    font-size: 24rpx;
    color: #888888;
    padding-left: 16rpx;
    padding-top: 10rpx;
  }
  

• 参考文章：

  面试题：深拷贝和浅拷贝(超级详细，有内存图)
  js Map对象的用法
  es6 扩展运算符 三个点（…）