如何在JavaScript中对数组对象进行排序？

huangapple
go评论102阅读模式
英文:

How can we sort array object in JavaScript?

问题

我试图按颜色对对象数组进行排序。

我的代码：

  1. const colors = [
  2.   {
  3.     "color": "purple",
  4.     "type": true
  5.   },
  6.   {
  7.     "color": "red",
  8.     "type": false
  9.   },
  10.   {
  11.     "color": "green",
  12.     "type": true
  13.   },
  14.   {
  15.     "color": "black",
  16.     "type": false
  17.   },
  18.   {
  19.     "color": "pink",
  20.     "type": true
  21.   }
  22. ]
  24. const list = colors.sort((a) => a.color);
  25. console.log(list);

如何实现这个目标？

英文:

I'm trying to sort a object array as per colors.

My code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const colors = [
  2.   {
  3.     &quot;color&quot;: &quot;purple&quot;,
  4.     &quot;type&quot;: true
  5.    
  6.   },
  7.   {
  8.     &quot;color&quot;: &quot;red&quot;,
  9.     &quot;type&quot;: false
  10.   },
  11. {
  12.     &quot;color&quot;: &quot;green&quot;,
  13.     &quot;type&quot;: true
  14.   },
  15. {
  16.     &quot;color&quot;: &quot;black&quot;,
  17.     &quot;type&quot;: false
  18.   },
  19. {
  20.     &quot;color&quot;: &quot;pink&quot;,
  21.     &quot;type&quot;: true
  22.   }]
  23.   
  25. const list = colors.sort((a) =&gt; a.color);
  26. console.log(list);

<!-- end snippet -->

How can I achieve this?

答案1

得分: 3

此代码将帮助您根据颜色值按升序排序。

  1. const colors = [
  2.   {
  3.     "color": "purple",
  4.     "type": true
  5.   },
  6.   {
  7.     "color": "red",
  8.     "type": false
  9.   },
  10.   {
  11.     "color": "green",
  12.     "type": true
  13.   },
  14.   {
  15.     "color": "black",
  16.     "type": false
  17.   },
  18.   {
  19.     "color": "pink",
  20.     "type": true
  21.   }
  22. ]
  24. const sortedColors = colors.sort((a, b) => {
  25.   if (a.color < b.color) {
  26.     return -1;
  27.   }
  28.   if (a.color > b.color) {
  29.     return 1;
  30.   }
  31.   return 0;
  32. });
  34. console.log(sortedColors);

如果您需要进一步的帮助，请随时告诉我。

英文:

This code will help you to sort in asc order based on color value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.  const colors = [
  2.       {
  3.         &quot;color&quot;: &quot;purple&quot;,
  4.         &quot;type&quot;: true
  5.        
  6.       },
  7.       {
  8.         &quot;color&quot;: &quot;red&quot;,
  9.         &quot;type&quot;: false
  10.       },
  11.       {
  12.         &quot;color&quot;: &quot;green&quot;,
  13.         &quot;type&quot;: true
  14.       },
  15.       {
  16.         &quot;color&quot;: &quot;black&quot;,
  17.         &quot;type&quot;: false
  18.       },
  19.       {
  20.         &quot;color&quot;: &quot;pink&quot;,
  21.         &quot;type&quot;: true
  22.       }
  23.     ]
  24.     
  25.     const sortedColors = colors.sort((a, b) =&gt; {
  26.       if (a.color &lt; b.color) {
  27.         return -1;
  28.       }
  29.       if (a.color &gt; b.color) {
  30.         return 1;
  31.       }
  32.       return 0;
  33.     });
  34.     
  35.     console.log(sortedColors);

<!-- end snippet -->

答案2

得分: 2

尝试这个，它会起作用。

您可以根据需求更改条件，谢谢。

  1. const colors = [{
  2.     "color": "purple",
  3.     "type": true
  4.   },
  5.   {
  6.     "color": "red",
  7.     "type": false
  8.   },
  9.   {
  10.     "color": "green",
  11.     "type": true
  12.   },
  13.   {
  14.     "color": "black",
  15.     "type": false
  16.   },
  17.   {
  18.     "color": "pink",
  19.     "type": true
  20.   }
  21. ]
  23. const result = colors.sort((a, b) => (a.color > b.color) ? 1 : ((b.color > a.color) ? -1 : 0))
  24. console.log(result);
英文:

Try this, it will work.

You can change condition as per requirement, Thanks.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const colors = [{
  2.     &quot;color&quot;: &quot;purple&quot;,
  3.     &quot;type&quot;: true
  5.   },
  6.   {
  7.     &quot;color&quot;: &quot;red&quot;,
  8.     &quot;type&quot;: false
  9.   },
  10.   {
  11.     &quot;color&quot;: &quot;green&quot;,
  12.     &quot;type&quot;: true
  13.   },
  14.   {
  15.     &quot;color&quot;: &quot;black&quot;,
  16.     &quot;type&quot;: false
  17.   },
  18.   {
  19.     &quot;color&quot;: &quot;pink&quot;,
  20.     &quot;type&quot;: true
  21.   }
  22. ]
  24. const result = colors.sort((a, b) =&gt; (a.color &gt; b.color) ? 1 : ((b.color &gt; a.color) ? -1 : 0))
  25. console.log(result);

<!-- end snippet -->

答案3

得分: 2

JavaScript中的Array.prototype.sort接受一个带有两个参数的回调函数。

根据MDN，

compareFn(a, b) 返回值 排序顺序
> 0 在b之后排序a
< 0 在a之前排序b
=== 0 保持a和b的原始顺序

然而，您可以使用内置的String.prototype.localeCompare来比较两个字符串，而不是编写自己的比较函数。

  1. const colors = [
  2.   {
  3.     "color": "purple",
  4.     "type": true
  5.   },
  6.   {
  7.     "color": "red",
  8.     "type": false
  9.   },
  10.   {
  11.     "color": "green",
  12.     "type": true
  13.   },
  14.   {
  15.     "color": "black",
  16.     "type": false
  17.   },
  18.   {
  19.     "color": "pink",
  20.     "type": true
  21.   }
  22. ]
  24. const list = colors.sort((a, b) => a.color.localeCompare(b.color));
  25. console.log(list);
英文:

Array.prototype.sort in JavaScript takes in a callback with two parameters.

From MDN,

compareFn(a, b) return value sort order
> 0 sort a after b
< 0 sort a before b
=== 0 keep original order of a and b

However, instead of writing your own comparison function, you can use the builtin String.prototype.localeCompare to compare two strings.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const colors = [
  2.   {
  3.     &quot;color&quot;: &quot;purple&quot;,
  4.     &quot;type&quot;: true
  5.    
  6.   },
  7.   {
  8.     &quot;color&quot;: &quot;red&quot;,
  9.     &quot;type&quot;: false
  10.   },
  11. {
  12.     &quot;color&quot;: &quot;green&quot;,
  13.     &quot;type&quot;: true
  14.   },
  15. {
  16.     &quot;color&quot;: &quot;black&quot;,
  17.     &quot;type&quot;: false
  18.   },
  19. {
  20.     &quot;color&quot;: &quot;pink&quot;,
  21.     &quot;type&quot;: true
  22.   }]
  23.   
  25. const list = colors.sort((a, b) =&gt; a.color.localeCompare(b.color));
  26. console.log(list);

<!-- end snippet -->

答案4

得分: -1

Using sort(), you want to compare two elements in the array, so you need to put two parameters in there.

  1. const colors = [
  2.   {
  3.     "color": "purple",
  4.     "type": true
  5.   },
  6.   {
  7.     "color": "red",
  8.     "type": false
  9.   },
  10.   {
  11.     "color": "green",
  12.     "type": true
  13.   },
  14.   {
  15.     "color": "black",
  16.     "type": false
  17.   },
  18.   {
  19.     "color": "pink",
  20.     "type": true
  21.   }
  22. ]
  24. const list = colors.sort((a, b) => a.color > b.color);
  25. console.log(list);
英文:

Using sort(), you want to compare two elements in the array, so you need to put two parameters in there.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const colors = [
  2.   {
  3.     &quot;color&quot;: &quot;purple&quot;,
  4.     &quot;type&quot;: true
  5.    
  6.   },
  7.   {
  8.     &quot;color&quot;: &quot;red&quot;,
  9.     &quot;type&quot;: false
  10.   },
  11. {
  12.     &quot;color&quot;: &quot;green&quot;,
  13.     &quot;type&quot;: true
  14.   },
  15. {
  16.     &quot;color&quot;: &quot;black&quot;,
  17.     &quot;type&quot;: false
  18.   },
  19. {
  20.     &quot;color&quot;: &quot;pink&quot;,
  21.     &quot;type&quot;: true
  22.   }]
  23.   
  25. const list = colors.sort((a, b) =&gt; a.color &gt; b.color);
  26. console.log(list);

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月10日 14:53:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/75407800.html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定