JavaScript基本知識點——帶你逐步解開JS的神秘面紗在我們前面的文章中已經深入學了HTML和CSS，在網頁設計中我們已經有能力完成一個美觀的網頁框架但僅僅是網頁框架不足以展現出網頁的魅力，JS由此而生！ JavaScript概述 JavaScript是一門弱類型腳本語言，其源代碼在發往客 ...

JavaScript基本知識點——帶你逐步解開JS的神秘面紗

在我們前面的文章中已經深入學了HTML和CSS，在網頁設計中我們已經有能力完成一個美觀的網頁框架

但僅僅是網頁框架不足以展現出網頁的魅力，JS由此而生！

JavaScript概述

JavaScript是一門弱類型腳本語言，其源代碼在發往客戶端運行之前不需要進行翻譯，而是將文本格式的字元代碼發送給瀏覽器由瀏覽器進行解釋編譯。

ECMAScript是一種由Ecma國際通過ECMA-262標準化的腳本程式設計語言，算是目前JS的一個標準。

目前我們所使用的JS版本一般是ES6，但網頁的通用版本一般為ES5。

JavaScript書寫位置

既然談到JavaScript，首先談及它的作用

JavaScript是為HTML而服務的，所以JavaScript的書寫也同CSS一樣可以在HTML代碼中編寫

我們來介紹JavaScript的兩種書寫方法：

內部標簽：

在HTML的任意位置（註意不要超出HTML控制範圍）都可以採用script成對標簽來書寫JS代碼

外部引入：

在HTML的head部分，採用script成對標簽來引入外部JS文件代碼

我們下麵給出示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我們的第一個JavaScript代碼</title>

    <!-- JS和CSS一樣分為內部標簽和外部引入 -->

    <!-- 內部引入採用script成對標簽 -->
    <script>
        // JS中的註釋是//
        // 這裡alert的意思是輸出，我們後面會有介紹
        alert("HelloWorld!");
    </script>

    <!-- 外部引入也是採用script成對標簽，但裡面需要寫src=“JS文件地址” -->
    <script src="js.js"></script>

</head>
<body>
    <!-- 我們的html中不需要書寫東西也可以使用JS -->


    <!-- 註意，JS代碼也可以寫在body裡面，只要不寫在/html外都可以生效 -->
</body>
</html>

JavaScript瀏覽器控制調試

我們的JavaScript雖然在HTML中書寫，但一般情況下我們無法在HTML文件中檢查到錯誤

所以我們一般在HTML文件打開的網站中進行JavaScript的調試和錯誤修改以及提醒

下麵我以圖片形式展示JavaScript的瀏覽器控制調試順序：

我們在控制臺中進行JavaScript代碼的調試，也可以在源代碼中選擇斷點來進行錯誤檢測

JavaScript須知

在介紹JavaScript的其他內容之前我需要先把一些基本內容告訴你們：

JavaScript的所有數據類型都由var和let定義
- var 全局變數
- let 局部變數
JavaScript的輸出方法：
- alert（）打開頁面將會彈出的內容
- console.log() 在控制台輸出的內容
JavaScript嚴格檢查模式（ES6專屬）：
- 在之間的第一行加上"use strict"
- 進入嚴格檢查模式後，你的部分不規整代碼將會被檢測，但錯誤無法完全檢測

JavaScript數據類型

JavaScript是一種面向對象的編程語言，所以在JavaScript與HTML和CSS不同，我們可以在JavaScript中定義數據變數來協助我們書寫代碼

下麵我先為大家介紹JavaScript的基本數據類型（與Java相似但有所不同，下麵我只為JS特有類型做出標註）：

數字類型

數字類型包括有：

1 整數
1.1 小數
1.123e3 科學計數法
NaN 非數字類型
Infinity 無窮

字元串

與Java一樣採用“ ”來定義：

“HelloWorld”

布爾值

布爾值分為兩種：

true
false

邏輯運算符

邏輯運算符分為三種：

比較符

JavaScript的比較符相對特殊：

= 表示賦值
== 表示等於（類型不一樣，但數值一樣就可以判定為true）
=== 表示絕對等於（只有當類型和數值都一樣時才可以判定為false）

在這裡我想特別強調一下NaN和浮點數問題：

NaN無法通過===進行比較
- NaN === NaN 的運算結果為false
- isNaN（NaN）才可以得出NaN的判定結果
浮點數計算無法通過===進行比較
- 1/3 === （1-2/3）的運算結果為false
- 我們通常通過 Math.abs(1/3 - (1-2/3) < 0.000001)來判斷浮點數是否相同

特殊類型

JavaScript存在兩種特殊類型：

null 空
underfined 未定義

數組

JavaScript的數組可以存在有不同基本類型的數據

定義格式：

var arr = [...,...,...];

定義例子：

var arr = [1,2,3,"Hello"，true];

輸出方法：

arr[0]

註意：當列印越界時，不會報錯，但列印結果為underfined

對象

JavaScript的對象類似於鍵值對的存在方式

定義格式：

var person = {

name：“侯佳磊”，

age：18，

tags：["Java","HTML","CSS"]

}

對象之間的數據用逗號隔開，最後一個不用

調用方法：

person.name

JavaScript字元串詳解

我們首先對字元串進行詳細介紹：

字元串的定義通常採用“”或者''都可以
註意轉義字元：

格式說明

\ + 特殊意義字元在控制台輸出該字元

\n 換行符

\t 水平製表符

\u + 四位數 Unicode字元

\x + 兩位數 Ascll字元
多行字元串：採用``來隔行書寫字元串
模板字元串：我們可以採用${字元串}來直接帶入字元串

格式	說明
\ + 特殊意義字元	在控制台輸出該字元
\n	換行符
\t	水平製表符
\u + 四位數	Unicode字元
\x + 兩位數	Ascll字元

let name = "侯佳磊";
let age = 18;
let msg = `你好啊，${name}`;

字元串具有不可變性
字元串屬性和方法：

方法名	說明
str.length	字元串長度
str.toUpperCase()	字元串字母變大寫
str.toLowerCase()	字元串字母變小寫
str.indexOf('~')	字元串查找“~”的下標
str.subString(n)	返回一個從n到最後的字元串
str.subString(n,m)	返回一個字元串（n，m]的字元串

JavaScript數組詳解

JavaScript中數組可以結合各種類型的數值

定義格式：
- var arr = [1，2，3，4]；
數組長度：
- arr.length
- 註意：可以為數組的length賦值
- 當length賦值變大，後面的值預設為empty
- 當length賦值變小，前面的值將會被刪除
可以通過下標進行取值和賦值
indexOf（）通過元素來獲得下標索引：
- arr.indexOf()
- 註意：數字1和字元串“1”不同
slice（）截取一部分，返回一個數組
- arr.slice(1)截取1之後的所有元素組成數組
push（），pop（）方法
- arr.push(值) 把值在尾部輸入
- arr.pop( ) 把最後一個值從尾部彈出
unshift（），shift（）方法
- arr.unshift(值) 把值在頭部輸入
- arr.shift( ) 把第一個值從頭部彈出
sort（）排序方法
reverse（）反轉方法
concat（）拼接方法
- arr.concat( )不會改變原數組，會返回一個新數組
- 可以直接用[],也可以寫入一個數組
join（“_”）用連接各個元素並返回一個字元串
多維數組：
- 定義格式：[[],[],[]]
- 例子：var nums = [[1,2],[2,3],[3,4]];

JavaScript對象詳解

JavaScript的相關知識點：

定義格式：

var 對象名 = {
    屬性名：屬性值，
    屬性名：屬性值，
    屬性名：屬性值
}

對象的鍵是字元串，值是任意對象
對象賦值：
- 對象.屬性 = 屬性值
當使用一個不存在的屬性時，不會報錯，但會報出underfined
動態刪除屬性：
- delete 對象.屬性
動態增加屬性：
- 對象.屬性 = 屬性值
判斷屬性值是否在對象中：
- “鍵名” in 對象
- 例如："name" in person
判斷屬性是否是對象自身擁有的：
- 對象.hasOwnProperty(“鍵名”)

流程式控制制

JavaScript的流程式控制制和Java相差不大

if判斷與Java完全相同
while迴圈與Java完全相同
for原版迴圈與Java完全相同

下麵我們介紹三種新的for迴圈：

forEach（）迴圈

var age = [12,3,12,3,12,3,123,23];

//主要採用函數,註意：最外圍是（），裡面包括函數
age.forEach(function(value){
            console.log(value)
            })

forin迴圈

//註意：這裡的num是下標值
for(var num in age){
    console.log(arr[num])
}

forof迴圈

//註意：這裡的num是元素值
for(var num of age){
    console.log(num)
}

Map和Set詳解（ES6新增特性）

Map詳解：

定義格式：
- var map = new Map([[ , ],[ , ],[ , ]]);
- 註意：這裡是有Map的（），然後裡面有一個[]表示map，然後再有多個[]表示多個鍵值對
- 例如： var map = new Map([["侯佳磊",18],["胡桃",18]]);
獲得Map值：
- map.get(鍵名); 通過鍵獲得值
新添Map鍵值對：
- map.set( , );
刪除Map鍵值對：
- map.delete( , );

Set詳解：

定義格式：
- var set = new Set([ , , ,]);
- 註意：這裡同樣有Set的（），然後裡面有一個[]表示set
- 例如：var set = new Set([1,2,3]);
判斷是否包含某個值：
- set.has(value);
新添set值：
- set.add(value);
刪除set值：
- set.delete(value);

Map和Set均通過for方法實現遍歷：

        var map = new Map([["侯佳磊",18],["胡桃",18]]);

        for(let value of map){
            console.log(value[0]);
            console.log(value[1]);
            console.log(value)
        }

        var set = new Set([1,2,3,3,4]);

        for(let value of set){
            console.log(value)
        }

結束語

好的，關於JavaScript的基本知識點我們就講到這裡，下節課我們將會學習JavaScript函數和常用對象