微信小程序中,将数据存入本地缓存是必不可少的操作,在操作其缓存中的数组,在缓存数组的基础上追加一条新的数据,最常见的操作就是使用数组的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)
}
})