AngularJS中如何按id字段对JSON对象数组排序并赋值给新scope变量
问题根因
- 你的
id字段为字符串类型,虽然减法运算会隐式转换为数字,但存在隐式转换异常的风险,是排序不符合预期的潜在诱因 - 控制台打印看起来未排序的常见原因是浏览器控制台输出的是数组引用,展开时才会读取数组的实时值,可通过打印JSON序列化后的内容确认排序结果
- 你直接执行
$scope.newCitySort = $scope.cityData属于引用赋值,两个变量指向同一个数组对象,没有生成独立的排序结果副本 - 数组的
sort()方法是原地排序,会直接修改原数组,若要保留原数组的原始顺序,需要先拷贝数组再排序
实现代码
// 场景1:不需要保留原cityData的原始顺序,直接排序后生成新副本 $scope.cityData.sort(function (a, b) { // 手动转换为数字,避免字符串隐式转换异常 return Number(a.id) - Number(b.id); }); // 浅拷贝数组生成独立副本赋值给新变量 $scope.newCitySort = $scope.cityData.slice(); // 场景2:需要保留原cityData的原始顺序,先拷贝再排序 $scope.newCitySort = [...$scope.cityData].sort(function (a, b) { return Number(a.id) - Number(b.id); }); // 打印排序快照确认结果 console.log(JSON.stringify($scope.newCitySort));
补充说明
- 如果
id字段存在非数字前缀等特殊格式,可以改用parseInt(a.id, 10)做整数转换,适配性更强 - 浅拷贝数组的方式除了
slice()、扩展运算符[...arr],也可以用Array.from(arr),都适配你当前数组元素为简单对象的场景 - 不要直接对原数组做赋值操作,避免两个变量绑定同一份引用导致后续操作互相影响
内容的提问来源于stack exchange,提问作者Kumara
相关产品推荐
相关产品推荐

