{"id":350811,"date":"2023-07-26T15:02:22","date_gmt":"2023-07-26T15:02:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=350811"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=350811","title":{"rendered":"<span>\u0423\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 React \u0432 1 000 \u0440\u0430\u0437, \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>JP Camara, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 Wealthbox, \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u043b\u043e\u0433\u0435 \u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f TanStack Table \u2014 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 React-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u2014 \u0430\u0436 \u0434\u043e 10 \u043c\u0441. \u0414\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<div class=\"persona\" persona=\"true\"><img decoding=\"async\" persona=\"true\" class=\"image persona__image\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d8b\/79f\/f23\/d8b79ff23dbc1424399c24d47df98ba9.jpg\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d8b\/79f\/f23\/d8b79ff23dbc1424399c24d47df98ba9.jpg\" data-blurred=\"true\"\/><\/p>\n<h5 class=\"persona__heading\" persona=\"true\">JP Camara<\/h5>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 Wealthbox \u2014 CRM \u0434\u043b\u044f \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u043d\u0442\u043e\u0432<\/p>\n<\/div>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c JavaScript \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/tanstack.com\/table\/v8\">TanStack Table<\/a>. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0438 \u0442\u0430\u043a\u0438\u0435:\u00a0<\/p>\n<ul>\n<li>\n<p>\u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 50 \u0442\u044b\u0441. \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u0434\u043e 3 \u043a\u043e\u043b\u043e\u043d\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 React \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f 50 000 \u0441\u0442\u0440\u043e\u043a. \u041a\u043e\u0433\u0434\u0430 \u0436\u0435 \u044f \u0432\u043a\u043b\u044e\u0447\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446 TanStack, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0430\u043b\u0430 \u0443\u0436\u0435 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u044b\u0441\u044f\u0447\u0430\u0445 \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u0430\u043b\u0430 \u0447\u0440\u0435\u0437\u0432\u044b\u0447\u0430\u0439\u043d\u043e \u043d\u0438\u0437\u043a\u043e\u0439 \u043f\u0440\u0438 50 000 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>\u042f \u0431\u044b \u043c\u043e\u0433 \u0438 \u043d\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0441\u0451 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u043b\u043e\u0441\u044c \u043d\u0430 100 \u043c\u0441 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0430 500 \u043c\u0441. \u041d\u043e \u0432 \u0441\u0430\u043c\u044b\u0445 \u0442\u044f\u0436\u0451\u043b\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u043e\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 1 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0435\u0437 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0434\u043e 30\u201340 \u0441\u0435\u043a\u0443\u043d\u0434 \u0441 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u043e\u0439.<\/p>\n<h2>\u041a\u0430\u043a \u044f \u0432\u044b\u044f\u0432\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443<\/h2>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b Chrome-\u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440 JavaScript, \u043d\u043e \u0441 \u043d\u0438\u043c \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043a\u043e\u0434 \u0437\u0430\u043c\u0435\u0442\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443. \u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0443\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e 30\u201340 \u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440 \u043d\u0435 \u0433\u043e\u0434\u0438\u043b\u0441\u044f. \u041e\u0446\u0435\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0435 \u043a\u043e\u0434\u0430 React \u2014 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u043b\u043e\u0436\u043d\u043e: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0440\u0443\u0434\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0431\u044b\u043b \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u043f\u043b\u0430\u043d, \u0438 \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0434\u043e\u0431\u0440\u043e\u043c\u0443 <code>console.time<\/code>. \u0422\u0430\u0439\u043c\u0435\u0440 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">console.time('expensive code'); thisIsExpensive(); console.timeEnd('expensive code'); \/\/ console.time \/\/   expensive code: 1000ms<\/code><\/pre>\n<p>\u041d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0443\u0447\u0451\u043b, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f: <code>console.profile<\/code>. \u041e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React. \u041d\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043c\u0435\u0442\u043e\u0434 \u0431\u044b \u043d\u0435 \u043f\u043e\u043c\u043e\u0433. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043d\u0451\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/console\/profile\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<blockquote>\n<p>\u041c\u044b, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b, \u043f\u043e\u043b\u043d\u044b \u0438\u0434\u0435\u0439 \u043e \u0442\u043e\u043c, \u0427\u0422\u041e \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0438 \u043d\u0435 \u0443\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u041c\u044b \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0427\u0422\u041e \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0413\u0414\u0415 \u0437\u0430\u0440\u044b\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u043e, \u043f\u043e\u043a\u0430 \u043c\u044b \u044d\u0442\u043e \u043d\u0435 \u0418\u0417\u041c\u0415\u0420\u0418\u041c, \u043d\u0430\u0448\u0438 \u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u044b.\u00a0<\/p>\n<\/blockquote>\n<p>\u042f \u043d\u0430\u0447\u0430\u043b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u043b \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u0441\u0443\u0436\u0430\u043b \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a \u0434\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u0443\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c.<\/p>\n<p>\u0412\u043e\u0442 \u043e\u0431\u0449\u0430\u044f \u0442\u043e\u0433\u043e \u0441\u0445\u0435\u043c\u0430, \u043a\u0430\u043a \u044f \u043d\u0430\u0448\u0451\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n<pre><code class=\"javascript\">console.time('everything'); elements.forEach(() => {   console.time('methodCall');   methodCall(() => {     console.time('build'); build(); console.timeEnd('build');   });   console.timeEnd('methodCall'); }); console.timeEnd('everything'); \/\/ build      49ms \/\/ methodCall 50ms \/\/ build      51ms \/\/ methodCall 52ms \/\/ everything 102ms<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u043c\u043e\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0414\u041e \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u0421 \u043c\u043e\u0438\u043c \u043a\u043e\u0434\u043e\u043c \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041e\u0448\u0438\u0431\u043a\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b, \u2014 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0441\u0442\u044c\u044e. \u042f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u043a\u043e\u0434\u0430, \u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u043e. \u0422\u043e\u0440\u043c\u043e\u0437\u0438\u043b \u0432\u0441\u0451 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b TanStack \u0432 React \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u0430 \u0432 \u0445\u0443\u043a\u0435 <code>useReactTable<\/code>.\u00a0 \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">console.time('everything'); customCode(); console.time('useReactTable'); useReactTable(...); console.timeEnd('useReactTable'); console.timeEnd('everything'); \/\/ useReactTable 31500 ms \/\/ everything    31537 ms<\/code><\/pre>\n<ul>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0438\u0448\u0435\u0448\u044c \u043d\u0430 JavaScript, \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <code>node_modules<\/code> \u0438 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u043a\u043e\u0434\u043e\u043c. \u042f \u0441\u043c\u043e\u0433 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 TanStack Table \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u043b\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0434\u0430\u044e \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u0437\u0430\u043c\u0435\u0440\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u042f \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0438\u0437\u043c\u0435\u0440\u044f\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b <code>console.time<\/code>.<\/p>\n<pre><code class=\"javascript\">function getGroupedRowModel&lt;TData extends RowData>() {   console.time('everything');   \/\/...    console.time('grouping filter')   const existing = grouping.filter(columnId =>     table.getColumn(columnId)   )   console.timeEnd('grouping filter')    const groupUpRecursively = (     rows: Row&lt;TData>[],     depth = 0,     parentId?: string   ) => {     if (depth >= existing.length) {       return rows.map(row => {       row.depth = depth       \/\/...       if (row.subRows) {         console.time('subRows')         row.subRows = groupUpRecursively(           row.subRows,            depth + 1         )         console.timeEnd('subRows')       }       return row     });      const columnId: string = existingGrouping[depth]!     const rowGroupsMap = groupBy(       rows,        columnId     )      const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map(([groupingValue, groupedRows], index) => {       let id = `${columnId}:${groupingValue}`       id = parentId ? `${parentId}>${id}` : id       console.time(         'aggregatedGroupedRows groupUpRecursively'       )       const subRows = groupUpRecursively(         groupedRows,          depth + 1,         id       )       console.timeEnd(         'aggregatedGroupedRows groupUpRecursively'       )       \/\/...       }     }   }   console.timeEnd('everything'); }<\/code><\/pre>\n<p>\u041c\u043d\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0432\u0438\u043d\u043e\u0432\u0430\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>groupUpRecursively<\/code>. \u041b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0442\u044b\u0441\u044f\u0447 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0441\u043d\u0438\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c (\u0441\u043f\u043e\u0439\u043b\u0435\u0440: \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e, \u044f \u043e\u0448\u0438\u0431\u0441\u044f ?).<\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u043b\u0430\u0441\u044c. \u041b\u043e\u0433\u0433\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u044b\u0441\u044f\u0447\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 <code>subRows<\/code>. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0431\u044b\u0441\u0442\u0440\u043e\u0439, \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u0431\u044b\u043b\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0445 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">console.time  subRows: 0 ms    at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:48:25)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)  console.time  subRows: 0 ms    at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:48:25)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)<\/code><\/pre>\n<p>\u0423\u0431\u0440\u0430\u0432 \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0435, \u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043b\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u0439 \u0446\u0435\u043b\u0438. \u042f \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b <em>\u043f\u043e\u0447\u0442\u0438 <\/em>\u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0432\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: 1) \u044f \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b <em>\u0432\u0441\u0451 <\/em>\u0432\u0440\u0435\u043c\u044f (<code>everything<\/code> \u0440\u0430\u0432\u043d\u044f\u043b\u043e\u0441\u044c 33 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u043c, \u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c <code>groupUpRecursively<\/code> \u0431\u044b\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e 23 \u0441\u0435\u043a\u0443\u043d\u0434\u044b) \u0438 2) \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c\u044b\u0439 \u043e\u0442\u0440\u0435\u0437\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u044b\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0432 \u043d\u0451\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">console.time   grouping filter: 1 ms     at fn (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:22:17)  console.time   aggregatedGroupedRows groupUpRecursively: 23248 ms     at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:71:23)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)  console.time   everything: 33509 ms<\/code><\/pre>\n<p>\u042f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b \u0432\u044b\u0437\u043e\u0432 \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>groupBy<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a \u043d\u0435\u0439 \u0431\u043b\u043e\u043a <code>console.time<\/code>:<\/p>\n<pre><code class=\"javascript\">console.time('groupBy') const rowGroupsMap = groupBy(rows, columnId) console.timeEnd('groupBy')<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0440\u0443\u0433\u043e\u0435 \u0434\u0435\u043b\u043e! \u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451 31-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0430 \u0442\u0440\u0451\u0445 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 <code>groupBy<\/code>.<\/p>\n<pre><code class=\"javascript\">console.time   grouping filter: 2 ms     at fn (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:22:17)  console.time   groupBy: 10279 ms     at groupUpRecursively (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:59:19)  console.time   groupBy: 10868 ms     at groupUpRecursively (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:59:19)         at Array.map (&lt;anonymous>)  console.time   groupBy: 10244 ms     at groupUpRecursively (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:59:19)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)  console.time   aggregatedGroupedRows groupUpRecursively: 21159 ms     at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:71:23)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)  console.time   everything: 31537 ms<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0432\u044b\u0437\u044b\u0432\u0430\u043b <code>groupBy<\/code>, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u043e\u043a\u043e\u043b\u043e 10 \u0441\u0435\u043a\u0443\u043d\u0434.\u00a0<\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435, \u0447\u0451\u0440\u0442 \u0432\u043e\u0437\u044c\u043c\u0438, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>groupBy<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0430 \u0442\u0430\u043a\u043e\u0435 \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435? \u041c\u043e\u0436\u0435\u0442\u0435 \u0442\u043a\u043d\u0443\u0442\u044c \u043f\u0430\u043b\u044c\u0446\u0435\u043c?<\/p>\n<pre><code class=\"javascript\">function groupBy&lt;TData extends RowData>(rows: Row&lt;TData>[], columnId: string) {   const groupMap = new Map&lt;any, Row&lt;TData>[]>()    return rows.reduce((map, row) => {     const resKey = `${row.getValue(columnId)}` const previous = map.get(resKey) if (!previous) {   map.set(resKey, [row]) } else {   map.set(resKey, [...previous, row]) } return map   }, groupMap) }<\/code><\/pre>\n<p>\u042f \u043d\u0430\u0447\u0430\u043b \u0434\u0435\u043b\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430 \u0447\u0430\u0441\u0442\u0438. \u0421\u043f\u0435\u0440\u0432\u0430 \u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b <code>Map<\/code> \u043d\u0430 \u043b\u0438\u0442\u0435\u0440\u0430\u043b \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u043f\u0430\u043c\u044f\u0442\u044c. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0446\u0438\u043a\u043b <code>for<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>reduce<\/code> \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f\u043c\u0438. \u041f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438 JavaScript \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>forEach<\/code>, <code>map<\/code> \u0438 <code>reduce<\/code> \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0446\u0438\u043a\u043b <code>for<\/code>, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0432 JavaScript, \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0432\u0438\u0436\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0435 \u0434\u0430\u043b\u0438 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u0422\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u041a\u043e\u0433\u0434\u0430 \u044f \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u043b \u0432\u043e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u2193, \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0443\u0448\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n<pre><code class=\"javascript\">\/\/ map.set(resKey, [...previous, row])<\/code><\/pre>\n<h2>\u041a\u0430\u043a\u043e\u0432\u0430 \u0431\u044b\u043b\u0430 \u0446\u0435\u043b\u044c \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439<\/h2>\n<pre><code class=\"javascript\">const resKey = `${row.getValue(columnId)}` const previous = map.get(resKey) if (!previous) {   map.set(resKey, [row]) } else {   map.set(resKey, [...previous, row]) }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>reduce<\/code> \u043a\u043e\u0434 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u043a\u0430\u0440\u0442\u044b. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u00ab\u041d\u044c\u044e-\u0419\u043e\u0440\u043a\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u00ab\u041d\u044c\u044e-\u0419\u043e\u0440\u043a\u043e\u043c\u00bb, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 <code>row<\/code>, \u0437\u0430\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u0439 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e, \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax#spread_in_array_literals\"><u>spread \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440<\/u><\/a> \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e <code>row<\/code> \u0441 \u043a\u043e\u043d\u0446\u043e\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 <code>reduce<\/code> \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u043d\u043e\u0432\u044b\u0439, \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432, \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044f\u0441\u044c \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">\/\/ 1st iteration [...previous, row] => [1,2] \/\/ 2nd iteration [...previous, row] => [1,2,3] \/\/ 3rd iteration [...previous, row] => [1,2,3,4] \/\/ ... \/\/ 50,000th iteration [...previous, row] => [1,...49998,49999]<\/code><\/pre>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0430\u043c\u0430\u044f \u043d\u0438\u0437\u043a\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u0430\u0441\u044c \u043f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u043c \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0433\u0440\u0443\u043f\u043f. \u0415\u0441\u043b\u0438 \u0431\u044b \u0443 \u0432\u0430\u0441 \u0431\u044b\u043b \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u0434\u043d\u0438\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u0432\u0441\u0435 50 000 \u0441\u0442\u0440\u043e\u043a \u0431\u044b\u043b\u0438 \u0431\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0434 \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u044e\u0447\u043e\u043c. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u0435 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0433\u0440\u0443\u043f\u043f\u044b \u0431\u044b\u043b\u0438 \u0431\u044b \u043c\u0435\u043d\u044c\u0448\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0431\u044b \u0431\u044b\u0441\u0442\u0440\u0435\u0435.\u00a0<\/p>\n<h2>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 spread \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440<\/h2>\n<p>\u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 spread \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0441\u0451 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u043e \u0432 \u043c\u043e\u0451\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread\u00a0 \u2014 \u044d\u0442\u043e O(n). \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<p>\u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0437\u044b\u043a\u0430 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435:<\/p>\n<pre><code class=\"javascript\">const a = [1, 2, 3, 4, 5, 6, 7];  \/\/ spread const b = [...a, 8];  \/\/ manual loop let c = [];  for (let i = 0; i &lt; a.length; i++) {   c.push(a[i]); } c.push(8);<\/code><\/pre>\n<p>\u041d\u0435\u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0440\u0430\u0431\u043e\u0442\u0430 v8 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0430\u044f. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0435\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0434\u0432\u0438\u0436\u043a\u0430, \u0447\u0442\u043e \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0435\u0442 \u043f\u043e\u0438\u0441\u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442, \u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430 <code>groupBy<\/code> \u0431\u044b\u043b\u0430 \u0442\u0430\u043a\u043e\u0439:<\/p>\n<pre><code>\/\/ original code map.set(resKey, [...previous, row]  \/\/ manual spread for (let i = 0; i &lt; rows.length; i++) {   const tempPrevious = [];   for (let j = 0; j &lt; previous.length; j++) {     tempPrevious.push(previous[j]);   }   tempPrevious.push(rows[i]);   previous = tempPrevious;   map.set(resKey, tempPrevious); }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0441\u0440\u0430\u0437\u0443 \u0431\u0440\u043e\u0441\u0430\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b. \u041f\u043e\u0434 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u2014 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c O(n^2). \u041e\u043d\u0430 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f: \u043f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u044a\u0451\u043c\u0430 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0430\u0441\u0442\u0451\u0442 \u044d\u043a\u0441\u043f\u043e\u043d\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e. \u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 50 000 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u043e 50 000^2, \u0442\u043e \u0435\u0441\u0442\u044c 2,5 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u0430 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 ?<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Big O (\u00ab\u041e\u00bb \u0431\u043e\u043b\u044c\u0448\u043e\u0435), \u0441 \u044d\u0442\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u0442\u043e\u0438\u0442 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0438 \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043d \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0432\u043e\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 <a href=\"https:\/\/frontendmasters.com\/courses\/algorithms\/\"><u>\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441<\/u><\/a>.<\/p>\n<p>\u0412 \u043c\u043e\u0451\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u044b\u0440\u043e\u0441 \u0441 \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 50 000, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043f\u043b\u043e\u0445\u043e. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c O(n^2), \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u043b\u043e O(n^2\/2).\u00a0<\/p>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 O(n^2) \u0438 O(n^2\/2) \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 1\/2). \u041d\u043e \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0432\u0435 \u0432\u044b \u0431\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0438 \u0442\u0430\u043a \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0431\u044b\u043b \u0435\u0449\u0451 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435? \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435\u0442 ?<\/p>\n<p>\u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u043b\u043e \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>1 249 975 000 \u0438\u043b\u0438 1 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434 249 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043e\u0432 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>49 999 \u043e\u0442\u0431\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0434\u043b\u044f 1 249 925 001 \u0437\u0430\u043f\u0438\u0441\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0423\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>groupBy<\/code> \u043d\u0430 \u0442\u0440\u0438 \u2014 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f 3 749 925 000 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439, 149 997 \u043e\u0442\u0431\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 3 749 775 003 \u0437\u0430\u043f\u0438\u0441\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u0434\u0430\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u043e\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443 \u043c\u0443\u0441\u043e\u0440\u0430 \u0438 \u0441\u0440\u0435\u0434\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JavaScript ??\u200d\u2642\ufe0f\u2620\ufe0f??\u200d\u2642\ufe0f \u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0443\u0441\u043e\u0440\u0430 \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u043e\u0441\u044c, \u043a\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e ?<\/p>\n<p>\u041d\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0435\u0433\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u2014 \u0432\u043e\u0442 \u0432 \u0447\u0451\u043c \u0432\u043e\u043f\u0440\u043e\u0441.<\/p>\n<h2>Spread \u2014 \u044d\u0442\u043e \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f (\u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f) \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u0442\u043e\u0438\u0442 \u043b\u0438 \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435?<\/h2>\n<p>Spread \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0434\u0430\u0451\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u00ab\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0443\u00bb, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043d\u043e \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043a\u043e\u0434 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c (\u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c). \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043a\u043e\u0434\u0430. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0432 \u0434\u0440\u0443\u0433\u043e\u043c. \u041d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u0434 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043a\u0430\u043a \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439, \u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0443 spread:<\/p>\n<pre><code class=\"javascript\">\/\/ Array.from() \/\/   ~10 seconds, just as slow ? const arr = Array.from(previous) arr.push(row) map.set(resKey, arr)  \/\/ slice() \/\/   ~10 seconds, just as slow ? const arr = previous.slice() arr.push(row) map.set(resKey, arr)  \/\/ concat(row) \/\/   ~10 seconds, just as slow ? map.set(resKey, previous.concat(row))  \/\/ hand written for loop \/\/   ~14 seconds, slower than spread! ?  let arr = [] for (let i = 0; i &lt; previous.length; i++) {   arr.push(previous[i]) } arr.push(row) map.set(resKey, arr)  \/\/ concat([row]) \/\/   ~4 seconds ?\u200d\u2642\ufe0f  map.set(resKey, previous.concat([row]))  \/\/ using the `immer` node package \/\/   ~100ms ?  return produce(groupMap, (draft) => {   return rows.reduce((map, row) => {     const resKey = `fixedKey`     let previous = map.get(resKey)     if (!previous) {       map.set(resKey, [row])     } else {       previous.push(row)     }     return map   }, draft) })<\/code><\/pre>\n<p><code>Array.from<\/code>, <code>slice<\/code> \u0438 <code>concat<\/code> \u0438\u043c\u0435\u044e\u0442 \u0442\u0443 \u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u044b\u043b\u0435\u0437\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u044e\u0440\u043f\u0440\u0438\u0437\u044b:<\/p>\n<ul>\n<li>\n<p>\u0420\u0443\u0447\u043d\u043e\u0439 \u0446\u0438\u043a\u043b <code>for<\/code> \u0431\u044b\u043b \u0441\u0430\u043c\u044b\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c. \u0415\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043b\u043e\u0441\u044c \u043e\u043a\u043e\u043b\u043e 14 \u0441\u0435\u043a\u0443\u043d\u0434. \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u043e\u0434\u0430 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u0447\u0435\u043c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0440\u0443\u0447\u043d\u043e\u0439 \u0446\u0438\u043a\u043b.<\/p>\n<\/li>\n<li>\n<p><code>concat<\/code>, \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0431\u044b\u043b \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 v8 (node\/chrome). \u042d\u0442\u043e \u0437\u0430\u043d\u044f\u043b\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438! \u041b\u0438\u0431\u043e \u0432 \u043c\u043e\u0451\u043c \u043a\u043e\u0434\u0435 \u0431\u044b\u043b\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043e\u0448\u0438\u0431\u043a\u0443, \u043b\u0438\u0431\u043e \u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0435\u0439\u0441\u0430. \u041d\u043e \u0432\u0441\u0451 \u0435\u0449\u0451 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/immerjs\/immer\"><u>\u0424\u0443\u043d\u043a\u0446\u0438\u044f<\/u><\/a> <code>immer<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445. <code>immer<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b JavaScript \u0434\u043b\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u043a\u0441\u0438-\u0441\u0435\u0440\u0432\u0435\u0440\u044b \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 <code>immer<\/code> \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e <code>push<\/code>\u0438\u043b \u043f\u0440\u044f\u043c\u043e \u0432 \u043d\u0438\u0445, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u043c\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0443\u0436\u043d\u0430 \u043b\u0438 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c? \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u00a0 immer \u043f\u043e\u0434\u0445\u043e\u0434? \u0410 \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u0431\u044b\u0441\u0442\u0440\u0435\u0435?<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 push<\/h2>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u041c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, \u0431\u0435\u0437 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>groupBy<\/code>, \u0442\u043e \u0442\u0430\u043c \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445. \u0412\u0441\u0451 \u0431\u044b\u043b\u043e \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043c\u043e\u0433 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0451, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u042f \u043d\u0435 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 spread \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u043c.<\/p>\n<p>\u041f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 <code>push<\/code> \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 O(1), \u0442\u043e \u0435\u0441\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0437\u0430 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f: \u0447\u0442\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e, \u0447\u0442\u043e \u0438 \u0434\u043b\u044f 50 000 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412\u043e\u0442 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u0432 1 000 \u0440\u0430\u0437 \u0431\u044b\u0441\u0442\u0440\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">function groupBy&lt;TData extends RowData>(rows: Row&lt;TData>[], columnId: string) {   const groupMap = new Map&lt;any, Row&lt;TData>[]>()    return rows.reduce((map, row) => {     const resKey = `${row.getValue(columnId)}`     const previous = map.get(resKey)     if (!previous) {       map.set(resKey, [row])     } else {       previous.push(row)     }     return map   }, groupMap) }<\/code><\/pre>\n<p>\u0412\u0438\u0434\u0438\u0442\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0443? \u041e\u043d\u0430 \u2014 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">previous.push(row)<\/code><\/pre>\n<p><code>previous.push(row)<\/code> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u043d\u0430 <code>groupBy<\/code> \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0434\u043e 10 \u043c\u0441, \u0447\u0442\u043e \u0432 1 000 \u0440\u0430\u0437 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 ?<\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread \u2014 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0438 \u043c\u043e\u0449\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0432 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u0435\u0436\u0438\u0442 \u0442\u0438\u043f \u0446\u0438\u043a\u043b\u0430 <code>for<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 spread \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0446\u0438\u043a\u043b\u0435 \u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u0432\u0430\u043c \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438.<\/p>\n<h2>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u043b-\u0440\u0435\u043a\u0432\u0435\u0441\u0442 <a href=\"https:\/\/github.com\/TanStack\/table\/pull\/4495\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043f\u0443\u043b-\u0440\u0435\u043a\u0432\u0435\u0441\u0442\u0435 \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.\u00a0<\/p>\n<p>\u0410 \u0432\u043e\u0442 <a href=\"https:\/\/replit.com\/@JPCamara\/Tanstack-GroupBy-Performance?s=app\"><u>\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/u><\/a> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u043d\u0430 Replit. \u0422\u0430\u0439\u043c\u0438\u043d\u0433 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 \u043d\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0435 \u0441 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u044c\u044e, \u0447\u0435\u043c \u0443 \u043c\u043e\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430, \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u043f\u043e\u0441\u0442\u0435.<\/p>\n<hr\/>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u0441 \u044d\u0442\u0438\u043c\u0438 \u043a\u0443\u0440\u0441\u0430\u043c\u0438 \u041d\u0435\u0442\u043e\u043b\u043e\u0433\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/netology.ru\/programs\/developer1c_ultimate#\/?utm_source=habr&amp;utm_medium=externalblog&amp;utm_campaign=bdev_all_ou_habr&amp;utm_content=post25072023\">1C-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442: \u0441 \u043d\u0443\u043b\u044f \u0434\u043e middle<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/netology.ru\/programs\/unity-developer?utm_source=habr&amp;utm_medium=externalblog&amp;utm_campaign=bdes_all_gun_habr&amp;utm_content=post25072023\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0433\u0440 \u043d\u0430 Unity<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/netology.ru\/programs\/php-dev#\/?utm_source=habr&amp;utm_medium=externalblog&amp;utm_campaign=bdev_all_phpd_habr&amp;utm_content=post25072023\">PHP-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u043d\u0443\u043b\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u2014 \u0441\u043a\u0438\u0434\u043a\u0430 10% \u043f\u043e \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434\u0443 <strong>codehabr10<\/strong>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/companies\/netologyru\/articles\/750246\/\"> https:\/\/habr.com\/ru\/companies\/netologyru\/articles\/750246\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>JP Camara, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 Wealthbox, \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u043b\u043e\u0433\u0435 \u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f TanStack Table \u2014 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 React-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u2014 \u0430\u0436 \u0434\u043e 10 \u043c\u0441. \u0414\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<div class=\"persona\" persona=\"true\">\n<h5 class=\"persona__heading\" persona=\"true\">JP Camara<\/h5>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 Wealthbox \u2014 CRM \u0434\u043b\u044f \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u043d\u0442\u043e\u0432<\/p>\n<\/div>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c JavaScript \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/tanstack.com\/table\/v8\">TanStack Table<\/a>. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0438 \u0442\u0430\u043a\u0438\u0435:\u00a0<\/p>\n<ul>\n<li>\n<p>\u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 50 \u0442\u044b\u0441. \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u0434\u043e 3 \u043a\u043e\u043b\u043e\u043d\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 React \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f 50 000 \u0441\u0442\u0440\u043e\u043a. \u041a\u043e\u0433\u0434\u0430 \u0436\u0435 \u044f \u0432\u043a\u043b\u044e\u0447\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446 TanStack, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0430\u043b\u0430 \u0443\u0436\u0435 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u044b\u0441\u044f\u0447\u0430\u0445 \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u0430\u043b\u0430 \u0447\u0440\u0435\u0437\u0432\u044b\u0447\u0430\u0439\u043d\u043e \u043d\u0438\u0437\u043a\u043e\u0439 \u043f\u0440\u0438 50 000 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>\u042f \u0431\u044b \u043c\u043e\u0433 \u0438 \u043d\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0441\u0451 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u043b\u043e\u0441\u044c \u043d\u0430 100 \u043c\u0441 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0430 500 \u043c\u0441. \u041d\u043e \u0432 \u0441\u0430\u043c\u044b\u0445 \u0442\u044f\u0436\u0451\u043b\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u043e\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 1 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0435\u0437 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0434\u043e 30\u201340 \u0441\u0435\u043a\u0443\u043d\u0434 \u0441 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u043e\u0439.<\/p>\n<h2>\u041a\u0430\u043a \u044f \u0432\u044b\u044f\u0432\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443<\/h2>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b Chrome-\u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440 JavaScript, \u043d\u043e \u0441 \u043d\u0438\u043c \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043a\u043e\u0434 \u0437\u0430\u043c\u0435\u0442\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443. \u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0443\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e 30\u201340 \u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440 \u043d\u0435 \u0433\u043e\u0434\u0438\u043b\u0441\u044f. \u041e\u0446\u0435\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0435 \u043a\u043e\u0434\u0430 React \u2014 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u043b\u043e\u0436\u043d\u043e: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0440\u0443\u0434\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0431\u044b\u043b \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u043f\u043b\u0430\u043d, \u0438 \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0434\u043e\u0431\u0440\u043e\u043c\u0443 <code>console.time<\/code>. \u0422\u0430\u0439\u043c\u0435\u0440 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">console.time('expensive code'); thisIsExpensive(); console.timeEnd('expensive code'); \/\/ console.time \/\/   expensive code: 1000ms<\/code><\/pre>\n<p>\u041d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0443\u0447\u0451\u043b, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f: <code>console.profile<\/code>. \u041e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React. \u041d\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043c\u0435\u0442\u043e\u0434 \u0431\u044b \u043d\u0435 \u043f\u043e\u043c\u043e\u0433. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043d\u0451\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/console\/profile\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<blockquote>\n<p>\u041c\u044b, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b, \u043f\u043e\u043b\u043d\u044b \u0438\u0434\u0435\u0439 \u043e \u0442\u043e\u043c, \u0427\u0422\u041e \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0438 \u043d\u0435 \u0443\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u041c\u044b \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0427\u0422\u041e \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0413\u0414\u0415 \u0437\u0430\u0440\u044b\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u043e, \u043f\u043e\u043a\u0430 \u043c\u044b \u044d\u0442\u043e \u043d\u0435 \u0418\u0417\u041c\u0415\u0420\u0418\u041c, \u043d\u0430\u0448\u0438 \u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u044b.\u00a0<\/p>\n<\/blockquote>\n<p>\u042f \u043d\u0430\u0447\u0430\u043b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u043b \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u0441\u0443\u0436\u0430\u043b \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a \u0434\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u0443\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c.<\/p>\n<p>\u0412\u043e\u0442 \u043e\u0431\u0449\u0430\u044f \u0442\u043e\u0433\u043e \u0441\u0445\u0435\u043c\u0430, \u043a\u0430\u043a \u044f \u043d\u0430\u0448\u0451\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n<pre><code class=\"javascript\">console.time('everything'); elements.forEach(() => {   console.time('methodCall');   methodCall(() => {     console.time('build'); build(); console.timeEnd('build');   });   console.timeEnd('methodCall'); }); console.timeEnd('everything'); \/\/ build      49ms \/\/ methodCall 50ms \/\/ build      51ms \/\/ methodCall 52ms \/\/ everything 102ms<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u043c\u043e\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0414\u041e \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u0421 \u043c\u043e\u0438\u043c \u043a\u043e\u0434\u043e\u043c \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041e\u0448\u0438\u0431\u043a\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b, \u2014 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0441\u0442\u044c\u044e. \u042f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u043a\u043e\u0434\u0430, \u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u043e. \u0422\u043e\u0440\u043c\u043e\u0437\u0438\u043b \u0432\u0441\u0451 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b TanStack \u0432 React \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u0430 \u0432 \u0445\u0443\u043a\u0435 <code>useReactTable<\/code>.\u00a0 \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">console.time('everything'); customCode(); console.time('useReactTable'); useReactTable(...); console.timeEnd('useReactTable'); console.timeEnd('everything'); \/\/ useReactTable 31500 ms \/\/ everything    31537 ms<\/code><\/pre>\n<ul>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0438\u0448\u0435\u0448\u044c \u043d\u0430 JavaScript, \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <code>node_modules<\/code> \u0438 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u043a\u043e\u0434\u043e\u043c. \u042f \u0441\u043c\u043e\u0433 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 TanStack Table \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u043b\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0434\u0430\u044e \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u0437\u0430\u043c\u0435\u0440\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u042f \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0438\u0437\u043c\u0435\u0440\u044f\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b <code>console.time<\/code>.<\/p>\n<pre><code class=\"javascript\">function getGroupedRowModel&lt;TData extends RowData>() {   console.time('everything');   \/\/...    console.time('grouping filter')   const existing = grouping.filter(columnId =>     table.getColumn(columnId)   )   console.timeEnd('grouping filter')    const groupUpRecursively = (     rows: Row&lt;TData>[],     depth = 0,     parentId?: string   ) => {     if (depth >= existing.length) {       return rows.map(row => {       row.depth = depth       \/\/...       if (row.subRows) {         console.time('subRows')         row.subRows = groupUpRecursively(           row.subRows,            depth + 1         )         console.timeEnd('subRows')       }       return row     });      const columnId: string = existingGrouping[depth]!     const rowGroupsMap = groupBy(       rows,        columnId     )      const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map(([groupingValue, groupedRows], index) => {       let id = `${columnId}:${groupingValue}`       id = parentId ? `${parentId}>${id}` : id       console.time(         'aggregatedGroupedRows groupUpRecursively'       )       const subRows = groupUpRecursively(         groupedRows,          depth + 1,         id       )       console.timeEnd(         'aggregatedGroupedRows groupUpRecursively'       )       \/\/...       }     }   }   console.timeEnd('everything'); }<\/code><\/pre>\n<p>\u041c\u043d\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0432\u0438\u043d\u043e\u0432\u0430\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>groupUpRecursively<\/code>. \u041b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0442\u044b\u0441\u044f\u0447 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0441\u043d\u0438\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c (\u0441\u043f\u043e\u0439\u043b\u0435\u0440: \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e, \u044f \u043e\u0448\u0438\u0431\u0441\u044f ?).<\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u043b\u0430\u0441\u044c. \u041b\u043e\u0433\u0433\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u044b\u0441\u044f\u0447\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 <code>subRows<\/code>. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0431\u044b\u0441\u0442\u0440\u043e\u0439, \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u0431\u044b\u043b\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0445 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">console.time  subRows: 0 ms    at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:48:25)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)  console.time  subRows: 0 ms    at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:48:25)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)        at Array.map (&lt;anonymous>)<\/code><\/pre>\n<p>\u0423\u0431\u0440\u0430\u0432 \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0435, \u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043b\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u0439 \u0446\u0435\u043b\u0438. \u042f \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b <em>\u043f\u043e\u0447\u0442\u0438 <\/em>\u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0432\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: 1) \u044f \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b <em>\u0432\u0441\u0451 <\/em>\u0432\u0440\u0435\u043c\u044f (<code>everything<\/code> \u0440\u0430\u0432\u043d\u044f\u043b\u043e\u0441\u044c 33 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u043c, \u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c <code>groupUpRecursively<\/code> \u0431\u044b\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e 23 \u0441\u0435\u043a\u0443\u043d\u0434\u044b) \u0438 2) \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c\u044b\u0439 \u043e\u0442\u0440\u0435\u0437\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u044b\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0432 \u043d\u0451\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">console.time   grouping filter: 1 ms     at fn (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:22:17)  console.time   aggregatedGroupedRows groupUpRecursively: 23248 ms     at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:71:23)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)  console.time   everything: 33509 ms<\/code><\/pre>\n<p>\u042f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b \u0432\u044b\u0437\u043e\u0432 \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>groupBy<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a \u043d\u0435\u0439 \u0431\u043b\u043e\u043a <code>console.time<\/code>:<\/p>\n<pre><code class=\"javascript\">console.time('groupBy') const rowGroupsMap = groupBy(rows, columnId) console.timeEnd('groupBy')<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0440\u0443\u0433\u043e\u0435 \u0434\u0435\u043b\u043e! \u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451 31-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0430 \u0442\u0440\u0451\u0445 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 <code>groupBy<\/code>.<\/p>\n<pre><code class=\"javascript\">console.time   grouping filter: 2 ms     at fn (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:22:17)  console.time   groupBy: 10279 ms     at groupUpRecursively (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:59:19)  console.time   groupBy: 10868 ms     at groupUpRecursively (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:59:19)         at Array.map (&lt;anonymous>)  console.time   groupBy: 10244 ms     at groupUpRecursively (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:59:19)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)  console.time   aggregatedGroupedRows groupUpRecursively: 21159 ms     at map (packages\/table-core\/src\/utils\/getGroupedRowModel.ts:71:23)         at Array.map (&lt;anonymous>)         at Array.map (&lt;anonymous>)  console.time   everything: 31537 ms<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0432\u044b\u0437\u044b\u0432\u0430\u043b <code>groupBy<\/code>, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u043e\u043a\u043e\u043b\u043e 10 \u0441\u0435\u043a\u0443\u043d\u0434.\u00a0<\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435, \u0447\u0451\u0440\u0442 \u0432\u043e\u0437\u044c\u043c\u0438, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>groupBy<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0430 \u0442\u0430\u043a\u043e\u0435 \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435? \u041c\u043e\u0436\u0435\u0442\u0435 \u0442\u043a\u043d\u0443\u0442\u044c \u043f\u0430\u043b\u044c\u0446\u0435\u043c?<\/p>\n<pre><code class=\"javascript\">function groupBy&lt;TData extends RowData>(rows: Row&lt;TData>[], columnId: string) {   const groupMap = new Map&lt;any, Row&lt;TData>[]>()    return rows.reduce((map, row) => {     const resKey = `${row.getValue(columnId)}` const previous = map.get(resKey) if (!previous) {   map.set(resKey, [row]) } else {   map.set(resKey, [...previous, row]) } return map   }, groupMap) }<\/code><\/pre>\n<p>\u042f \u043d\u0430\u0447\u0430\u043b \u0434\u0435\u043b\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430 \u0447\u0430\u0441\u0442\u0438. \u0421\u043f\u0435\u0440\u0432\u0430 \u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b <code>Map<\/code> \u043d\u0430 \u043b\u0438\u0442\u0435\u0440\u0430\u043b \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u043f\u0430\u043c\u044f\u0442\u044c. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0446\u0438\u043a\u043b <code>for<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>reduce<\/code> \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f\u043c\u0438. \u041f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438 JavaScript \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>forEach<\/code>, <code>map<\/code> \u0438 <code>reduce<\/code> \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0446\u0438\u043a\u043b <code>for<\/code>, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0432 JavaScript, \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0432\u0438\u0436\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0435 \u0434\u0430\u043b\u0438 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u0422\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u041a\u043e\u0433\u0434\u0430 \u044f \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u043b \u0432\u043e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u2193, \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0443\u0448\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n<pre><code class=\"javascript\">\/\/ map.set(resKey, [...previous, row])<\/code><\/pre>\n<h2>\u041a\u0430\u043a\u043e\u0432\u0430 \u0431\u044b\u043b\u0430 \u0446\u0435\u043b\u044c \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439<\/h2>\n<pre><code class=\"javascript\">const resKey = `${row.getValue(columnId)}` const previous = map.get(resKey) if (!previous) {   map.set(resKey, [row]) } else {   map.set(resKey, [...previous, row]) }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>reduce<\/code> \u043a\u043e\u0434 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u043a\u0430\u0440\u0442\u044b. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u00ab\u041d\u044c\u044e-\u0419\u043e\u0440\u043a\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u00ab\u041d\u044c\u044e-\u0419\u043e\u0440\u043a\u043e\u043c\u00bb, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 <code>row<\/code>, \u0437\u0430\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u0439 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e, \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax#spread_in_array_literals\"><u>spread \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440<\/u><\/a> <\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-350811","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/350811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=350811"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/350811\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=350811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=350811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=350811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}