1. 使用 concat()
方法拼接数组
javascript
// 在原有数组基础上拼接新数组
Page({
data: {
originalArray: [1, 2, 3]
},
appendData() {
const newData = [4, 5, 6];
const combinedArray = this.data.originalArray.concat(newData);
this.setData({
originalArray: combinedArray
});
}
})
2. 使用展开运算符 ...
(ES6)
javascript
// 使用展开运算符拼接数组
Page({
data: {
originalArray: [1, 2, 3]
},
appendData() {
const newData = [4, 5, 6];
this.setData({
originalArray: [...this.data.originalArray, ...newData]
});
}
})
3. 字符串拼接
javascript
// 字符串拼接
Page({
data: {
originalString: "Hello"
},
appendString() {
const newString = " World";
this.setData({
originalString: this.data.originalString + newString
});
}
})
4. 对象合并
javascript
// 对象合并
Page({
data: {
originalObject: {
name: "张三",
age: 25
}
},
appendObject() {
const newProperties = {
gender: "男",
city: "北京"
};
this.setData({
originalObject: {...this.data.originalObject, ...newProperties}
});
}
})
5. 动态追加到数组
javascript
// 动态追加元素到数组
Page({
data: {
items: ["苹果", "香蕉"]
},
addItem() {
const newItem = "橙子";
this.setData({
items: [...this.data.items, newItem]
});
}
})
6. 从后端获取数据拼接
javascript
// 从服务器获取数据并拼接
Page({
data: {
page: 1,
list: []
},
loadMore() {
const that = this;
const nextPage = this.data.page + 1;
wx.request({
url: 'https://example.com/api/list',
data: { page: nextPage },
success(res) {
that.setData({
list: [...that.data.list, ...res.data.list],
page: nextPage
});
}
});
}
})
注意事项
- 小程序中数据更新必须使用
this.setData()
方法 - 对于大数据量拼接,考虑性能问题,避免频繁更新
- 数组拼接时注意引用类型的问题,必要时使用深拷贝
- 分页加载时,注意处理重复数据的问题
- 对象合并时,同名属性会被后面的对象覆盖
实际应用示例
javascript
// 综合示例:聊天消息拼接
Page({
data: {
messages: [],
currentInput: ''
},
// 发送新消息
sendMessage() {
const newMessage = {
id: Date.now(),
content: this.data.currentInput,
time: new Date().toLocaleTimeString()
};
this.setData({
messages: [...this.data.messages, newMessage],
currentInput: ''
});
},
// 加载历史消息
loadHistory() {
wx.request({
url: 'https://example.com/api/history',
success: (res) => {
this.setData({
messages: [...res.data, ...this.data.messages]
});
}
});
}
})
以上方法可以根据实际需求选择使用,微信小程序中的数据拼接原理与JavaScript一致,关键是要通过setData
方法更新视图。