原生javascript基礎知識點（2）複習與回顧

標籤：javascript   封裝   資料   new   

常用對象

上節課有提到引用對象，並大致的講了一下。這裡再選取其中3種稍微詳細的講一下。

Object

對象，其內容形式為索引值對，主要用來儲存和封裝。

建立對象

建立一個對象有兩種常見方式，通過對象字面量 {} 或者 new 操作符。如下：

var obj = {};var obj2 = new Object();

對象內容的索引值對中，值可以是各種類型的資料，如：

var obj = {    key1: ‘string value‘,    key2: 123,    key3: {},    key4: [],    key5: function () {}};

擷取和設定屬性值

擷取對象的某個屬性可以通過 . 操作符或者 [] 操作符來實現，如對於上面那個對象：

console.log(obj.key1); // "string value"console.log(obj[‘key2‘]); // 123

這兩種方式的區別在於後者會把其內部的運算式進行計算後的值作為索引，而前者會直接將後面的內容作為索引：

var str = ‘key1‘,    str2 = ‘key‘;console.log(obj.str); // undefinedconsole.log(obj[str]); // "string value"console.log(obj[str2]); // undefinedconsole.log(obj[str2 + ‘1‘]); // "string value"

對於設定屬性值，即直接對某個屬性進行賦值操作即可，如：

obj.key6 = ‘test‘;obj[‘key7‘] = ‘test2‘;var str3 = ‘key8‘;obj[str3] = ‘test3‘;

Array

數組，類似於對象的一種存放資料的結構，不過其內容是有順序的通過下標來訪問，而不是無序的索引值對。

建立數組

建立一個數組有兩種常見方式，通過數組字面量 [] 或 new 操作符。如下：

var arr = [];var arr2 = new Array();

數組內資料可以是各種類型的資料，如：

var arr = [    ‘string‘,    123,    [],    {},    function () {}];

擷取和設定內容

類似於對象的索引，數組通過 [] 操作符來擷取和設定內容，只是索引換成了下標。數組的下標從 0 開始依次增加，如對於上面的數組：

console.log(arr[0]); // "string"console.log(arr[1]); // 123console.log(arr[100]); // undefined

設定內容即用類似的方式對數組內容進行賦值。不過當下標大於數組長度的時候，會自動擴充數組的長度到可以容納的大小。如：

arr[0] = ‘test‘;console.log(arr.length); // 5arr[9] = ‘test2‘;console.log(arr.length); // 10

Function

函數即一個用來封裝內容的容器。

建立函數

有兩種方式建立函數，命名函數和匿名函數：

function f() {    // code}var f2 = function () {    // code}

函數最終的作用取決於其中的代碼，如下面這個函數的作用即輸出一行字串：

function fun() {    console.log(‘hello world‘);}

調用函數

通過 函數名() 的方式調用某個函數。如上面的函數：

fun(); // "hello world"

函數的傳回值

傳回值即調用函數後會得到的一個結果值。通過 return 關鍵字可以設定函數的傳回值。預設傳回值為 undefined。

console.log(fun()); // undefinedfunction fun2() {    return 123;}console.log(fun2()); // 123

參數

參數即外部傳遞給函數的一些可以使用的變數。在申明函數時，括弧中可以添加參數。如：

function sum(var1, var2) {    return var1 + var2;}console.log(sum(1, 2)); // 3

在函數內部有個自動建立的數組，叫 arguments，其中包含了所有調用函數時傳入的參數，如：

function arg() {    console.log(arguments);}arg(1, 23, ‘test‘); // [1, 23, ‘test‘]

在一些傳入參數不確定的情況下，這個數組非常有用。

小練習

1. 建立一個函數 add，作用是對於傳入的數字自動加一併返回。
2. 建立一個函數 concat，作用是連結傳入的兩個字串。

流程式控制制

程式設計語言裡流程式控制制是一件很重要的事情，其中包括判斷、迴圈等。特別是我們在設計程式的時候，一個清晰的流程圖能讓後續開發輕鬆很多。

if

即對某個條件進行判斷，當其為真時做某件事情，當其為假時做另一件事情：

/*if (Condition) {    do some stuff} else {    do some stuff}*/var score = 100;if(score > 90) {  console.log(‘優秀‘);} else if (score > 60) {  console.log(‘良好‘);} else {  console.log(‘不及格‘);}

switch

對某個運算式進行判斷，並分支處理。相對於多個並列的 if 寫起來更簡單：

/*switch (Expression) {    case Condition or value:        do some stuff;        break;    default:        do some default stuff}*/switch (true) {    case score >= 90:        console.log(‘優‘);        break;    case score >= 70:        console.log(‘良‘);        break;    default:        console.log(‘差‘);}

for

用條件判斷來控制迴圈處理某些事情。

/*for (A;B;C) {    do some stuff}其中 A 為初始化的內容，B 為迴圈的判斷條件，C 為每次迴圈執行後會執行的代碼*/for (var i = 0; i < 10; i++) {    console.log(i);}

while

用條件判斷來控制迴圈處理某些事情。

/*while (Condition)    do some stuff}Condition 即為迴圈的判斷條件*/var i = 0;while (i < 10) {    console.log(i);    i++;}

do while

用條件判斷來控制迴圈處理某些事情。和 while 的區別在於，先執行 do 裡的代碼，再判斷條件。即最少會執行一次do 的內容。

/*do {    do some stuff} while (Condition);Condition 即為迴圈的判斷條件*/var i = 0;do {    console.log(i);    i++;} while (i < 10);

for in

用於遍曆對象中的所有索引。如：

var obj = {    key1: ‘value1‘};for (var item in obj) {    console.log(‘Key=‘ + item + ‘ Value=‘ + obj[item]);}

break

用於跳出最近的結構體。如結束迴圈、跳出 switch：

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

continue

用於結束本次迴圈，直接進入下一次迴圈，如：

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

原生javascript基礎知識點（2）複習與回顧