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=https://www.cnblogs.com/qiuluoyuweiliang/p/“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函式和常用物件

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498888.html

標籤：JavaScript

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

下一篇：資料型別