reduce 很好用

https://w3c.hexschool.com/blog/a2cb755f 

再舉例

data = [{

name: a,

value:10

|

const b =data.reduce((acc, item)=>{

acc[item.name] = item.value;

return acc

}, {})

console.log(b) // {a:10}

fortify 掃描

Object.is() 与 == 运算符并不等价。 也不等价于 === 运算符

 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7

Object.is() 与 == 运算符并不等价。== 运算符在测试相等性之前，会对两个操作数进行类型转换（如果它们不是相同的类型），这可能会导致一些非预期的行为，例如 "" == false 的结果是 true，但是 Object.is() 不会对其操作数进行类型转换。

Object.is() 也不等价于 === 运算符。Object.is() 和 === 之间的唯一区别在于它们处理带符号的 0 和 NaN 值的时候。=== 运算符（和 == 运算符）将数值 -0 和 +0 视为相等，但是会将 NaN 视为彼此不相等。

constructor, __proto__, prototype

https://www.lagagain.com/post/7%E5%A4%A9%E6%90%9E%E6%87%82js%E9%80%B2%E9%9A%8E%E8%AD%B0%E9%A1%8Cday02-new-factory/

題目

function FooConstructor(name){

  this.name = name;

  this.hello = function(){

     console.log(`Hello, ${this.name}`);

  }

}

var obj2 = new FooConstructor("Foo");

var obj3 = {};

obj3.constructor = FooConstructor;

obj3.constructor("Kitty");

obj3.hello(); // => Hello, Kitty

var obj4 = {};

obj4.__proto__ = FooConstructor.prototype;

obj4.constructor("K-on"); 

obj4.hello(); // => Hello, K-on

Object.is(obj3.constructor, obj4.constructor);  // true

考題

FooConstructor.prototype.bye = function(){console.log(`Bye Bye, ${this.name}`)};

obj2.bye(); // => Bye Bye, Foo

// obj3.bye(); // error! 沒繼承到`FooConstructor`，不受影響

obj4.bye(); // => Bye Bye, K-on

var name; // just declare

console.log(name); // => underfined

FooConstructor("JavaScript");  // 沒寫到new

// Oops! 怎麼被改到了？？   

console.log(name);  // Javascript

可以改寫func如下避免:

The new.target meta-property lets you detect whether a function or constructor was called using the new operator. 

function FooConstructor(name){

  if (!new.target) throw "FooConstructor() must be called with new";

  this.name = name;

  this.hello = function(){

     console.log(`Hello, ${this.name}`);

  }

}

glob

 1. [] 塞選出任何符合這裏面放的字的項目

例如:

• Cat.png
• Bat.png
• Rat.png
• car.png
• list.png
• mom.jpg
• cat.jpg

If you wanted to match only the title cased files in this list, you could use the pattern [CBR]at.

This would return the result:

• Cat.png
• Bat.png
• Rat.png

2.

[!CBR]at 這個則是和上面的相反:

• car.png
• list.png
• mom.jpg
• cat.jpg

3.

Backslashes are used to remove the special meaning of single characters '?', '*', and '[', so that they can be used in patterns.

4.

Asterisks (*)

The most common wildcard that you'll see is the asterisk. This character is used in many ways but is mainly used to match any number of characters (like parts of a string).

The three main use cases of asterisks that I've seen used are:

• * - On Linux, will match everything except slashes. On Windows, it will avoid matching backslashes as well as slashes.
• ** - Recursively matches zero or more directories that fall under the current directory.
• *(pattern_list) - Only matches if zero or one occurrence of any pattern is included in the pattern-list above

These use cases can also be used in conjunction with each other! For example, to find all Markdown files recursively that end with .md, the pattern would be **/*.md

Note: *.md would only return the file paths in the current directory, which is why we append **/ at the beginning.

5.

Something important that I want to note is that while wildcard patterns are similar to regex patterns, they are not explicitly the same for two main reasons:

1. Globs are meant to match filenames rather than text
2. Not all conventions are the same between them (example: * means zero or more copies of the same thing in regex)

monorepo: lerna + 創建私服 verdaccio + jest +eslint

https://www.bilibili.com/video/BV1s44y1C7an/?spm_id_from=333.337.search-card.all.click&vd_source=bfad58a748511d951ef1e6cc2082b1c8

1. lerna 
2. 創建私服 verdaccio 
3. jest
4. eslint
5. prettier
6. editconfig

 https://lerna.js.org/docs/getting-started

https://verdaccio.org/

(未讀)多閱讀鐵人賽的文章 / es歷年新增 和 generator 和 TypeScript 和 Testing

 https://ithelp.ithome.com.tw/users/20128534/ironman/4377

https://ithelp.ithome.com.tw/articles/10264271

https://ithelp.ithome.com.tw/m/users/20103315/ironman/4764

待看

https://jkchao.github.io/typescript-book-chinese/typings/literals.html#%E6%8E%A8%E6%96%AD

https://ithelp.ithome.com.tw/m/articles/10267302

https://www.explainthis.io/zh-hant/swe/why-use-monorepo

1. es歷年新增

https://medium.com/%E6%8B%89%E6%8B%89%E7%9A%84%E7%A8%8B%E5%BC%8F%E7%AD%86%E8%A8%98/%E8%A2%AB%E8%80%83%E5%80%92%E7%B3%BB%E5%88%97qq-es5-es6-es7-es8-es9-es10-c3dab7653373

2. generator

function *g1(){
    let products = ["Apple", "Banana", "Orange"]
    for(var i in products){
        yield products[i]
    }
}

for(product of g1()){
    console.log(product);
}
/* Output:
Apple
Banana
Orange
*/

注意到函式名稱前加了個星號(*)了嗎？然後yield配合上當下產生的產品。That's right! 就是這麼簡單。

var obj = g1();
console.log(obj); // => Object [Generator] {}
console.dir(obj.next()); // => { value: 'Apple', done: false }
console.dir(obj.next()); // => { value: 'Banana', done: false }
console.dir(obj.next()); // => { value: 'Orange', done: false }
console.dir(obj.next()); // => { value: undefined, done: true }
console.dir(obj.next()); // => { value: undefined, done: true }

生成器物件有next()方法可以取的下一件物品。得到的值會是一個有value和done欄位。value就是預取得的物件，done在檢查是不是到盡頭沒材料了。

3.

為什麼是 TypeScript 和 React Testing 呢？主要是因為我認為有了這兩把刷子，將能夠大幅提升程式的可維護性，前者可以讓接手程式碼的人、甚至是三個月後的自己更容易知道當初寫的程式碼要怎麼用，後者可以避免未來重構或需求修改的時候發生自己意想不到的問題。

減少 Bug 並使得維護更加容易，比如：

1. 打錯字（Typo）或寫錯變數、物件性質或方法的名稱。例如：String.prototype.toUppercase 以及 String.prototype.toUpperCase ，筆者到現在還是記不了到底字串要用哪種方法才能全部轉大寫，每次都要重新上網查挺麻煩的。但有了 TypeScript，它會自動幫我們提示要用後者 —— 也就是 toUpperCase 這個方法來避免錯誤。（如圖二）
2. 可以避免類別或物件（Class & Object）的性質與方法（Property & Method）格式錯誤。例如：我們想要定義某類別必須包含 A 以及 B 方法，但是方法的型別也有很多種類，有時候需不需要回傳新的值也是一個問題。我們可以藉由 TypeScript 自動確認我們寫的方法有沒有回傳相對應的型別與格式。
3. 藉由 TypeScript 在 IDE 上的 Autocomplete Feature 來協助開發並且防止錯誤。（如圖一）