前端(三)-JavaScript

1、基本語法

1.1 引入JavaScript

1.1.1行內引入

<input type="button" value="https://www.cnblogs.com/xiaoqigui/p/輕輕點我一下" onclick="javascript:alert('正在學習Javascript!')">

1.1.2 內部引入

<script type="text/javascript">
    function testClickTwo(){
        alert("正在學習JavaScriptTwo")
    }
</script>

<input type="button" value="https://www.cnblogs.com/xiaoqigui/p/輕輕點我一下Two" onclick="testClickTwo()">

1.1.3 外部引入

<!-- 引入外部js腳本檔案 -->
<script src="https://www.cnblogs.com/xiaoqigui/p/js/test.js" type="text/javascript"></script>

1.2 資料型別和變數

typeof

查看資料型別；

number 的注意點

• NaN; NaN表示Not a Number，當無法計算結果時用NaN表示 ;
• Infinity; Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就 表示為Infinity;

1.3 strict模式

JavaScript在設計之初，為了方便初學者學習，并不強制要求用 var 申明變數，這個設計錯誤帶來了 嚴重的后果：如果一個變數沒有通過 var 申明就被使用，那么該變數就自動被申明為全域變數；

為了修補JavaScript這一嚴重設計缺陷，ECMA在后續規范中推出了strict模式，在strict模式下運行的 JavaScript代碼，強制通過 var 申明變數，未使用 var 申明變數就使用的，將導致運行錯誤，

<!--啟用strict模式的方法是在JavaScript代碼的第一行寫上：-->
<script>
    `use strict`;
    // 如果瀏覽器支持strict模式，下面的代碼將報ReferenceError錯誤:
    abc = 'Hello, world';  //沒有使用var宣告變數
    console.log(abc);
</script>

1.4 字串

1.4.1 多行字串

由于多行字串用 \n 寫起來比較費事，所以最新的ES6標準新增了一種多行字串的表示方法，用反 引號 ``表示：

`這是一個
多行
字串`;

1.4.2 模板字串(注意模板字符的放多行字串號``反引號里面才可以)

ES6新增了一種模板字串，表示方法和上面的多行 字串一樣，但是它會自動替換字串中的變數：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);

1.4.3 常用方法

1.5 陣列

JavaScript的 Array 可以包含任意資料型別，并通過索引來訪問每個元素，

1.5.1 初始化

//定義陣列1：var 陣列名 =new Array([長度]),長度可以省略
var varArray1 = new Array();
//訪問陣列元素
varArray1[0] = "LPL";
varArray1[1] = "LCK";
varArray1[3] = "LEL";
console.log(varArray1);

//定義陣列2,支持直接初始化
var varArray2 = new Array(10,20,30,40,50);
varArray2[5] = 60;
console.log(varArray2);

//定義陣列3：直接支持使用中括號
var varArray3 = [100,90,80];
console.log(varArray3);

1.5.2 常用方法

1.6 物件

JavaScript的物件是一種無序的集合資料型別，它由若干鍵值對組成，

1.6.1 定義一個物件

var 物件名 = {
    key: 'value',
    key: 'value',
    key: 'value'
}

1.6.2 獲取物件的屬性

物件.屬性

1.6.3 由于JavaScript的物件是動態型別，你可以自由地給一個物件添加或洗掉屬性：

var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
delete xiaoming.age; // 洗掉age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 洗掉name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 洗掉一個不存在的school屬性也不會報錯

如果我們要檢測物件是否擁有某一屬性，可以用 in 運算子：

var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不過要小心，如果用 in 判斷一個屬性存在，這個屬性不一定是 這個物件的，它可能是這個物件繼承得 到的：

1 'toString' in xiaoming; // true
//因為 toString 定義在 object 物件中，而所有物件最終都會在原型鏈上指向 object，所以xiaoming 也擁有 toString 屬性，

要判斷一個屬性是否是 xiaoming 自身擁有的，而不是繼承得到的，可以用 hasOwnProperty() 方法：

var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

1.7 流程控制

1.7.1 if

1.7.2 for

for ... in ， 它可以把一個物件的所有屬性依次回圈出來：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由于 **Array 也是物件**，而它的每個元素的**索引被視為物件的屬性**，所以**遍歷出來是下標**；

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}
//請注意，for... in 對 Array 的回圈得到的是 String 而不是 Number ，

1.7.3 while

1.8 Map 和Set

1.8.1 Map

Map 是一組鍵值對的結構，具有極快的查找速度，

1.8.1.1初始化

//初始化 Map 需要一個二維陣列，或者直接初始化一個空 Map;
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 洗掉key 'Adam'
m.get('Adam'); // undefined

//由于一個key只能對應一個value，所以，多次對一個key放入value，后面的值會把前面的值沖掉：

1.8.2 Set

Set 和 Map 類似，也是一組key的集合，但不存盤value，由于key不能重復，所以，在 Set 中， 沒有重復的key;

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3,3,'3']); // 含1, 2, 3,'3'
//重復元素在 Set 中自動被過濾：3
//通過 delete(key) 方法可以洗掉元素：

1.9 Iterable

遍歷 Array 可以采用下標回圈，遍歷Map 和 Set 就無法使用下標， 為了統一集合型別，ES6標準引入了新的 iterable 型別，Array，Map，Set 屬于； 具有 iterable 型別的集合可以通過新的 for ... of 回圈來遍歷，

更好的方式是直接使用 iterable 內置的 forEach 方法，它接收一個函式，每次迭代就自動回呼該 函式，

1.9.1 Array

var a = new Array(元素...);
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array物件本身
    console.log(element + ', index = ' + index);
})

1.9.2 Map

Map 的回呼函式引數依次為 value 、 key 和 map 本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
	console.log(value);
});

1.9.3 set

Set 沒有索引，因此回呼函式的前兩個引數都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
	console.log(element);
});

2、互動彈窗

3、函式

3.1 常用系統函式

3.2 自定義函式

3.2.1定義函式

方式1

function abs(x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
}
//一旦執行到 return 時，函式就執行完畢，并將結果回傳，
//如果沒有 return 陳述句，函式執行完畢后也會回傳結果，只是結果為 undefined ，

方式2

var abs = function (x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
};
//在這種方式下， function (x) { ... } 是一個匿名函式，它沒有函式名，但是，這個匿名函式賦值給了變數 abs ，所以，通過變數 abs 就可以呼叫該函式，
//上述兩種定義完全等價，注意第二種方式按照完整語法需要在函式體末尾加一個 ; ，表示賦值陳述句結束，

3.3兩個重要點

3.3.1arguments 關鍵字

JavaScript還有一個免費贈送的關鍵字 arguments ，它只在函式內部起作用，并且永遠指向當前函式 的呼叫者傳入的所有引數，

function foo(x) {
console.log('x = ' + x); // 10
for (var i=0; i<arguments.length; i++) {
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30)

3.3.2 rest 引數

function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 結果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 結果:
// a = 1
// b = undefined
// Array []

rest引數只能寫在最后，前面用 ... 標識，從運行結果可知，傳入的引數先系結 a 、 b ，多余的 引數以陣列形式交給變數 rest ;

3.4 變數的作用域

3.4.1 兩個關鍵字

3.4.2 全域物件

實際上，JavaScript默認有一個全域物件 window ，全 局作用域的變數實際上被系結到 window 的一個屬性：

4、事件

5、BOM

5.1 windows

5.2 history

5.3 location

5.4 document

5.5 innerHTML 與 innerText

toFixed(number) 保留指定位數

5.6 Date

6.7 Math物件

6.8 定時函式與清除函式(時鐘特效)

定時函式

清除函式

6、DOM

6.1 層次關系訪問節點

層次訪問節點1，包含text，注釋等其他內容；

層次訪問節點2，只包含標簽元素節點

6.2 操作節點

6.2.1操作節點屬性

6.2.2創建和插入節點

cloneNode(deep)的深拷貝和淺拷貝

6.2.3 洗掉和替換節點

注意只有父節點才可以洗掉子節點或者替換子節點；

6.3 操作節點樣式

6.3.1 事件

修改樣式主要與事件一起使用；

6.3.2 通過節點的style屬性

元素節點.style.樣式屬性=”樣式值“；

//舉例
document.getElementById("cart").style.backgroundColor="#fff";

6.3.3 className屬性

//carOut類屬性時在CSS外部樣式中已經存在的
document.getElementById("cart").className = "cartOut";

標籤：JavaScript

上一篇：執行vue create時到底做了什么

下一篇：作用域&變數提升&閉包題目及內容解答