Javascript自學筆記 (5)

Web開發 Javascript
1

不是基本類型者（Number, Boolean, String）為複雜類型
Object：一個名稱對應一個值的資料集合（key-value pair）
Array：有順序的資料集合

Object物件

  1. Object 為鍵值對（key-value pair）的資料型態
  2. 一個屬性名稱對應一個屬性值
  3. 也稱為hash table
  4. 「屬性名稱」為字串，定義時不應重複，否則會發生覆蓋
  5. Object 的功能通常用來當作「字典」
  6. 其 key-value pair 的 value 也可以是 function，而成為有「方法」的物件
  7. Object 的特性是一個屬性名稱對應一個屬性值，重點不是順序，無需理會名稱的順序
const obj1 = { a: 12, d: 'dog', b: true };
console.log(obj1);
// {a: 12, d: "dog", b: true}
const obj2 = { a: 12, d: 'dog', b: true, a: 56 }; // 重複使用相同的key
console.log(obj2);
// {a: 56, d: "dog", b: true}

const obj = { a: 12, d: 'dog', b: true };
const obj2 = {
    "a": 12,
    "d": 'dog',
    "b": true,
};
obj['m'] = 'monkey'; // 中括號表示法
obj.t = 'tiger'; // 點表示法
delete obj.d; // 用 delete 刪除
console.log(obj);
// {a: 12, b: true, m: "monkey", t: "tiger"}
// 中括號表示法不可創建沒有的Key；點表示法可以創建沒有的key

物件是㇐組相關聯的數據或者功能的集合，它會包含有：

  • 「屬性」（properties）
  • 「方法」（methods）

物件包含屬性與方法
JavaScript 內大多數東西，均是透過宣告設定變數來建立物件

建立物件

在JavaScript中，我們可以透過 {} 符號很輕易地建立出物件：

var person = {}; //但這只是個空物件

我們可以為物件新增不同數據型態的內容，例如：

var person = {
    name : “黃曉明”, //字串型態
    age: 27, //數字型態
    speak: function(){ //函式型態
        alert(“hi! 你好”);
    }
}

屬性：name, age
方法：alert
其中，匿名函數：

function(){ //函式型態
    alert(“hi! 你好”);
}

物件中每個屬性與方法是用 , 來分隔
注意不要在最後㇐個物件上加上 ,，JavaScript會因此出現錯誤

物件導向

  • 物件導向程式設計Object Oriented Programming, OOP
    • 是種具有物件概念的程式程式設計典範，同時也是㇐種程式開發的方針。
    • 將軟體想像成由㇐群物件交互合作所組成
  • JavaScript、Java、C#、Python等主流程式語言都支援物件導向程式設計
  • JavaScript 本身即是㇐種物件導向程式設計
    • 以雛型/原型(Prototype-based)為基礎，不使用類別的物件導向程式設計
    • 但部分開發者認為JavaScript不能稱為物件導向程式語言
  • OOP的優點：
    • 更有彈性且易維護
    • 強調模組化，可更直接分析、編寫、理解複雜的情況與程序

物件表達式

for…in迴圈

for...in 迴圈只迭代可列舉屬性。由內建建構式(如：Array、Object) 製造的物件，從 Object.prototype 和 String.prototype 繼承了不可列舉屬性，如： String 的indexOf 方法，或 Object 的 toString 方法。 迴圈將迭代全部可列舉屬性，包括了物件自身的和物件繼承自它的建構式之原型的可列舉屬性。(原型鏈上較接近物件的屬性覆蓋原型的屬性)

語法

for (變數 in 物件) {…
}

範例

var o = {a:1, b:2, c:3};

function show_props(obj, objName) {
  var result = "";
    
  for (var prop in obj) {
    result += objName + "." + prop + " = " + obj[prop] + "\n";
  }
    
  return result;
}

alert(show_props(o, "o")); /* alerts (in different lines): o.a = 1 o.b = 2 o.c = 3 */

for…of迴圈

for … of 是 ES6 的新增的語法

for...of语句 在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

語法

for (variable of iterable) {
    //statements
}

範例

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

迭代String

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

迭代 TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Array

Mozilla說明教學文件
陣列是處理一連串資料(可以是不同的資料型態)，在JavaScript的寫法是用中括號包起來，[]

var colors=['red', 'green', 'blue'];

也可使用Array建構子建立陣列

var colors=new Array('red', 'green', 'blue');

也可以使用函數建立Array

var colors=Array('red', 'green', 'blue');

其中，以上的陣列長度皆為3

可以使用下列的語法取得陣列長度：

colors.length

Array的方法

Array的方法 說明
concat(陣列) 和某陣列串接建立新的陣列。
indexOf(元素值, [索引]) 取得元素值的索引，若找不到該元素值回傳 -1。
join([黏著符號]) 陣列以黏著符號串接為字串。
lastIndexOf(元素值) 由尾端取得元素值的索引，若找不到該元素值回傳 -1。
pop() 彈出，從尾端取出一元素值。
push(元素值) 推入，從尾端加入一元素值。
reverse() 陣列順序反轉。
shift() 從前端取出一元素值。
slice(索引B, 索引E) 由索引B到索引E複製部份陣列（不包含索引E）。
sort() 排序。
splice(索引, 刪除量, [加入]) 插入、刪除、替換元素。
unshift(元素值) 從前端加入一元素值。

排序是以字串（unicode字碼）為順序。

const str = '到底需要日曬多久才能幫助人體獲得足夠的維生素D';
const ar = str.split('');
ar.sort();
console.log(ar);
const br = [35, 6, 78, 12, 54, 9];
br.sort();
console.log(br);

自訂排序規則，數值由小到大：

const br = [35, 6, 78, 12, 54, 9];
br.sort(function (a, b) {
return a - b; // 正值對調
});
console.log(br);

自訂排序規則：

let people = [
    { name: "David", age: 25 },
    { name: "Carl", age: 28 },
    { name: "Bill", age: 31 },
];
people.sort(function (a, b) {
    return b.age - a.age;
});
console.log(people);

image

indexOf()

從左邊找資料，找的到就回傳索引值，找不到就回傳-1

arr.indexOf(searchElement[, fromIndex])

lastIndexOf()

從右邊找資料，找的到就回傳索引值，找不到就回傳-1

arr.lastindexOf(searchElement[, fromIndex])

push

push() 方法會添加一個或多個元素至陣列的末端，並且回傳陣列的新長度。
語法

push(element1[, ...[, elementN]])

範例

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

pop

pop() 方法用于删除并返回数组的最后一个元素。
語法

arrayObject.pop()

範例：

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

reverse()

reverse() 方法會*原地（in place）* 反轉（reverses）一個陣列。陣列中的第一個元素變為最後一個，而最後一個元素則變成第一個。

語法

array.reverse()

範例

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

shift()

shift() 方法會移除並回傳陣列的第一個 元素。此方法會改變陣列的長度。

語法

array.shift()

範例

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

splice

splice() 方法可以藉由刪除既有元素並／或加入新元素來改變一個陣列的內容。

語法

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

範例

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

join

join() 方法會將陣列（或一個類陣列（array-like）物件）中所有的元素連接、合併成一個字串，並回傳此字串。

語法

array.join([separator])

範例

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

slice

slice() 方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end （不含 end ）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。

語法

array.slice([begin[, end]])

範例

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

Array總結

  • 陣列(Array)可將多個元素集合起來，方便存取大量數據
  • 使用[]創建陣列
  • 陣列的索引值從0開始計算
  • 使用length屬性獲得陣列⾧度
  • 使用indexOf()獲得陣列元素的索引值
  • 使用push()、pop()改變陣列元素
  • 使用join()、 slice()產生新的陣列或新的值