Hugo Habor

Tag: Object

  • JavaScript-函式宣告Function Declared、函式表達Function Express以及This的觀念。

    本篇章主要是我自己整理出來的 (大多數是爬了各網站、教學文章)

    我把它當作學習筆記, 如果有也侵害著作權

    請留言或是 E-mail: lioajimzen@gmail.com

    Table of Contents
    資料參考來源: 
1.你不可不知的 JavaScript 二三事#Day19：函數定義 (Function Definition) 的 100 種寫法
2.MDN_Web
3.Fooish_Javascript
4.JS-ES6箭頭函數
5.Arrow function expressions
6.六角學院課程

    <函式的概要/Function Outline>

    函式說的白話…

    把一連串邏輯判斷+運算式, 將他們寫成一個 “功能容器”, 每次你要用他們的時候, 呼叫他們即可!

    又或者可以將你定義的眾多“屬性“清單包裝在Function 裡面

    <一般函式定義/Function Define>

    一個函式的定義由一系列的函式”關鍵字”組成, 依次為：

    • 用 function 關鍵字來宣告一個函數
    • 我們指定這個函數的名稱 functionName
    • 包圍在括號()中，並由逗號區隔每一個函式參數。
    • 包圍在大括號{}中，用來定義函式內功能的”物件”，而且這些物件已經給予記憶體空間。( 通常拿來建立物屬性件使用 )

    函式_結構 Construct Function>> 

    function functionName(parameter1, parameter2, ...) {
    statements
    return value;
}

    可以不包含參數&不回傳/None Return>>

    若你把 return 陳述式刪除, 當這個function 被呼叫之後… 經處理的結果若沒有 “受眾” , 結果就會顯示 undefined.

    我的文章有寫關於 undefined 就是這篇。

    無Return 結構: 

    function functionName() {

//只有陳述式
    statements 
}

// 輸出結果 : 
undefined

    函式範例>>

    函式名稱: squre

    在squre函式裡面的算式= number*2 , 運算完成後會把該值 resultVal 作回傳。

    let resultVal;
let number; 

function square(number) {
          resultVal=number * number;
  return  resultVal
}

console.log(square(10));
-----------------------------------
// 輸出結果
100

    <函式回傳/Return Satement >

    參考資料:

    MDN_Web_Return

    英文原文: 
The return statement ends function execution and specifies a value to be returned to the function caller.

    函式回傳:

    當你呼叫這個函式, 此函式的處理功能…. 接手過來處裡你的資料, 處理完之後把這個處理好的值丟到一個內定記憶體區間或式暫存區, 然後再把這個暫存值丟給”呼叫者”, 此時執行到return 陳述式時也代表此函式已經執行完畢! 

    function getRectArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}
-----------------------------------
console.log(getRectArea(3, 4));
// expected output: 12

console.log(getRectArea(-3, 4));
// expected output: 0

    Return的各種表示法>>

    return;
return true;
return false;
return x;
return x + y / 3;

    <各種函式的寫法/Various Functions Writing>

    1. 宣告式 (Function Declarations)
    2. 匿名表達式 (Function Expressions w/o Function Name)
    3. 具名表達式 (Function Expressions w/ Function Name)
    4. 建構子式 (Function Constructor)
    5. 箭頭函數 (Arrow Function) – ES6 參考資料

    宣告式 (Function Declarations)>>

    • 最標準的寫法。
    • 使用 function 關鍵字作函數的宣告和定義。
    • 具有 Hoisting 提升效果。
    console.log(myFunc);
console.log(myFunc(3, 6));

function myFunc(a, b) {
    return a + b;
}
-----------------------------------
// 執行結果
//function myFunc(a, b) {
    return a + b;
}

//9

    匿名表達式 (Function Expressions without Function Name)>>

    1. 先宣告一個變數，再定義一個函數內容放到該變數裡。
    2. 此方式定義的函數實際上是匿名函數 (a function without a name)，將函數定義的主體，存在你定義的變數裡。
    3. 變數名稱不等於函數名稱。
    4. 不具 Hoisting 提升效果。
    console.log(myFunc);

// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function

let myFunc = function (a, b) {
    return a + b;
};

console.log(myFunc);
console.log(myFunc(3, 6));
-----------------------------------
//執行結果
//undefined
//ƒ (a, b) {
    return a + b;
}
//9

    具名表達式 (Function Expressions / Function Name)>>

    1. 和「匿名表達式」相似，差別在定義函數內容時，有給予一個函數名稱 (Function name)。
    2. 定義的函數印出來會有函數名稱(不等於變數名稱)。
    3. 但無法直接透過該函數名稱呼叫。
    4. 不具 Hoisting 提升效果。
    console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function

var myFunc = function aaa(a, b) {
    return a + b;
};

console.log(myFunc);
console.log(myFunc(3, 6));
// console.log(aaa); // ReferenceError: aaa is not defined
-----------------------------------
//執行結果 
//undefined
//ƒ aaa(a, b) {
    return a + b;
}
//9

    建構子式 (Function Constructor)>>

    說到建構子我們不得不提 new 這個Keyword，因為提到new 我們就要有個概念: 我們正在建立物件!

    1. 先宣告一個變數，再用 JavaScript 內建的函數建構子 Function() 去定義函數內容，放到該變數裡。
    2. 用 Function() 定義的函數自動被給予函數名稱 anonymous，但和「具名表達式」一樣，都無法直接透過該函數名稱呼叫。
    3. 不具有 Hoisting 提升效果。
    console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function

var myFunc = new Function("a", "b", "return a + b");
console.log(myFunc);
console.log(myFunc(3, 6));
-----------------------------------
//執行結果 // undefined
// ƒ anonymous(a,b) {
return a + b
}
//9

    JavaScript 最容易考的的題目, 箭頭函式與一般函式的差別!

    箭頭函式 (Arrow Function)>>

    參考資料: MDN_Web_箭頭函式 , 鐵人賽 (Arrow function) 卡斯柏

    An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.

    箭頭函式 有著比一般函式表示法更精簡的表示法, 但箭頭函式並非一體適用….

    箭頭函式也有它的極限啊!

    1. Arrow functions don’t have their own bindings to this, arguments or super, and should not be used as methods.
    2. Arrow functions don’t have access to the new.target keyword.
    3. Arrow functions aren’t suitable for call, apply and bind methods, which generally rely on establishing a scope.
    4. Arrow functions cannot be used as constructors.
    5. Arrow functions cannot use yield, within its body.
    1. Arrow functions沒有自己的 this、arguments 或 super 可綁定，不應該作為 方法 Method。
    2. Arrow functions無權造訪 new.target 關鍵字。
    3. Arrow functions不適用於調用、應用和綁定方法，這些方法通常依賴於建立作用域。
    4. Arrow functions不能用在建立建構子。
    5. Arrow functions不能在函式內使用 yield。

    Arrow Functions ES5與ES6的不同之處

    底下範例碼參考: Arrow function js_github

    可省略 function 這個關鍵字 !

    FUNCTION(a){} 將改成 (a) =>{}
    //ES5 版本
var circle = function(r) {
    var PI = 3.14 ;
    return r*r*PI
}
console.log(circle(2)) 
//執行結果  12.56


//ES6 版本
const circle = (r) => {
    const PI = 3.14 ;
    return r*r*PI
}
console.log(circle(2)) 

//執行結果  12.56

    Arrow Function基本語法結構

    參數1, 參數2, … , 參數N (含Return )

    (參數1, 參數2, …, 參數N) => { 陳述式; }

(參數1, 參數2, …, 參數N) => 表達式;

    陳述式與表達式

    當只有一個參數時, 可去除括號

    (參數1)=> { statements }

//若無參數，就一定要加括號:
() => { statements }

    Arrow Function進階語法

    // 用大括號將內容括起來，返回一個物件字面值表示法：

params => ({foo: bar})

// 支援其餘參數與預設參數

(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

// 也支援 parameter list 的解構
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); 

//執行結果 6

    Arrow Function有兩個重要的特性：
    1. 更簡潔的函式寫法
     2. this 變數是全域性的。

    //物件內的屬性們
var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// -----這段函式會輸出[8, 6, 7, 9]這個陣列
elements.map(function(element) {
  return element.length;
});

// -----上方一般的函式，可以被改寫成下方的箭頭函式
elements.map((element) => {
  return element.length;
}); 


//執行結果 [8, 6, 7, 9]


// -----如果輸入的參數只有一個，我們可以移除掉外面的括號
elements.map(element => {
  return element.length;
}); 

//執行結果 [8, 6, 7, 9]


// -----當箭頭函式裡的內容只有'return'的時候，我們刪除return和外面的大括號
elements.map(element => element.length); 

//執行結果 [8, 6, 7, 9]


// -----在這個範例中，因為我們只需要length這個屬性，所以也可以使用解構賦值：
// -----下方的'length'對應到我們想取得的屬性，而'lengthFooBArX'只是很普通的變數名稱,
// -----可以被任意修改成你想要的名字

elements.map(({ length: lengthFooBArX }) => lengthFooBArX); 

// [8, 6, 7, 9]

// -----上面解構賦值之後的參數也可以被改寫為下面這樣。但要注意的是，在這個範例中，
// -----我們不是要指定'length'這個值給一個虛構的屬性，而是這個變數的名稱'length'本身就是
// -----用來當成我們想從物件上取得的屬性


elements.map(({ length }) => length); 

//執行結果 [8, 6, 7, 9]

    SetTimeout 箭頭函式結構 

    setTimeout(() => {
  // -----100 milliseconds 之後執行

}, 100);

    SetInterval 箭頭函示結構

    setInterval(()=> {
 // -----100 milliseconds 這期間一直處裡。

},100);

    This 與我們分不開>>

    參考資料:

    PjChener_Arrow Function_This, PJCHENder
    那些沒告訴你的小細節this

    解釋 JavaScript 中 this 的值?｜ExplainThis

    一般函式內，每個新函式是依據如何被呼叫來定義自己的 this 變數。

    This :一般函式內 結構與功能

    • 在建構子時是一個新物件 (這很重要)
    • 在呼叫嚴格模式函數時是 undefined
    • 以物件方法呼叫時則為”基礎物件”

    利用建立物件, 函式帶出數值

    function User() {
    this.name = 'Bob';
}

function AnotherUser() {
    this.name = 'Hugo';
}

var user1 = new User();
var user2 = new AnotherUser();

console.log(user1.name);
console.log(user2.name);

//顯示結果
Bob
Hugo

    This :Arrow Function內 結構功能

    //-----一般函式
function User() {

    this.name = "Bob";
    return this;
}

console.log(this.name);

//-----箭頭函式
()=>{
this.name ="It is Arrow Functions";
}

console.log(this.name);
console.log(typeof this.name);

//顯示結果
(空物件)
It is Arrow Functions
string

    This 提取Arrow Function內部值

    // Arrow function 1
()=>{
     this.name ="It is Arrow Functions";
}

console.log(this.name);
console.log(typeof this.name);


//顯示結果
//It is Arrow Functions
//It is Arrow Functions
//string
    • 箭頭函數(Arrow Functions) — this是定義時的對象, 不是在使用的物件。
    • 傳統Function語法 — this是使用、呼叫(call)時的對象。

    用setInterval 將一般函式this 物件p帶出

    function Person() {
  // Person() 建構式將 this 定義為它自己的一個實體
  this.agegrowing = 0;

  setInterval(function growingUp() {
    // 在非嚴格模式stric mode下, growUp() 函式把 this 定義為全域物件
    // (因為那是 growingUp()執行的所在)，
    // 與 Person() 建構式所定義的 this 有所不同

    this.agegrowing++;
  }, 3000);
}

// 在全域做另一個物件 p
var p = new Person();
console.log(p);

    在 ECMAScript 3/5 裡面，this 可透過指派 this 值。

    function Person() {
  var me = this;
                 
  me.age = 0;

  setInterval(function growUp() {
    // 這個 callback 參考 `self` 變數，為預期中的物件。
    mee.age++;
  }, 1000);
}

    透過 bind 函式來綁定 this 變數到指定函式（上面為例，就是 growingUp() 函式）。

    箭頭函式不會擁有自己的 this; 箭頭函式遵循 “常規變量查找規則“。

    在當前範圍中搜索不到 this 變量時，他們最終會尋找其作用域。

    Strict Mode 嚴格模式的關係

    參考資料: Arrow function expression

    由於 this 變數具有詞彙上綁定意義，故嚴格模式的宣告對 this 的作用將被忽略。

    Arrow function 沒有自己的this

    // Arrow function 1

()=>{
     
     this.name ="It is Arrow Functions";
     return this;
}

console.log(this.name);


// Arrow function 2
var ArrowObject =()=>{
this.name ="It is ArrowObject Functions";

}

ArrowObject();
console.log(this.name);
console.log(typeof this.name);

    This: None Strict Mode 

    
const obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
}

obj.b(); // prints undefined, Window { /* … */ } (or the global object)
obj.c(); // prints 10, Object { /* … */ }

    This: Strict Mode

    'use strict';

const obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
}

obj.b(); // prints undefined, Window { /* … */ } (or the global object)
obj.c(); // prints 10, Object { /* … */ }

    結語

    有點想不太出來結語要寫甚麼, 光是要弄懂一般函式 vs 箭頭函式 + 蒐集資料就挺累人的

  • JS-Array 、Object literal、Object Constructor/陣列、物件表列、物件創造

    https://www.educba.com/javascript-objects/

    Javascript 本身是不是物件導向, 可以在前幾篇的章節看看, 總話說 Javascript 是一個需要被解釋的語言!

    說到陣列我們會重新提一次資料型態( 型別 ), 當你要提取某個元素的時候, 一定要確定該元素的資料型態與你要應用的資料型態, 對應是否相符合。

    • string
    • number
    • boolean
    • null
    • undefined
    • symbol (ES6 新增)

    除了上述這些以外的”型別”，都是物件。

    參考文章

    給我這個肝肝的工程師一些支持吧! ^v^

    <陣列-語法結構>

    我們可以把陣列當作一個容器, 容器裡面會有多種的元素, 這些元素供給開發者提取。
    我們利用日常的”顏色”, “書籍” 來舉個例子:
    • 顏色種類: 紅、綠、藍、灰、黃
    • 書籍種類: CS, VB, JS, Python, SQL
    • 型別: String
    let color =['red', 'green', 'blue','gray','yellow' ];

let book =['CS','VB','JavaScript','Python','SQL'];

console.log(color);
console.log(book);

    <陣列-不同型別顯示>

    當然, 陣列不管是幾維資料, 都可以混合不同型別使用。
    let array00 =['green',100,false];

let bookprices=[320,400,350,250,400];

console.log(array00);
console.log(bookprices);

    <陣列-讀取>

    目前學過的語言裡面, 陣列的元素順序都是從0起始。
    let array00 =['green',100,false];

let bookprices=[320,400,350,250,400];


console.log(array00[0]);
console.log(array00[1]);
console.log(array00[2]);

console.log(bookprices[0]);
console.log(bookprices[1]);
console.log(bookprices[2]);

    <陣列-提取變數-賦予其他變數>

    既然你都知道如何提取元素, 那我們來練習如何賦予新變數的流程。
    let array00 =['green',100,false];

let liaolikenumber = array00[1];

console.log(liaolikenumber); 
//  result = 100

    <陣列-資料長度>

    陣列內元素個數。
    let number =[0,1,2,3,4,5];

console.log(number.length);
// result =6

    [陣列內容新增、刪除的處理方法]

    如果有做過通訊處理的工程師應該很清楚…

    再來就是看你該如何辨識一整堆資料裡面, 資料的種類、順序… 再來考慮該如何提取”你要的資料” 或者是該 “寫入哪一些資料” !

    [新增陣列內的資料]

    <陣列-Push>

    • 將元素推到最後一個陣列資料

    —–增加元素——

    push 將元素推到最後一個陣列資料

    unshift 將元素寫入最前面一個陣列

    —–刪除元素——

    pop 刪除資料最後一個陣列

    shift 刪除資料最前面一個陣列

    —–刪除特定元素——

    splice 可以規定範圍做刪除

    let number =[0,1,2,3,4,5];

number.push(6);

console.log(number);

    <陣列-unshift>

    • 將元素寫入最前面一個陣列
    let array01 =['2nd','3rd','4th','5th'];

array01.unshift('1st');
console.log(array01);

    [刪除陣列內的資料]

    <陣列-pop>

    • 刪除陣列最後一筆資料

    pop是一種陣列方法 / Method

    結構: 陣列名稱.pop() 

    let bookname =["CS","VB","JS","Python","SQL"];

bookname.pop();

console.log(bookname);

    <陣列-shift>

    let bookname =["CS","VB","JS","Python","SQL"];

bookname.shift();
console.log(bookname);

    [有範圍規範的刪除方法]

    <陣列-splice>

    當陣列資料多到一種程度時, 想必你也不會想一個一個去刪除吧?

    這樣沒有效率又沒有方法…. 

    let bookname =["CS","VB","JS","Python","SQL"];

bookname.splice(0,2);

console.log(bookname);

    陣列順利 0~1 受到影響, 其餘沒有!

    [物件概要]

    JavaScript 物件 (object) 是一個複合資料型態 (composite data type)，可以儲存不定數量的鍵值對 (key-value paris)，而一組鍵值對我們稱做物件的一個屬性 (property)。一個屬性的值 (value) 可以是任何資料型態 (也可以是函數)；而屬性的名稱 (key / name) 是一個字串型態。

    <物件創造>

    方法1: 利用new來建立自定義抽象名稱之物件

    物件建構式/Object Constructor

    let makenewobject = new object();

    方法2: 物件實字 /Object literal 

    let makenewobject ={};

    <物件屬性>

    我們拿車子零件的例子來陳述

    車子的組成一定是非常多的零件組成, 這些細部的零件 = 屬性( Attribute )

    眾多屬性名單集結成一個完整的電機總成( 物件 Object)。

    https://www.denso.com/tw/zh/about-us/company-information/dntw/

    底下連結有白話版本的範例:
    https://hugohabor.com/?p=1129

    Car.LightHeader
Car.AirConditionor
Car.Compressor
Car.Alternator
Car.Starter
Car.Fuelpump

    我們把物件建置的結構寫給你看, 然後試試看他的“全部清單編號” 與 “單一筆資料編號” 。

    let LightHeader ="NO1";
let AirConditionor ="NO2"; 
let Compressor ="NO3";
let Alternator ="NO4";
let Starter ="NO5";
let Fuelpump ="NO6";    


let Car ={
    LightHeader,
AirConditionor,
Compressor,
Alternator,
Starter,
Fuelpump,
};

console.log(Car);
console.log(Car.AirConditionor);

    總結

    資料集結是一個基本的結構, 你可以用陣列或者是物件陣列來達到。

    但資料歸類又是另一回事, 甚至是資料的後續產生以及資料跳島的問題, 那就真的有得玩了。