JavaScript簡介

直接寫在html檔案內，只需要寫在<script></script>標籤內即可。
另一個地方是可以在瀏覽器內，因為是scripting語言，所以給予指令便可執行。 按F12可看見分割視窗，選擇console即可。
寫成一個延伸檔名為.js的獨立的檔案，例如xxx.js，然後在head標籤內加上<script src="xxx.js"></script>即可

輸出

alert(): 跳出視窗顯示，例如alert("Hello!")。 See more about Popup box
console.log(): 在console顯示，例如console.log("Hello")。 若是包含變數，可以如此:

let num = 10;
console.log("He has studied", num, "books.");

或是使用`${var name}`。

let num = 10;
console.log(`He has studied ${num} books.`);


document.write(): 在網頁顯示，例如document.write("Hello")。

let num = 10;
let color = "blue";
document.write(`<p style='color:${color};outline: 2px solid green;'>He has studied ${num} books.</p>`);

strict mode

使用沒有宣告的變數 >> x = 3;
使用沒有宣告的物件 >> x = {a:10, b:20};
刪除變數或物件 >> var x = 2; delete x;
刪除函數 >> function f(a,b){}; delete f;
函數的輸入參數同名 >> function f(a,a){};
八進位數字 >> var x = 010; var x = "\010";
改變read only或get only屬性的值。
刪除不可刪除的屬性 >> delete Object.prototype;
使用with敘述句
使用eval()來建立在他被呼叫的範圍內的變數 >> eval("var x=2"); alert(x);
使用以下關鍵字作為參數名
arguments eval implements interface let package private protected public static yield
事實上其他所有關鍵字都不應該拿來當作變數名。

變數

Number: 包含整數實數 >>


typeof(1)
typeof(3.14)

Boolean: 包含true跟false >>


typeof(true)
typeof(false)

String: 使用單引號或雙引號 >>


typeof('1')
typeof("1")

宣告

可使用var關鍵字。 >>


var age = 18;
age

也可以使用let關鍵字。 >>


let school = "NKUST";
school

兩者的差異是let只作用於區塊{}內，區塊外無法使用let宣告的變數。而var可在整個函數內使用。

'use strict';
var a = '123';
if (true){
    let a = "doremi";
    //console.log(a);
}
console.log(a);

const用於定義常數，若是使用const宣告的變數，表示無法被改變。


const pi = 3.14159;
pi
pi = 18; // TypeError

我們應多使用let與const，避免使用var。因為let為區域變數，僅可用於被定義的區塊，而var則否，若名稱相同則會混淆。

Number

在宣告時會根據輸入數值自動判斷是整數(int)或實數(float)，此外尚可將 16進位(0x開頭)或8進位(0開頭)或指數(E)轉成十進位數字。>>


console.log(.12);  // 0.12
console.log(0b111); // 二進位:7
console.log(0o12); // 八進位:10
console.log(0x12); // 十六進位:18
console.log(2E2); // 科學記號:100

---

若想將十進位數字傳換成其他進位，使用toString(n)。

let n = (100).toString(2);
console.log("100的二進位 =", n); // 1100100
n = (100).toString(4);
console.log("100的四進位 =", n); // 1210
n = (100).toString(8);
console.log("100的八進位 =", n); // 144
n = (100).toString(16);
console.log("100的十六進位 =", n); // 64

---

若想將其他進位傳換成十進位，使用parseInt(num, n)。

let n = parseInt("1100100", 2);
console.log("二進位1100100 =", n); // 100
n = parseInt("1210", 4);
console.log("四進位1210 =", n); // 100
n = parseInt("144", 8);
console.log("八進位144 =", n); // 100
n = parseInt("64", 16);
console.log("十六進位64 =", n); // 100

---

NaN表示Not a Number，在計算錯誤時出現。>>


console.log("a"-1); // NaN 

整數的範圍介於-2⁵³ ~ 2⁵³之間(Number.MAX_SAFE_INTEGER)，而實數數字太大，懶得打， 可用MAX_VALUE與MIN_VALUE得到。>>


Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

加上負號則為負數的最小與最大。
如果數字超過上述之範圍，則用無限大(Infinity與-Infinity)來表示。 >>


Number.MAX_VALUE + 1.0E308 // Infinity
-Number.MAX_VALUE - 1.0E308 // -Infinity

可以使用Number()函數將其他型態轉為數值型態。 >>


var a = "12";
console.log(typeof(a)); // string
console.log(typeof(Number(a))); // number

Boolean

使用Boolean()函數來轉型。 >>


var isYes = 1;
console.log(typeof(isYes)); // number
console.log(typeof(Boolean(isYes))); // boolean
console.log(Boolean(isYes)); // true
isYes = 0; // 0
console.log(Boolean(isYes)); // false

除了使用Boolean()函數來轉型態，尚可由上例看出0跟1似乎代表不同的值，原則上下列 情形會得到false:
數值為0或是NaN
空字串
null或undefined

所以即使是字串"false"，轉型後還是true。 >>


var c = "false";
console.log(Boolean(c)); // true

使用Boolean來轉型。 >>


var d = undefined;
console.log(typeof(d)); // undefined
console.log(Boolean(d)); // false

String

• 使用單引號或雙引號表示，可以一起使用。 >>
  

  console.log("The car is 'so' big."); // The car is 'so' big.

  如此可以輸出引號。
• 除了上述方法，可以使用escape character，例如:\b, \t, \n, \", \', \\等。 >>
  

  console.log('The car is \t\'so\'\t big.'); // The car is 	'so'	 big.

• 使用String()或toString()函數轉換型態，或是使用+轉換。 >>
  

  var s1 = String(true);
  console.log(s1); // true
  var s2 = toString(false);
  console.log(typeof(s2)); // string
  typeof("She weights" +45 + "kg."); // "string"

let s = "";
let a = [];
let b = true;

運算子(Operators)

算數運算子(Arithmetic Operators)
指派運算子(Assignment Operators)
比較運算子(Comparison Operators)
邏輯運算子(Logical Operators)
型態運算子(Type Operators)
位元運算子(Bitwise Operators)

算數運算子(Arithmetic Operators)

1. +: addition(可用於數字相加，數字+字串，字串+字串) >> console.log(10+10);
   
2. -: subtraction >> console.log(10 - 1);
3. *: multiplication >> console.log("5"*2);
4. /: division >> console.log(10/3);
5. %: modulus(remainder) >> console.log(10%3);
6. ++: increment >>
   

   var x = 10;
   console.log(x++); // 10
   console.log(++x); // 12

   印出x++表示印x，++在後面，印出++x表示先計算加1再印出x。
7. --: decrement 與++用法相同，只不過是減1。
8. **: power >> console.log(3**5);

指派運算子(Assignment Operators)

1. = : >> x = 5
2. +=: >> x += 5
3. -=: >> x -= 5
4. *=: >> x *= 5
5. /=: >> x /= 5
6. %=: >> x %= 5

比較運算子(Comparison Operators)

1. ==: equal to(only value) >> "5" == 5 (true)
2. ===: equal value and equal type
3. !=: not equal >> "5" != 5 (false)
4. !==: not equal value or not equal type
5. >: greater than
6. <: less than
7. >=: greater than or equal to
8. <=: less than or equal to
9. ?: ternary operator >> 10 > 5 ? "Yes": "No"

邏輯運算子(Logical Operators)

1. &&: logical and
2. ||: logical or
3. ! : logical not

型態運算子(Type Operators)

1. typeof: returns the type of a variable
2. instanceof: returns true if an object is an instance of an object type

位元運算子(Bitwise Operators)

1. &: and >> 0101 & 0100
2. |: or >> 5|2
3. ~: not >> ~5
4. ^: xor >> 1^5
5. <<: zero fill left shift >> 10 << 2 (*4)
6. >>: signed right shift >> 10 >> 1 (/2)
7. >>> zero fill right shift >> 10 >>> 1

流程控制

if...else
switch
while loop
for loop

if...else

if(condition){
    // do something
} 

if(condition){
    // do something
}else{
    // otherwise
}

var v = 10;
if (v < 5) {
    console.log("v<5");
}else{
    console.log("v>5");
}

switch

switch(expression){
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        cold block
} 

var m = 5;
switch(m) {
    case 1:
        console.log("January");
        break;
    case 5:
        console.log("May");
        break;
    case 10:
        console.log("October");
        break;
    default:
        console.log("No related months");
}

while loop

while(condition){
    //code block to be executed
}

var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

do{
    //code block to be executed
}while(condition);

for loop

for(start;condition;pace){
    //code block to be executed
}

for (var i=0; i<5; i++) {
    console.log(i);
}

for (var i=0; i<10; i++) {
    if (i==3) continue;
    if (i==5) break;
    console.log(i);
}

函數

function hello(){
    console.log("Hello");
}	
hello();

輸入參數與傳回值

function area(w, h){
    console.log(w*h);
}	
area(10, 20);

function area(w, h){
    return(w*h);
}
console.log(area(10, 20)+area(7, 12));

Javascrip在執行時無法控制是否函數個數是正確的，所以我們必須自己控制。下例表示第二個輸入參數可以省略。

function fun(arg1, arg2){
    if(!arg1){
        throw new Error("arg1 is required.")
    }else{
        const a = arg2||'nothing';
        return arg1 + " is " + a + ".";
    }//else
}//fun()

console.log(fun('This', 'book')); // This is book.
console.log(fun('That')); // That is nothing.

現在可以直接給參數初始值即可。

function usdToNT(usd, rate=31){
    if(!usd){
        throw new Error("usd is required.")
    }else{
        return usd*rate;
    }//else
}//fun()

console.log(usdToNT(100, 32)); // 3200
console.log(usdToNT(100)); // 3100

將函數當作變數

var a = function(w, h){
    return(w*h);
}
console.log(a(10, 20)+a(12, 12));

=>

var helloAgain = () =>{
    console.log("Hello Again.");
}
helloAgain();

let squareArea = (w, h) =>{
    return(w*h);
}
console.log(squareArea(2,6) + squareArea(5,3));

若有輸入參數，可以不使用括號，若無輸入參數，需使用括號。此外，箭頭函數(arrow function)無法hoisting，也就是需在其宣告之後使用。arrow function不能用作建構子(constructor)，如下例中可以new regular()，若是箭頭函數則不行。。

const re = new regular("Mary"); // 可以hoisting
console.log(re); // regular { name: 'Mary' }

const yes = x => x*x;
const noo = () => {}; // 沒有argument的情況需使用()
console.log(yes(10)); // 100 >> 不能hoisting
console.log(noo()); // undefined

function regular(name){
    this.name = name
} // a regular function

arrow function無法傳回輸入參數。

const returnArgs = function(){
    return arguments;
}
console.log(returnArgs(1,"do",true)); // [A
const arrowArgs = () => arguments;
//console.log(arrowArgs(1, "do")); // Error

不定長度參數

function test(className, ...grades){
    let sum = 0;
    for(let i of grades){
        sum += i;
    }
    console.log(className, "班，總分為", sum);
}

test("101", 48,78,89); // 101 班，總分為 215

若是所有參數都屬於不定長度參數的部分，也可以直接使用arguments。

function test(){
    let sum = 0;
    const toArr = Array.prototype.slice.call(arguments)
    console.log(toArr);
    for(let i=0; i<toArr.length; i++){
        sum += toArr[i];
    }
    console.log("總分為", sum);
}

test(48,78,89); // 101 班，總分為 215

其中的const toArr = Array.prototype.slice.call(arguments)表示將arguments強制改為array。
當然也可以寫成這樣。

function test(...grades){
    let sum = 0;
    for(let i=0; i<grades.length; i++){
        sum += grades[i];
    }
    console.log("總分為", sum);
}

test(48,78,89); // 總分為 215

有不定長度參數應使用此方式(減少使用arguments)，若與其他參數混雜則為第一例。
...array可以將array拆解為數列，如下:

const arr = [1,2,3];
console.log(...arr); // 1 2 3

所以也可以這樣:

function perimeter (a, b, c) {
    return a + b + c;
}
const sides = [7, 8, 5];
console.log(perimeter(...sides)); // 20


原則上加上...為數列，沒有...則為陣列(array)。

function rest(leading, ...supports){
    return [leading, supports.sort()];
}
function restAndSpread(leading, ...supports){
    return [leading, ...supports.sort()];
}
console.log(rest("Will Smith", "Bill Pullman", "Jeff Goldblum", "Margaret Colin"));
// ["Will Smith", [ "Bill Pullman", "Jeff Goldblum", "Margaret Colin" ]]
console.log(restAndSpread("Will Smith", "Bill Pullman", "Jeff Goldblum", "Margaret Colin"));
// [ "Will Smith", "Bill Pullman", "Jeff Goldblum", "Margaret Colin" ]

Hoisting & Self-Invoking

for(let i = 0; i < 10; i++) // hoisting --> use function before it is declared.
    console.log("f("+i+")="+f(i));

function f(n){
    if(n==0){
        return 0;
    }else if (n==1){
        return 1;
    }else{
        return f(n-1)+f(n-2);
    }
}

(function (){
    console.log("Greeting.");
})();

(function (x){
    console.log(x +" square is " + x*x);
})(5);

var mo = (function(){
    let count = 0;
    var fun1 = function(){
        console.log(count);
    };
    var fun2 = function(k){
        return count+k;
    };
    return {
        f1: fun1,
        f2: fun2
    };
})();
mo.f1();
console.log(mo.f2(6));
console.log(mo.count); // undefined

Closure

function func(){
    var hello = "Hello, World.";
    function sayHello(){
        console.log(hello);
    }
    sayHello();
}
func();

function func1(){
    var hello = "Hello, World.";
    function sayHello(){
        console.log(hello);
    }
    return sayHello;
}
let f = func1();
f();

function func2(){
    var i = 0;
    return function (){
        console.log(i++);
    }
}
var f2 = func2();
f2();
f2();
f2();

<button onclick="f2()">Click(Press F12 see output)</button>

<button id="but">Click</button>
<p id="show"></p>

'use strict';
let counter;
{
    let count = 0; 
    let increment = function () { 
        count++;
        console.log(count);
        return count;
    };
    counter = {
        increment: increment,
    }; 
}
let but = document.getElementById("but");
let show = document.getElementById("show");
but.addEventListener("click",(event)=>{
    show.innerText = counter.increment();
});

<button onclick="g()">click</button>
<div id="diva">div</div>

let diva =document.getElementById('diva');

function gog(){
    let b = true;
    return function(){
        if (b){
            diva.style.border="2px solid red";
            b=false;
        }else{
            diva.style.border = "none";
            b=true;
        }
    }
}
let g = gog();

<button onclick="gog.g()">click</button>
<div id="diva">div</div>

let gog;
{
    let b = true;
    let g = function() {
        if (b){
            diva.style.border="2px solid red";
            b=false;
        }else{
            diva.style.border = "none";
            b=true;
        }
    }
    gog =  {
        g:g,
    }
}

Currying

function greet(greeting, name) {
    console.log(`${greeting}, ${name}`);
}

greet("Hello", "Jenny"); // Hello, Jenny

function greet(greeting) {
    return (name) => {
        console.log(`${greeting}, ${name}`);
    }
}

var hi = greet("Hi");
hi("Jenny"); // Hi, Jenny
greet("Hello")("Mia"); // 也可以這樣寫 >> Hello, Mia
var morning = greet("Good Morning");
morning("Mary"); // Good Morning, Mary

function greet(greeting) {
    return (name) => {
        return (ask) => {
            console.log(`${greeting}, ${name}. ${ask}`);
        }
    }
}

var good = greet("Good morning!")("Helen");
good("How are you?");

物件

var Node = {
    x: 50,
    y: 50,
    demand: 100,
    isVisited: false
}

使用var來宣告。
變數給值是使用冒號(:)，而變數之間是用逗點(,)分開。
我們可以試著使用，加上以下的程式碼:

console.log(Node.x + " " + Node.y + " " + Node.demand + " " + Node.isVisited);

可以在console看到結果。
若是在物件之外要改變裡面的值，可以使用點(.)， 例如在印出之前加上


Node.x = 80;

可以看到結果的x變成了80。
另一個方式是使用中括號[變數名]來取得變數，例如再加上

Node["isVisited"] = true;

再看一次結果。

物件方法

var Node = {
    x: 50,
    y: 50,
    demand: 100,
    isVisited: false,

    nodeInfo: function(){
        return this.x + " " + this.y + " " + this.demand + " " + this.isVisited;
    }//nodeInfo	
}
Node.x = 80;
Node["isVisited"] = true;
console.log(Node.nodeInfo());

方法也算是一種變數，所以與變數間一樣用逗點(,)分開。 方法與方法之間也是使用逗點(,)分開。
需使用this關鍵字來取得物件內的參數。即使是方法。關於this的說明如下:
在方法中的this表示此方法的擁有者，在這裡便是Node物件。所以this.x指的便是Node.x， 若是將this改為Node也可運行，若都沒有則出現錯誤。
如果不是在方法內，單獨使用this表示的是全域物件，在瀏覽器中代表的是window，例如:

var t = this;
console.log(t);

此會顯示Window。
通常定義物件內的函數為方法(method)，非物件內的函數為函數(function)，事實上所有的函數都是方法，因為函數是屬於全域物件(window)的方法。

function fun(a, b){
    this.a = a;
    this.b = b;
    this.afun =  () => {return this.a * this.b;}
}

var f = new fun(10, 20);
console.log(f.a + " " + f.b);
console.log(f.afun());

function createObj(a, b){
    let obj={
        a: a,
        b: b,
        toString: function(){
            return `a:${this.a}, b:${this.b}`;
        }
    }
    return obj;
}

let o1 = createObj(1,2);
console.log(o1.toString());
let o2 = createObj(10, 20);
o2.b = 200;
console.log(o2.toString());

call & apply

var nodeA = {
    x: 30,
    y: 50
}
var nodeB = {
    x: 10,
    y: 80
}
var arc={
    endpoint: function(){
        return this.x + " " + this.y;
    }
}
console.log(arc.endpoint.call(nodeA));
console.log(arc.endpoint.apply(nodeB));

建立三個物件，其中arc的方法endpoint將使用到node的變數。
使用call()或是apply()來取得物件內的變數將其用於方法內。
兩者的不同處是apply()接受參數為陣列型態。例如我們將上例的arc改寫如下並呼叫:

var arc={
    endpoint: function(id, demand){
        return this.x + " " + this.y + " " + id + " " + demand;
    }
}
console.log(arc.endpoint.call(nodeA, "A", 100));
console.log(arc.endpoint.apply(nodeB, ["B", 200]));

可以看到apply需使用陣列型態。

fun.call(thisArg[, arg1[, arg2[, ...]]])
fun.apply(thisArg, [argsArray])

function whatever(a, b){
	return a+b;
}
console.log(whatever.call(this, 3,6));
console.log(whatever.call(null, 3,6));
console.log(whatever.apply(this, [3,6]));
console.log(whatever.apply(null, [3,6]));

bind

fun.bind(thisArg[, arg1[, arg2[, ...]]])

function whatever(a, b){
	return a+b;
}
let w = whatever.bind(this, 10);// or null
console.log(w(20));

function curry(a){
	return function(b){
		return a+b;
	}
}
let c = curry(5);
console.log(c(7));

let obj = {
	x: 1,
	y: 2
}
function toBind(a, b){
	return a*this.x+b*this.y;
}
let bf = toBind.bind(obj);
console.log(bf(1,2));

astring = "Global string";
function printString(){
    console.log(this.astring);
}

class AClass{
    constructor(a, b) {
        this.astring = a;
        this.b = b;
    }
    print() {
        printString.call(this); // this 指稱此物件
    }
}
ac = new AClass("Object string", "Whatever");

printString.call(this); // this 指稱window, 亦可使用apply
printString.call(ac); // 直接傳入物件表示呼叫物件內變數(等同於print()內的call(this)
ac.print();
// 使用bind來連結
var bindFun1 = printString.bind(this);
var bindFun2 = printString.bind(ac);

bindFun1(); // Global String
bindFun2(); // Object String

new

var nodeC = new Object();
nodeC.x = 11;
nodeC.y = 11;
console.log(arc.endpoint.call(nodeC, "C", 11));

var nodeD = nodeA;
nodeD.x = 22;
nodeD.y = 22;
console.log(arc.endpoint.call(nodeD, "D", 222));
console.log(arc.endpoint.call(nodeA, "A", 333));

for in

for (i in Node){
    console.log(i);
}

console.log(i);

console.log(Node[i]);

let arr = [1,2,3];
let k = 0;
for (i in arr){
    console.log(typeof(i)); // string
    k = k + i;
}
console.log(k); // 0012

adding & deleting properties

nodeC.demand = 123;
for (i in nodeC){
    console.log(i + "-->" + nodeC[i]);
}

nodeC.info = function(){
    return this.x + " " + this.y + " " + this.demand;
}
console.log(nodeC.info());

delete nodeC.demand;
for (i in nodeC){
    console.log(i + "-->" + nodeC[i]);
}

constructor

function TheNode(id, x, y, demand){
    this.id = id;
    this.x = x;
    this.y = y;
    this.demand = demand;
    this.info = function(){
        return this.id + " " +this.x + " " + this.y + " " + this.demand;
    };
}
var na = new TheNode("A", 100, 100, 100);
var nb = new TheNode("B", 200, 200, 200);
console.log(na.info() + "\t" + nb.info());

class

class ANode{
    constructor(id, x, y){
        this.id = id;
        this.x = x;
        this.y = y;
        this.demand = 100;
    }
    info(){
        return this.id + " " +this.x + " " + this.y + " " + this.demand;
    }
}
var nodeOne = new ANode("One", 11, 12);
let nodeTwo = new ANode("Two", 22, 25);
nodeTwo.demand = 200;
console.log('one->', nodeOne.info(), 'two->' ,nodeTwo.info());

'use strict';
function test(a,b) {
    console.log(this, a, b);
}
test(1,2); // undefined 1 2
test.call(undefined, 1, 2); // undefined 1 2
test.apply(undefined, [1, 2]); // undefined 1 2
test.call("value of this", 1, 2); // value of this 1 2
test.apply(100, [1, 2]); // 100 1 2
test.bind("value of this")(1,2); // value of this 1 2

class Greeting{
    constructor(name){
      this.name = name;
    }
    hi(){
      console.log('Hi, ',this.name);
    }
    hello(){
      setTimeout(function(){
        console.log('Hello!, ',this.name)
      }, 1000); // 經過一秒
    }
  }
  let gr = new Greeting('Jenny');
  gr.hi();   // Hi,  Jenny
  gr.hello(); // Hello!,  undefined

getter & setter and private variable

class Node{
	#demand // FireFox & IE 不支援private variable
    constructor(id, xx, y){
        this.id = id;
        this.xValue = xx;
        this.y = y;
        this.#demand = 100;
    }
	get x(){
		return this.xValue;
	}
	set x(newX){
		if (newX >= 0 && newX <= 100){
			this.xValue = newX;
		}else{
			throw new Error("x has to be within 0 and 100");
		}
	}
	get demand(){
		return this.#demand;
	}
	set demand(newDemand){
		throw new Error("demand value is read only");
	}
    info(){
        return this.id + " " +this.x + " " + this.y + " " + this.demand;
    }
}

let a = new Node(1, 2, 3);
console.log(a.x);
a.x = 18;
console.log(a.x);
console.log(a.demand);
// a.demand = 999; // Uncaught Error: demand value is read only
a.x = 200; // Uncaught Error: x has to be within 0 and 100

private method

class Arc{
	constructor(na, nb){
		this.na = na;
		this.nb = nb;
		this.len = this.#arcLength();
	}
	#arcLength(){ /* private method >> 前面加#字號 */
		return Math.sqrt(Math.pow((this.na.x-this.nb.x),2) + Math.pow((this.na.y-this.nb.y),2));
	}
}

a = new Node(1,2,3);
b = new Node(2,9,5);
arc = new Arc(a, b);
console.log(arc.len);

繼承(Inheritance)

class SNode extends ANode{
    constructor(id, x, y, size){
        super(id, x, y);
        this.size = size;
    }
    setSize(size){
        this.size = size;
    }
    info(){
        return super.info() + " " + this.size;
    }
}
var nodeThree = new SNode("Three", 33, 36, 5);
nodeThree.setSize(6);
console.log(nodeThree.info());

Prototype

TheNode.prototype.isVisited = false;
TheNode.prototype.printInfo = function(){
    console.log(this.info() + "\t" + this.isVisited);
}
na.printInfo();
nb.printInfo();

function Person(name){
	this.name = name;
}
console.log(Person);
console.log(Person.prototype);
console.log(Person.prototype.constructor === Person); // true
console.log(Person.__proto__);// 指向函數的prototype
console.log(Person.prototype.__proto__); // 指向物件的prototype
console.log(Function.prototype.__proto__); // 指向物件的prototype
console.log(Object.prototype.__proto__); // null

function Person(name){
	this.name = name;
}
let tom = new Person('Tom');
console.log(tom.prototype); // undefined, tom是instance沒有prototype
console.log(tom.__proto__); // 指向Person.prototype
console.log(tom.__proto__===Person.prototype); // true

function Person(name){
	this.name = name;
}
let tom = new Person('Tom');
Person.prototype.isMale = true;
console.log(tom.isMale); // true
Person.prototype.toString = function(){ // 不能使用箭頭函數
	return `${this.name}, ${this.isMale};`
}
console.log(tom.toString()); // Tom, true;
console.log(tom);

class Cls{
	constructor(x){
		this.x = x;
	}
}
Cls.prototype.y = 10;
let c = new Cls(1);
Cls.prototype.toString = function(){
	return this.x + " " + this.y;
}
console.log(c.toString());

function Super(x){
	this.x = x;
}

function Sub(x, y){
	Super.call(this, x);
	this.y = y;
}

Sub.prototype = Object.create(Super.prototype);//Object.create():指定其原型物件與屬性，創建一個新物件。
Sub.prototype.constructor = Sub;
let ins = new Sub(1, 2);
Sub.prototype.toString = function(){
	return this.x + " " + this.y;
}
console.log(ins.toString()); // 1 2
console.log(ins instanceof Super); // true
console.log(ins instanceof Sub); // true

Static

class MyMethods{
    static hi(name){
        console.log("Hello, " + name);
    }
    static circleArea(radius){
        return Math.PI*radius*radius;
    }
}

MyMethods.hi("Jenny");
console.log(MyMethods.circleArea(10));
mm = new MyMethods();
mm.hi("Alice"); // << invalid

Private Static method

class Area{
	static #circle(r){ // static private method
		return Math.PI*r*r;
	}//circle
	static oneCircle(r){
		return this.#circle(r);//使用Area.#circle(r)可能較好，因為若有牽涉到繼承，this可能指向不同的class
	}
	static circles(...rs){
		let area = 0;
		for (let r of rs){
			area += this.#circle(r);
		}
		return area;
	}//circles
}
console.log(Area.oneCircle(10)); // 314.1592653589793
console.log(Area.circles(10, 20)); // 1570.7963267948967

Built-in Constructors & BOM

1. Object(): {}
2. String(): ""
3. Number(): 0
4. Boolean(): true
5. Array(): []
6. RegExp(): /()/
7. Function(): function(){}
8. Date():

BOM

• 全域變數是window object的property。全域函數是屬於window object的方法。即使是HTML DOM 的document物件都是window object的property。例如:

  <script>
    document.getElementById('body').innerText = "Hello";
  </script>
  

  與

  <script>
    window.document.getElementById('body').innerText = "Hello";
  </script>
  

  原則上是相同的。
• window size:可用來決定瀏覽器window的大小。例如:

  console.log(window.innerHeight + "\t" + window.innerWidth);
  

  因為IE的語法不同，可以用以下的方式來cover所有的瀏覽器:

  var w = window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
  
  var h = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;
  console.log(w + "\t" + h);
  

• window.open: 開啟新視窗。例如:

  function newwindow(event){
      w = 800;
      h = 600;
      leftgap = (window.innerWidth-w)/2;
      topgap = (window.innerHeight-h)/2;
      window.open('http://www.google.com', 'Google', 
      config=`width = ${w}, height = ${h}, left=${leftgap}, top=${topgap}`);
  }
  
  function createANode(href, aText){
      var anode = document.createElement("a");
      anode.setAttribute("href", href);
      anode.innerText = aText;
      anode.addEventListener('click', newwindow);
      return anode;
  }
  
  var anode = createANode("#", "Open A New Window");
  document.getElementById('body').appendChild(anode);
  

  此處將建立一個a node包裝成一個函數，callback函數也獨立寫成一個函數。不過callback函數只接受一個event argument，如果要將w, h等做為函數的輸入值，可以將callback函數當成函數的傳回(currying)，如下:

  function newwindow(w, h){
      return (event) => { // 回傳callback函數
          w = 800;
          h = 600;
          leftgap = (window.innerWidth-w)/2;
          topgap = (window.innerHeight-h)/2;
          window.open('http://www.google.com', 'Google', 
          config=`width = ${w}, height = ${h}, left=${leftgap}, top=${topgap}`);
      }
  }
  
  function createANode(href, aText){
      var anode = document.createElement("a");
      anode.setAttribute("href", href);
      anode.innerText = aText;
      anode.addEventListener('click', newwindow(800, 600)); //此處的callback可以傳入參數
      return anode;
  }
  
  var anode = createANode("#", "Open A New Window");
  document.getElementById('body').appendChild(anode);
  

• window.close:關閉視窗。先建立一個名為popwindow.html的檔案，然後將上例的open修改如下:

  window.open('popwindow.html', 'tiny', 
  config=`width = ${w}, height = ${h}, left=${leftgap}, top=${topgap}); 
  

  此時開啟的是popwindow.html，在其內加上以下javascript code:

  <script>
      function createCloseButton() {
          var closebutton = document.createElement("button");
          closebutton.innerHTML = "Close";    
          closebutton.addEventListener("click", (event)=>{
              window.close();
          })
          return closebutton;
      }
      var bnode = createCloseButton();
      document.getElementById('body').appendChild(bnode);
  </script>
  

  在popwindow內建立一個按鈕，連結方法為close，點選按鈕關閉視窗。
• window.moveTo:開啟新視窗並移動至特定位置(left & top)。將上例改寫如下:

  <script>
      function createButton(inner) {
          var button = document.createElement("button");
          button.innerHTML = inner;
          return button;
      }
      var closebutton = createButton("Close");
      closebutton.addEventListener("click", (event)=>{
          window.close();
      })
      var movetobutton = createButton("MoveTo");
      movetobutton.addEventListener("click", (event)=>{
          this.moveTo(0,0);
      })
      document.getElementById('body').appendChild(movetobutton);
      document.getElementById('body').appendChild(closebutton);
  </script>
  

  如果把moveTo(x, y)方法改為moveBy(x, y)表示移動至原位置+(x,y)位置。

  this.moveBy(10,10);//原位置x+10,y+10
  

• resizeBy() & resizeTo: 改變視窗大小。例如將以下code加到上例:

  var resizebutton = createButton("resize");
  resizebutton.addEventListener("click", (event) => {
      this.resizeTo(300,300);
  });
  document.getElementById('body').appendChild(resizebutton);
  

  如果換成resizeBy(x,y)，亦即在原視窗大小+(x,y)。

  this.resizeBy(100,-100);
  

• Screen width & height:螢幕寬高。

  console.log(`${screen.width}, ${screen.height}, ${window.innerWidth}, ${window.innerHeight}`);
  

  螢幕的寬高與視窗不同。
• Screen availWidth & availHeight:訪問者的螢幕長寬減去介面元件(interface features)例如Windows Taskbar的長寬。

console.log(`${screen.width}, ${screen.height}, ${screen.availWidth}, ${screen.availHeight}`);

• Screen colorDepth & pixelDepth: 螢幕的色素與像素。

  console.log(`${screen.colorDepth}, ${screen.pixelDepth}`);
  

• 相關屬性:

  console.log(`
  URL: ${window.location.href}, 
  Host name: ${window.location.hostname},
  Pathname: ${window.location.pathname},
  Protocol: ${window.location.protocol},
  Port: ${window.location.port}`);
  

• window.location.assign():redirect to other page。

  var reButton = createButton("Google");
  reButton.addEventListener('click', (event) => {
      window.location.assign("http://www.google.com");
  })
  document.getElementById('body').appendChild(reButton);
  

• window.history.back & forward:往前往後頁。

  var back = createButton("back");
  var forward = createButton("forward");
  back.addEventListener('click', (event) => {
      window.history.back();
  })
  forward.addEventListener('click', (event) => {
      window.history.forward();
  })
  document.getElementById('body').appendChild(back);
  document.getElementById('body').appendChild(forward);
  

• 例如cookieEnalbed或是appName等。

  console.log(`
  cookie enable? = ${navigator.cookieEnabled},
  app name? = ${navigator.appName},
  app code name? = ${navigator.appCodeName},
  platform? = ${navigator.platform}
  `);
  

• Alert box:

  window.alert(`${window.innerWidth}`); // or simply alert() without window
  

• Confirm box:

  var adiv = document.createElement("div");
  var txt = "";
  if (confirm("OK?")) {
      txt = "You pressed OK.";
      adiv.innerText = txt;
      adiv.style = 'border: 1px solid blue';
  }else{
      txt = "Not OK.";
      adiv.innerText = txt;
      adiv.style = 'border: 1px dash red; color:tomato; background:black';
  }
  document.getElementById('body').append(adiv);
  

• Prompt box:

  var adiv = document.createElement("div");
  var name = prompt("What is your name?", "Tom Cruise"); // second argument is default value
  if (name == "null" || name == "") {
      txt = "User cancelled the prompt.";
      adiv.innerText = txt;
      adiv.style = 'border: 1px solid blue';
  }else{
      txt = `Hi, ${name}.`;
      adiv.innerText = txt;
      adiv.style = 'border: 1px dash red; color:tomato; background:black';
  }
  document.getElementById('body').append(adiv);
  

• setTimeout(function, milliseconds):經過milliseconds之後執行function。例如:

  var start = document.createElement("button");
  var stop = document.createElement("button");
  start.innerText = "Start";
  stop.innerText = "Stop";
  var toStart;
  function func(event) {
      toStart = window.setTimeout(()=>{ // window.可有可無
          alert("Hi, there.");
      }, 3000);
  }
  start.addEventListener("click", func);
  stop.addEventListener("click", (event)=>{
      window.clearTimeout(toStart);
      console.log("setTimeout() operation has been stopped.");
  });
  document.getElementById('body').appendChild(start);
  document.getElementById('body').appendChild(stop);
  

  clearTimeout()用來終止setTimeout()內函數的執行。
  clearTimeout()需在setTimeout()內函數執行前被執行才有效。


• setInterval(function, milliseconds):設定在每milliseconds便執行一次function。

  var clock = document.createElement("div");
  var si = setInterval(()=>{
      clock.innerHTML = Date(); // see also Date()
  },1000);
  document.getElementById('body').appendChild(clock);
  
  var stop = document.createElement("button");
  stop.innerHTML = "stop";
  stop.addEventListener('click',(event)=>{
      window.clearInterval(si);
  })
  document.getElementById('body').appendChild(stop);
  

  clearInterval()用來終止setInterval()內函數的執行。


• 練習:設計一個碼表。

  class Stopwatch{
      constructor() {
          this.theTime = 0;
          this.si; // the variable returned from setInterval()
  
          /* create elements */
          this.startButton = this.createStartButton();
          this.stopButton = this.createStopButton();
          this.timeDiv = this.createTimeDiv();
  
          /* append elements */
          document.getElementById('body').appendChild(this.startButton);
          document.getElementById('body').appendChild(this.stopButton);
          document.getElementById('body').appendChild(this.timeDiv);
  
          /* start & stop operations */
          this.start();
          this.stop();
      }
  
      /* create a start button */
      createStartButton() {
          var startButton = document.createElement("button");
          startButton.innerHTML = "start";
          return startButton;
      }
  
      /* create a stop button */
      createStopButton() {
          var stopButton = document.createElement("button");
          stopButton.innerHTML = "stop";
          return stopButton;
      }
  
      /* create a show div */
      createTimeDiv() {
          var adiv = document.createElement("div");
          adiv.innerHTML = "00 : 00 : 00";
          return adiv;
      }
  
      /* calculate the time and return a string */
      interval(theTime){
          let min = 0;
          let sec = 0;
          let minisec = 0;
          min = Math.floor(this.theTime/100/60);
          sec = Math.floor((this.theTime - min*60*100)/100);
          minisec = this.theTime - min*100*60 - sec*100;
          let showmin = min < 10? "0"+min: min;
          let showsec = sec < 10? "0"+sec: sec;
          let showminisec = minisec < 10? "0"+minisec: minisec;
          return `${showmin} : ${showsec} : ${showminisec}`;
      }
  
      /* operation while start button is pressed */
      start() {
          this.startButton.addEventListener('click',()=>{
              this.si = window.setInterval(()=>{
                  this.theTime = this.theTime + 1;
                  this.timeDiv.innerHTML = this.interval();
              }, 10);
          });
      }
  
      /* operation while stop button is pressed */
      stop() {
          this.stopButton.addEventListener('click', ()=>{
              window.clearInterval(this.si);
          });
      }
  }
  
  var stopwatch = new Stopwatch();
  

• Basic: 內容是個字串，按F12可以直接操作:

  document.cookie = "username = Tom Cruise";
  

  簡單就可建立cookie內容，使用

  console.log(document.cookie);
  

  來查看內容。因為cookie有存活時間，一般來說可以給定expire date，並給定路徑，如下:

  document.cookie = "username = Tom Cruise; expires = Wed, 11 Mar 2020 12:00:00 UTC; path=/";
  console.log(document.cookie);
  

  新的cookie會加到字串內。如果要刪除的話，可以將過期日期修改到現在之前即可。
• 建立設定cookie的函數:

  function setCookie(kname, kvalue, kday) {
      let d = new Date(); // current time
      d.setTime(d.getTime() + (kday*24*60*60*1000)); // set expired day(kdays)
      document.cookie = `${kname} = ${kvalue}; expires = ${d.toUTCString()}; path=/`;
  }
  

• 建立取得cookie的函數:

  function getCookie(kname) {
      let startIndex = document.cookie.indexOf(kname+"=");
      if (startIndex == -1) {
          console.log("Unknown cookie name >> " + kname);
          return "";
      } else {
          startIndex = startIndex + kname.length+1;
          let endIndex = document.cookie.indexOf(";", startIndex+1);
          if (endIndex === -1){
              endIndex = document.cookie.length;
          }
          return document.cookie.substring(startIndex, endIndex);
      }
  }
  

• 建立使用cookie的函數:

  function checkCookie() {
      var adiv = document.createElement("div");
      let msg = "Hello, ";
      var user = getCookie("username");
      if (user != "") {
          adiv.innerHTML = `Hello, ${user}`;
  
      }else{
          user = prompt("Please enter your name:", "Bill Clinton");
          if (user != "" && user != null){
              setCookie("username", user, 1);
              adiv.innerHTML = `Hello, ${getCookie("username")}`
          }
      }
      document.getElementById('body').appendChild(adiv);
  }
  //setCookie("username", "Bill Clinton", -10); // to delete the cookie
  checkCookie();
  

Math&Date

Math

Math properties

1. Math.E: Euler's number -> 2.718
2. Math.LN2: Natural logarithm of 2 -> 0.693
3. Math.LOG2E: Base 2 logarithm of E -> 1.442
4. Math.LOG10E: Base 10 logarithm of E -> 0.434
5. Math.PI: pi -> 3.14159
6. Math.SQRT1_2: Square root of 1/2 -> 0.707
7. Math.SQRT2: Square root of 2 -> 1.414

console.log("E: " + Math.E + "\nLN2: " + Math.LN2 + "\nLN10: " + Math.LN10 + "\nLOG2E: " + Math.LOG2E + 
"\nLOG10E: " + Math.LOG10E + "\nPI: " + Math.PI+ "\nSQRT1_2: " + Math.SQRT1_2 + "\nSQRT2: " + Math.SQRT2);

Math methods

1. Math.abs(x): absolute value
2. Math.acos(x): arccosine (in radians)
3. Math.asin(x): arcsine (in radians)
4. Math.atan(x): arctangent (in radians)
5. Math.atan2(x,y): arctanget of the quotient of its arguments
6. Math.ceil(x): smallest integer greater than of equal to x
7. Math.cos(x): cosine
8. Math.exp(x): e^x
9. Math.floor(x): largest integer less than or equal to x
10. Math.log(x): log_ex(ln(x))
11. Math.max(x,y,...): largest number
12. Math.min(x,y,...): smallest number
13. Math.pow(x,y): x^y
14. Math.random(): random number between 0 and 1
15. Math.round(x): a number rounded to the nearest integer
16. Math.sin(x): sine
17. Math.sqrt(x): square root of x
18. Math.tan(x): tangent

Date

new Date()
new Date(milliseconds): 1/1/70 + milliseconds
new Date(datestring): "yyyy-mm-dd", "yyyy-mm", "yyyy", "yyyy-mm-ddThh:mm:ssZ"(Z:UTC time), "yyyy", "yyyy-mm-ddThh:mm:ss-hh:mm" (compare to UTC), "mm/dd/yyyy", "mmm dd yyyy" (Jul 10 2000)
new Date(year, month, date[, hours, minutes, seconds, milliseconds])

Date methods

1. Date(): today's date and time. >>

   console.log(Date());
   

2. getDate(): returns day of the month. >>

   var d = new Date("December 31, 1999, 23:59:59");
   console.log(d.getDate());
   

3. getDay(): returns day of the week. >>

   console.log(d.getDay());
   

4. getFullYear(): returns the year. >>

   console.log(d.getFullYear());
   

5. getHours(): returns the hour. >>

   console.log(d.getHours());
   

6. getMilliseconds(): returns milliseconds. >>

   console.log(d.getMilliseconds());
   

7. getMinutes(): returns the minutes. >>

   console.log(d.getMinutes());
   

8. getMonth(): returns the month. >>

   console.log(d.getMonth());
   

9. getSeconds(): returns the seconds. >>

   console.log(d.getSeconds());
   

10. getTime(): returns the numeric value of time (milliseconds since January 1, 1970, 00:00:00 UTC). >>

    console.log(d.getTime());
    console.log(Date.parse(d));
    console.log(d.valueOf());
    

    or use Date.parse() method or valueOf() method.
11. getTimezoneOffset(): returns the time-zone offset in minutes. >>

    console.log(d.getTimezoneOffset());
    

12. getUTCDate(): returns the date of the month according to universal time. >>

    console.log(d.getUTCDate());
    

13. getUTCDay(): returns the day of the week according to universal time. >>

    console.log(d.getUTCDay());
    

14. getUTCFullYear(): returns the year according to universal time. >>

    console.log(d.getUTCFullYear());
    

15. getUTCHours: returns the hours according to universal time. >>

    console.log(d.getUTCHours());
    

16. getUTCMilliseconds(): returns the milliseconds according to universal time. >>

    console.log(d.getUTCMilliseconds());
    

17. getUTCMinutes(): returns the minutes according to universal time. >>

    console.log(d.getUTCMinutes());
    

18. getUTCMonth(): returns the month according to universal time. >>

    console.log(d.getUTCMonth());
    

19. getUTCSeconds(): returns the seconds according to universal time. >>

    console.log(d.getUTCSeconds());
    

20. setDate(): sets the day of month. >>

    d.setDate(1);
    console.log(d);
    

21. setFullYear(): sets the year. >>

    d.setFullYear(2018);
    console.log(d);
    

22. setHours(): sets the hour. >>

    d.setHours(12);
    console.log(d);
    

23. setMilliseconds(): sets the Milliseconds. >>

    d.setMilliseconds(12);
    console.log(d);
    

24. setMinutes(): sets the Minutes. >>

    d.setMinutes(12);
    console.log(d);
    

25. setMonth(): sets the Month. >>

    d.setMonth(12);
    console.log(d);
    

26. setSeconds(): sets the Seconds. >>

    d.setSeconds(12);
    console.log(d);
    

27. setTime(): sets the Date object to the time represented by a milliseconds >>

    d.setTime(9466559990000);
    console.log(d);
    

28. setUTCDate(): sets the day of the month according to universal time. >>

    d.setUTCDate(10);
    console.log(d);
    

29. setUTCFullYear(): sets the year according to universal time. >>

    d.setUTCFullYear(2250);
    console.log(d);
    

30. setUTCHours(): sets the hour according to universal time. >>

    d.setUTCHours(10);
    console.log(d);
    

31. setUTCMilliseconds(): sets the milliseconds according to universal time. >>

    d.setUTCMilliseconds(86400000);
    console.log(d);
    

32. setUTCMinutes(): sets the minutes according to universal time. >>

    d.setUTCMinutes(30);
    console.log(d);
    

33. setUTCMonth(): sets the month according to universal time. >>

    d.setUTCMonth(6);
    console.log(d);
    

34. setUTCSeconds(): sets the seconds according to universal time. >>

    d.setUTCSeconds(75);
    console.log(d);
    

35. toDateString(): returns date. >>

    console.log(d.toDateString());
    

36. toLocaleDateString(): returns date using current locale's conventions. >>

    console.log(d.toLocaleDateString());
    

37. toLocaleString(): converts a date to a string, using current locale's conventions. >>

    console.log(d.toLocaleString());
    

38. toLocaleTimeString(): returns the time of the Date, using current locale's conventions. >>

    console.log(d.toLocaleTimeString());
    

39. toString(): returns a String of a Date object. >>

    console.log(d.toString());
    

40. toTimeString(): returns a String of time of a Date object. >>

    console.log(d.toTimeString());
    

41. toUTCString(): returns a String of time of a Date object according to universal time. >>

    console.log(d.toUTCString());
    

Time Comparison

var now = new Date(Date.now());
var oneday = new Date("06/15/2018");
if(now > oneday){
    console.log(now.toString() + " is after " + oneday.toString());
}else{
    console.log(now.toString() + " is before " + oneday.toString());
}

陣列(Array)

var a = [1,2,3];
console.log(a[0]);

a[1] = 200;
console.log(a[1]);

var fruits = new Array('apple', 'banana', 'carrot');
console.log(fruits[2]);

var node = [];
node["x"] = 100;
node["y"] = 200;
node["demand"] = 50;
console.log(node.length + "\t" + node["x"] + "\t" + node["y"] + "\t" + node["demand"]);

var arr = [];

for (let i = 0; i < 5; i++) {
    arr.push(i);
}
console.log(arr);

arr[arr.length] = "one";
arr[arr.length] = "two";
arr[8] = "two"; // [ 0, 1, 2, 3, 4, "one", "two", <1 empty slot>, "two" ]
console.log(arr);

Traversal

for (let i = 0; i < fruits.length; i++){
    console.log(fruits[i] + "\t");
}

for (i in fruits){
    console.log(fruits[i] +"\t");
}

for (i of fruits){
    console.log(i + "\t");
}

fruits.forEach(
    function(e){
        console.log(e);
    }
);

fruits.forEach(
    (e)=>{console.log(e);}
);

陣列方法(methods)

1. concat(): 合併兩個array。 >>
   

   var cars = ["Benz", "BMW", "Ferrari", "Porsche", "Lamborghini"];
   var owners = ["Alex", "Boney", "John", "Tom", "Sean"];
   var carowner = cars.concat(owners);
   console.log(carowner);
   

2. every(): 檢查array中每一個元素，傳回boolean。 >>
   

   function less20(e){
       return e < 20;
   }
   var n = [3,6,11,2,18];
   console.log(n.every(less20));
   

   也可以將函數簡寫為如下:

   console.log(
       n.every(
           (e)=>{return e<20;}
       )
   );
   

3. filter(): 傳回新的array包含舊array中符合某標準的所有元素。 >>
   

   function less10(e){
       return e < 10;
   }
   console.log(n.filter(less10));
   

   或是

   console.log(
       n.filter(
           (e)=>{return e < 10;}
       )
   );
   

   ---

   Hint:

   使用filter讓程式碼看起來清爽一點。

   // 使用for loop
   const cars = ["Benz", "BMW", "Ferrari", "Porsche", "Lamborghini"];
   let ford = [];
   for (let c of cars){
   	if (c < "Ford"){
   		ford.push(c);
   	}
   }
   console.log(ford);
   // 使用filter
   let fford = cars.filter((ele)=>{
   	return ele<"Ford";
   });
   console.log(fford);
   

   
   
4. forEach(): 針對array中每一個元素。之前介紹過，再加個例子。 >>
   

   n.forEach(
       (e, i)=>{console.log(i + " - " + e)}
       //(e,i)=>{n[i] = e*e;} // try this
   )
   

   第二個參數是index。
5. indexOf():傳回第一個相符元素的index，若不包含傳回-1。 >>
   

   console.log(n.indexOf(6));
   

6. join(): 將所有元素加成一個字串。 >>
   

   console.log(n.join());
   

7. lastIndexOf(): 跟indexOf()，只是由後往前搜尋，若是有重複的元素指傳回第一個找到的位址。
8. map(): 傳回一個新array，其中元素為舊元素傳入某一函數後之傳回。 >>
   

   console.log(n.map(
       (e) => {return e*e;}
   ));
   

   ---

   flatMap()

   flatMap()相當於呼叫map()之後再呼叫flat()使其攤平。

   // Example 1
       let arr = [1,2,3];
       arr.flatMap((x)=>{
           console.log(x*x);
       }); // flatMap((currentValue) => { /* ... */ } )
       arr.flatMap((x, i)=>{
           console.log(arr[i], x*x);
       }); // flatMap((currentValue, index) => { /* ... */ } )
       
       // Example 2
       let song = ["one little", "two little", "three little indians."];
       console.log(song.map(x=>x.split(" ")));
       console.log(song.flatMap(x=>x.split(" "))); // 將結果攤平
       
       // Example 3
       let nums = [];
       for(let i=0; i<10; i++){
           nums.push(Math.floor(Math.random()*987654321)%100-50);
       }
       console.log(nums);
       let output = nums.flatMap(x=> x<0? []:x%2==0?x:[x-1, 1]);
   
       // let output = nums.flatMap(x=>{
       //     if (x<0){
       //         return [];
       //     }else{
       //         if (x%2==0){
       //             return [x];
       //         }else{
       //             return [x-1, 1];
       //         }
       //     }
       // });
       console.log(output);

   
   
9. pop(): 移除array的最後一個元素並傳回該元素。 >>
   

   console.log(n.pop() + "\n" + n);
   

10. push(): 在array後面加上一個或多個元素並傳回新array的length。 >>
    

    console.log("length = " + n.push(18, 22) + "\n" + n);
    

11. reduce():將一個函數每次應用至兩個元素使其成為一個元素，依次應用至array所有元素，最後回傳一個值。看起來多拗口，看以下例子。 >>

    function add(e1, e2){
        return e1+e2;
    }
    console.log(n.reduce(add));
    

    看例子就好理解得多，將array中前兩個數字加起來，再將和與下一個數字相加，這樣一直到array中所有元素都被加上去，最後得到一個數字也就是所有元素之和。
    試試看這個code。

    console.log(
        n.reduce(
            (e1,e2)=>{return e1*e2;}
        )
    );
    

12. reduceRight(): 跟reduce()一樣，只是方向相反，由右向左。 >>

    console.log(
        n.reduceRight(
            (e1,e2)=>{return e1*e2;}
        )
    );
    

13. reverse(): 將array中的元素順序倒轉。 >>

    console.log(n.reverse());
    

    這個結果跟上一個例子似乎相同，實際上上一個例子只是倒過來印出，這個例子是改變了array的內容，也就是此時n[0]變成了原來的最後一個元素。
14. shift(): 跟pop()相反，此為移除第一個元素並傳回該元素。 >>

    console.log(n.shift() + "\n" + n);
    

15. slice(): 將array的一部分切片形成一個新的array並傳回。 >>

    console.log(n.slice(1,3) + "\n" + n);
    

    傳回[n[1], n[2]](第二個數字位址不包含)，而原array不變。
16. some(): 如果array內至少一個元素符合特定函數標準，傳回true，否則傳回false。 >>

    console.log(
        n.some(
            (e) => {return e > 10;}
        )
    );
    

    跟every()類似，只是every()需要所有元素都符合才傳回true。
17. sort(): 排序array。 >>

    n.sort();
    console.log(n);
    

    顯示出的結果是[11, 18, 2, 3, 6]，好像不太對，事實上是排序好了，只是不是照數字大小，而是字串大小。 若是要排序數字，需要加上一個函數。 >>

    function compare(e1, e2){
        return e1 > e2;
    }
    n.sort(compare);
    console.log(n);
    

    若是想要由大到小排序，可以修改函數，或是記得之前介紹的reverse()函數? 若是要排序的是物件?只要把比較函數修改一下即可。 >>

    var sedans = [];//create array
    sedans.push(new sedan("Porche", 5, "Expensive"));
    sedans.push(new sedan("BMW", 5, "Expensive"));
    sedans.push(new sedan("Lamborghini", 5, "Expensive"));
    sedans.push(new sedan("Benz", 5, "Expensive"));
    sedans.push(new sedan("Farrari", 5, "Expensive"));
    var compareSedan = function(s1, s2){ // compare function
        if (s1.brand > s2.brand){
            return 1;
        }else if(s1.brand < s2.brand){
            return -1;
        }else{
            return 0;
        }
    }
    console.log(sedans.sort(compareSedan)); // sort
    

    首先建立物件的constructor，然後建立array，使用之前介紹的push()方法將物件加入，再建立一個比較函數，然後就可以排序了。 若是要找array中的最大或最小，可以直接排序然後找第一個(或最後一個或使用reverse())即可。不過這樣比較沒效率，只是要找一個值，也可以使用如下:

    console.log(Math.max.apply(null, n));
    

    將數學函數Math.max(或Math.min)應用到array上。不過這只適用於array內的元素不太多的情況，所以可以使用如下方式。 >>

    function bigger(e1, e2) {
        return Math.max(e1, e2);
    }
    console.log(n.reduce(bigger));
    

    利用之前教過的reduce()函數，一路檢查array到底然後保留最大的。 Shuffle: 將array內的元素打亂。例如撲克牌洗牌，可以使用sorting方法。 >>
    

    console.log(
        n.sort(
            (e1, e2) => {return Math.random() - 0.5;}
        )
    );
    

    每一次重載網頁可以看到陣列的排列順序都不同，Math.random()函數會傳回0-1之前的隨機數，將在後面的章節介紹。
18. splice(): 加入或刪除array內的元素。 >>
    

    console.log(n);
    n.splice(2,2,20,30,40,50,60);
    console.log(n);
    

    參數的意義是自index=2開始(第一個參數)刪除兩個元素(第二個參數)，並在同位置加上後面所有元素(其餘的所有參數)。
19. toString(): 傳回元素內容字串。 >>
    

    console.log(n.toString());
    

20. unshift(): 跟shift()相反，在array前端加上一個(或多個)元素並傳回新array的length。 >>
    

    console.log(n.unshift(100,200) + "\n" + n.toString());
    

const ar = [1,2,3,4,5];
const result = ar.map(n=>n*3)
                 .filter(n=>n%2===0)
                 .reduce((a, b)=>a+b, 0);
console.log(result);

let a1 = [];
let a2 = "123";
let a3 = {a:1, a:2, a:3};
let a4 = 789;
console.log(Array.isArray(a1)); // true
console.log(Array.isArray(a2)); // false
console.log(Array.isArray(a3)); // false
console.log(Array.isArray(a4)); // false

// string to array
const s1 = "abc";
console.log(Array.from(s1)); // Array(3) [ "a", "b", "c" ]
console.log(Array.from(s1, (ele)=>{return ele.repeat(3);})); // Array(3) [ "aaa", "bbb", "ccc" ]

// object to array
let obj = {
	'0': 0,
	'4': 44, 
	'1': 11,
	'3': 33, 
	'2': 22, 
	length:5
};
console.log(Array.from(obj)); // Array(5) [ 0, 11, 22, 33, 44 ]

// map to array
let map = new Map();
map.set(1, 'do');
map.set(2, 're');
map.set(3, 'mi');
console.log(map.size); // 3
console.log(map.get(1)); // do
console.log(Array.from(map)); 
/* 	Array(3) [ (2) […], (2) […], (2) […] ]
​
0: Array [ 1, "do" ]
​
1: Array [ 2, "re" ]
​
2: Array [ 3, "mi" ] */

// set to array
let set  = new Set([1,2,3,4,5]);
console.log(set.has(1));
console.log(Array.from(set));//Array(5) [ 1, 2, 3, 4, 5 ]

let a = Array.of(1,2,3,'do','re','mi'); 
console.log(a); // Array(6) [ 1, 2, 3, "do", "re", "mi" ]

let arr = [1,2,3,'a','b','c'];
console.log(arr.includes(2)); // true
console.log(arr.includes(1, 2)); // false, 從位置2(arr[2])開始尋找
console.log(arr.includes('c')); // true
console.log(arr.includes('x')); // false

let arr1 = [1,2,[3,4],[5,6]];
console.log(arr1.flat()); // 攤平一層(預設值)

let arr2 = [1,2,[3,4,[5,6]]];
console.log(arr2.flat(2)); // 攤平兩層

let arr3 = [1,2,[3,4,[5,6,[7,8]]]];
console.log(arr3.flat(3)); // 攤平三層

let arr4 = [1,2,[3,4,[5,6,[7,8,[9,10,[11,12]]]]]];
console.log(arr4.flat(Infinity)); // 使用Infinity關鍵字來無限攤平(無論幾層)

function's arguments

function area(w,h) {
    console.log(arguments);
    return w*h;
}
area(10,20);

function sum(){
    var s = 0;
    for(let i = 0; i < arguments.length; i++){
        s = s + arguments[i];
    }
    return s;
}
console.log(sum(1,2,3,4,5,6,7,8,9,10));