sprewell20051116 / javascriptcourse

讀書會提出問題的平台

JavascriptCourse

這是專門提供 JavaScript 課程的共讀平台
Udemy Link : https://www.udemy.com/es6-in-depth/
講者的 GitHub : https://github.com/15Dkatz/es6-in-depth-tutorial

參與者

常大 | sprewell20051116
不點 | simishow
威廷 | ww24896
德毅 | chouderek

日程表

WW01 (08/23)  

Subject 01 : Introducing the Course
Subject 02 : Introducing JavaScript
Subject 03 : JavaScript Language and Essentials
Subject 04 : Setting up an ES6 Development Environment

WW02 (08/30)  

Subject 05 : Understanding ES6 Essentials Part 1
Subject 06 : Understanding ES6 Essentials Part 2
Subject 07 : Classes and Prototypes

WW03 (09/06)  

Subject 08 : Data Structures in ES6
Subject 09 : Closures in ES6
Subject 10 : ES6 Generators

WW04 (09/13)

Subject 11 : Asynchronous Programming, Promises, and APIs
Subject 12 : ES7 and ES8 Proposals
Subject 13 : Project: A React and ES6 Application
Subject 14 : Closing Remarks

WW05

Backup

WW06

Backup

javascriptcourse's Issues

Subject 05 Class 41 - ${a} not working

// Template Literals
let a = "good";
let greeting_41 = "good morning";
let greeting_41_2 = "${a} morning";
console.log(a);
console.log(greeting_41);
console.log(greeting_41_2);

最後輸出

good
good morning
${a} morning

課程中希望是可以使用 ${a} 來替代前面已經宣告過的 let a = "good"
但是卻沒有成功

Class67 Map function 除了 entries() 之外還有什麼其他有用的 methods 呢?

entries() for Map()

let numArr = [[1, 'one'], [2, 'two'], [3, 'three']];
let valMap = new Map(numArr);
console.log(valMap);
for (let [key, value] of valMap.entries()) {
  console.log(`${key} points to ${value}`); 
  // 1 points to one, 
  // 2 points to two, 
  // 3 points to three
}

第 9 節，講座 74

太難懂了.....
check為什麼要寫成funtion 不能 check = balance?
return 為什麼要 xxx : xxx?

Prototype 的用處

看起來應該就是做 Class 的擴展的方便用法
課堂中使用的 Wizard Class

function Wizards (name, house, pet) {
  this.name = name;
  this.house = house;
  this.pet = pet;
  this.greet = () => `I'm ${this.name} from ${this.house}`;
}

後面想要在這個 Class 中新增一個 Member，可以不用直接去更動到 Wizard Class 的類別宣告，而是使用 prototype 的這個關鍵字來作為擴展

Wizards.prototype.pet_name;
let Harry = new Wizards("Harry Potter", "Gryffindor", "Owl");
Harry.pet_name = "Hedwig"
console.log(Harry); 
//Wizards {name: "Harry Potter", house: "Gryffindor", pet: "Owl", pet_name: "Hedwig", greet: ƒ}

Subject04 - Setting up with webpack

$npm run build Error

GIGIGUNdeMacBook-Pro:es6 GIGIGUN$ npm run build

> [email protected] build /Users/GIGIGUN/es6
> webpack

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./build" is not an absolute path!

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the es6 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs es6
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls es6
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/GIGIGUN/es6/npm-debug.log

Subject 13 react - setup JSX

第一步就 GG

ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (5:2)

  3 | import ReactDOM from 'react-dom';
  4 | ReactDOM.render(
> 5 |   <div> React Application! </div>, document.getElementByID('root');
    |   ^
  6 | );
  7 | 

class 中的 static

http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/class#Class-%E7%9A%84%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95
如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為「靜態方法」。
static代表是方法,不是實做

ch1~ch3 心得

OS: Fedora 26
安裝：
＃１. 安裝Node.js 和npm 。
https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora
＃２. git repos (由影片clone javascript tutorial repos...)
＃３. 建立一個*.html file, 開始進入課程。
＃４. 撰寫簡易hello, world! 撰寫完成可直接由google chrome打開。
＃５. 建立console, 打印console.log() 可以直接看到輸出結果。
＃６. 教學影片第三章講的都是語法，可以快速閱過。

補充：
git的5個簡單指令：
　執行指令前，可以先選一個free source server, 我這邊使用bitbucket.org, 有１Ｇ空間。
可以直接在server建立一個repos, 並由本機利用git clone http://.....
#1. git status: 確認目前更改的file
#2. git add : 加入，　可以git add . , 加入所有東西
#3. git commit: 建立節點，並且寫註解
#4. git push: upload到server
#5. git pull : download 最新的commit

git GUI 軟體推薦：gitkraken, 目前較推薦，免費版，且有持續更新維護

Git - 建立一個自己的資料夾 (順便 commit / push)

Clone the GitHub Repo

• 複製 Git Repo 的連結 (https://github.com/sprewell20051116/JavascriptCourse.git)

• 在 GitKraken 中 Clone 這個 GitHub repo
  將 Git Repo 連結貼在 URL 的欄位後，按下 Clone the repo
  
  Clone 完就可以看到這個畫面。
  

新增資料夾與 README.md

• 在 Clone 下來的資料夾中新增自己 ID 的資料夾
  
• 修改自己 ID 的 README.md

## testID 課程專用資料夾
###ID : testID

• 會在 GitKraken 中看到最上方多了一個欄位
  

• 選擇這個欄位 >> 點選檔案旁的 + 後按 Stage File，讓 Git 可以去追蹤這個檔案 >> 寫上 Commit Message >> Commit
  
  就可以看到在 Local 端有個一個 commit。
  

• 把 Change Push 到 GitHub 上
  

• 搞定惹

千萬注意，在做 git push 之前請記得再按一次 git pull，確保 Local 跟 GitHub 上的 Source code 是同步最新的，減少衝突的問題發生。

Hi issue

Hey, issue, long time no see...

Install npm in Windows

因為通篇的課程都是在 Mac 系統上面執行, 這個 ISSUE 主要是討論 npm 如何在 Windows 作業系統中安裝及使用
https://github.com/nodejs-tw/nodejs-wiki-book/blob/master/zh-tw/node_npm.rst

export default 用法

看完影片,還是不懂export default 是啥
找了資料
http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4
這篇很清楚
簡單說就是預設的export ,當你import的時候,不用輸入名稱,就會自動選擇他,還可以任意命名

This is the test issue

04_01_Setting_Up_ES6_Dev_Environment-步驟06

安裝完成出現
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

不過後續指令可以正常執行

Class71 : Closure 的相關問題

原本的示範是這樣

let call = () => {
  let secret = "ES6 rocks";
  let reveal = () => {
    console.log(secret);
  }
  reveal();
};

然後 call() 會印出 ES6 rocks 很好理解。

但是後來的示範變成是 return 整個 reveal 這個 function point.

let call = () => {
  let secret = "ES6 rocks";
  let reveal = () => {
    console.log(secret);
  }
  return reveal; // to retrun reveal function entirely
};

先把 call() assign 給 unveil 的這個區域變數後，再去 call unveil() 可以印出 ES6 rocks。
這也很好理解

let unveil = call();
unveil(); // ES6 rocks

那問題來了，為什麼直接使用 call() 不能像一開始那樣印出 ES6 rocks?

let call = () => {
  let secret = "ES6 rocks";
  let reveal = () => {
    console.log(secret);
  }
  return reveal; // to retrun reveal function entirely
};
call(); // 這邊沒有印東西

Subject 05 Class 44 - Destructuring Assignment 與 Variable Scope 的問題

原本的例題，這樣是 ok 的

let king = {name: "Mufasa", kids: 1};
let name = king.name;
let kids = king.kids;
console.log(name, kids);

let {nameObj, kidsObj} = king;
console.log(nameObj, kidsObj);

下一個例題，這會造成下面的 error

let son = {name: "Simba", parents: 2};
let name, parents;
{name, parents} = son;
console.log(sonName, parents);

./app/index.js
Module build failed: SyntaxError: Unexpected token (125:16)

  123 | let son = {name: "Simba", parents: 2};
  124 | let sonName, sonParents;
> 125 | {name, parents} = son;
      |                 ^
  126 | ({name, parents} = son); // fix complile error, since name and parents are conflict
  127 | console.log(sonName, parents);
  128 | 

 @ multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js

看不出來為什麼~!

JavascriptCourse

Subject11 Promise

需要更多的資料跟討論。

console.log("Subject 11 Promimse and Asynchronous");
let p = new Promise((resolve, reject) => {
  // resolve('Resolved promise data');
  // reject("rejected promise data"); //Uncaught (in promise) rejected promise data
  setTimeout(() => resolve("resolved promise data"), 3000); // schedule 3 sec
})

p.then(response => console.log(response))
  .catch(error => console.log(error)); // rejected promise data

console.log("after promise consumption");

Class 77: Generator

function* letterMaker() {
  yield 'a';
  yield 'b';
  yield 'c';
}

示範中的 function* 是什麼來著?

Kick Off!!

GOGOGO