微信小程序——操作缓存中的数组

微信小程序中，将数据存入本地缓存是必不可少的操作，在操作其缓存中的数组，在缓存数组的基础上追加一条新的数据，最常见的操作就是使用数组的push方法。但是直接使用数据的push方法就会出现以下结果：

考察JavaScript基本功的时刻到了…

数组中的push和concat方法

push() ：向数组的末尾添加一个或更多元素，并返回新的长度
concat() ：连接两个或更多的数组，并返回结果

测试场景：初始页面是缓存deviceList数组数据，点击go方法操控缓存中的deviceList数组追加新的数据

index.wxml:

<view class="container">
	<view bindtap="go">GO</view>
</view>

index.js:

Page({
  onLoad(){
    wx.setStorageSync('deviceList', [{
      id:'id1',
      curTime:'2021-07-14 13:39:10'
    }])
  },
  go(){
    let deviceList = wx.getStorageSync('deviceList')

    console.log("deviceList:",deviceList)
    let newDeviceList = deviceList.push({
      id:'id2',
      curTime:'2021-07-14 13:41:06'
    })

    console.log("newDeviceList:",newDeviceList)
    wx.setStorageSync('deviceList', newDeviceList)
  }
})

初始缓存数据结果如下：

点击go方法在deviceList缓存中追加新的数据结果如下：

追加新的数据后，deviceList直接显示的是2，而不是两条对象

解决方法：
将push方法改用为concat方法去操控数组中的数据

Page({
  onLoad(){
    wx.setStorageSync('deviceList', [{
      id:'id1',
      curTime:'2021-07-14 13:39:10'
    }])
  },
  go(){
    let newDeviceList = wx.getStorageSync('deviceList').concat({
      id:'id2',
      curTime:'2021-07-14 13:41:06'
    })
    wx.setStorageSync('deviceList', newDeviceList)
  }
})