{"id":1375,"date":"2024-06-02T22:28:38","date_gmt":"2024-06-02T22:28:38","guid":{"rendered":""},"modified":"2024-06-05T03:09:46","modified_gmt":"2024-06-04T19:09:46","slug":"javascript%e4%b8%93%e9%a2%98%e4%b9%8b%e6%95%b0%e7%bb%84%e6%89%81%e5%b9%b3%e5%8c%96","status":"publish","type":"post","link":"https:\/\/www.lccc.top\/?p=1375","title":{"rendered":"JavaScript\u4e13\u9898\u4e4b\u6570\u7ec4\u6241\u5e73\u5316"},"content":{"rendered":"\n

\u6241\u5e73\u5316<\/h2>\n

\u6570\u7ec4\u7684\u6241\u5e73\u5316\uff0c\u5c31\u662f\u5c06\u4e00\u4e2a\u5d4c\u5957\u591a\u5c42\u7684\u6570\u7ec4 array (\u5d4c\u5957\u53ef\u4ee5\u662f\u4efb\u4f55\u5c42\u6570)\u8f6c\u6362\u4e3a\u53ea\u6709\u4e00\u5c42\u7684\u6570\u7ec4\u3002<\/p>\n

\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5047\u8bbe\u6709\u4e2a\u540d\u4e3a flatten \u7684\u51fd\u6570\u53ef\u4ee5\u505a\u5230\u6570\u7ec4\u6241\u5e73\u5316\uff0c\u6548\u679c\u5c31\u4f1a\u5982\u4e0b\uff1a<\/p>\n

<\/p>\n
var<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>;<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>)<\/span>)<\/span> \/\/ [1, 2, 3, 4]<\/span><\/pre>\n<\/div>\n
\u77e5\u9053\u4e86\u6548\u679c\u662f\u4ec0\u4e48\u6837\u7684\u4e86\uff0c\u6211\u4eec\u53ef\u4ee5\u53bb\u5c1d\u8bd5\u7740\u5199\u8fd9\u4e2a flatten \u51fd\u6570\u4e86<\/p>\n
\u9012\u5f52<\/h2>\n
\u6211\u4eec\u6700\u4e00\u5f00\u59cb\u80fd\u60f3\u5230\u7684\u83ab\u8fc7\u4e8e\u5faa\u73af\u6570\u7ec4\u5143\u7d20\uff0c\u5982\u679c\u8fd8\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u5c31\u9012\u5f52\u8c03\u7528\u8be5\u65b9\u6cd5\uff1a<\/p>\n
<\/p>\n
\/\/ \u65b9\u6cd5 1<\/span>\nvar<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>;<\/span>\n\nfunction<\/span> flatten<\/span>(<\/span>arr<\/span>)<\/span> {<\/span>\n    var<\/span> result<\/span> =<\/span> [<\/span>]<\/span>;<\/span>\n    for<\/span> (<\/span>var<\/span> i<\/span> =<\/span> 0<\/span>,<\/span> len<\/span> =<\/span> arr<\/span>.<\/span>length<\/span>;<\/span> i<\/span> <<\/span> len<\/span>;<\/span> i<\/span>++<\/span>)<\/span> {<\/span>\n        if<\/span> (<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>arr<\/span>[<\/span>i<\/span>]<\/span>)<\/span>)<\/span> {<\/span>\n            result<\/span> =<\/span> result<\/span>.<\/span>concat<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>[<\/span>i<\/span>]<\/span>)<\/span>)<\/span>\n        }<\/span>\n        else<\/span> {<\/span>\n            result<\/span>.<\/span>push<\/span>(<\/span>arr<\/span>[<\/span>i<\/span>]<\/span>)<\/span>\n        }<\/span>\n    }<\/span>\n    return<\/span> result<\/span>;<\/span>\n}<\/span>\n\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>)<\/span>)<\/span><\/pre>\n<\/div>\n
toString<\/h2>\n
\u5982\u679c\u6570\u7ec4\u7684\u5143\u7d20\u90fd\u662f\u6570\u5b57\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u8003\u8651\u4f7f\u7528 toString \u65b9\u6cd5\uff0c\u56e0\u4e3a\uff1a<\/p>\n
\n
[<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>.<\/span>toString<\/span>(<\/span>)<\/span> \/\/ \"1,2,3,4\"<\/span><\/pre>\n<\/div>\n
\u8c03\u7528 toString \u65b9\u6cd5\uff0c\u8fd4\u56de\u4e86\u4e00\u4e2a\u9017\u53f7\u5206\u9694\u7684\u6241\u5e73\u7684\u5b57\u7b26\u4e32\uff0c\u8fd9\u65f6\u5019\u6211\u4eec\u518d split\uff0c\u7136\u540e\u8f6c\u6210\u6570\u5b57\u4e0d\u5c31\u53ef\u4ee5\u5b9e\u73b0\u6241\u5e73\u5316\u4e86\u5417\uff1f<\/p>\n
<\/p>\n
\/\/ \u65b9\u6cd52<\/span>\nvar<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>;<\/span>\n\nfunction<\/span> flatten<\/span>(<\/span>arr<\/span>)<\/span> {<\/span>\n    return<\/span> arr<\/span>.<\/span>toString<\/span>(<\/span>)<\/span>.<\/span>split<\/span>(<\/span>','<\/span>)<\/span>.<\/span>map<\/span>(<\/span>function<\/span>(<\/span>item<\/span>)<\/span>{<\/span>\n        return<\/span> +<\/span>item<\/span>\n    }<\/span>)<\/span>\n}<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>)<\/span>)<\/span><\/pre>\n<\/div>\n
\u7136\u800c\u8fd9\u79cd\u65b9\u6cd5\u4f7f\u7528\u7684\u573a\u666f\u5374\u975e\u5e38\u6709\u9650\uff0c\u5982\u679c\u6570\u7ec4\u662f [1, ‘1’, 2, ‘2’] \u7684\u8bdd\uff0c\u8fd9\u79cd\u65b9\u6cd5\u5c31\u4f1a\u4ea7\u751f\u9519\u8bef\u7684\u7ed3\u679c\u3002<\/p>\n
reduce<\/h2>\n
\u65e2\u7136\u662f\u5bf9\u6570\u7ec4\u8fdb\u884c\u5904\u7406\uff0c\u6700\u7ec8\u8fd4\u56de\u4e00\u4e2a\u503c\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u8003\u8651\u4f7f\u7528 reduce \u6765\u7b80\u5316\u4ee3\u7801\uff1a<\/p>\n
<\/p>\n
\/\/ \u65b9\u6cd53<\/span>\nvar<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>;<\/span>\n\nfunction<\/span> flatten<\/span>(<\/span>arr<\/span>)<\/span> {<\/span>\n    return<\/span> arr<\/span>.<\/span>reduce<\/span>(<\/span>function<\/span>(<\/span>prev<\/span>,<\/span> next<\/span>)<\/span>{<\/span>\n        return<\/span> prev<\/span>.<\/span>concat<\/span>(<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>next<\/span>)<\/span> ? flatten<\/span>(<\/span>next<\/span>)<\/span> : next<\/span>)<\/span>\n    }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>\n}<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>)<\/span>)<\/span><\/pre>\n<\/div>\n
…<\/h2>\n
ES6 \u589e\u52a0\u4e86\u6269\u5c55\u8fd0\u7b97\u7b26\uff0c\u7528\u4e8e\u53d6\u51fa\u53c2\u6570\u5bf9\u8c61\u7684\u6240\u6709\u53ef\u904d\u5386\u5c5e\u6027\uff0c\u62f7\u8d1d\u5230\u5f53\u524d\u5bf9\u8c61\u4e4b\u4e2d\uff1a<\/p>\n
<\/p>\n
var<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>;<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>[<\/span>]<\/span>.<\/span>concat<\/span>(<\/span>...arr<\/span>)<\/span>)<\/span>;<\/span> \/\/ [1, 2, [3, 4]]<\/span><\/pre>\n<\/div>\n
\u6211\u4eec\u7528\u8fd9\u79cd\u65b9\u6cd5\u53ea\u53ef\u4ee5\u6241\u5e73\u4e00\u5c42\uff0c\u4f46\u662f\u987a\u7740\u8fd9\u4e2a\u65b9\u6cd5\u4e00\u76f4\u601d\u8003\uff0c\u6211\u4eec\u53ef\u4ee5\u5199\u51fa\u8fd9\u6837\u7684\u65b9\u6cd5\uff1a<\/p>\n
<\/p>\n
\/\/ \u65b9\u6cd54<\/span>\nvar<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> [<\/span>2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>]<\/span>;<\/span>\n\nfunction<\/span> flatten<\/span>(<\/span>arr<\/span>)<\/span> {<\/span>\n\n    while<\/span> (<\/span>arr<\/span>.<\/span>some<\/span>(<\/span>item<\/span> =><\/span> Array<\/span>.<\/span>isArray<\/span>(<\/span>item<\/span>)<\/span>)<\/span>)<\/span> {<\/span>\n        arr<\/span> =<\/span> [<\/span>]<\/span>.<\/span>concat<\/span>(<\/span>...arr<\/span>)<\/span>;<\/span>\n    }<\/span>\n\n    return<\/span> arr<\/span>;<\/span>\n}<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>)<\/span>)<\/span><\/pre>\n<\/div>\n
undercore<\/h2>\n
\u90a3\u4e48\u5982\u4f55\u5199\u4e00\u4e2a\u62bd\u8c61\u7684\u6241\u5e73\u51fd\u6570\uff0c\u6765\u65b9\u4fbf\u6211\u4eec\u7684\u5f00\u53d1\u5462\uff0c\u6240\u6709\u53c8\u5230\u4e86\u6211\u4eec\u6284\u88ad underscore \u7684\u65f6\u5019\u4e86~<\/p>\n
\u5728\u8fd9\u91cc\u76f4\u63a5\u7ed9\u51fa\u6e90\u7801\u548c\u6ce8\u91ca\uff0c\u4f46\u662f\u8981\u6ce8\u610f\uff0c\u8fd9\u91cc\u7684 flatten \u51fd\u6570\u5e76\u4e0d\u662f\u6700\u7ec8\u7684 _.flatten\uff0c\u4e3a\u4e86\u65b9\u4fbf\u591a\u4e2a API \u8fdb\u884c\u8c03\u7528\uff0c\u8fd9\u91cc\u5bf9\u6241\u5e73\u8fdb\u884c\u4e86\u66f4\u591a\u7684\u914d\u7f6e\u3002<\/p>\n
<\/p>\n
\/**<\/span>\n * \u6570\u7ec4\u6241\u5e73\u5316<\/span>\n * @param  {Array} input   \u8981\u5904\u7406\u7684\u6570\u7ec4<\/span>\n * @param  {boolean} shallow \u662f\u5426\u53ea\u6241\u5e73\u4e00\u5c42<\/span>\n * @param  {boolean} strict  \u662f\u5426\u4e25\u683c\u5904\u7406\u5143\u7d20\uff0c\u4e0b\u9762\u6709\u89e3\u91ca<\/span>\n * @param  {Array} output  \u8fd9\u662f\u4e3a\u4e86\u65b9\u4fbf\u9012\u5f52\u800c\u4f20\u9012\u7684\u53c2\u6570<\/span>\n * \u6e90\u7801\u5730\u5740\uff1ahttps:\/\/github.com\/jashkenas\/underscore\/blob\/master\/underscore.js#L528<\/span>\n *\/<\/span>\nfunction<\/span> flatten<\/span>(<\/span>input<\/span>,<\/span> shallow<\/span>,<\/span> strict<\/span>,<\/span> output<\/span>)<\/span> {<\/span>\n\n    \/\/ \u9012\u5f52\u4f7f\u7528\u7684\u65f6\u5019\u4f1a\u7528\u5230output<\/span>\n    output<\/span> =<\/span> output<\/span> ||<\/span> [<\/span>]<\/span>;<\/span>\n    var<\/span> idx<\/span> =<\/span> output<\/span>.<\/span>length<\/span>;<\/span>\n\n    for<\/span> (<\/span>var<\/span> i<\/span> =<\/span> 0<\/span>,<\/span> len<\/span> =<\/span> input<\/span>.<\/span>length<\/span>;<\/span> i<\/span> <<\/span> len<\/span>;<\/span> i<\/span>++<\/span>)<\/span> {<\/span>\n\n        var<\/span> value<\/span> =<\/span> input<\/span>[<\/span>i<\/span>]<\/span>;<\/span>\n        \/\/ \u5982\u679c\u662f\u6570\u7ec4\uff0c\u5c31\u8fdb\u884c\u5904\u7406<\/span>\n        if<\/span> (<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>value<\/span>)<\/span>)<\/span> {<\/span>\n            \/\/ \u5982\u679c\u662f\u53ea\u6241\u5e73\u4e00\u5c42\uff0c\u904d\u5386\u8be5\u6570\u7ec4\uff0c\u4f9d\u6b64\u586b\u5165 output<\/span>\n            if<\/span> (<\/span>shallow<\/span>)<\/span> {<\/span>\n                var<\/span> j<\/span> =<\/span> 0<\/span>,<\/span> length<\/span> =<\/span> value<\/span>.<\/span>length<\/span>;<\/span>\n                while<\/span> (<\/span>j<\/span> <<\/span> length<\/span>)<\/span> output<\/span>[<\/span>idx<\/span>++<\/span>]<\/span> =<\/span> value<\/span>[<\/span>j<\/span>++<\/span>]<\/span>;<\/span>\n            }<\/span>\n            \/\/ \u5982\u679c\u662f\u5168\u90e8\u6241\u5e73\u5c31\u9012\u5f52\uff0c\u4f20\u5165\u5df2\u7ecf\u5904\u7406\u7684 output\uff0c\u9012\u5f52\u4e2d\u63a5\u7740\u5904\u7406 output<\/span>\n            else<\/span> {<\/span>\n                flatten<\/span>(<\/span>value<\/span>,<\/span> shallow<\/span>,<\/span> strict<\/span>,<\/span> output<\/span>)<\/span>;<\/span>\n                idx<\/span> =<\/span> output<\/span>.<\/span>length<\/span>;<\/span>\n            }<\/span>\n        }<\/span>\n        \/\/ \u4e0d\u662f\u6570\u7ec4\uff0c\u6839\u636e strict \u7684\u503c\u5224\u65ad\u662f\u8df3\u8fc7\u4e0d\u5904\u7406\u8fd8\u662f\u653e\u5165 output<\/span>\n        else<\/span> if<\/span> (<\/span>!<\/span>strict<\/span>)<\/span>{<\/span>\n            output<\/span>[<\/span>idx<\/span>++<\/span>]<\/span> =<\/span> value<\/span>;<\/span>\n        }<\/span>\n    }<\/span>\n\n    return<\/span> output<\/span>;<\/span>\n\n}<\/span><\/pre>\n<\/div>\n
\u89e3\u91ca\u4e0b strict\uff0c\u5728\u4ee3\u7801\u91cc\u6211\u4eec\u53ef\u4ee5\u770b\u51fa\uff0c\u5f53\u904d\u5386\u6570\u7ec4\u5143\u7d20\u65f6\uff0c\u5982\u679c\u5143\u7d20\u4e0d\u662f\u6570\u7ec4\uff0c\u5c31\u4f1a\u5bf9 strict \u53d6\u53cd\u7684\u7ed3\u679c\u8fdb\u884c\u5224\u65ad\uff0c\u5982\u679c\u8bbe\u7f6e strict \u4e3a true\uff0c\u5c31\u4f1a\u8df3\u8fc7\u4e0d\u8fdb\u884c\u4efb\u4f55\u5904\u7406\uff0c\u8fd9\u610f\u5473\u7740\u53ef\u4ee5\u8fc7\u6ee4\u975e\u6570\u7ec4\u7684\u5143\u7d20\uff0c\u4e3e\u4e2a\u4f8b\u5b50\uff1a<\/p>\n
<\/p>\n
var<\/span> arr<\/span> =<\/span> [<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> [<\/span>3<\/span>,<\/span> 4<\/span>]<\/span>]<\/span>;<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>flatten<\/span>(<\/span>arr<\/span>,<\/span> true<\/span>,<\/span> true<\/span>)<\/span>)<\/span>;<\/span> \/\/ [3, 4]<\/span><\/pre>\n<\/div>\n
\u90a3\u4e48\u8bbe\u7f6e strict \u5230\u5e95\u6709\u4ec0\u4e48\u7528\u5462\uff1f\u4e0d\u6025\uff0c\u6211\u4eec\u5148\u770b\u4e0b shallow \u548c strct \u5404\u79cd\u503c\u5bf9\u5e94\u7684\u7ed3\u679c\uff1a<\/p>\n