前端開發工程師 - 02.JavaScript程序設計 - 第1章.基礎篇

時間 2019-12-19

標籤前端開發工程師 02.javascript javascript 程序設計基礎欄目 JavaScript 简体版

原文原文鏈接

第1章--基礎篇

JS介紹

html 網頁的內容；css 網頁的樣式；javascript 網頁的行爲javascript

i.e. hello worldcss

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        document.write("hello, world!");
    </script>
</body>
</html>

使用JS的兩種方法：html

1. <script>...</script>：見上例java

2. <script src="url/.js"></script>git

JS特性：web

運行環境：瀏覽器 -- 運行在瀏覽器中的代碼正則表達式

解釋型語言：不需編譯鏈接express

瀏覽器中的JS:編程

ECMAScript：語法規範數組

DOM (Document Object Model): 文檔對象模型，操做文檔的規範--見下一章節《DOM編程藝術》

歷史：

1995年Netscape Navigator 網景瀏覽器爲了解決表單問題設計了LifeScript，後更名爲JavaScript

1997年ECMAScript 1規範誕生

1998年W3C DOM規範誕生

...

2005年Ajax被普遍應用，web2.0時代到來（web應用）

...

JS調試

打開瀏覽器的調試面板：developor tools - Console面板

如何調試：

alert(var); -- 執行時瀏覽器彈窗顯示

Console.log(var); -- 在Console面板中輸出

實際開發：js調試器--Chrome--Developer tools--Source面板

Watch Expressions: 自定義觀察某變量

Call Stack：函數調用的堆棧

Scope Variables：局部變量和全局變量

Ctrl + o = 快捷查找文件

Ctrl + Shift + o = 快速查找函數

在正文顯示窗口右鍵選擇Evaluate in Console或按esc，可打開Console面板，嘗試直接輸出/修改某些變量:

在Console中輸入變量名便可輸出變量值，輸入變量名=值便可暫時改變變量值

基本語法

直接量： var number = 1/1.2/"hello world"/true/null/[]/{name:'js'}...;

變量：var name; var name1, name2...;

標識符：變量名、函數名、函數參數、對象名等

case-sensitive；以字母、下劃線或$開頭，以字母、下劃線、$和數字組成

關鍵字和保留字：標識符不能使用關鍵字或保留字

語句：分號結尾，但分號不是必須的。

賦值語句

條件語句

循環語句

with語句

異常捕獲語句

等

註釋：

單行註釋 //

塊級註釋 /* */

基本類型

數據類型：

原始類型：

Number：

整數：15, 0377(Oct), 0xff(Hex)

浮點數：1.2，1.4e2，1.4e-2

特殊值：NaN (Not a Number) -- 類型轉換時候使用

Infinity (1/0 or -1/0 -- negative infinity)

String："..." or '...'

Boolean：true/false (lowercase)

Null：值爲null，表示對象不存在

Undefined：值爲undefined，表示已聲明但未賦值的變量，或當獲取對象不存在的屬性時

引用類型：存放的爲指向數據的的ref

Object：無序的名值對的集合

i.e.

var cat = {
    name: 'kitty',
    age: 2,
    mew: function() {
        console.log('喵喵喵');
    }
}

var dog = new Object();

var obj1 = {a:1};
var obj2 = obj1;
obj2.a = 3;
// obj1.a = ? -- 3

類型識別：typeof

i.e.

var num;
typeof num; // Undefined

var num = 1;
typeof num; // Number

typeof '1.1'; // String

運算符與表達式

運算符：

一元操做符： ++ -- + -

算數操做符： + - * / %

關係操做符： > < >= <=

相等操做符： == != === !==

作==相等運算時，類型會自動進行轉換

i.e. var num = '4'; num == 4; // true (str 4->num 4)

0 == false; // true (false-->0)

2 == true; // false (true-->1)

'' == 0; // true (''-->0)

全等操做===：不作自動轉換

4 === '4'; // false

詳見JavaScript中的相等性判斷：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness

邏輯操做符：! && ||

!：

!0; // true

![]; // false

!""; // true

應用：求某變量的布爾值：!![];

&&：若前一個操做數爲false，則後一個操做數不會執行

|| ：若前一個操做數爲true，則後一個操做數不會執行

Q：var a = 0; var b = 0 || ++a; //a和b的值？

A：// a = 1, b = 1

Q：!false && [];

A：// [] (!false爲true，&&運算的前一個操做數爲true，則返回後一個操做數[] )

賦值操做符： = += -= *= /= %=

條件操做符： __?__ : __;

逗號操做符：在同一個語句中作多個操做 i.e. var num1=5, num2=6;

對象操做符：

new: 獲取對象實例 var cat = new Object();

delete：刪除對象的一個屬性 delete cat.name;

.：獲取對象的屬性值 cat.name;

[]：獲取對象的屬性值 cat['name'];

instanceof：判斷某個變量是否爲某個對象的實例，返回布爾值

in：判斷某個屬性是否在某個對象中，返回布爾值 'name' in cat; // true

位操做符： ~ & | ^ << >> >>>

i.e. var num = 8; num & 4; // 0 (位操做會先將操做數轉化爲32位二進制)

var num = 2; num << 2; // 8

操做符優先級：詳見https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

表達式：

i.e. 5

5 + 4

(5 + 4) || false

語句

條件語句：

if else

switch

循環語句：

while

do-while

for

for in:

for (屬性名 in 對象) {...} // 遍歷對象中的屬性名

循環控制：break; / continue;

with：對同一個對象進行屢次操做時，用with將做用域變成該對象

with (表達式) {語句}

var kitty = {
    age: 3;
    friend: {
        name: 'snoopy',
        age: 2,
    }
}

document.write(kitty.friend.name + ":" + kitty.friend.age);
// 使用with簡化
with(kitty.friend) {
    document.write(name + ":" + age);
}

異常捕獲語句：try catch finally

數值

數值：i.e. 163/ 3.14/ 2.5e11/ 0x1ffa/

運算：

+-*/

Math.abs(x)

Math.round(x) // 四捨五入取整

Math.ceil(x) // 向上取整

Math.floor(x) // 向下取整

Math.max/min ( [value1 [, value2 [, ...]]] )

Math.random() // [0, 1)

Math.sin/cos()

Math.exp(x) // e^x

Math.log(x)

Math.sqrt(x) // 平方根

Math.pow(x, y) // x^y

到數值的轉換：

parseInt(String); // 直接取整

parseInt('1.1'); // 1

parseInt('12s1.a'); // 12，忽略非數字之後的全部數值

parseInt('www'); // NaN (Not a Number)

parseFloat(String);

parseFloat('100.1'); // 100.1，其餘狀況同parseInt()

Number(value);

Number('100.1'); // 100.1

Number('12.1b45); // NaN

number.toFixed(digit); // 保留digit位小數

(100.123).toFixed(2); // 100.12

字符串

兩種形式表達： " " / ' '

字符串長度：str.length // 屬性

從html中得到字符串：var userName = input.value; // 詳見下例

str.charAt(index); // return the char at index (index starts at 0)

str.indexOf(string [, fromIndex] ); // return the index of the first char found

"micro-major-web".indexOf("-"); // 5

"micro-major-web".indexOf("major"); // 6

"micromajor".indexOf("-"); // -1

str.search(regexp); // return the index of the first char in the first matched string

str.match(regexp); // return string(s) that matched the regexp as an array, null if none matches

"micromajor163".match(/[0-9]/); // ["1"]

"micromajor163".match(/[0-9]/g); // ["1", "6", "3"]

str.replace(regexp | substr, newSubstr | function);

"micromajor163".replace(/[0-9]/, "#"); // "micromajor#63"

"micromajor163".replace(/[0-9]/g, "#"); // "micromajor###"

"micromajor163".replace(/[0-9]/g, ""); // "micromajor"

str.substring(indexA [,indexB]);

"micromajor".substring(5); // "major"

"micromajor".substring(5,7); // "ma", from 5th(inclueded) to 7th(excluded)

str.slice(beginSlice [, endSlice]);

"micromajor".slice(5); // "major"

"micromajor".slice(5,7); // "ma", from 5th(inclueded) to 7th(excluded)

-- what is the diff btw .substring() and .slice()?

"micromajor".slice(1, -1); // "icromajo"，-1: 倒數第一個(excluded)

"micromajor".slice(-3); // "jor"

while negative param in .substring() will be considered as 0

str.substr(start [,length]);

"micromajor".substr(5, 2); // "ma"

"micromajor".substr(5); // "major" -- in this case, it is the same as .substring();

str.split( [separator] [,limit] ); // return an array of substrings

// separator can be regular expression

"micro major".split(" "); // ["micro", "major"]

"micro major".split(" ", 1); // ["micro"]，need 1 substring only

str.toLowerCase()/ str.toUpperCase();

str1 + str2 --> str1str2

String()：和Number()相似--轉換成字符串

String(163); // "163"

String(null); // "null"

轉義字符：\

"micro\"major"; // "micro"major"

"micro\tmajor"; // "micro major"

對象

建立對象方法：

1. var name = new Ojbect();

2. var name = {...};

對象的屬性和方法：

定義

color: "red", // key value pair--屬性

run: function() {..}, // 方法

訪問：

car.color;

car["color"];

car.run();

car["run"]();

增長：

car.type = "suv";

car.stop = function() {...};

修改：

car.color = "white";

car.run = function() {...};

刪除：

delete car.color;

obj.constructor：獲取某個對象的構造函數

car.constructor; // Object

var num = new Number(123); num.constructor; // Number

obj.toString()：將對象轉成字符串

obj.valueOf()：獲取對象的原始值

var num = new Number(123); num.valueOf(); // 123

obj.hasOwnproperty(property_name)：返回是否擁有該屬性 (經過繼承獲得的屬性不算，即便能夠訪問到)

car.hasOwnProperty("color"); // true

數組

NB: JS的數組中的元素類型能夠不一樣

建立數組：

var array = new Array();

var array = [];

var array = [1 ,6, 3];

屬性和方法：

arr.length

arr[index] 獲取數組元素

arr[index] = ... 修改數組元素

arr.indexOf (element [,fromIndex] ) 返回元素所在index，返回-1如沒有

arr.forEach (callback [, thisArg] ) traverse the whole array，callback: function, thisArg: replace this in callback)

i.e. 對callback函數的arguments是有要求的：三個值 (元素, 索引, array)

var students = [
    {id:1, score:80},
    {id:2, score:50},
    {id:3, score:70}
];

var editScore = function (item, index, array) {
    item.score += 5;
};

students.forEach (editScore);

arr.reverse(); // 倒序結果覆蓋了arr自己

arr.sort( [compareFunction] ) // 排序結果覆蓋了arr自己

i.e. 對compareFunction的arguments是有要求的，兩個值 (a, b)

對返回值的要求爲：若大於0則調換a和b的順序

var sortingByScore = function (a, b) {
    return b.score - a.score;
};

students.sort(sortingByScore);

compareFunction不傳入時，按Unicode編碼順序排序

arr.push( element , ... elementN ) // 在數組最後加入新元素

arr.unshift( element , ... elementN ) // 在數組開頭加入新元素

arr.shift() // 獲取數組第一個元素並在數組中刪除

arr.pop() // 獲取數組最後一個元素並在數組中刪除

arr.splice( index, howMany [, ele1 [, ...eleN]] ); // 從第index個開始替換howMany個元素爲ele1~eleN

若沒寫element，則爲刪除

若howMany爲0，則爲插入

i.e. students.splice(1,1, {id:4, score:90});

NB. reverse/ sort/ push/ unshift/ shift/ pop/ splice 均改變了原來的數組

arr.slice( begin [, end] ) 複製從begin到end(excluded)的元素as a new array

i.e. var newStudents = students.slice(0,2);

arr.concat( value, ... , valueN) 鏈接多個array (也能夠是元素)

var allStudents = students1.concat(students2, students3);

arr.join( [separator] ) 將數組個元素用separator鏈接起來

若separator不填，則默認用逗號；若separator爲""，則無鏈接符

var emails = [ "111", "222", "333"]; emails.join(";"); // "111;222;333"

實例：修改原數組並保留原數組的備份

var scores = [60, 70, 80, 90];
var newScores = [];
var addScore = function(item, index, array) {
    newScores.push(item+5);
}
scores.forEach(addScore);
newScores;  // [65, 75, 85, 95]

→可用arr.map( callback [, thisArg] ); 實現徹底相同的效果。

var scores = [60, 70, 80, 90];
var addScore = function(item, index, array) {
    return item+5;
}
var newScores = scores.map(addScore);  // [65, 75, 85, 95]

arr.reduce( callback, [initialValue] )

i.e. 對callback的arguments是有要求的，四個值 (previousResult, item, index, array).

第一次的previousResult爲initialValue

var sum = function(previousResult, item, index, array) {
    return previousResult + item.score;
};
students.reduce(sum, 0);　　// initial value = 0

NB. slice/ concat/ join/ map/ reduce 沒有修改原數組

函數

定義：

方法1：函數聲明

function func_name (argument1, argument2, ... ) {

...

}

方法2：函數表達式：將匿名函數賦值給一個變量

var func_name = function (argument1, argument2, ... ) {

...

}

調用：

func_name (param1, param2, ... );

JS函數注意點：

1. 調用函數時，有一個隱藏變量arguments用於存放實參列表的值，和數量length

實參數量少於形參時，未定義的形參爲undefined

實參數量多於形參時，可從arguments中獲得多餘的實參值。

實例：寫一個參數數量不定的求和函數

function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

2. 函數參數的類型

函數參數爲基本類型時：值傳遞

函數參數爲對象時：對象的引用傳遞

3. 做用域：

即便函數外定義的變量，函數內也可被使用

<script>
    var matt = {
        name = "Matt",
        gender = 1;
    };
    function class1 () {
        matt.name = "Matthew";
    }
    class1();
    console.log(matt);    // "Matthew"
</script>

4. 構造函數（和建立類的思想類似）

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.move = function(stepX, stepY) {
        this.x += stepX;
        this.y += stepY;
    }
}
var point = new Point(1,1);　　// 調用構造函數Point(x, y);

進入構造函數時，構造了一個空對象 {}

this.x = x; // 給該空對象增長屬性x，並賦值爲實參的值x；

默認返回值 return this;

--> 4中，若建立多個point，每一個point中都會有一個move()方法--duplication--solution：原型

5. 原型 prototype -- 公共的給構造對象使用的函數

function Point(x, y) {
    this.x = x;
    this.y = y;
}
point.prototype.move = function(stepX, stepY) {
    this.x += stepX;
    this.y += stepY;
};

此時，如有var point = new Point(1,1); 會建立對象 {x:1, y:1} 不包含move function，

但依然可使用.move(); 由於Point中有一個隱藏屬性是指向prototype.move()的

Date

建立日期：

new Date(); // 當前日期

new Date( year, month [,day [,hour [,minutes [,secondes [,milliseconds]]]]] )

i.e. new Date(1978, 11); // 1978-12-01 00:00:00

i.e. new Date(2012, 11, 5); // 注意：2012年12月5日（月份從0開始）

獲取屬性：

date.getXXX();

i.e. date.getFullYear(); // year

date.getMonth(); // month: start at 0

date.getDate(); // day

date.getHours();

date.getMinutes();

date.getSeconds();

設置屬性：

date.setXXX();

i.e. aaa.setMonth(2); // 3月

注意，自動轉化爲標準格式

i.e. date.setHours(100); // 會將100h轉化爲天數並加到Date上。

應用：求某月份天數

hint: new Date(2001, 5, 0); -->2001-05-31

格式化：

var date = new Date(2015, 7, 20, 1, 57, 18);

date.toString(); // Thu Aug 20 2015 14:57:18 GMT+0800(中國標準時間) -- 不是須要的格式

function format(date) {
    return date.getFullYear() + '-'
    + padding(date.getMonth() + 1) + '-'
    + padding(date.getDate()) + ' '
    + padding(date.getHours()) + ':'
    + padding(date.getMinutes()) + ':'
    + padding(date.getSeconds());
}
function padding(number) {
    return (number<10) ? ('0' + number) : ('' + number);
}

Date->Number：

date.getTime(); // 距1970-1-1 00:00:00的毫秒數

Number->Date：

new Date(value);

i.e. new Date(milliseconds);

若已建立Date，則date.setTime(milliseconds);

RegExp

正則表達式：描述字符串規則的表達式

i.e. 網易郵箱正則表達式：/^(.+)@(163|126|188)\.com$/

錨點：匹配一個位置

^ 起始位置：i.e. /^http:/

$ 結尾位置：i.e. /\.jpg$/

\b 單詞邊界：i.e. /\bis\b/.test('this'); // false

字符類：

i.e. [0-9] 一個數字

[^0-9] 非數字的一個字符

[a-z] 一個小寫字母

. 任一字符（換行除外）

元字符：具備特殊意義的字符

剛纔的 ^ $ \b

\d [0-9] \D [^\d]

\s 空白符 \S [^\s]

\w [A-Za-z0-9] \W [^\w]

量詞：出現的次數

{m, n} 次數m~n

* 次數>=0

+ 次數0/1

? 次數>=1

轉義符：須要匹配的字符是元字符時使用轉義符

\/ \. \^ \$

多選分支：

( ... | ... )

i.e. /thi(c|n)k/ 或 /thi[cn]k/ -->字符類是每個分支都是一個字符的多選分支

/\.(png|jpg|jpeg|gif)$/

捕獲：保存匹配到的字符串，往後再用

() 捕獲

(?:) 不捕獲 i.e. /@(?:163|126|188)\.com$/

使用捕獲的內容：$1, $2...，或使用str.match(regexp)，詳見下

建立：

方法1. /pattern/attrs i.e. /123abc/i

方法2. new RegExp(pattern, attrs);

經常使用方法：

regexObj.text(str); 測試regex與指定字符串是否匹配或包含相同substring，返回boolean

i.e.

<body>
    <input type="text" onblur="check(this)" onfocus="reset(this)">
    <script>
        function check(mobileInput) {
            var value = mobileInput.value;
            if (!/[0-9]{11}/.text(value)) {
                mobileInput.style.borderColor = 'red';
            }
        }
        function reset(mobileInput) {
            mobileInput.style.borderColor = '';
        }
    </script>
</body>

str.match(regexp); 獲取匹配的字符串

i.e. 路徑 http ://blog.163.com /album ?id=1 #comment

protocol host pathname search hash

var url = 'http://blog.163.com/album?id=1#comment';
var reg = /^(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?$/;
var arr = url.match(reg);
var protocol = arr[1];
var host = arr[2];
var pathname = arr[3];
var search = arr[4];
var hash = arr[5];

arr[0] 爲整個url

str.replace(regexp/substr, replacement)

替換一個子串

i.e. "The price of tomato is 5." --> "The price of tomato is 5.00."

var str = "The price of tomato is 5, the price of apple is 10.";
str.replace(/(\d+)/g, '$1.00');  // The price of tomato is 5.00, the price of apple is 10.00.

i.e. replacement能夠是函數

題目：在網頁中顯示源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replace</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        var container = document.getElementById('container');
        var html = '<label>網址:</label><input placeholder="以http://起始">';
        html = html.replace(/[<>]/g, function(m0) {
            switch(m0) {
                case "<":
                    return "&lt;";
                case ">":
                    return "&gt;";
            }
        });

        container.innerHTML = html;
    </script>
</body>
</html>

regexpObj.exec(str) 更強大的檢索功能（不多用）

更詳盡的結果，包括index

過程的狀態，lastIndex

i.e.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exec</title>
</head>
<body>
    <script type="text/javascript">
    var reg = /(.)(/d+)/g;
    var scores = "Tom $88, Nicholas ￥234, jack $38.";
    var result;
    while(result = reg.exec(scores)) {
        console.log(result);
        console.log(reg.lastIndex);
    }
    </script>
</body>
</html>

匹配的部分匹配的每一個捕獲分別顯示從第幾個index開始匹配（該例中爲'$', index=4）

lastIndex表示下一個搜索開始的位置（該例中爲 ',' index=7)

每次循環後，能夠將lastIndex手動修改，即修改了下一次搜索開始的位置

JSON

問題：如何將var jerry = { name:"jerry", age:1 }; 轉化成字符串呢

答：經過"" + jerry; 或經過jerry.toString(); 嗎？

不行，結果爲 '[object Object]'

那怎麼作呢？ JSON.

JSON: JavaScript Object Notation

JS對象：；JSON表示

i.e. 在瀏覽器中打開網易雲音樂的頁面，打開審查元素，Network，選中XHR，左邊選中comment的csrf_token...選擇Response，顯示出的即爲JSON格式的數據。將數據拷貝到sublime中，爲很長的一行數據，使用命令HTMLPrettify如沒有請安裝該plugin，便可查看該JSON數據。

經常使用方法：

JSON.parse(text [,reviver])

JSON數據 -> JS數據

<script type="text/javascript">
    var userJson = '{\
        "id":1,\
        "nick":"春鳥秋蟲",\
        "avatar":"1.jpg",\
        "tags":null,\
        "authed":false\
    }';    // JSON string
    var user = JSON.parse(userJson);
    debugger
</script>

進入瀏覽器調試，Watch -- user: Object, 屬性跟JSON文件描述的相同

function reviver的用法：

<script type="text/javascript">
    var userJson = '{\
        "id":1,\
        "nick":"春鳥秋蟲",\
        "avatar":"1.jpg",\
        "tags":null,\
        "authed":false\
    }';    // JSON string
    var user = JSON.parse(userJson, function(k, v) {
        if (k === 'avatar') {
            // 給avatar加了前綴
            return 'http://music.163.com/img/' + v;
        }
        return v;
    });
    debugger;
</script>

IE六、IE7不支持parse方法：本身在JSON中建立parse()

<script type="text/javascript">
    if (window.JSON) {
        parse: function(sJSON) {
            return eval ('(' + sJSON + ')');
        }
    }
</script>

JSON.stringify(value [, replacer [, space]])

JS --> JSON

<script type="text/javascript">
    var user = {
        id:1,
            nick:"春鳥秋蟲",
        avatar:"1.jpg",
        tags:null,
        authed:false
    };    // Object
    var userJson = JSON.stringify(user);
</script>

獲得的userJson爲JSON類型數據

replacer--預處理（少用）

例：只選擇部分屬性作轉化

<script type="text/javascript">
    var user = {
        id:1,
        nick:"春鳥秋蟲",
        avatar:"1.jpg",
        tags:null,
        authed:false
    };    // Object
    var userJson = JSON.stringify(user, ['id', 'nick', 'avatar']);
</script>