.toString() 括號中的可以寫一個數字，代表進位制，對應進位制字串
二進位制：.toString(2); // numObj.toString([radix])
八進位制：.toString(8); // numObj.toString([radix])
十進位制：.toString(10); // numObj.toString([radix])
十六進位制：.toString(16); // numObj.toString([radix])
2、String() 可以將 null 和 undefined 轉換為字串，但是沒法轉進位制字串
this.ZTrimArray = function (PArray) {
var NewArray = [];
for (var i = 0; i < PArray.length; i++) {
NewArray.push(String(PArray[i]).trim());
}
return NewArray;
}
String() 函數 - 型別轉換
數字轉字串
String(123) // '123'
String(100 + 23) // '123'
var x = 123;
String(x) // '123'
布林值轉字串
String(true) // 'true'
String(false) // 'false'
字串相等
我們可以用 === 或 == 運算子來判斷兩個字串是否相等：
var str = 'hello world';
// 會輸出 'equal'
if (str === 'hello world') {
console.log('equal');
}
字串比對會逐字元比較，看兩個字串是否完全一樣。
相對的，我們可以用 !== 或 != 運算子來判斷兩個字串是否不相等：
var str = 'hello world';
// 會輸出 'not equal'
if (str !== 'hello Mars') {
console.log('not equal');
}
例如將null轉換為字串
返回的結果為 null，string
將undefined轉換為字串
返回的結果為 undefined，string
---------- JavaScript Number toString() Method
JavaScript Number toString() Method
toString() 方法用來將數字轉型成字串。
語法：
numObj.toString([radix])
radix 參數是一個介於 2~36 的整數，用來指定基數，預設為 10。
用法：
var count = 10;
count.toString() // '10'
(17).toString() // '17'
(17.2).toString() // '17.2'
var x = 6;
x.toString(2) // '110' 二進位表示法
(254).toString(16) // 'fe' 十六進位表示法
(-10).toString(2) // '-1010'
(-0xff).toString(2) // '-11111111'
---------- 複製 array / object 的常見方法，以及深淺拷貝的差異
20210903
https://eudora.cc/posts/210430/
方法1. ary.slice(0) 或ary.concat() (陣列)
僅限一維陣列 且 陣列值不含 obj
let ary = [1, 2, 3]
let newAry = ary.slice(0) // 複製Array方法1, 或 let newAry = ary.concat(), array by value.
let newAry = ary.slice() // 複製Array方法1, 或 let newAry = ary.concat(), array by value.
ary === newAry // false
newAry.push(4) // ary = [1, 2, 3], newAry = [1, 2, 3, 4], 原值不變.
方法2. Array.from(ary) (陣列)
陣列：pass by value 多維陣列也ＯＫ！
let ary = [[1,1], [2,2]]
let newAry = Array.from(ary) // 複製Array方法2, array by value, 多維陣列也可以.
newAry.push([3.3])
newAry[0]=[0,0]
// ary = [[1,1], [2,2]], newAry = [[0,0], [2,2], [3,3], 原值不變.
方法3. [...ary] / {...obj} ES6展開符 (陣列 / 物件)
展開符 ... 展開陣列再裝進 [] 空陣列 （ES6 寫法）
let ary = [1, 2, 3]
let newAry = [...ary] // 複製Array方法3, array by value, 多維陣列也可以, ES6 寫法, 只能拷貝到物件第一層
newAry.push(4)
// ary = [1, 2, 3] newAry = [1, 2, 3, 4]
多維陣列也ＯＫ！
let ary = [[1,1], [2,2]]
let newAry = [...ary]
newAry.push([3.3])
newAry[0]=[0,0]
// ary = [[1,1], [2,2]]
// newAry = [[0,0], [2,2], [3,3]
{... obj} 只能拷貝到物件第一層！
let obj = {
A: 1,
B: {
a: '2-1',
b: '2-2'
},
C: {
a: '3-1',
b: '3-2'
}
}
let newObj = {...obj}
//----
newObj.C.c = "3-3" //參照同個位址,obj也改了
newObj.A = 2 //第一層有獨立位址, 不影響 obj
方法4. Object.assign() ES6 ( 陣列 / 物件)
Array：pass by value 多維陣列也ＯＫ！
let ary = [[1,1], [2,2]]
let newAry = Object.assign([],ary)
//----
newAry.push([3.3])
newAry[0]=[0,0]
// ary = [[1,1], [2,2]] newAry = [[0,0], [2,2], [3,3]
Object：obj 只有第一層時 - pass by value
let obj = {
a: 1,
b: 2
}
let newObj = Object.assign({},obj) // 複製Array方法4,
//----
newObj.b = 3
// obj 維持 = { a: 1,b: 2}
// newObj = { a: 1, b: 3 }
ps. 如果obj 裡面的value 本身已經是被淺拷貝過來的（記錄址而非值），newObj 裡存到的也是址
Object：第二層開始 pass by reference （相當於只能拷貝值至 object 第一層）
let obj = {
A: 1,
B: {
a: '2-1',
b: '2-2'
},
C: {
a: '3-1',
b: '3-2'
}
}
let newObj = Object.assign({},obj)
//----
newObj.A = 2 //有獨立位址, 不影響 obj
newObj.C.b = "3-22222" //沒有獨立位址, 影響到 obj
方法5. JSON.stringify() / JSON.parse() ( 陣列 / 物件)
陣列值/物件值內容不能包含 function 或 RegExp ...等
JSON.stringify() 先轉成字串;再JSON.parse() 再轉回原本的 物件/ 陣列
陣列與物件都可多維/多層拷貝
let ary = [[1,1], [2,2]]
let newAry = JSON.parse(JSON.stringify(ary)) // 複製Array方法5, array by value, 多維陣列也可以, JSON.stringify() 先轉成字串;再JSON.parse() 再轉回原本的 物件/ 陣列, 不能包含 function, undefined 或 RegExp.
//----
newAry.push([3.3])
// ary = [[1,1], [2,2]] newAry = [[1,1], [2,2], [3,3]
不同方法4 ，obj 可拷貝至深層
let obj = {
A: 1,
B: {
a: '2-1',
b: '2-2'
},
C: {
a: '3-1',
b: '3-2'
}
}
let newObj = JSON.parse(JSON.stringify(obj))
//----
newObj.C.b = "3-22222" //有獨立位址, 不影響 obj
newObj.A = 2 //有獨立位址, 不影響 obj
不適用於值是 function 的或為 undefined 的（會遺失）。
---------- by reference, by value
20210903
by reference, by value
var a = { count: 1}
var b = a
1. by reference 原物件位址:
function changValue(val){
a.count = 2 // by reference 原物件位址.
}
changValue(a) // b也同時被改為 {count : 2}
2. by value, 新物件位址, 重新賦值整個 object:
function changValue(val){
a = { count: 2} // by value, 新物件位址, 重新賦值整個 object
}
changValue(a) // b 依然是 {count : 1}
---------- array 與 object 的差別
20210903
array 與 object 的差別
var myObj = {'color': 'blue', 'height': 101}; // 宣告物件時，同時建立屬性 color 和 height.
var myObj = {color: 'blue', height: 101}; // 宣告物件時，同時建立屬性 color 和 height. 省略屬性名稱的引號.
[1, 2, 3] // 一維陣列
[[1, 1]], [2, 2], [3, 3]] // 二維陣列
{ // ---單層物件
"1": "Amy",
"2": "Betty",
"3": "Claire"
}
{ // ---多層物件
"1": {"name": "Amy", "age": 10 },
"2": {"name": "Betty", "age": 12},
"3": {"name": "Claire","age": 8}
}
宣告陣列 (Create an Array)
var arrayName = [item1, item2, ...];
var fruits = ['Apple', 'Banana'];
Arrays in JavaScript are mutable lists with a few built-in methods. You can define arrays using the array literal:
var x = []; // 定義 Array
var y = [ 1, 2, 3 ]; // 定義 Array
The type of an array is "object":
typeof []; // "object", typeof 為 "object".
typeof [ 1, 2, 3 ]; // "object", typeof 為 "object"
An array, no matter if it has elements or not, never defaults to false:
![] // false, Array 不管是否有存放元素否, 預設為 true.
!![] // true, Array 不管是否有存放元素否, 預設為 true.
---------- Template var object.
20210902
var me = {
firstName: 'Honda',
lastName: 'Chen',
age: 30,
fullName: function() { // 宣告物件時，同時建立方法 fullName.
return this.firstName + ' ' + this.lastName; // this關鍵字可參考到物件本身.
}
}
var name = me.fullName(); // name = 'Honda Chen'
---------- Template Protype, It's like class inheritance, and subclass pattern:
20210902
ObjMaker = function() {this.a = 'first';}; // 定義 (function Constructor 建構函數)
ObjMaker.prototype.b = 'second'; // 增加增加方法或屬性. 在 prototype 屬性增加方法或屬性. 每個建構函數都會有 prototype 屬性.
obj1 = new ObjMaker(); // 新物件 = new ObjMaker() 就會包含 b 屬性. 用 new 呼叫(建構函數). 建立(obj1 物件), 型別為 ObjMaker 包含 prototype 屬性.
obj1.a; // returns 'first'. 呼叫建構函數 objMaker 中的 a 屬性.
obj1.b; // returns 'second'. 呼叫 obj1.b 找不到, 改呼叫 obj1.prototype.b 成功.
// subclass pattern below:
SubObjMaker = function () {};
// subclass重點: 將 prototype 指向新上層物件, 就會繼承上層物件所有的屬性.
// SubObjMaker.prototype = new ObjMaker(); // 已經停用了, 改用 Object.create()如下:
SubObjMaker.prototype = Object.create(ObjMaker.prototype); // 現在 ECMAScript 5 改用 Object.create().
SubObjMaker.prototype.c = 'third';
obj2 = new SubObjMaker();
obj2.c; // returns 'third', from SubObjMaker.prototype
obj2.b; // returns 'second', from ObjMaker.prototype
obj2.a; // returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype
---------- Function
20210902
JavaScript Function (函數)
函數 (function) 用來將會重複使用的程式碼封裝在一起，方便重複執行。
函數宣告 (Function declaration)
function functionName(parameter1, parameter2, ...) {
// statements
// return value;
}
若沒有返回值，亦即省略 return 語句，預設會返回 undefined.
變數的存在範圍 (Function scope)
在函數裡面除了可以存取到局部變數 (local variable)，也可以存取到全域變數 (global variable)。
// 全域變數 - global scope
var num1 = 20;
var num2 = 3;
var name = 'Mike';
function multiply() {
return num1 * num2; // 函數內部可以存取到全域變數
}
// 輸出 60
console.log(multiply());
function getScore () {
// 局部變數 - function scope
// 作用範圍只在函數內部
var num1 = 2;
var num3 = 4;
// 如果沒加 var 宣告變數，這個變數則是一個全域變數
num2 = 5; // 存取到全域變數 num2
num4 = 6; // 宣告一個新的全域變數 num4
// 函數也可以宣告在其他函數內部 (nested function) - function scope
function add() {
// 內部函數可以存取到外部函數的局部變數
return name + ' scored ' + (num1 + num2 + num3);
}
return add();
}
console.log(getScore()); // "Mike scored 11"
// 會存取到全域變數 num1，輸出 20
console.log(num1);
// 會存取到全域變數 num2，輸出 5
// 因為全域變數 num2 在函數內部被設成 5
console.log(num2);
//會存取到全域變數 num4，輸出 6
console.log(num4);
// 全域空間存取不到 function 內部的變數
// 會發生錯誤 - Uncaught ReferenceError
console.log(num3);
// 全域空間也存取不到 function 的內部函數
// 會發生錯誤 - Uncaught ReferenceError
console.log(add());
函數表達式 (Function expression)
函數在 JavaScript 是一個一級物件 (first-class object)，
這意思就是一個函數可以當作別的函數的參數、函數的返回值、或做為一個變數的值。
所以你也可以用 Function expression 的方式來宣告一個函數，
將一個匿名函數 (anonymous function / function literal) 當作值指定給一個變數。
例如：
var square = function(number) {
return number * number;
};
---------- NameSpace
20210902
JavaScript中，並沒有 Namespace 的功能!
可以透過物件的概念來達到類似namespace的效果（faking namespace）。
var Chinese = {};
var English = {};
Chinese.Hello = '嗨";
English.Hello = "Hi";
console.log(Chinese.Hello);
屬性常見錯誤:
var Chinese = {};
var English = {};
Chinese.Hello = '嗨";
English.Hello.Welcome = "Hi, Welcome."; // 錯誤: Uncaught TypeError: Cannot set property 'Hello' of undefined.
console.log(Chinese.Hello);
錯誤原因是屬性 English.Hello 為 undefined.
因為屬性建立時, 預設值為 undefined.
應修正如下:
English.Hello = {}; // 建立物件, 作為屬性 Hello 的值. (屬性建立時, 預設值為 undefined.)
English.Hello.Welcome = "Hi, Welcome."; // 再以物件(名稱─值)的方式, 建立子屬性.
---------- Object.create(), ES5 Object.create(proto[, propertiesObject])
20210902
ref:
https://shubo.io/javascript-new/
ES5 中提供了Object.create() 的方法，用來創造新物件。使用方法：
Object.create(proto[, propertiesObject])
使用 Object.create() 的好處是，省去了可能會忘記用 new 呼叫建構式的風險。
這個 function 會回傳一個新物件，其 prototype 等於第一個被傳入的參數。
例如，我們想要創造很多貓物件，所以我們先創造一個物件 cat 來當作 prototype，裡面定義了speak()方法：
var cat = {
speak: function() {
console.log(this.name + ": meow!");
}
};
當我們呼叫 Object.create(cat)時，回傳的新物件的 prototype 就是 cat。
// Create a new cat
var kitty = Object.create(cat); // 建立新物件kitty, 型別為 cat. 使用 Object.create() 的好處是，省去了可能會忘記用 new 呼叫建構式的風險。
kitty.name = "Kitty";
kitty.speak(); // Kitty: meow!
kitty 物件裡找不到 speak()方法，於是接下來到他的原型物件(也就是cat物件)上面尋找。
cat物件裡定義了speak()方法，於是呼叫成功。
Object.create() 的原理
被傳進作為參數的物件，將會被當成新物件的原型物件。
所以Object.create()的內部可能會長得像這樣（示意）：
if (!Object.create) {
Object.create = function(o) {
function F() {}
F.prototype = o;
return new F();
};
}
其中 F() 是建構式，建構式上的 prototype 特性設為 o，並且由 new運 算子呼叫建構式。
所以新物件的特性查找將會委託給o。
使用 Object.create() 的好處是，省去了可能會忘記用 new 呼叫建構式的風險。
結論
JS中可以用建構式，或者是ES5的 Object.create() 來創造新物件。
使用建構式創造的新物件，將繼承自建構式上的 prototype 屬性。
使用Object.create(obj)創造的新物件，將繼承自obj。
---------- New, Prototype
20210902
New, Prototype
ref:
https://shubo.io/javascript-new/
Prototype
every function object automatically has a prototype property
每一個 function object 都會有一個 (prototype 屬性)
function Cat(name) { // 定義 (function Constructor 建構函數)
this.name = name;
}
// Define 'speak' method for Cat objects
Cat.prototype.speak = function() { // 在 prototype 屬性新增方法或屬性.
console.log(this.name + ": meow!");
};
var kitty = new Cat("Kitty"); // 用 new 呼叫(建構函數). 建立(kitty 物件), 型別為 Cat.
kitty.speak(); // Kitty: meow! // 呼叫 prototype 屬性中的方法.
new 運算子和 Function Constructor (建構函式) 的運作原理
prototypal inheritance (原型繼承)。
JavaScript 每個物件都有個 prototype，物件能夠繼承 prototype 上的屬性或方法；
如果物件上找不到某個屬性或方法時，就會去查詢它的 prototype 是否存在這個屬性或方法。
這個機制使我們可以在prototype物件上定義特性或方法，所有繼承同一個prototype的物件都可以透過原型委託使用這些特性或方法。
呼叫 new Cat("Kitty") 代表 JS 執行了:
1. 建立新物件，
2. 新物件的繼承自建構式的 prototype 特性，也就是 Cat.prototype。
3. 將新物件綁定到建構式的 this 物件，並呼叫建構式。
4. (在不特別寫明回傳值的情況下) 回傳剛創造的新物件。
第2步將新物件的原型設為 Cat.prototype。
所以對新物件呼叫speak()方法時，會先在物件本身尋找此方法。
然後會發現自己身上找不到此方法，於是再到自己的prototype，也就是 Cat.prototype 上尋找。
因為我們定義了 Cat.prototype.speak，所以可以順利找到此方法。
簡單地說，當你使用建構式來創造新物件，新物件的原型就是建構式上的prototype特性。
而在原型上定義方法，就等於所有物件都可以透過原型委託的方式使用原型上的方法。
常見錯誤 new :
建構式必須和new運算子搭配使用，但萬一我們忘了，直接呼叫建構式：
var kitty = Cat("kitty");
此時並不會有任何錯誤或警告，this會直接bind到全域變數，有可能會導致很難察覺的bug!
ref:
https://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript
這篇圖文說明更清楚,
Constructors Considered Mildly Confusing.pdf
https://zeekat.nl/articles/constructors-considered-mildly-confusing.html
The new keyword in javascript.
It does 5 things:
1. It creates a new object. The type of this object is simply object.
2. It sets this new object's internal, inaccessible, [[prototype]]
(i.e. __proto__) property to be the constructor function's external, accessible,
prototype object (every function object automatically has a prototype property).
3. It makes the this variable point to the newly created object.
4. It executes the constructor function,
using the newly created object whenever this is mentioned.
5. It returns the newly created object, unless the constructor function returns a non-null object reference.
In this case, that object reference is returned instead.
Note: constructor function refers to the function after the new keyword, as in
new ConstructorFunction(arg1, arg2)
Once this is done, if an undefined property of the new object is requested,
the script will check the object's [[prototype]] object for the property instead.
This is how you can get something similar to traditional class inheritance in JavaScript.
JavaScript 的 new 關鍵字, 主要完成5件事:
1. 建立一個物件. 型別為 object.
2. 設定僅能內部存取的 (__proto__ 屬性), 成為物件對外可使用的建構式 prototype 物件.
每一個 function物件 都會有一個 prototype 屬性.
3. 將變數指向物件.
4. 執行物件剛設定的建構式.
5. 回傳新建立的物件. 若物件建構式回傳null, 則回傳新建立的物件, 否則(non-null)回傳(指定物件的參考值).
注意: 建構式函數會在 new 指令之後, 以 new ConstructorFunction(arg1, arg2)的形式, 參考到(指定物件的參考值).
若 指定物件 為 undefined, 則會改參考到 指定物件的 [[prototype]].
The most difficult part about this is point number 2.
Every object (including functions) has this internal property called [[prototype]].
It can only be set at object creation time, either with new, with Object.create,
or based on the literal (functions default to Function.prototype, numbers to Number.prototype, etc.).
It can only be read with Object.getPrototypeOf(someObject).
There is no other way to set or read this value.
Functions, in addition to the hidden [[prototype]] property, also have a property called prototype,
and it is this that you can access, and modify,
to provide inherited properties and methods for the objects you make.
Here is an example:
ObjMaker = function() {this.a = 'first';}; // 定義 (function Constructor 建構函數)
// ObjMaker is just a function, there's nothing special about it that makes
// it a constructor.
ObjMaker.prototype.b = 'second'; // 在 prototype 屬性新增方法或屬性.
// like all functions, ObjMaker has an accessible prototype property that
// we can alter. I just added a property called 'b' to it. Like
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with
obj1 = new ObjMaker(); // 用 new 呼叫(建構函數). 建立(obj1 物件), 型別為 ObjMaker.
// 3 things just happened.
// A new, empty object was created called obj1. At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.
obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'
It's like class inheritance because now,
any objects you make using new ObjMaker() will also appear to have inherited the 'b' property.
subclass 的建立方式
If you want something like a subclass, then you do this:
SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated! 這是舊方法!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);
// 新方法可改用 SubObjMaker.prototype = Object.create(ObjMaker.prototype);
SubObjMaker.prototype.c = 'third';
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype
obj2.c;
// returns 'third', from SubObjMaker.prototype
obj2.b;
// returns 'second', from ObjMaker.prototype
obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype
// was created with the ObjMaker function, which assigned a for us
I read a ton of rubbish on this subject before finally finding this page,
where this is explained very well with nice diagrams.
---------- Object
20210902
JavaScript Object (物件)
JavaScript 物件 (object) 是一個複合資料型態 (composite data type)，可以儲存不定數量的鍵值對 (key-value paris)，而一組鍵值對我們稱做物件的一個屬性 (property)。
一個屬性的值 (value) 可以是任何資料型態 (也可以是函數)；
屬性的名稱 (key / name) 是一個字串型態。
物件宣告 (Creating Objects)
2種方式建立一個物件：
var myObj = new Object(); // 1. Object Constructor (物件建構式).
var myObj = {}; // 2. Object Literal (物件實字). 最常用也最方便的語法.
var Z = function () {...} // 將匿名函數存放在變數 Z 中.
var Z = new Z(); // 建立物件.
物件的屬性 (Object Properties)
var myObj = {};
myObj.color = 'blue'; // 建立一個叫 color 的屬性，值是 blue
var myColor = myObj.color; // 存取物件屬性, 或用 [] 運算子來存取物件的屬性。
objectName['propertyName']
var myObj = {};
myObj['color'] = 'blue'; // 建立一個叫 color 的屬性，值是 blue
var myColor = myObj['color']; // 存取物件屬性.
var myObj = {};
var propName = 'color';
myObj[propName] = 'blue'; // 使用 object[name] 方式存取屬性, 可將屬性名稱由變數傳入.
用 [] 運算子除了可以使用變數之外，還有當你的屬性名稱包含空白或點字元的時候。
例如 myObj['hello ...'] = 'world'。
myObj.propName = 'blue'; // 使用 object.propName 方式存取屬性, 則新增屬性名稱為 'propName'
object literal 可以在宣告物件時，同時建立屬性
語法： var obj = {property1: value1, property2: value2, ..., propertyN: valueN}
例如：
array 與 object 的差別
var myObj = {'color': 'blue', 'height': 101}; // 宣告物件時，同時建立屬性 color 和 height.
var myObj = {color: 'blue', height: 101}; // 宣告物件時，同時建立屬性 color 和 height. 省略屬性名稱的引號.
[1, 2, 3] // 一維陣列
[[1, 1]], [2, 2], [3, 3]] // 二維陣列
{ // ---單層物件
"1": "Amy",
"2": "Betty",
"3": "Claire"
}
{ // ---多層物件
"1": {"name": "Amy", "age": 10 },
"2": {"name": "Betty", "age": 12},
"3": {"name": "Claire","age": 8}
}
屬性常見錯誤:
var Chinese = {};
var English = {};
Chinese.Hello = '嗨";
English.Hello.Welcome = "Hi, Welcome."; // 錯誤: Uncaught TypeError: Cannot set property 'Hello' of undefined.
console.log(Chinese.Hello);
錯誤原因是屬性 English.Hello 為 undefined.
因為屬性建立時, 預設值為 undefined.
應修正如下:
English.Hello = {}; // 建立物件, 作為屬性 Hello 的值. (屬性建立時, 預設值為 undefined.)
English.Hello.Welcome = "Hi, Welcome."; // 再以物件(名稱─值)的方式, 建立子屬性.
物件的方法 (Object Methods)
物件的屬性值如果是一個函數，我們稱它是物件的方法 (method)。
objectName.methodName();
例如：
var me = {
firstName: 'Honda',
lastName: 'Chen',
age: 30,
fullName: function() { 宣告物件時，同時建立方法 fullName.
return this.firstName + ' ' + this.lastName; // this關鍵字可參考到物件本身.
}
}
var name = me.fullName(); // name = 'Honda Chen'
JavaScript 內建物件 (JavaScript Native Objects)
JavaScript 有一些內建物件，也可以稱作資料型態，包含：
Number 物件: 數字型態的物件，如整數 (5, 10) 或浮點數 (3.14)
Boolean 物件: 表示邏輯真假值的物件，真就是 true，假就是 false
String 字串物件: 任何字元 (Unicode)
Array 陣列物件: 可用來容納任何其他物件
Math 物件: 提供許多常用的數學常數及數學計算函數
Date 物件: 專門處理時間和日期的物件
RegExp 物件: 即正規表示式 (regular expression) 物件
每一種物件都有各自的屬性 (attribute) 和方法 (method) 可以使用。
---------- String
20210901
String.trim()
this.ZTrimArray = function (PArray) {
var NewArray = [];
for (var i = 0; i < PArray.length; i++) {
NewArray.push(String(PArray[i]).trim());
}
return NewArray;
}
const greeting = ' Hello world! ';
console.log(greeting);
// expected output: " Hello world! ";
console.log(greeting.trim());
// expected output: "Hello world!";
去除字串前後的空白，此方法並不會改變原來的字串，而是傳回一個新的字串。
此方法是在ECMAScript 第五版才引進。因此有些瀏覽器並不支援。
若是不支援就自行定義： 2擇1
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
};
}
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
length 字串長度
傳回字串長度「計算幾個字」空字串的 length 為 0。
JavaScript 使用 UTF-16 編碼用來表示大部分常見的字元，使用兩個代碼單元表示不常用的字元。
因此 length 返回值可能與字串中實際的字元數量不相同。
stringObject.length;
var myStr = "myString";
stringObject.length; /* 8 */
var myStr = "基本字串";
stringObject.length; /* 4 */
var myStr = "《基本(符號)字串》";
stringObject.length; /* 10 */
var myStr = "基本的な文字列";
stringObject.length; /* 7 */
substr() 提取字串中的幾個字
substr()跟substring()常混淆! 建議改用 slice(start, end), 不會混淆而且可傳入負數.
取字串中的幾個字 JavaScript 的起始位置是 0。
如果省略了 length 那麼返回從 stringObject 的開始位置到結尾的字串。
-1 指字串中最後一個字元、
-2 指倒數第二個字元，
以此類推。
stringObject.substr(start, length)
var myStr = "myString";
myStr.substr(2,3); /* Str */
myStr.substr(-3,3); /* ing */
myStr.substr(2); /* String */
substring() 提取字串中兩個指定索引號之間的字元
substr()跟substring()常混淆! 建議改用 slice(start, end), 不會混淆而且可傳入負數.
取字串中的幾個字，起始位置是 0 從指定的位置 start 到指定「位置 End」的字串。
與 slice() 和 substr() 方法不同的是 substring() 不接受負的參數小於 0 則為 0。
建議使用 slice() 靈活些
stringObject.substring(start, End)
var myStr = "myString";
myStr.substring(2,5); /* Str */
myStr.substring(2,25); /* String (超出 length 只取到字串的結尾) */
JavaScript 的 substr 和 substring 的分別：
String.substr(start, length) ：從開始位置 start 取 「長度」length 的字串。 substr()跟substring()常混淆! 建議改用 slice(start, end), 不會混淆而且可傳入負數.
String.substring(start, End) ：從開始位置 start 到 「結束位置」End 的字串。 substr()跟substring()常混淆! 建議改用 slice(start, end), 不會混淆而且可傳入負數.
charAt() 取字串中的一個字
取字串中的一個字 index 索引指標從 0 算起、如果參數 index 不在 0 與字串長度之間，將返回一個空字串。
stringObject.charAt(index)
var myStr = "myString";
myStr.charAt(0); /* m */
myStr.charAt(2); /* S */
myStr.charAt(10); /* 返回一個空字串 */
charCodeAt() 取字串中一個字的ASCII編碼
傳回字串中一個字的 ISO-Latin-1 碼 ( index 索引指標從 0 算起 ) 為十進位的 ASCII 編碼
stringObject.charCodeAt(index)
var myStr = "ABC";
myStr.charCodeAt(0); /* 65 (等於 VBScript Asc("A")) */
myStr.charCodeAt(1); /* 66 */
var myStr = "字串";
myStr.charCodeAt(0); /* 23383 */
有時候使用 charCodeAt() 來判斷中文字及字串的分割點。
concat() 混合兩個字串成一個新字串
將把它的所有參數轉換成字串，然後按順序連接到字串 stringObject 的「尾部」，並返回連接後的字串。請注意 stringObject 本身並沒有被更改。stringObject.concat() 與 Array.concat() 很相似。
stringObject.concat(stringX,stringX,...,stringX)
var myStr = "my";
myStr.concat("String"); /* myString */
var myStr = "my";
myStr.concat("Str","ing"); /* myString */
indexOf() 字串尋找
字串尋找「由左至右尋找」將從頭到尾地檢索字串 stringObject 是否包含有 searchvalue。
開始檢索的位置在字串的 fromIndex 處或字串的開頭(沒有指定 fromIndex 時)。
如果找到一個 searchvalue 則返回 searchvalue 的第一次出現的位置。
stringObject 中的字元位置是從 0 開始的。
stringObject.indexOf(searchvalue,fromIndex)
var myStr = "myString String";
myStr.indexOf("Str",1); /* 2 */
myStr.indexOf("Str",5); /* 9 */
myStr.indexOf("Str",10); /* -1 沒有找到 */
lastIndexOf() 字串反向尋找
字串反向尋找「由右至左尋找」(反向)將從尾到頭地檢索字串 stringObject 看它是否含有子串 searchvalue。
開始檢索的位置(左)在字串的 fromIndex 處或沒有指定則為字串的結尾。
stringObject.lastIndexOf(searchvalue,fromIndex)
var myStr = "myString String";
myStr.lastIndexOf("Str",5); /* 2 */
myStr.lastIndexOf("Str"); /* 9 */
myStr.lastIndexOf("Str",1); /* -1 沒有找到 */
replace() 字串取代
字串取代符合 regexp 部份被 replaceString 部份取代，可加 /g 代表總體尋找，可加 /i 代表不分大小寫。
stringObject.replace(regexp, replaceString)
var myStr = "myString";
myStr.replace(/Str/,"xxx"); /* myxxxing */
myStr.replace(/str/,"xxx"); /* myString (大小寫不同) */
var myStr = "As As as As";
myStr.replace(/As/,"Bs"); /* Bs As as As (預設下只有一次) */
myStr.replace(/As/ig,"Bs"); /* Bs Bs Bs Bs (i 忽略大小寫, g 全部取代) */
match() 傳回尋找到的字串
傳回尋「找到的字串」regexp 為待尋找的字串，可加 /g 代表總體尋找，可加 /i 代表不分大小寫。
stringObject.match(regexp)
var myStr = "myString";
myStr.match("Str"); /* Str */
myStr.match(/Str/); /* Str */
myStr.match(/str/); /* null */
myStr.match(/str/ig); /* Str,Str (總體尋找) */
search() 傳回尋找到的字串位置
傳回尋找到的「字串位置」regexp 為待尋找的字串，可加 /g 代表總體尋找，可加 /i 代表不分大小寫。
stringObject.search(regexp)
var myStr = "myString String";
myStr.search("Str"); /* 2 */
myStr.search(/Str/); /* 2 */
myStr.search(/str/); /* -1 */
myStr.search(/str/i); /* 2 (忽略大小寫) */
slice() 取得部份字串
substr()跟substring()常混淆! 建議改用 slice(start, end), 不會混淆而且可傳入負數.
slice() 比 substring() 靈活度好一些，可以使用「負數」為參數。
另與 substr() 不同是因為它用兩個字元的位置來指定子串，而 substr() 則用字元位置和長度來指定子串。
stringObject.slice(start, end)(不包含end)
start 要取得部份字串的起始。如果是負數，則該參數規定的是從字串的尾部開始算起的位置。
也就是說 -1 指字串的最後一個字元，-2 指倒數第二個字元，以此類推。
end 接著要取得部份字串的結尾。若未指定此參數，則要提取的子串包括 start 到原字串結尾的字串。
如果該參數是負數，那麼它規定的是從字串的尾部開始算起的位置。
var myStr = "myString ABCDEF";
myStr.slice(5); /* ing ABCDEF */
myStr.slice(2,7); /* Strin (不包含end) */
myStr.slice(-6,-3); /* ABC (不包含end) */
myStr.slice(-3); /* DEF */
split() 分隔成字串陣列
用於把字串分隔成「字串陣列」(separator 為分隔字串 length 為分隔數目)。
該陣列是通過在 separator 指定的邊界處將字串 stringObject 分割成子串創建的。
返回的陣列中的字串不包括 separator 自身。
如果分隔字串 separator 為空字串 ("") 那麼 stringObject 中的每個字元之間都會被分割。
stringObject.split(separator, length);
var myStr = "What plan for Weekend?"
myStr.split(""); /* W,h,a,t, ,p,l,a,n, ,f,o,r, ,W,e,e,k,e,n,d,? */
myStr.split("",8); /* W,h,a,t, ,p,l,a (分隔數目 前8個) */
myStr.split(" "); /* What,plan,for,Weekend? */
myStr.split(/\s+/); /* What,plan,for,Weekend? */
myStr.split(" ",3); /* What,plan,for (分隔數目 前3個) */
myStr.split(/\s+/,3); /* What,plan,for (分隔數目 前3個) */
/\s+/ 相等於多次空白字元。
var myStr = "2:3:4:5"
myStr.split(":"); /* 2,3,4,5 */
var myStr = "A|B|C|D|E|FG"
myStr.split("|"); /* A,B,C,D,E,FG */
---------- Array
20210902
JavaScript Array (陣列)
陣列 (array) 是一個有序的序列，陣列中可以儲存不定數量的任何值，
陣列在 JavaScript 中屬於複合資料型態 (composite data type)。
宣告陣列 (Create an Array)
Arrays in JavaScript are mutable lists with a few built-in methods. You can define arrays using the array literal:
var Array1 = [];
var Array2 = new Array();
var Array3 = new Array(NumberOfElements);
var Array4 = [item1, item2, ...];
var Array5 = ['Apple', 'Banana'];
var Array6 = [ 1, 2, 3 ];
var Array7 = [ 1, 2, 3, 'a', '1a']; // any type.
var Array8 = [ [1, 2],[3, 4],[5, 6]]; // a 2 dimensional array.
var Array9 = Array7.slice(0) // 複製 Array
var Arraya = Array7.slice() // 複製 Array
var Arrayb = Array.from(Array8) // 複製 Array, 多維陣列也可以
console.log(Array1[0][0]); // 1
console.log(Array1[0][1]); // 2
console.log(Array1[1][0]); // 3
console.log(Array1[1][1]); // 4
console.log(Array1);
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false
From ZLib CodeHelper:
// Grid = ArrayRow[ArrayCol].
// 每一個 ArrayCol 元素個數可不固定, 因此沒有 ColsLength.
// 只提供 PushRow, PopRow 可增減最後一筆 Row, 簡化功能.
ZGridConstructor = function () { // CodeHelper Array easy operations.
this.Rows = [];
this.RowsLength = function () { return Rows.length; }
this.GetRow = function (PRow) { return Rows[PRow]; }
//不提供 SetRow(), 原因是應該這樣呼叫 this.GetRow(PRow) = NewArray;
//this.SetRow = function (PRow, PNewArray) { Rows[PRow] = PNewArray; }
// 這兩個自行呼叫 push 的方式, 比 PushRow() 更簡單.
// 但是只能客製化自訂, 無法通用.
// this.PushRow = function () { this.Rows.push(new Array(N)); }
// this.PushRow = function () { this.Rows.push(new Array(txt1.value, txt2.value)); }
this.PushRow = function () { var NewArray = new Array(); this.Rows.push(NewArray); return NewArray; }
this.PushRow = function (PNewArray) { this.Rows.push(PNewArray); }
this.PopRow = function () { this.Rows.pop() };
this.Cell = function (PRow, PCol) { return this.GetRow(PRow)[PCol]; }
this.Clear = function () { this.Rows = []; }
}
The type of an array is "object":
typeof []; // "object", typeof 為 "object".
typeof [ 1, 2, 3 ]; // "object", typeof 為 "object"
An array, no matter if it has elements or not, never defaults to false:
![] // false, Array 不管是否有存放元素否, 預設為 true.
!![] // true, Array 不管是否有存放元素否, 預設為 true.
(Properties)
length
(Methods)
concat() var newArray = oldArray.concat(value1[, value2[, ...[, valueN]]])
every()
filter() forEach(callback[, thisArg]), allows you to programatically remove elements from an Array
forEach()
indexOf() 第一個符合元素的索引位置.
join()
lastIndexOf() 最後一個符合元素的索引位置.
map()
pop() 刪除最後一個元素. Removes from the End of an Array.
push() 新增最後一個元素.
reduce()
reduceRight()
reverse() 反轉.
shift() 刪除最前面一個元素. Removes from the beginning of an Array.
slice(begin, end) (不包含end), 從 begin 到 end (不包含end) 複製子陣列. 僅限一維陣列 且 陣列值不含 obj. 例如複製全部元素 newAry = ary.slice(0), 或 newAry = ary.slice().
some()
sort() 排序
var removed = array1.splice(begin, count, Element1, Element2....) 從 start 開始刪除 count 元素後, 再新增元素.
unshift() 新增最前面一個元素.
Array.prototype.toString()
toString() 方法將回傳一個可以表達該陣列及其元素的字串
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// expected output: "1,2,a,1a"
Array 覆寫了 Object 中的 toString 方法。 陣列的 toString 方法會將陣列中的每個元素用逗號串接起來成為一個字串，並回傳該字串。
當你在會以文字型態表示的地方使用了陣列，或是在字串的串接中使用到了陣列，JavaScript 會自動為該陣列使用toString 方法。
存取陣列 (Access the Elements of an Array)
ary[index]
var fruits = ['Apple', 'Banana'];
// Apple
var first = fruits[0];
// Banana
var last = fruits[fruits.length - 1];
x[ 0 ] = 1; // 以 array-notation 存取陣列元素.
y[ 2 ] // 3
更改陣列中某個元素的值
var fruits = ['Apple', 'Banana'];
fruits[0] = 'Orange';
fruits[1] = 101;
// 輸出 ["Orange", 101]
console.log(fruits);
取得陣列長度 (length)
你可以由陣列的 length 屬性得到一個陣列的長度：
var fruits = ['Apple', 'Banana'];
console.log(fruits.length)
新增元素
用 push() 方法來新增元素到陣列最後面：
var fruits = ['Apple', 'Banana'];
fruits.push('Orange');
// 輸出 ["Apple", "Banana", "Orange"]
console.log(fruits);
或用 ary[aryLength] 的方式：
var fruits = ['Apple', 'Banana'];
fruits[fruits.length] = 'Orange';
// 輸出 ["Apple", "Banana", "Orange"]
console.log(fruits);
或用 unshift() 方法來新增一個元素到陣列最前面：
var fruits = ['Apple', 'Banana'];
fruits.unshift('Orange');
// 輸出 ["Orange", "Apple", "Banana"]
console.log(fruits);
刪除元素
你可以用 pop() 方法來移除陣列中的最後一個元素：
var fruits = ['Apple', 'Banana'];
// pop() 除了移除元素，還會返回移除的元素值
var last = fruits.pop(); // Banana
// 輸出 ["Apple"]
console.log(fruits);
用 shift() 方法來移除陣列中的第一個元素：
var fruits = ['Apple', 'Banana'];
// shift() 除了移除元素，還會返回移除的元素值
var first = fruits.shift(); // Apple
// 輸出 ["Banana"]
console.log(fruits);
delete 運算子可以用來刪除特定位置的元素，但它不會移除元素，只是將該位置的元素值變成 undefined：
var fruits = ['Apple', 'Banana', 'Orange'];
delete fruits[0];
fruits; // [undefined, "Banana", "Orange"]
迴圈呼叫陣列 (for loop Array Elements)
for 語法可以用來遍歷陣列中所有的元素。
var fruits = ['Apple', 'Banana', 'Orange'];
for (var i=0; i