{"id":7286,"date":"2024-04-24T00:30:44","date_gmt":"2024-04-23T16:30:44","guid":{"rendered":"https:\/\/i007.vip:15443\/wordpress\/?p=7286"},"modified":"2024-04-24T00:30:44","modified_gmt":"2024-04-23T16:30:44","slug":"react-hook-usestate%e5%a4%8d%e6%9d%82%e6%95%b0%e6%8d%ae%e6%9b%b4%e6%96%b0%e6%9c%ba%e5%88%b6%e8%b8%a9%e5%9d%91","status":"publish","type":"post","link":"https:\/\/i007.cc\/wordpress\/archives\/7286","title":{"rendered":"React Hook useState\u590d\u6742\u6570\u636e\u66f4\u65b0\u673a\u5236\u8e29\u5751"},"content":{"rendered":"<p class=\"_1RuRku\"><a href=\"https:\/\/www.jianshu.com\/p\/c04fd2f89e97\">cc from<\/a><\/p>\n<p>&nbsp;<\/p>\n<article class=\"_2rhmJa\">\n<blockquote><p><strong>\u8fd9\u91cc\u4e3b\u8981\u7528<code>Hook<\/code>\u6765\u8bb2\u8ff0\u548c\u505a\u793a\u8303<\/strong>(\u5927\u90e8\u5206\u4eba\u5e94\u8be5\u5df2\u7ecf\u5168\u9762\u62e5\u62b1Hook\u4e86\u5427)\u3002class\u7ec4\u4ef6\u7528<code>setState<\/code>\u66f4\u65b0<code>state<\/code>\u4e2d\u67d0\u4e2a\u590d\u6742\u6570\u636e\u7c7b\u578b\uff0c\u7406\u8bba\u4e0a\u4e5f\u662f\u5dee\u4e0d\u591a\u7684\u3002<\/p><\/blockquote>\n<p>\u5f88\u591a\u65f6\u5019\u6211\u4eec\u67d0\u4e2astate\u6570\u636e\u4e0d\u662f\u7b80\u5355\u6570\u636e\u7c7b\u578b(\u503c\u7c7b\u578b)\uff0c\u800c\u662f\u6570\u7ec4\u3001\u5bf9\u8c61\u4e4b\u7c7b(\u5f15\u7528\u7c7b\u578b)\u3002<strong>\u800cReact\u7ec4\u4ef6\u7684\u66f4\u65b0\u673a\u5236\u5bf9state\u53ea\u8fdb\u884c\u6d45\u5bf9\u6bd4\uff0c\u4e5f\u5c31\u662f\u66f4\u65b0\u67d0\u4e2a\u590d\u6742\u7c7b\u578b\u6570\u636e\u65f6\u53ea\u8981\u5b83\u7684\u5f15\u7528\u5730\u5740\u6ca1\u53d8\uff0c\u90a3\u5c31\u4e0d\u4f1a\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6<\/strong>\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u5c24\u5176\u5f53\u88ab\u66f4\u65b0\u7684\u5f15\u7528\u7c7b\u578b\u6570\u636e\u9700\u8981\u4f9d\u8d56\u4e4b\u524d\u7684\u6570\u636e\uff0c\u6211\u4eec\u53ef\u80fd\u4f1a\u758f\u5ffd\u800c\u72af\u4e0b\u4ee5\u4e0b\u4f4e\u7ea7\u9519\u8bef(\u771f\u7684\u4e0d\u662f\u6211\u672c\u4eba?)\uff1a<\/p>\n<div class=\"_2Uzcx_\"><button class=\"VJbwyy\" type=\"button\" aria-label=\"\u590d\u5236\u4ee3\u7801\"><i class=\"anticon anticon-copy\" aria-label=\"icon: copy\"><\/i><\/button><\/p>\n<pre class=\"line-numbers  language-jsx\"><code class=\"  language-jsx\">  <span class=\"token comment\">\/\/ \u7b80\u5355\u793a\u8303\uff0c\u770b\u4e2a\u610f\u601d\u5c31\u597d\uff0c\u5c31\u4e0d\u628a\u5b8c\u6574\u7ec4\u4ef6\u653e\u51fa\u6765\u4e86<\/span>\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>filterList<span class=\"token punctuation\">,<\/span> setFilterList<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> \r\n\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">changeFilter<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">key<span class=\"token punctuation\">,<\/span> val<span class=\"token punctuation\">,<\/span> mulit<span class=\"token punctuation\">,<\/span> i<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token comment\">\/\/ \u5173\u952e\u503c<\/span>\r\n    <span class=\"token function\">setFilterList<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">prevList<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n      prevList<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>checked <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span>prevList<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>checked\r\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">warn<\/span><span class=\"token punctuation\">(<\/span>prevList <span class=\"token operator\">===<\/span> filterList<span class=\"token punctuation\">)<\/span> <span class=\"token comment\">\/\/ true<\/span>\r\n      <span class=\"token keyword\">return<\/span> prevList <span class=\"token comment\">\/\/ prevList\u548cfilterList\u6307\u5411\u540c\u4e00\u4e2a\u5730\u5740<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n    <span class=\"token comment\">\/\/ \u6216\u8005<\/span>\r\n    <span class=\"token function\">setFilterList<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">prevList<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n      <span class=\"token keyword\">let<\/span> list <span class=\"token operator\">=<\/span> prevList <span class=\"token comment\">\/\/ \u4ecd\u7136\u662f\u540c\u4e00\u4e2a\u5f15\u7528\u5730\u5740<\/span>\r\n      list<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>checked <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span>list<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>checked\r\n      <span class=\"token keyword\">return<\/span> prevList\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n  <span class=\"token punctuation\">}<\/span>\r\n\r\n  <span class=\"token function\">useEffect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n   console<span class=\"token punctuation\">.<\/span><span class=\"token function\">warn<\/span><span class=\"token punctuation\">(<\/span>filterList<span class=\"token punctuation\">)<\/span> <span class=\"token comment\">\/\/ \u89e6\u53d1setFilterList\u540e\u4e0d\u4f1a\u6709\u53cd\u5e94<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><span class=\"token punctuation\">[<\/span>filterList<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span>\r\n\r\n<\/code><\/pre>\n<\/div>\n<p>\u4e5f\u5c31\u662f\u8bf4\uff0c\u66f4\u65b0\u590d\u6742state\u7684\u65f6\u5019\u5fc5\u987b\u4f20\u7ed9\u5b83\u4e00\u4e2a\u5168\u65b0\u7684\u5bf9\u8c61\uff0c\u800c\u4e0d\u662f\u590d\u5236\u4e86\u5b83\u5f15\u7528\u5730\u5740\u518d\u4fee\u6539\u7684\u5bf9\u8c61\u3002<\/p>\n<p>\u4e24\u79cd\u89e3\u51b3\u529e\u6cd5\uff1a<\/p>\n<ol>\n<li>\u7ed3\u5408\u5c55\u5f00\u8fd0\u7b97\u7b26\u8fd4\u56de\u4e00\u4e2a\u65b0\u5bf9\u8c61\uff0c\u540e\u9762\u8fd9\u4e2a\u94fe\u63a5\u4e5f\u6709\u548c\u6211\u7c7b\u4f3c\u7684\u793a\u4f8b\uff1a<a href=\"https:\/\/links.jianshu.com\/go?to=https%3A%2F%2Freact.docschina.org%2Fdocs%2Fhooks-reference.html%23functional-updates\" target=\"_blank\" rel=\"noopener\"><code>setState<\/code>\u00a0\u7684\u51fd\u6570\u5f0f\u66f4\u65b0\u5f62\u5f0f<\/a><\/li>\n<\/ol>\n<div class=\"_2Uzcx_\"><button class=\"VJbwyy\" type=\"button\" aria-label=\"\u590d\u5236\u4ee3\u7801\"><i class=\"anticon anticon-copy\" aria-label=\"icon: copy\"><\/i><\/button><\/p>\n<pre class=\"line-numbers  language-csharp\"><code class=\"  language-csharp\"><span class=\"token function\">setFilterList<\/span><span class=\"token punctuation\">(<\/span>prevList <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n  prevList<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">checked<\/span> <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span>prevList<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">checked<\/span> <span class=\"token comment\">\/\/ \u8fd9\u91cc\u6570\u636e\u5f15\u7528\u5730\u5740\u7684\u503c\u540c\u6837\u88ab\u4fee\u6539<\/span>\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span>prevList<span class=\"token punctuation\">]<\/span> <span class=\"token comment\">\/\/ \u6570\u636e\u6700\u5916\u5c42\u7684\u5f15\u7528\u5730\u5740\u4e0d\u540c\u5373\u53ef\u89e6\u53d1\u7ec4\u4ef6\u66f4\u65b0<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n<\/code><\/pre>\n<\/div>\n<ol start=\"2\">\n<li>\u6df1\u62f7\u8d1d\u5bf9\u8c61\uff0c\u7528\u5168\u65b0\u7684\u526f\u672c\u66f4\u65b0\u6570\u636e\u3002<br \/>\n\u4e00\u822c\u60c5\u51b5\u50cf\u8fd9\u6837\u975e\u5355\u4e2a\u5c42\u7ea7\u7684\u5bf9\u8c61\uff0c\u6bd4\u5982\u6211\u7684filterList\u662f\u5bf9\u8c61\u6570\u7ec4\uff0c\u7528<code>slice()<\/code>\u65b9\u6cd5\u5e76\u4e0d\u80fd\u5b9e\u73b0\u91cc\u9762\u6bcf\u4e2a\u5bf9\u8c61\u7684\u6df1\u62f7\u8d1d\u3002\u5b9e\u73b0\u771f\u6b63\u7684\u6df1\u62f7\u8d1d\u6211\u4eec\u53ef\u4ee5\u5c01\u88c5\u904d\u5386\u65b9\u6cd5\u6216\u8005\u501f\u52a9<code>lodash.cloneDeep<\/code>\u90a3\u4e9b\u5e93\u6765\u5b9e\u73b0\u3002\u4f46\u7ec4\u4ef6state\u7684\u66f4\u65b0\u6211\u4eec\u672c\u6765\u5c31\u8981\u4fee\u6539\u539f\u6765\u7684\u6570\u636e\uff0c\u590d\u6742\u5bf9\u8c61\u5185\u5c42\u6570\u636e\u540c\u65f6\u88ab\u6539\u53d8\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0d\u5c5e\u4e8ebug\u3002\u53ea\u8981\u6700\u5916\u5c42\u5f15\u7528\u5730\u5740\u4e0d\u540c\uff0c\u80fd\u89e6\u53d1\u7ec4\u4ef6\u66f4\u65b0\u5c31\u53ef\u4ee5\u4e86\u3002<\/li>\n<\/ol>\n<div class=\"_2Uzcx_\"><button class=\"VJbwyy\" type=\"button\" aria-label=\"\u590d\u5236\u4ee3\u7801\"><i class=\"anticon anticon-copy\" aria-label=\"icon: copy\"><\/i><\/button><\/p>\n<pre class=\"line-numbers  language-php\"><code class=\"  language-php\"><span class=\"token function\">setFilterList<\/span><span class=\"token punctuation\">(<\/span>prevList <span class=\"token operator\">=<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">list<\/span> <span class=\"token operator\">=<\/span> prevList<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token comment\">\/\/ \u6570\u7ec4\u91cc\u9762\u7684\u6bcf\u4e2a\u5bf9\u8c61\u6ca1\u6709\u5b9e\u73b0\u6df1\u62f7\u8d1d\u4f46\u5bf9\u6211\u4eec\u6ca1\u6709\u5f71\u54cd<\/span>\r\n  <span class=\"token keyword\">list<\/span><span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>checked <span class=\"token operator\">=<\/span> <span class=\"token operator\">!<\/span><span class=\"token keyword\">list<\/span><span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>checked \r\n  <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">list<\/span> <span class=\"token comment\">\/\/ list\u6307\u5411\u4e00\u4e2a\u5168\u65b0\u7684\u5730\u5740<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>\u989d\u5916\uff1a<br \/>\n<code>const arrCopy = sourceArr.slice()<\/code>\u00a0\u6df1\u62f7\u8d1d\u7b80\u5355\u6570\u7ec4<br \/>\n<code>const objCopy = Object.assign({}, sourceObj)<\/code>\u00a0\u6df1\u62f7\u8d1d\u7b80\u5355Object<br \/>\n<em><strong>\u6ce8\u610f<\/strong>\uff1a\u5f53\u5bf9\u8c61\u4e2d\u53ea\u6709\u4e00\u7ea7\u5c5e\u6027\uff0c\u6ca1\u6709\u4e8c\u7ea7\u5c5e\u6027\u7684\u65f6\u5019\uff0c<code>Object.assign()<\/code>\u65b9\u6cd5\u4e3a\u6df1\u62f7\u8d1d\uff0c\u4f46\u662f\u5bf9\u8c61\u4e2d\u6709\u5bf9\u8c61\u7684\u65f6\u5019\uff0c\u6b64\u65b9\u6cd5\u5728\u4e8c\u7ea7\u5c5e\u6027\u4ee5\u540e\u5c31\u662f\u6d45\u62f7\u8d1d\u3002<\/em><\/p>\n<blockquote><p>\u518d\u5f15\u7533\u4e00\u4e0b\uff0c\u4e00\u4e9b\u6240\u8c13\u4e0d\u4f1a\u6539\u53d8\u539f\u6570\u7ec4\u7684\u65b9\u6cd5\uff0c\u6bd4\u5982<code>map<\/code>\u3001<code>forEach<\/code>\u3002\u9488\u5bf9\u7684\u662f\u7b80\u5355\u6570\u7ec4(\u53ea\u6709\u4e00\u5c42\u6570\u636e)\uff0c\u5982\u679c\u662f\u975e\u5355\u5c42\u7684\u6bd4\u5982\u5bf9\u8c61\u6570\u7ec4\uff0c\u5728\u65b9\u6cd5\u5185\u4fee\u6539\u4e86\u5bf9\u8c61\u5185\u90e8\u7684\u6570\u636e\uff0c\u539f\u6570\u7ec4\u7684\u76f8\u5e94\u7684\u6570\u636e\u4e5f\u4f1a\u6539\u53d8\u3002\u53e6\u5916<code>map<\/code>\u548c<code>forEach<\/code>\u7684\u533a\u522b\u5c31\u662f<code>forEach<\/code>\u6ca1\u6709\u8fd4\u56de\u503c(undefined)\u3002\u6240\u4ee5\u57fa\u672c\u529f\u4e00\u5b9a\u8981\u624e\u5b9e\uff0c\u6211\u5c31\u662f\u5403\u4e86\u6ca1\u6709\u6253\u597d\u57fa\u7840\u7684\u4e8f?<\/p><\/blockquote>\n<p>\u5728\u8fd9\u79cd\u60c5\u51b5\u5982\u4f55\u4e0d\u6539\u53d8\u539f\u6570\u7ec4\u5f15\u7528\u5730\u5740\u5185\u7684\u6570\u636e\uff0c\u90a3\u5c31\u662f\u5728\u4fee\u6539\u7684\u65f6\u5019\u65b0\u5f00\u8f9f\u4e00\u4e2a\u5f15\u7528\u5730\u5740\uff0c\u662f\u4e0d\u662f\u548c\u6211\u4eec\u66f4\u65b0\u590d\u6742\u7c7b\u578bstate\u5f88\u50cf?\uff1f<\/p>\n<div class=\"_2Uzcx_\"><button class=\"VJbwyy\" type=\"button\" aria-label=\"\u590d\u5236\u4ee3\u7801\"><i class=\"anticon anticon-copy\" aria-label=\"icon: copy\"><\/i><\/button><\/p>\n<pre class=\"line-numbers  language-jsx\"><code class=\"  language-jsx\"><span class=\"token keyword\">let<\/span> arr <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">{<\/span> name<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Anna'<\/span><span class=\"token punctuation\">,<\/span> age<span class=\"token punctuation\">:<\/span> <span class=\"token number\">16<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> name<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'James'<\/span><span class=\"token punctuation\">,<\/span> age<span class=\"token punctuation\">:<\/span> <span class=\"token number\">18<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span>\r\n<span class=\"token keyword\">let<\/span> newArr <span class=\"token operator\">=<\/span> array<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token comment\">\/\/ item.like = 'eat'; \/\/ \u50cf\u8fd9\u6837\u4f1a\u6539\u53d8\u539f\u6570\u7ec4\u5185\u90e8\u6570\u636e<\/span>\r\n  <span class=\"token keyword\">const<\/span> obj <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token operator\">...<\/span>item<span class=\"token punctuation\">,<\/span> like<span class=\"token punctuation\">:<\/span><span class=\"token string\">'eat'<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">return<\/span> obj<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\nconsole<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>arr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ [{ name: 'Anna', age: 16},{ name: 'James', age: 18}]<\/span>\r\nconsole<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>newArr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><span class=\"token comment\">\/\/[{ name: 'Anna', age: 16,like: \"eat\"},{ name: 'James', age: 18,like: \"eat\"}]<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>\u5f53\u7136\u6211\u4eec\u4e5f\u53ef\u4ee5\u76f4\u63a5\u6574\u4e0a<code>lodash<\/code><\/p>\n<p><strong>\u5bf9\u8c61\u6570\u7ec4\u6df1\u62f7\u8d1d\u603b\u7ed3\u793a\u4f8b \uff1a<\/strong><\/p>\n<div class=\"_2Uzcx_\"><button class=\"VJbwyy\" type=\"button\" aria-label=\"\u590d\u5236\u4ee3\u7801\"><i class=\"anticon anticon-copy\" aria-label=\"icon: copy\"><\/i><\/button><\/p>\n<pre class=\"line-numbers  language-jsx\"><code class=\"  language-jsx\"><span class=\"token keyword\">const<\/span> _ <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'lodash'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">let<\/span> arr <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">{<\/span> name<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Anna'<\/span><span class=\"token punctuation\">,<\/span> age<span class=\"token punctuation\">:<\/span> <span class=\"token number\">16<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> name<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'James'<\/span><span class=\"token punctuation\">,<\/span> age<span class=\"token punctuation\">:<\/span> <span class=\"token number\">18<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span>\r\n<span class=\"token comment\">\/\/ \u65b9\u6cd5\u4e00<\/span>\r\n<span class=\"token keyword\">let<\/span> arr1 <span class=\"token operator\">=<\/span> arr<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">o<\/span> <span class=\"token operator\">=&gt;<\/span> Object<span class=\"token punctuation\">.<\/span><span class=\"token function\">assign<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> o<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token comment\">\/\/ \u65b9\u6cd5\u4e8c<\/span>\r\n<span class=\"token keyword\">let<\/span> arr2 <span class=\"token operator\">=<\/span> arr<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">o<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">...<\/span>o<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token comment\">\/\/ \u65b9\u6cd5\u4e09\uff08\u63a8\u8350\uff09<\/span>\r\n<span class=\"token keyword\">let<\/span> arr3 <span class=\"token operator\">=<\/span> _<span class=\"token punctuation\">.<\/span><span class=\"token function\">cloneDeep<\/span><span class=\"token punctuation\">(<\/span>arr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/article>\n<div><\/div>\n<div class=\"_3y7CB9\">\n<div>\u6700\u540e\u7f16\u8f91\u4e8e\u00a0\uff1a<time datetime=\"2021-03-17T05:34:23.000Z\">2021.03.17 13:34:23<\/time><\/div>\n<div class=\"_2Kbacm\">\u00a9\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709,\u8f6c\u8f7d\u6216\u5185\u5bb9\u5408\u4f5c\u8bf7\u8054\u7cfb\u4f5c\u8005<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>cc from &nbsp; \u8fd9\u91cc\u4e3b\u8981\u7528<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[24],"tags":[121],"class_list":["post-7286","post","type-post","status-publish","format-standard","hentry","category-value_docs","tag-05-"],"_links":{"self":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts\/7286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/comments?post=7286"}],"version-history":[{"count":0,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts\/7286\/revisions"}],"wp:attachment":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/media?parent=7286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/categories?post=7286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/tags?post=7286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}