JavaScript Object.groupBy() Method

Online Tutorial ng CodeW3C

Serye ng Tutorial ng HTML
Browser Script
Server Script
Tutorial ng Programming
Serye ng Tutorial ng XML
Manwal ng Pagbuo ng Website
Manwal ng Tagapag-referensiya

Course Schedule

JS Reference Manual

JS Reference Manual (Category Order)
JS Reference Manual (Alphabetical Order)

JavaScript

JS Array
JS Boolean
JS Class
JS Date
JS Error
JS Global
JS JSON
JS Map
JS Math
JS Number
JS Promise
JS RegExp
JS Set
JS String
JS Object
JS Operator
JS Operator Precedence
JS Statement
JS Typtified Array

Window

Object ng Window
Window Console
Window History
Window Location
Window Navigator
Window Screen

HTML DOM

HTML Document
HTML Element
HTML Attribute
HTML Event
HTML Event Obheto
HTML Collection
HTML NodeList
HTML DOMTokenList
HTML Style

Web API

API Canvas
API Console
API Fetch
API Fullscreen
API Geolocation
API History
API MediaQueryList
API Storage
API Validation
API Web

HTML Obheto

<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<head>
<header>
<h1> - <h6>
<hr>
<html>
<i>
<iframe>
<img>
<ins>
<input> button
<input> checkbox
<input> color
<input> date
<input> datetime
<input> datetime-local
<input> email
<input> file
<input> hidden
<input> image
<input> month
<input> number
<input> password
<input> radio
<input> range
<input> reset
<input> search
<input> submit
<input> text
<input> time
<input> url
<input> week
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strong>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
</a></li> <li><a href="/tl/jsref/dom_obj_time.html" title="HTML DOM Time 对象"><time></a></li> <li><a href="/tl/jsref/dom_obj_title.html" title="HTML DOM Title 对象"><title></a></li> <li><a href="/tl/jsref/dom_obj_track.html" title="HTML DOM Track 对象"><track></a></li> <li><a href="/tl/jsref/dom_obj_u.html" title="HTML DOM Underline 对象"><u></a></li> <li><a href="/tl/jsref/dom_obj_ul.html" title="HTML DOM Ul 对象"><ul></a></li> <li><a href="/tl/jsref/dom_obj_var.html" title="HTML DOM Variable 对象"><var></a></li> <li><a href="/tl/jsref/dom_obj_video.html" title="HTML DOM Video 对象"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/tl/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration 对象">CSSStyleDeclaration</a></li> <li><a href="/tl/jsref/jsref_type_conversion.html" title="JavaScript 类型转换">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/tl/howto/index.html" title="CodeW3C.com 百宝箱">CodeW3C.com 百宝箱</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>JavaScript Object.groupBy()</h1> <div class="prenextnav-ref"> <ul> <li> 上一页 <a href="/tl/jsref/jsref_object_getownpropertynames.html" title="JavaScript Object.getOwnPropertyNames() 方法">getOwnPropertyNames()</a></li> <li> 下一页 <a href="/tl/jsref/jsref_object_isextensible.html" title="JavaScript Object.isExtensible() 方法">isExtensible()</a></li> <li> 返回上一层 <a href="/tl/jsref/jsref_obj_object.html" title="JavaScript 对象参考手册">JavaScript 对象参考手册</a></li> </ul> </div> <section> <h2>定义和用法</h2> <p><code>Object.groupBy()</code> 方法根据回调函数返回的字符串值对对象的元素进行分组。</p> <p><code>Object.groupBy()</code> 方法不会改变原始对象。</p> </section> <section class="note"> <h2>注意</h2> <p>原始对象和返回对象中的元素是相同的。</p> <p>对任一对象的更改都会反映在另一个对象中。</p> <h3>Object.groupBy() 与 Map.groupBy() 的区别</h3> <p><code>Object.groupBy()</code> 和 <code>Map.groupBy()</code> 的区别在于：</p> <p><code>Object.groupBy()</code> 将元素分组到一个 JavaScript 对象中。</p> <p><code>Map.groupBy()</code> 将元素分组到一个 Map 对象中。</p> </section> <section> <h2>实例</h2> <pre class="language-js"> // 创建一个数组 const fruits = [ {name: "apples", quantity: 300}, {name: "bananas", quantity: 500}, {name: "oranges", quantity: 200}, {name: "kiwi", quantity: 150} // Ang function na ginagamit para sa callback sa pagbubukas ng grupo ng element function myCallback({ quantity }) { return quantity > 200 ? "ok" : "low"; } // Pagbubukas ng grupo ayon sa dami const result = Object.groupBy(fruits, myCallback); </pre> <p class="tiy"><a target="_blank" href="/tl/tiy/t.html?f=jsref_object_groupby">Subukan nang personal na.</a></p> </section> <section> <h2>Gramata</h2> <pre class="language-js"> Object.groupBy(<i>iterable</i>, <i>callback</i>) </pre> <h3>Parameter</h3> <table class="parameter"> <tr> <th style="width: 25%;">Parameter</th> <th>Paglalarawan</th> </tr> <tr> <td><i>iterable</i></td> <td>Mga kinakailangan. Isang array o Map na maaaring itatanghal.</td> </tr> <tr> <td><i>callback</i></td> <td> <p>Mga kinakailangan. Ang function na pinapatakbo para sa bawat element.</p> <p>Ang function na ito ay dapat bumalik ang pangalan ng grupo ng element.</p> </td> </tr> </table> <h3>Bumalik ang halaga ng return ng function.</h3> <table class="technical-details"> <tr> <th style="width: 25%;">Uri</th> <th>Paglalarawan</th> </tr> <tr> <td>Iterator</td> <td>Mga itinatanghal na bagay na naglalaman ng grupo ng elementong itinatanghal.</td> </tr> </table> </section> <section> <h2>Suporta ng browser</h2> <p><code>Object.groupBy()</code> Ito ay katangian ng ES2024.</p> <p>Simula 2024 Marso, lahat ng modernong browser ay ganap na sumusuporta sa:</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome 117</td> <td>Edge 117</td> <td>Firefox 119</td> <td>Safari 17.4</td> <td>Opera 103</td> </tr> <tr> <td>2023 年 9 月</td> <td>2023 年 9 月</td> <td>2023 年 10 月</td> <td>2024 年 10 月</td> <td>2023 年 5 月</td> </tr> </table> </section> <div class="prenextnav-ref"> <ul> <li> 上一页 <a href="/tl/jsref/jsref_object_getownpropertynames.html" title="JavaScript Object.getOwnPropertyNames() 方法">getOwnPropertyNames()</a></li> <li> 下一页 <a href="/tl/jsref/jsref_object_isextensible.html" title="JavaScript Object.isExtensible() 方法">isExtensible()</a></li> <li> 返回上一层 <a href="/tl/jsref/jsref_obj_object.html" title="JavaScript 对象参考手册">JavaScript 对象参考手册</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/tl/jsref/index.html">Manwal ng Tagapag-referensiya ng JavaScript at HTML DOM</a></h5> <h5 id="tools_example"><a href="/tl/js/js_examples.html">JavaScript 实例</a></h5> <h5 id="tools_quiz"><a href="/tl/js/js_quiz.html">JavaScript 测验</a></h5> <h5 id="tools_tutorial"><a href="/tl/js/index.html">JavaScript 教程</a></h5> </div> <div><h3><center> 赞助商链接 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 </p> <p id="p2"> <a href="/tl/about/index.html" title="关于 CodeW3C.com">关于 CodeW3C.com</a> <a href="/tl/about/about_helping.html" title="帮助 CodeW3C.com">帮助 CodeW3C.com</a> <a href="/tl/about/about_use.html" title="关于使用">使用条款</a> <a href="/tl/about/about_privacy.html" title="关于隐私">隐私条款</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Pangangasiwa ng Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>