[绉戞櫘]ES6涓€浜涗笉甯歌鐨勫皬鐭ヨ瘑

Posted 2021-09-06 鍓嶇LeBron

鍐欎綔涓嶆槗锛屾湭缁忎綔鑰呭厑璁哥姝互浠讳綍褰㈠紡杞浇锛?br>濡傛灉瑙夊緱鏂囩珷涓嶉敊锛屾杩庡叧娉ㄣ€佺偣璧炲拰鍒嗕韩锛?br>鎸佺画鍒嗕韩鎶€鏈崥鏂囷紝鍏虫敞寰俊鍏紬鍙仿狆煈夝煆?鍓嶇LeBron
鎺橀噾鍘熸枃

WeakMap

鍓嶇疆鐭ヨ瘑[娣卞叆娴呭嚭]javascript GC 鍨冨溇鍥炴敹鏈哄埗

浠€涔堟槸WeakMap锛?/h2>

WeakMap鏄痥ey / value鐨勭粍鍚堬紝key鍙帴鍙楀璞★紝涓嶆帴鍙楀熀鏈被鍨嬶紝value鍙互涓轰换鎰忕被鍨嬨€?/blockquote>

鏂规硶

• set(key, value)

鍦╓eakMap涓缃竴缁勫叧鑱斿璞★紝杩斿洖WeakMap瀵硅薄

• get(key)

杩斿洖key鐨勫叧鑱斿璞★紝涓嶅瓨鍦ㄦ椂杩斿洖undefined

• has(key)

鏍规嵁鏄惁鏈塳ey鍏宠仈瀵硅薄锛屾斁鍥炰竴涓狟oolean鍊?/blockquote>

• delete(key)

绉婚櫎key鐨勫叧鑱斿璞★紝涔嬪悗鎵цhas(key)鏂规硶杩斿洖false

鍜孧ap鏈変粈涔堝尯鍒紵

1. Map鐨刱ey / value锛岄兘鍙互鏄换鎰忕被鍨?/li>

• WeakMap鐨刱ey鍙兘鏄璞★紝value鍙互鏄换鎰忕被鍨?/li>

const name = "LeBron";
const person = {
  name: "LeBron",
  age: 21,
};

let wk = new WeakMap();

wk.set(person, "nice");
console.log(wk.get(person)); // nice
wk.set(name, 1); // TypeError: Invalid value used as weak map key

let map = new Map();
map.set(name, "JS");
map.set(person, "nice");
console.log(map.get(name)); // JS
console.log(map.get(person)); // nice

1. Map鐨刱ey / value 鏄彲閬嶅巻鐨勶紝鍥犱负瀹冪殑 key / value 瀛樻斁鍦ㄤ竴涓暟缁勪腑銆?/li>

• WeakMap涓嶅瓨鍦ㄥ瓨鏀?key / value 鐨勬暟缁勶紝鎵€浠ヤ笉鍙亶鍘嗐€?/li>

const name = "LeBron";
const person = {
  name: "LeBron",
  age: 21,
};

let wk = new WeakMap();
wk.set(name, "JS");
wk.set(person, "nice");
console.log(wk.keys()); // TypeError: wk.keys is not a function
console.log(wk.values()); // TypeError: wk.values is not a function
console.log(wk.entries());  // TypeError: wk.entries is not a function

let map = new Map();
map.set(person, "nice");
console.log(map.keys()); // [Map Iterator] { \'LeBron\', { name: \'LeBron\', age: 21 } }
console.log(map.values()); // [Map Iterator] { \'JS\', \'nice\' }
console.log(map.entries()); // [Map Entries] {
                           //  [ \'LeBron\', \'JS\' ],
                           //  [ { name: \'LeBron\', age: 21 }, \'nice\' ]
                          //  }

1. Map瀵归敭杩涜寮哄紩鐢紝鍗充娇閿鏍囪涓簄ull浜嗭紝鐢变簬Map鐨刱ey / value鏁扮粍杩樺湪寮曠敤锛宬ey涓嶄細琚獹C銆?/li>

• WeakMap瀵筴ey杩涜寮卞紩鐢紝鍦╧ey琚爣璁颁负null浜嗕互鍚庛€傜敱浜庢槸寮卞紩鐢紝涔熶笉瀛樺湪key / value鏁扮粍寮曠敤锛屼笉褰卞搷key鐨凣C銆?/li>

• 浠ヤ笅绋嬪簭闇€瑕佹墜鍔℅C 鍚姩鏂规硶锛?code>node --expose-gc xxx

Map

function memmorySizeLogger() {
  global.gc();
  const used = process.memoryUsage().heapUsed;
  console.log((used / 1024 / 1024).toFixed(2) + "M");
}

memmorySizeLogger();  // 1.79M

let person = {
  name: "LeBron",
  age: 21,
  tmp: new Array(5 * 1024 * 1024),
};

memmorySizeLogger(); // 41.96M

let map = new Map();
memmorySizeLogger(); // 41.96M

map.set(person, "nice");
memmorySizeLogger(); // 41.96M

person = null;
memmorySizeLogger();  // 41.96M  person鐨勫唴瀛樻病鏈夎鍥炴敹

濡傛灉鎯冲湪杩欑鎯呭喌涓嬫甯窯C锛屾爣璁颁负null鍓嶉渶鍏堟墽琛宮ap.delete(person)

WeakMap

function memmorySizeLogger() {
  global.gc();
  const used = process.memoryUsage().heapUsed;
  console.log((used / 1024 / 1024).toFixed(2) + "M");
}

memmorySizeLogger();  // 1.79M

let person = {
  name: "LeBron",
  age: 21,
  tmp: new Array(5 * 1024 * 1024),
};

memmorySizeLogger(); // 41.96M

let wk = new WeakMap();
memmorySizeLogger();  // 41.96M

wk.set(person, "nice");
memmorySizeLogger();  // 41.96M

person = null;
memmorySizeLogger();  // 1.96M  person鐨勫唴瀛樿鍥炴敹

Why WeakMap锛?/h2>

• 鍦↗S閲岀殑Map API鍏辩敤涓や釜鏁扮粍锛坘ey銆乿alue锛夛紝璁剧疆鐨刱ey銆乿alue閮戒細鍔犲埌杩欎袱涓暟缁勭殑鏈熬锛屽苟瀵筴ey浜х敓寮曠敤銆傚綋浠巑ap鍙栧€兼椂锛岄渶瑕侀亶鍘嗘墍鏈夌殑key锛岀劧鍚庨€氳繃绱㈠紩浠巚alue鏁扮粍涓彇鍑虹浉搴攊ndex鐨勫€笺€?/p>

  • 缂虹偣涓€锛?/p>

    璧嬪€笺€佹悳绱㈤兘鏄疧(n)澶嶆潅搴?/p>

  • 缂虹偣浜岋細

    浣跨敤Map瀹规槗鍑虹幇鍐呭瓨娉勬紡锛屽洜涓烘暟缁勪竴鐩村紩鐢ㄧ潃姣忎釜key鍜寁alue锛屽鑷存棤娉曟甯窯C銆?/p>

• WeakMap瀵筴ey杩涜寮卞紩鐢紝涓嶅奖鍝嶆甯窯C

  • key琚獹C鍚庡け鏁?/li>

• 濡傛灉浣犺寰€瀵硅薄涓婃坊鍔犳暟鎹紝鍙堜笉鎯冲共鎵板瀮鍦惧洖鏀舵満鍒讹紝灏卞彲浠ヤ娇鐢?WeakMap

  • 濡傛灉闇€瑕侀亶鍘?/ 杩唬锛屽垯闇€瑕佷娇鐢∕ap

搴旂敤鍦烘櫙

淇濆瓨DOM鑺傜偣鏁版嵁

let domData = new WeakMap();

let dom = document.getElementById("xxx");

const anyDomData = getDomData(dom);
domData.set(dom, anyDomData);
console.log(domData.get(dom)); 

dom.parentNode.removeChild(dom);
dom = null;

缂撳瓨鐩稿叧鏁版嵁

let cache = new WeakMap();

class HandleCache {
  get(key) {
    if (cache.has(key)) {
      return cache.get(key);
    } else {
      return undefined;
    }
  }
  set(key, value) {
    cache.set(key, value)
  }
  delete(key){
    cache.delete(key)
  }
}

灏佽绉佹湁灞炴€?/h3>

let privateData = new WeakMap();

class Person{
  constructor(name, age){
    privateData.set(this,{name, age});
  }
  getData(){
    return privateData.get(this);
  }
}

WeakSet

鍓嶇疆鐭ヨ瘑[娣卞叆娴呭嚭]JavaScript GC 鍨冨溇鍥炴敹鏈哄埗

浠€涔堟槸WeakSet

WeakSet瀵硅薄鏄竴浜涘璞″€肩殑闆嗗悎锛屽苟涓斿叾涓殑姣忎釜瀵硅薄鍙兘鍑虹幇涓€娆★紝鍦╓eakSet闆嗗悎涓槸鍞竴鐨?/blockquote>

鏂规硶

• add(value)

鍦ㄨWeakSet瀵硅薄涓坊鍔犱竴涓柊鐨勫厓绱爒alue

• delete(value)

鍦ㄨWeakSet瀵硅薄涓垹闄alue杩欎釜鍏冪礌鍚庯紝has鏂规硶浼氳繑鍥瀎alse銆?/blockquote>

• has(value)

杩斿洖涓€涓狟oolean鍊硷紝琛ㄧず缁欏畾鐨剉alue鍊兼槸鍚﹀瓨鍦ㄨ繖涓猈eakSet涓?/blockquote>

鍜孲et鏈変粈涔堝尯鍒?/h2>

1. Set鐨剉alue鍙互鏄换浣曞€硷紝WeakSet鐨勫€煎彧鑳芥槸瀵硅薄

const name = "LeBron";
const age = 21;
const person = {
  name: "LeBron",
  age: 21,
};

const ws = new WeakSet();
const set = new Set();

set.add(name);
set.add(age);
set.add(person); 

ws.add(person);
ws.add(name); // TypeError: Invalid value used in weak set
ws.add(age);    //  TypeError: Invalid value used in weak set

1. Set鏄彲閬嶅巻鐨勶紝WeakSet涓嶅彲閬嶅巻

• Set瀛樺湪涓€涓暟缁勫瓨鏀緑alue鐨勫€硷紝寮曠敤鍘熷璞★紝鏁呭彲閬嶅巻
• WeakSet涓嶅瓨杩欐牱鐨勬暟缁勶紝鏁呬笉鍙亶鍘?/li>

const name = "LeBron";
const age = 21;
const person = {
  name: "LeBron",
  age: 21,
};

const ws = new WeakSet();
const set = new Set();

set.add(name);
set.add(age);
set.add(person);
console.log(set.values()); // { \'LeBron\', 21, { name: \'LeBron\', age: 21 } }

ws.add(person);
ws.add(name); 
ws.add(age);   
console.log(set.values());  // TypeError: ws.values is not a function

1. Set褰卞搷GC锛岃€學eakSet涓嶅奖鍝?/li>

• 浠ヤ笅绋嬪簭闇€瑕佹墜鍔℅C 鍚姩鏂规硶锛?code>node --expose-gc xxx

Set瀛樺湪values鏁扮粍锛屽湪鍘焩alue鎸囧悜null鍚庯紝values鏁扮粍浠嶅value鐨勫€煎瓨鍦ㄥ己寮曠敤锛屽奖鍝嶆甯窯C

function memmorySizeLogger() {
  global.gc();
  const used = process.memoryUsage().heapUsed;
  console.log((used / 1024 / 1024).toFixed(2) + "M");
}

memmorySizeLogger(); // 1.79M

let person = {
  name: "LeBron",
  age: 21,
  tmp: new Array(5 * 1024 * 1024),
};

memmorySizeLogger(); // 41.96M

const set = new Set();
set.add(person);

memmorySizeLogger(); // 41.96M

person = null;

memmorySizeLogger();  // 41.96M

WeakSet涓嶅瓨鍦ㄨ繖鏍风殑鏁扮粍锛屾晠涓嶅奖鍝嶆甯窯C

function memmorySizeLogger() {
  global.gc();
  const used = process.memoryUsage().heapUsed;
  console.log((used / 1024 / 1024).toFixed(2) + "M");
}

memmorySizeLogger(); // 1.79M

let person = {
  name: "LeBron",
  age: 21,
  tmp: new Array(5 * 1024 * 1024),
};

memmorySizeLogger(); // 41.96M

const ws = new WeakSet();
ws.add(person);

memmorySizeLogger();  // 41.96M

person = null;

memmorySizeLogger();  // 1.96M

搴旂敤鍦烘櫙

妫€娴嬪惊鐜紩鐢?/h3>

閫掑綊璋冪敤鑷韩鐨勫嚱鏁伴渶瑕佷竴绉嶉€氳繃璺熻釜鍝簺瀵硅薄宸茶澶勭悊锛屾潵搴斿寰幆鏁版嵁缁撴瀯鐨勬柟娉?/blockquote>

// 瀵?浼犲叆鐨剆ubject瀵硅薄 鍐呴儴瀛樺偍鐨勬墍鏈夊唴瀹规墽琛屽洖璋?function execRecursively(fn, subject, _refs = null){
        if(!_refs)
                _refs = new WeakSet();

        // 閬垮厤鏃犻檺閫掑綊
        if(_refs.has(subject))
                return;

        fn(subject);
        if("object" === typeof subject){
                _refs.add(subject);
                for(let key in subject)
                        execRecursively(fn, subject[key], _refs);
        }
}

const foo = {
        foo: "Foo",
        bar: {
                bar: "Bar"
        }
};

foo.bar.baz = foo; // 寰幆寮曠敤!
execRecursively(obj => console.log(obj), foo);

Reflect

Reflect璇戜负鍙嶅皠锛屾槸涓€涓唴缃殑鏂扮殑鍏ㄥ眬瀵硅薄锛屽畠鎻愪緵鎷︽埅JavaScript鎿嶄綔鐨勬柟娉曘€傝繖浜涙柟娉曚笌Proxy handler鐨勬柟娉曠浉鍚屻€俁eflect涓嶆槸涓€涓嚱鏁板璞★紝鏄潤鎬佺殑绫讳技宸ュ叿鍑芥暟锛岀被浼糓ath锛屽洜姝ゅ畠鏄笉鍙瀯閫犵殑

Reflect鐨勯潤鎬佹柟娉?/h2>

鍏蜂綋鐢ㄦ硶鍙傝€冿細Reflect MDN鏂囨。

• Reflect.apply()
• Reflect.construct()
• Reflect.defineProperty()
• Reflect.deleteProperty()
• Reflect.get()
• Reflect.getOwnPropertyDescriptor()
• Reflect.getPrototypeOf()
• Reflect.has()
• Reflect.isExtensible()
• Reflect.ownKeys()
• Reflect.preventExtensions()
• Reflect.set()
• Reflect.setPrototypeOf()

杩欎簺鏂规硶涓嶱roxy handler鐨勬柟娉曠殑鍛藉悕鐩稿悓锛屽叾涓殑涓€浜涙柟娉曚笌Object鐨勬柟娉曠浉鍚岋紝灏界浜岃€呬箣闂村瓨鍦ㄧ潃鏌愪簺缁嗗井鐨勫樊鍒?/blockquote>

• 鏈変粈涔堜笉鍚岋紵

  • Reflect鐨勯潤鎬佹柟娉曡繘琛岀浉搴旀搷浣滀細杩斿洖涓€涓狟oolean鍊?/p>

    • 鎿嶄綔鎴愬姛杩斿洖true
    • 鎿嶄綔澶辫触杩斿洖false

  • 灏嗗父瑙勭殑鍛戒护寮忔搷浣滆浆鎹㈡垚浜嗗嚱鏁板紡鎿嶄綔锛岀紪绋嬫柟寮忓鍔犱簡鍏冪紪绋嬨€?/p>

    • 渚嬪delete銆佽祴鍊笺€佸垽鏂瓑
  • 鍛戒护寮忔搷浣滃け璐ヤ竴鑸細鎶ラ敊锛岃€孯eflect涓嶄細锛岃繑鍥炰竴涓狟oolean鍊煎垽鏂槸鍚︽垚鍔熴€?/li>
• 鍐呯疆瀵硅薄涓凡缁忓瓨鍦ㄤ簡涓€浜涘弽灏凙PI锛孯eflect灏嗕粬浠仛鍚堣捣鏉ュ苟杩涜浜嗕紭鍖?/li>

浠€涔堟槸鍏冪紪绋嬶紵

• 鍏冪紪绋嬪嵆瀵圭紪绋嬭瑷€杩涜缂栫▼
• 渚嬪Proxy瀵硅薄鍙互杩涜浠ｇ悊锛屾嫤鎴猤et銆乻et鎿嶄綔
• 鑰屽湪绋嬪簭涓幏鍙栫殑鏄綘缂栫▼鍚庣殑鍊笺€?/li>

• Reflect灏辨槸涓€绉嶅弽灏勶紝璋冪敤鐨勬槸澶勭悊杩囧悗鐨勫悇鍐呯疆瀵硅薄涓婄殑鏂规硶

  • 鎵€浠ュ悇鍐呯疆瀵硅薄鐨勬柟娉曟敼鍙樺悗锛孯eflect璋冪敤鐨勬柟娉曚篃鏄敼鍙樹簡鐨?/li>
  • 绫讳技浜庡皝瑁呬簡涓€灞?/li>

Reflect鐨勪紭鐐?/h2>

1. 浼樺寲鍛藉悕绌洪棿

浣犱細鍙戠幇JS鐨勫唴缃弽灏勬柟娉曟暎钀藉湪鍚勫锛孯eflect灏嗕粬浠緢濂藉湴缁勭粐浜嗚捣鏉ャ€?/p>

2. 澧炲己浠ｇ爜鐨勫仴澹€?/li>

浣跨敤Reflect杩涜鎿嶄綔涓嶅鏄撴姏鍑哄紓甯搞€佺嚎绋嬮樆濉烇紝浣夸唬鐮佹洿鍋ュ．鍦拌繍琛屻€?/p>

3. 涓轰粈涔堜笉鐩存帴鎸傚湪Object涓婏紵

• 鍙嶅皠鐨勫璞′笉浠呴拡瀵逛簬Object锛岃繕鍙兘閽堝鍑芥暟

  • 渚嬪apply锛岃皟鐢∣bject.apply(myFunc)杩樻槸鎸哄鎬殑

• 鐢ㄤ竴涓崟涓€鐨勫璞′繚瀛樺唴缃柟娉曡兘澶熶繚璇丣avaScript浠ｇ爜鍏朵粬瀵硅薄鐨勭函鍑€鎬?/p>

  • 杩欐牱瑕佷紭浜庣洿鎺ュ弽灏勬寕杞藉埌鏋勯€犲嚱鏁版垨鑰呭師褰笂
  • 鏇翠紭浜庣洿鎺ヤ娇鐢ㄥ叏灞€鍙橀噺锛岃繖鏍稪S鍏抽敭瀛楀皢瓒婃潵瓒婂銆?/li>

• 鎺橀噾鍘熸枃
• 鎺橀噾锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fjuejin.cn%2Fuser%2F3913917127467805" rel="nofollow">鍓嶇LeBron
• 鐭ヤ箮锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fwww.zhihu.com%2Fpeople%2Flebronchao" rel="nofollow">鍓嶇LeBron
• 鎸佺画鍒嗕韩鎶€鏈崥鏂囷紝鍏虫敞寰俊鍏紬鍙仿狆煈夝煆?鍓嶇LeBron

以上是关于[绉戞櫘]ES6涓€浜涗笉甯歌鐨勫皬鐭ヨ瘑的主要内容，如果未能解决你的问题，请参考以下文章

涓€鏂囧交搴曟悶鎳?zookeeper 鏍稿績鐭ヨ瘑鐐?

STEAM绉戝灏忔€墿锛屽憡鍒灟鐕ョ殑姒傚康锛屾彁鍗囧瀛愮悊绉戞€濈淮锛?9鍏冪鏉€

璋堣皥Nginx绾跨▼姹狅紝瀹炵幇1涓嚎鐨勫皬鐩爣锛?/h1>

涓€绔欐敹褰曡绠楁満鐭ヨ瘑浣撶郴锛氱畻娉曘€佹搷浣滅郴缁熴€佹暟鎹簱銆佺紪绋嬪疄璺点€佺郴缁熻璁＄瓑

python3+Neo4j+flask,姹借溅琛屼笟鐭ヨ瘑鍥捐氨椤圭洰瀹炴垬