{"id":224,"date":"2021-06-03T09:45:23","date_gmt":"2021-06-03T01:45:23","guid":{"rendered":"http:\/\/qqiuklele.cn\/?p=224"},"modified":"2025-03-26T15:20:21","modified_gmt":"2025-03-26T07:20:21","slug":"%e5%ae%9e%e7%8e%b0%e6%b5%85%e6%8b%b7%e8%b4%9d%e5%92%8c%e6%b7%b1%e6%8b%b7%e8%b4%9d%e7%9a%84%e5%b8%b8%e8%a7%81%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/qqiukulele.cn\/?p=224","title":{"rendered":"\u5b9e\u73b0\u6d45\u62f7\u8d1d\u548c\u6df1\u62f7\u8d1d\u7684\u5e38\u89c1\u65b9\u6cd5"},"content":{"rendered":"\n

\u6d45\u62f7\u8d1d\uff1a\u521b\u5efa\u4e00\u4e2a\u65b0\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u6709\u7740\u539f\u59cb\u5bf9\u8c61\u5c5e\u6027\u503c\u7684\u4e00\u4efd\u7cbe\u786e\u62f7\u8d1d\u3002\u5982\u679c\u5c5e\u6027\u662f\u57fa\u672c\u7c7b\u578b\uff0c\u62f7\u8d1d\u7684\u5c31\u662f\u57fa\u672c\u7c7b\u578b\u7684\u503c\uff0c\u5982\u679c\u5c5e\u6027\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u62f7\u8d1d\u7684\u5c31\u662f\u5185\u5b58\u5730\u5740 \uff0c\u6240\u4ee5\u5982\u679c\u5176\u4e2d\u4e00\u4e2a\u5bf9\u8c61\u6539\u53d8\u4e86\u8fd9\u4e2a\u5730\u5740\uff0c\u5c31\u4f1a\u5f71\u54cd\u5230\u53e6\u4e00\u4e2a\u5bf9\u8c61\u3002<\/p>

\u6df1\u62f7\u8d1d\uff1a\u5c06\u4e00\u4e2a\u5bf9\u8c61\u4ece\u5185\u5b58\u4e2d\u5b8c\u6574\u7684\u62f7\u8d1d\u4e00\u4efd\u51fa\u6765,\u4ece\u5806\u5185\u5b58\u4e2d\u5f00\u8f9f\u4e00\u4e2a\u65b0\u7684\u533a\u57df\u5b58\u653e\u65b0\u5bf9\u8c61,\u4e14\u4fee\u6539\u65b0\u5bf9\u8c61\u4e0d\u4f1a\u5f71\u54cd\u539f\u5bf9\u8c61<\/p><\/blockquote>\n\n\n\n

\u57fa\u672c\u6570\u636e\u7c7b\u578b\u8d4b\u503c\u65f6\uff0c\u5176\u5b9e\u5c31\u662f\u8d4b\u6570\u636e\u3002\u5b9a\u4e49\u4e00\u4e2a\u65b0\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b\u53d8\u91cf\u6216\u8005\u628a\u4e00\u4e2a\u57fa\u672c\u7c7b\u578b\u53d8\u91cf\u8d4b\u7ed9\u53e6\u5916\u4e00\u4e2a\u53d8\u91cf\uff0c\u65b0\u53d8\u91cf\u90fd\u4f1a\u88ab\u653e\u7f6e\u5230\u65b0\u7684\u5185\u5b58\u4f4d\u7f6e\u4e0a\uff0c\u6240\u4ee5\u4e0d\u5b58\u5728\u6df1\u62f7\u8d1d\u548c\u6d45\u62f7\u8d1d\u7684\u533a\u522b\u3002\u7136\u800c\uff0c\u5bf9\u4e8e\u5f15\u7528\u6570\u636e\u7c7b\u578b\uff0c\u5b83\u5b58\u50a8\u7684\u662f\u5b58\u50a8\u5bf9\u8c61\u7684\u5185\u5b58\u4f4d\u7f6e\u7684\u5730\u5740\uff0c\u6240\u4ee5\u590d\u5236\u5f15\u7528\u6570\u636e\u7c7b\u578b\u5c31\u4f1a\u88ab\u5206\u4e3a\u4e24\u79cd\u7c7b\u578b\uff0c\u5373\u6d45\u62f7\u8d1d\u548c\u6df1\u62f7\u8d1d\u3002<\/p>\n\n\n\n

let age = 20;
let hisAge = age;
hisAge = 21;
console.log(`age:${age}--hisAge:${hisAge}`);  
\/\/age:20--hisAge:21<\/pre>\n\n\n\n
\u6d45\u62f7\u8d1d\u53ea\u662f\u6307\u5411\u4fdd\u5b58\u65b0\u53d8\u91cf\u503c\u7684\u539f\u59cb\u96c6\u5408\u7ed3\u6784(\u5bf9\u8c61\u6216\u6570\u7ec4)\u7684\u5f15\u7528\u5730\u5740\uff0c\u5373\u53ea\u590d\u5236\u96c6\u5408\u7ed3\u6784\uff0c\u800c\u4e0d\u590d\u5236\u5143\u7d20\u3002\u56e0\u6b64\uff0c\u88ab\u5f15\u7528\u590d\u5236\u7684\u5bf9\u8c61\u662f\u88ab\u5171\u4eab\u7684\u3002<\/p>\n\n\n\n
let p = {
      name:\"p\",
      age:20
 }
let pp = p;
pp.name = \"pp\";
console.log(p);\/\/{name: \"pp\", age: 20}<\/pre>\n\n\n\n
\u6570\u7ec4\u4e5f\u662f\u7c7b\u4f3c\u7684\u3002<\/p>\n\n\n\n
 let arr1 = [1,2,3];
 let arr2 = arr1;
 arr2.push(4);
 console.log(`arr1:${arr1}--arr2:${arr2}`);
 \/\/arr1:1,2,3,4--arr2:1,2,3,4<\/pre>\n\n\n\n
\u8fd9\u5c31\u662f\u5bf9\u57fa\u672c\u6570\u636e\u7c7b\u578b\u548c\u5f15\u7528\u6570\u636e\u7c7b\u578b\u6700\u57fa\u7840\u7684\u64cd\u4f5c\u7684\u4e0d\u540c\u70b9\u3002<\/p>\n\n\n\n
\u5e38\u89c1\u6d45\u62f7\u8d1d\u7684\u5b9e\u73b0\u65b9\u6cd5<\/h2>\n\n\n\n
1.\u62d3\u5c55\u8fd0\u7b97\u7b26\uff08\u2026\u2026\uff09<\/h3>\n\n\n\n
\u5bf9\u8c61\u4e2d\u7684\u6269\u5c55\u8fd0\u7b97\u7b26(…)\u7528\u4e8e\u53d6\u51fa\u53c2\u6570\u5bf9\u8c61\u4e2d\u7684\u6240\u6709\u53ef\u904d\u5386\u5c5e\u6027\uff0c\u62f7\u8d1d\u5230\u5f53\u524d\u5bf9\u8c61\u4e4b\u4e2d\uff0c\u662f\u5c5e\u4e8e\u6d45\u62f7\u8d1d\u7684\u3002\u5728React\u4e2d\u7684\u7f16\u5199state\u6216props\u76f8\u5173\u4ee3\u7801\u65f6\uff0c\u5e38\u5e38\u7528\u5230\u62d3\u5c55\u8fd0\u7b97\u7b26\u628a\u5bf9\u8c61\u7684\u5185\u5bb9\u590d\u5236\u5230\u67d0\u5904\u3002<\/p>\n\n\n\n
        let bar = { a: 1, b: 2 };
        let baz = { ...bar }; \/\/ { a: 1, b: 2 }
        baz.a = 12;
        console.log(`bar:${bar.a}--baz:${baz.a}`); 
        \/\/bar:1--baz:12<\/pre>\n\n\n\n
2.Object.assign()<\/h3>\n\n\n\n
Object.assign<\/code>\u65b9\u6cd5\u7528\u4e8e\u5bf9\u8c61\u7684\u5408\u5e76\uff0c\u5c06\u6e90\u5bf9\u8c61\uff08source\uff09<\/code>\u7684\u6240\u6709\u53ef\u679a\u4e3e\u5c5e\u6027\uff0c\u590d\u5236\u5230\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u7684\u76ee\u6807\u5bf9\u8c61\uff08target\uff09<\/code>\u3002\u6ce8\u610f\u7684\u662f\uff0c\u4fee\u6539\u590d\u5236\u597d\u540e\u7684\u76ee\u6807\u5bf9\u8c61\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b\uff0c\u662f\u4e0d\u4f1a\u5f71\u54cd\u5230\u6e90\u5bf9\u8c61\u7684\u5bf9\u5e94\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b\u7684\uff0c\u4f46\u662f\u4fee\u6539\u590d\u5236\u8fc7\u6765\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b\uff0c\u5c31\u4f1a\u6539\u53d8\u6e90\u5bf9\u8c61\u7684\u5bf9\u5e94\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b\uff0c\u4e5f\u5c31\u662f\u5979\u4eec\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b\u7684value\u4fdd\u5b58\u7684\u662f\u540c\u4e00\u4e2a\u5730\u5740\u53d8\u91cf\u3002\u6240\u4ee5\u8fd9\u662f\u4e00\u4e2a\u6d45\u62f7\u8d1d\u3002<\/p>\n\n\n\n
        let bar = { a: 1, b: 2,attr:{type:'little'} };
        let baz = Object.assign({c:3}, bar); \/\/ { a: 1, b: 2 }
        baz.a = 12;
        baz.attr.type = 'tiny';
        console.log(`bar.a:${bar.a}--baz.a:${baz.a}--bar.c:${bar.c}--baz.c:${baz.c}--bar.attr:${bar.attr.type}--baz.attr:${baz.attr.type}`);
      \/\/  bar.a:1--baz.a:12--bar.c:undefined--baz.c:3--bar.attr:tiny--baz.attr:tiny<\/pre>\n\n\n\n
3.slice()\u548cArray.from()<\/h3>\n\n\n\n
\u4f7f\u7528\u6570\u7ec4\u5185\u7f6e\u7684.slice()\u65b9\u6cd5\u548cArray.from\u5b9e\u73b0\u7684\u90fd\u662f\u6d45\u62f7\u8d1d\u7684\u590d\u5236\u3002\u5176\u5b9e\u5e94\u8be5\u8bf4\uff0c\u8fd9\u4e9b\u62f7\u8d1d\u65b9\u6cd5\uff0c\u9047\u5230\u5d4c\u5957\u7684\u5c5e\u6027\uff0c\u53ea\u4f1a\u5bf9\u7b2c\u4e00\u5c42\u8fdb\u884c\u6df1\u62f7\u8d1d\uff0c\u4f46\u662f\u5d4c\u5957\u4e8e\u91cc\u9762\u7684\u5f15\u7528\u7c7b\u578b\u6570\u636e\uff0c\u90fd\u662f\u590d\u5236\u5730\u5740\u7f62\u4e86\u3002<\/p>\n\n\n\n
\u5e38\u89c1\u6df1\u62f7\u8d1d\u65b9\u6cd5<\/h2>\n\n\n\n
\u6df1\u62f7\u8d1d\u53ea\u662f\u5c06\u6e90\u5bf9\u8c61\u7684\u6240\u6709\u5c5e\u6027\u590d\u5236\u5230\u76ee\u6807\u5bf9\u8c61\u4e2d\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u57fa\u5143\u7c7b\u578b\u548c\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\u90fd\u5c06\u88ab\u5206\u914d\u5230\u65b0\u7684\u5185\u5b58\u4f4d\u7f6e\u3002\u4e24\u8005\u7684\u5f15\u7528\u7c7b\u578b\u7684value\u4fdd\u5b58\u7684\u5730\u5740\u53d8\u91cf\u4e0d\u662f\u540c\u4e00\u4e2a\u3002\u8fd9\u6837\uff0c\u5373\u4f7f\u6e90\u5bf9\u8c61\u4e0d\u5b58\u5728\uff0c\u76ee\u6807\u5bf9\u8c61\u4ecd\u7136\u5b58\u5728\u4e8e\u5185\u5b58\u4e2d\u3002<\/p>\n\n\n\n
1.JSON.parse\/stringify<\/h3>\n\n\n\n
\u5229\u7528JSON.stringify \u5c06js\u5bf9\u8c61\u5e8f\u5217\u5316\uff08JSON\u5b57\u7b26\u4e32\uff09\uff0c\u518d\u4f7f\u7528JSON.parse\u6765\u53cd\u5e8f\u5217\u5316(\u8fd8\u539f)js\u5bf9\u8c61\u6765\u505a\u5230\u6df1\u62f7\u8d1d\u3002<\/p>\n\n\n\n
let originalObject = {name: \"apple\", price: {chennai: 120}};
let clonedObject=JSON.parse(JSON.stringify(originalObject));
clonedObject.name =\"orange\";
clonedObject.price.chennai = 100;
\/\/clonedObject = {name: \"orange\", price: {chennai: 100}}
\/\/originalObject = {name: \"apple\", price: {chennai: 120}}<\/pre>\n\n\n\n
\u4f46\u662fJSON.stringify()\u53ea\u80fd\u5e8f\u5217\u5316\u5bf9\u8c61\u7684\u53ef\u679a\u4e3e\u7684\u81ea\u6709\u5c5e\u6027\uff0c\u4f8b\u5982 \u5982\u679cobj\u4e2d\u7684\u5bf9\u8c61\u662f\u6709\u6784\u9020\u51fd\u6570\u751f\u6210\u7684\uff0c \u5219\u4f7f\u7528JSON.parse(JSON.stringify(obj))\u6df1\u62f7\u8d1d\u540e\uff0c\u4f1a\u4e22\u5f03\u5bf9\u8c61\u7684constructor\u3002\u8fd8\u6709\u5c31\u662f\u4e00\u4e9b\u7279\u6b8a\u7684\u5c5e\u6027\u88ab\u5e8f\u5217\u5316\u540e\u4f1a\u8f6c\u5316\u6210\u4e0d\u7406\u60f3\u7684\u5f62\u5f0f\uff0c\u5982obj\u91cc\u6709NaN\uff0c\u5e8f\u5217\u5316\u540e\u663e\u793a\u7684\u662fnull\u3002<\/p>\n\n\n\n
2.Lodash<\/h3>\n\n\n\n
Lodash\u662f\u4e00\u4e2a\u63d0\u4f9b\u591a\u4e2a\u5b9e\u7528\u51fd\u6570\u7684JavaScript\u5e93\uff0cLodash\u5e93\u4e2d\u6700\u5e38\u7528\u7684\u51fd\u6570\u4e4b\u4e00\u662fcloneDeep()\u65b9\u6cd5\u3002\u8be5\u65b9\u6cd5\u6709\u52a9\u4e8e\u5bf9\u5bf9\u8c61\u8fdb\u884c\u6df1\u5ea6\u514b\u9686\uff0c\u4e0d\u7ba1\u5982\u4f55\u5d4c\u5957\u90fd\u53ef\u4ee5\uff0c\u8fd8\u80fd\u514b\u9686JSON.stringify()\u65b9\u6cd5\u4e2d\u9650\u5236\u7684\u975e\u5e8f\u5217\u5316\u5c5e\u6027\u3002<\/p>\n\n\n\n
\u624b\u5199\u5b9e\u73b0\u6df1\u62f7\u8d1d<\/h2>\n\n\n\n
\u56e0\u4e3a\u5c5e\u4e8e\u6d45\u62f7\u8d1d\u7684\u65b9\u6cd5\u90fd\u662f\u6ca1\u6709\u771f\u6b63\u590d\u5236\u5230\u5d4c\u5957\u4e8e\u5185\u5c42\u7684\u5f15\u7528\u6570\u636e\u7c7b\u578b\u6570\u636e\uff0c\u6240\u4ee5\u8981\u5b9e\u73b0\u6df1\u62f7\u8d1d\uff0c\u9700\u8981\u9012\u5f52\u8fdb\u884c\u3002<\/p>\n\n\n\n
    let deepClone = (initalObj) => {
    const obj = {};
    if(typeof initalObj !== 'object'){
      return initalObj
    }
    for (const key in initalObj) {
      if (typeof initalObj[key] === 'object') {
        \/\/\u5bf9\u6570\u7ec4\u7279\u6b8a\u5904\u7406
        if (Array.isArray(initalObj[key])) {
          \/\/\u7528map\u65b9\u6cd5\u8fd4\u56de\u65b0\u6570\u7ec4\uff0c\u5c06\u6570\u7ec4\u4e2d\u7684\u5143\u7d20\u9012\u5f52
          obj[key] = initalObj[key].map(item => this.deepClone(item))
        } else {
          \/\/\u9012\u5f52\u8fd4\u56de\u65b0\u7684\u5bf9\u8c61
          obj[key] = this.deepClone(initalObj[key]);
        }
      } else if (typeof initalObj[key] === 'function') {
        \/\/\u8fd4\u56de\u65b0\u51fd\u6570
        obj[key] = initalObj[key].bind(obj);
      } else {
        \/\/\u57fa\u672c\u7c7b\u578b\u76f4\u63a5\u8fd4\u56de
        obj[key] = initalObj[key];
      }
    }
    return obj;
  }
\u200b
const obj = {
  a: 1,
  b: {},
  c: { d: {}, g: () => {} },
  e: () =>{},
  f: function () {}
}
const newObj = deepClone(obj);
newObj.a === obj.a  \/\/true
newObj.b === obj.b  \/\/false
newObj.c === obj .false  \/\/false
newObj.c.d === obj.c.d  \/\/false
newObj.c.g === obj.c.g  \/\/false
newObj.e === obj.e  \/\/false
newObj.f === obj.f  \/\/false<\/pre>\n\n\n\n
\u53c2\u8003\uff1a\u624b\u5199\u6df1\u62f7\u8d1d\u4ee3\u7801<\/a>     JavaScript\u4e4b\u5bf9\u8c61\u5e8f\u5217\u5316\u8be6\u89e3<\/a>    <\/p>\n","protected":false},"excerpt":{"rendered":"
\u603b\u7ed3\u4e00\u4e0b\u6d45\u62f7\u8d1d\u548c\u6df1\u62f7\u8d1d<\/p>\n","protected":false},"author":1,"featured_media":220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[19],"class_list":["post-224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-21","tag-js"],"_links":{"self":[{"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=224"}],"version-history":[{"count":2,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":226,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/posts\/224\/revisions\/226"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=\/wp\/v2\/media\/220"}],"wp:attachment":[{"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qqiukulele.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}