javascript - sort对象 - 小程序数组排序
排序一组JavaScript对象 (16)
下面是一本书“JavaScript:The Good Parts”中稍作修改的优雅实现版本。
注意 :这个版本是稳定的 。 它在执行下一个链接排序时保留第一个排序的顺序。
我已经添加了isAscending
参数。 也按照作者的建议将它转换成ES6
标准和“更新”的好的部件。
您可以按升序排序,也可以按降序排序并按多个属性进行链排序。
const by = function (name, minor, isAscending=true) {
const reverseMutliplier = isAscending ? 1 : -1;
return function (o, p) {
let a, b;
let result;
if (o && p && typeof o === "object" && typeof p === "object") {
a = o[name];
b = p[name];
if (a === b) {
return typeof minor === 'function' ? minor(o, p) : 0;
}
if (typeof a === typeof b) {
result = a < b ? -1 : 1;
} else {
result = typeof a < typeof b ? -1 : 1;
}
return result * reverseMutliplier;
} else {
throw {
name: "Error",
message: "Expected an object when sorting by " + name
};
}
};
};
let s = [
{first: 'Joe', last: 'Besser'},
{first: 'Moe', last: 'Howard'},
{first: 'Joe', last: 'DeRita'},
{first: 'Shemp', last: 'Howard'},
{first: 'Larry', last: 'Fine'},
{first: 'Curly', last: 'Howard'}
];
// Sort by: first ascending, last ascending
s.sort(by("first", by("last")));
console.log("Sort by: first ascending, last ascending: ", s); // "[
// {"first":"Curly","last":"Howard"},
// {"first":"Joe","last":"Besser"}, <======
// {"first":"Joe","last":"DeRita"}, <======
// {"first":"Larry","last":"Fine"},
// {"first":"Moe","last":"Howard"},
// {"first":"Shemp","last":"Howard"}
// ]
// Sort by: first ascending, last descending
s.sort(by("first", by("last", 0, false)));
console.log("sort by: first ascending, last descending: ", s); // "[
// {"first":"Curly","last":"Howard"},
// {"first":"Joe","last":"DeRita"}, <========
// {"first":"Joe","last":"Besser"}, <========
// {"first":"Larry","last":"Fine"},
// {"first":"Moe","last":"Howard"},
// {"first":"Shemp","last":"Howard"}
// ]
我使用Ajax读取以下对象并将它们存储在数组中:
var homes = [
{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}
];
如何创建一个函数来按price
属性按升序 或 降序排序对象,只使用JavaScript?
为了排序数组,你必须定义一个比较函数。 此功能在您所需的排序模式或顺序上(即上升或下降)总是不同的。
让我们创建一些函数,对数组进行升序或降序排序,并包含对象或字符串或数值。
function sorterAscending(a,b) {
return a-b;
}
function sorterDescending(a,b) {
return b-a;
}
function sorterPriceAsc(a,b) {
return parseInt(a['price']) - parseInt(b['price']);
}
function sorterPriceDes(a,b) {
return parseInt(b['price']) - parseInt(b['price']);
}
对数字进行排序(按字母顺序和升序排列):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
对数字进行排序(按字母顺序和降序):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
对数字进行排序(数字和升序):
var points = [40,100,1,5,25,10];
points.sort(sorterAscending());
对数字进行排序(数字和降序):
var points = [40,100,1,5,25,10];
points.sort(sorterDescending());
如上所述,使用sorterPriceAsc和sorterPriceDes方法将数组与期望的键一起使用。
homes.sort(sorterPriceAsc()) or homes.sort(sorterPriceDes())
你想用Javascript对它进行排序,对吧? 你想要的是sort()
函数 。 在这种情况下,您需要编写一个比较函数并将其传递给sort()
,所以如下所示:
function comparator(a, b) {
return parseInt(a["price"], 10) - parseInt(b["price"], 10);
}
var json = { "homes": [ /* your previous data */ ] };
console.log(json["homes"].sort(comparator));
您的比较器将数组中的每个嵌套散列中的一个嵌入散列,并通过检查“价格”字段来决定哪一个更高。
使用lodash.sortBy ,(使用commonjs的说明,您也可以将cdn的脚本include-tag放在html的顶部)
var sortBy = require('lodash.sortby');
// or
sortBy = require('lodash').sortBy;
降序
var descendingOrder = sortBy( homes, 'price' ).reverse();
升序
var ascendingOrder = sortBy( homes, 'price' );
嗨阅读这篇文章后,我做了一个sortComparator为我的需要,与比较多个json属性的功能,我想与你分享。
此解决方案仅比较字符串的升序,但解决方案可以轻松扩展以支持每个属性:反向排序,其他数据类型,使用语言环境,铸造等
var homes = [{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}];
// comp = array of attributes to sort
// comp = ['attr1', 'attr2', 'attr3', ...]
function sortComparator(a, b, comp) {
// Compare the values of the first attribute
if (a[comp[0]] === b[comp[0]]) {
// if EQ proceed with the next attributes
if (comp.length > 1) {
return sortComparator(a, b, comp.slice(1));
} else {
// if no more attributes then return EQ
return 0;
}
} else {
// return less or great
return (a[comp[0]] < b[comp[0]] ? -1 : 1)
}
}
// Sort array homes
homes.sort(function(a, b) {
return sortComparator(a, b, ['state', 'city', 'zip']);
});
// display the array
homes.forEach(function(home) {
console.log(home.h_id, home.city, home.state, home.zip, home.price);
});
结果是
$ node sort
4 Bevery Hills CA 90210 319250
5 New York NY 00010 962500
3 Dallas TX 75201 162500
和另一种
homes.sort(function(a, b) {
return sortComparator(a, b, ['city', 'zip']);
});
结果
$ node sort
4 Bevery Hills CA 90210 319250
3 Dallas TX 75201 162500
5 New York NY 00010 962500
如果你想使用它,我最近写了一个通用函数来为你管理它。
/**
* Sorts an object into an order
*
* @require jQuery
*
* @param object Our JSON object to sort
* @param type Only alphabetical at the moment
* @param identifier The array or object key to sort by
* @param order Ascending or Descending
*
* @returns Array
*/
function sortItems(object, type, identifier, order){
var returnedArray = [];
var emptiesArray = []; // An array for all of our empty cans
// Convert the given object to an array
$.each(object, function(key, object){
// Store all of our empty cans in their own array
// Store all other objects in our returned array
object[identifier] == null ? emptiesArray.push(object) : returnedArray.push(object);
});
// Sort the array based on the type given
switch(type){
case 'alphabetical':
returnedArray.sort(function(a, b){
return(a[identifier] == b[identifier]) ? 0 : (
// Sort ascending or descending based on order given
order == 'asc' ? a[identifier] > b[identifier] : a[identifier] < b[identifier]
) ? 1 : -1;
});
break;
default:
}
// Return our sorted array along with the empties at the bottom depending on sort order
return order == 'asc' ? returnedArray.concat(emptiesArray) : emptiesArray.concat(returnedArray);
}
如果您使用Underscore.js,请尝试sortBy:
// price is of an integer type
_.sortBy(homes, "price");
// price is of a string type
_.sortBy(homes, function(home) {return parseInt(home.price);});
如果有人需要它进行字符串排序,
var dataArr = {
"hello": [{
"id": 114,
"keyword": "zzzzzz",
"region": "Sri Lanka",
"supportGroup": "administrators",
"category": "Category2"
}, {
"id": 115,
"keyword": "aaaaa",
"region": "Japan",
"supportGroup": "developers",
"category": "Category2"
}]
};
var sortArray = dataArr['hello'];
sortArray.sort(function(a,b) {
if ( a.region < b.region )
return -1;
if ( a.region > b.region )
return 1;
return 0;
} );
尽管对单个数组进行排序有点矫枉过正,但这个原型函数允许使用dot
语法按任意键(升序或降序)排序Javascript数组, 包括嵌套键 。
(function(){
var keyPaths = [];
var saveKeyPath = function(path) {
keyPaths.push({
sign: (path[0] === '+' || path[0] === '-')? parseInt(path.shift()+1) : 1,
path: path
});
};
var valueOf = function(object, path) {
var ptr = object;
for (var i=0,l=path.length; i<l; i++) ptr = ptr[path[i]];
return ptr;
};
var comparer = function(a, b) {
for (var i = 0, l = keyPaths.length; i < l; i++) {
aVal = valueOf(a, keyPaths[i].path);
bVal = valueOf(b, keyPaths[i].path);
if (aVal > bVal) return keyPaths[i].sign;
if (aVal < bVal) return -keyPaths[i].sign;
}
return 0;
};
Array.prototype.sortBy = function() {
keyPaths = [];
for (var i=0,l=arguments.length; i<l; i++) {
switch (typeof(arguments[i])) {
case "object": saveKeyPath(arguments[i]); break;
case "string": saveKeyPath(arguments[i].match(/[+-]|[^.]+/g)); break;
}
}
return this.sort(comparer);
};
})();
用法:
var data = [
{ name: { first: 'Josh', last: 'Jones' }, age: 30 },
{ name: { first: 'Carlos', last: 'Jacques' }, age: 19 },
{ name: { first: 'Carlos', last: 'Dante' }, age: 23 },
{ name: { first: 'Tim', last: 'Marley' }, age: 9 },
{ name: { first: 'Courtney', last: 'Smith' }, age: 27 },
{ name: { first: 'Bob', last: 'Smith' }, age: 30 }
]
data.sortBy('age'); // "Tim Marley(9)", "Carlos Jacques(19)", "Carlos Dante(23)", "Courtney Smith(27)", "Josh Jones(30)", "Bob Smith(30)"
使用点语法或数组语法对嵌套属性进行排序:
data.sortBy('name.first'); // "Bob Smith(30)", "Carlos Dante(23)", "Carlos Jacques(19)", "Courtney Smith(27)", "Josh Jones(30)", "Tim Marley(9)"
data.sortBy(['name', 'first']); // "Bob Smith(30)", "Carlos Dante(23)", "Carlos Jacques(19)", "Courtney Smith(27)", "Josh Jones(30)", "Tim Marley(9)"
按多个键排序:
data.sortBy('name.first', 'age'); // "Bob Smith(30)", "Carlos Jacques(19)", "Carlos Dante(23)", "Courtney Smith(27)", "Josh Jones(30)", "Tim Marley(9)"
data.sortBy('name.first', '-age'); // "Bob Smith(30)", "Carlos Dante(23)", "Carlos Jacques(19)", "Courtney Smith(27)", "Josh Jones(30)", "Tim Marley(9)"
您可以分叉回购: https://github.com/eneko/Array.sortBy : https://github.com/eneko/Array.sortBy
您可以使用带有回调函数的JavaScript sort
方法:
function compareASC(homeA, homeB)
{
return parseFloat(homeA.price) - parseFloat(homeB.price);
}
function compareDESC(homeA, homeB)
{
return parseFloat(homeB.price) - parseFloat(homeA.price);
}
// Sort ASC
homes.sort(compareASC);
// Sort DESC
homes.sort(compareDESC);
我推荐GitHub:Array sortBy - 使用Schwartzian变换的sortBy
方法的最佳实现
但现在我们要尝试这种方法Gist:sortBy-old.js 。
让我们创建一个方法来对数组进行排序,从而可以通过某些属性排列对象。
创建排序功能
var sortBy = (function () {
var toString = Object.prototype.toString,
// default parser function
parse = function (x) { return x; },
// gets the item to be sorted
getItem = function (x) {
var isObject = x != null && typeof x === "object";
var isProp = isObject && this.prop in x;
return this.parser(isProp ? x[this.prop] : x);
};
/**
* Sorts an array of elements.
*
* @param {Array} array: the collection to sort
* @param {Object} cfg: the configuration options
* @property {String} cfg.prop: property name (if it is an Array of objects)
* @property {Boolean} cfg.desc: determines whether the sort is descending
* @property {Function} cfg.parser: function to parse the items to expected type
* @return {Array}
*/
return function sortby (array, cfg) {
if (!(array instanceof Array && array.length)) return [];
if (toString.call(cfg) !== "[object Object]") cfg = {};
if (typeof cfg.parser !== "function") cfg.parser = parse;
cfg.desc = !!cfg.desc ? -1 : 1;
return array.sort(function (a, b) {
a = getItem.call(cfg, a);
b = getItem.call(cfg, b);
return cfg.desc * (a < b ? -1 : +(a > b));
});
};
}());
设置未分类的数据
var data = [
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "Tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-01T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "Cash"}
];
使用它
按"date"
String
"date"
排列数组
// sort by @date (ascending)
sortBy(data, { prop: "date" });
// expected: first element
// { date: "2011-11-01T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab" }
// expected: last element
// { date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa"}
如果您想忽略区分大小写,请设置parser
回调:
// sort by @type (ascending) IGNORING case-sensitive
sortBy(data, {
prop: "type",
parser: (t) => t.toUpperCase()
});
// expected: first element
// { date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "Cash" }
// expected: last element
// { date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa" }
如果您想将"date"
字段转换为Date
类型:
// sort by @date (descending) AS Date object
sortBy(data, {
prop: "date",
desc: true,
parser: (d) => new Date(d)
});
// expected: first element
// { date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa"}
// expected: last element
// { date: "2011-11-01T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab" }
在这里你可以玩代码: jsbin.com/lesebi
感谢@Ozesh的反馈,与虚假价值属性相关的问题得到了解决。
按照价格从小到大排序:
homes.sort(function(a, b) {
return parseFloat(a.price) - parseFloat(b.price);
});
或者在ES6版本之后:
homes.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
有些文档可以在here找到。
要对其进行排序,您需要创建一个带有两个参数的比较函数。 然后使用该比较函数调用排序函数,如下所示:
// a and b are object elements of your array
function mycomparator(a,b) {
return parseInt(a.price, 10) - parseInt(b.price, 10);
}
homes.sort(mycomparator);
如果要按升序切换减号每一侧的表达式。
这可以通过简单的一行valueof() sort函数来实现。 运行下面的代码片段查看演示。
var homes = [
{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}
];
console.log("To sort descending/highest first, use operator '<'");
homes.sort(function(a,b) { return a.price.valueOf() < b.price.valueOf();});
console.log(homes);
console.log("To sort ascending/lowest first, use operator '>'");
homes.sort(function(a,b) { return a.price.valueOf() > b.price.valueOf();});
console.log(homes);
这是一个更灵活的版本,它允许您创建可重用的排序功能,并按任何字段进行排序。
var sort_by = function(field, reverse, primer){
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
现在你可以按任意字段排序......
var homes = [{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}];
// Sort by price high to low
homes.sort(sort_by('price', true, parseInt));
// Sort by city, case-insensitive, A-Z
homes.sort(sort_by('city', false, function(a){return a.toUpperCase()}));
这是上述所有答案的顶点。
小提琴验证: http://jsfiddle.net/bobberino/4qqk3/ : http://jsfiddle.net/bobberino/4qqk3/
var sortOn = function (arr, prop, reverse, numeric) {
// Ensure there's a property
if (!prop || !arr) {
return arr
}
// Set up sort function
var sort_by = function (field, rev, primer) {
// Return the required a,b function
return function (a, b) {
// Reset a, b to the field
a = primer(a[field]), b = primer(b[field]);
// Do actual sorting, reverse as needed
return ((a < b) ? -1 : ((a > b) ? 1 : 0)) * (rev ? -1 : 1);
}
}
// Distinguish between numeric and string to prevent 100's from coming before smaller
// e.g.
// 1
// 20
// 3
// 4000
// 50
if (numeric) {
// Do sort "in place" with sort_by function
arr.sort(sort_by(prop, reverse, function (a) {
// - Force value to a string.
// - Replace any non numeric characters.
// - Parse as float to allow 0.02 values.
return parseFloat(String(a).replace(/[^0-9.-]+/g, ''));
}));
} else {
// Do sort "in place" with sort_by function
arr.sort(sort_by(prop, reverse, function (a) {
// - Force value to string.
return String(a).toUpperCase();
}));
}
}