JavaScript 基礎

時間 2021-08-13

標籤 java 數組瀏覽器 dom ide 函數測試編碼 code 欄目 JavaScript 简体版

原文原文鏈接

前言

JavaScript 函數是一種 JavaScript 代碼塊，它能夠在調用時被執行。java

在 HTML 中，JavaScript 代碼必須位於標籤之間。

<script>
function fun() {
    document.getElementById("demo").innerHTML = "js";
}

foo();
</script>

引入外部js

<script src="/js/myScript1.js"></script>數組

JavaScript 輸出

使用 window.alert() 寫入警告框瀏覽器
使用 document.write() 寫入 HTML 輸出
提示：document.write() 方法僅用於測試。在 HTML 文檔徹底加載後使用 document.write() 將刪除全部已有的 HTMLdom
innerHTML寫入 HTML 元素。也就是從對象的起始位置到終止位置的所有內容,包括Html標籤
innerText: 從起始位置到終止位置的內容, 但它去除Html標籤 ide
使用 console.log() 寫入瀏覽器控制檯函數

<script> 
document.getElementById("demo").innerText="AAA"; 
document.getElementById("demo").innerHTML="<font color=#ff0000>AAA</font>";
</script>

JavaScript 數據類型

Infinity（或 -Infinity）是 JavaScript 在計算數時超出最大可能數範圍時返回的值：`typeOf Infinity` 返回 `number`

NaN 屬於 JavaScript 保留詞，指示某個數不是合法數：
var x = NaN;    var y = 5;    var z = x + y;    // z 將是 NaN    
typeof NaN;    // 返回 "number"

Undefined 與 null 的值相等，但類型不相等：
var x;               //值是 undefined，undefined類型
任何變量都可經過設置值爲 undefined 進行清空。其類型也將是 undefined。

var person = null;           // 值是 null，可是類型仍然是對象
typeof null                  // 返回 "object"

typeof function myFunc(){}   // 返回 "function"

var x = true;    //布爾值
var car = "";                // 值是 ""，類型是 "string"
var length = 7;                             // 數字
var lastName = "Gates";                      // 字符串
當數值和字符串相加時，JavaScript 將把數值視做字符串。

var cars = ["Porsche", "Volvo", "BMW"];         // 數組
var x = {firstName:"Bill", lastName:"Gates"};    // 對象

當在 HTML 頁面中使用 JavaScript 時，JavaScript 可以「應對」這些事件。

<button onclick='document.getElementById("demo").innerHTML=Date()'>如今的時間是？</button>
注：JavaScript 代碼一般有不少行。事件屬性調用函數更爲常見：<button onclick="displayDate()">如今的時間是？</button>測試

特殊字符

反斜槓轉義字符把特殊字符轉換爲字符串字符：ui

\'	'	單引號
\"	"	雙引號
\\	\	反斜槓

字符串

1. indexOf() 方法返回字符串中指定文本首次出現的首字母索引（位置）：
        var pos = str.indexOf("China");
2. lastIndexOf() 方法返回指定文本在字符串中最後一次出現的首字母索引：
        var pos = str.lastIndexOf("China");
        注：若是未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
3. search() 方法搜索特定值的字符串，並返回匹配的首字母位置：
        var pos = str.search("locate");
4. 提取部分字符串(不包括尾索引)
        裁剪字符串中位置 7 到位置 13 的片斷：
            var res = str.slice(7,13);    //若是某個參數爲負，則從字符串的結尾開始計數。
        若是省略第二個參數，則該方法將裁剪字符串的剩餘部分：var res = str.slice(7);
        substring() 相似於 slice()，第二個參數規定被提取部分的長度：
            var res = str.substr(7,6);    //若是省略第二個參數，則該 substr() 將裁剪字符串的剩餘部分。
5. 替換字符串內容：
        var n = str.replace("Microsoft", "W3School");    //默認地，replace() 只替換首個匹配
6. 轉換爲大寫和小寫：
        var text2 = text1.toUpperCase();    // text2 是被轉換爲大寫的 text1
7. trim() 方法刪除字符串兩端的空白符：
        var str = "       Hello World!        ";str=str.trim();
8. 提取字符串字符:
        var str = "HELLO WORLD";str.charAt(0);            // 返回 H
9. 方法返回字符串中指定索引的字符 unicode 編碼：
        var str = "HELLO WORLD";str.charCodeAt(0);         // 返回 72
10. 把字符串轉換爲數組：
        var txt = "a,b,c,d,e";    // 字符串    
        txt.split(",");    // 用逗號分隔    
        txt.split(" ");    // 用空格分隔
        txt.split("");    // 分隔爲字符
11. 在全部數字運算中，JavaScript 會嘗試將字符串轉換爲數字：
        var x = "100";    var y = "10";    var z = x / y;     // z 將是 10
12. toString() 返回字符串：
        var x = 123;    x.toString();    // 從變量 x 返回 123

數值

在 JavaScript 內部使用 valueOf() 方法可將 Number 對象轉換爲原始值：var x = 123; x.valueOf(); // 從變量 x 返回 123
Number() 可用於把 JavaScript 變量轉換爲數值：編碼

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

parseInt() 解析一段字符串並返回數值。容許空格。只返回首個數字：code

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

數組

數組是對象，數組元素能夠是對象：myArray[0] = Date.now;

1. var x = arr.length;   // length 屬性返回元素的數量

2. var y = arr.sort();   // sort() 方法對數組進行排序（字母順序）

3. 遍歷數組元素："for" 循環或者
Array.foreach() 函數：
arr.forEach(myFunction);
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

4. 添加數組元素：arr.push("Lemon"); 

5. 把數組轉換爲字符串：toString()

6. join() 方法也可將全部數組元素結合爲一個字符串：
arr.join(" * ");    //Banana * Orange * Apple * Mango

7. pop() 方法從數組中刪除最後一個元素，pop() 方法返回「被彈出」的值
push() 方法（在數組結尾處）向數組添加一個新的元素，方法返回新數組的長度

8. shift() 方法返回被「位移出」的字符串（在開頭）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];    
fruits.shift();    // 返回 "Banana"
unshift() 方法（在開頭）向數組添加新元素，並「反向位移」舊元素,返回新數組的長度：
var fruits = ["Banana", "Orange", "Apple", "Mango"];    
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

9. splice() 方法可用於向數組添加新項：
arr.splice(2, 0, "Lemon", "Kiwi");    
arr.splice(0, 1);        // 刪除 fruits 中的第一個元素
第一個參數（2）定義了應添加新元素的位置（拼接）。
第二個參數（0）定義應刪除多少元素。
其他參數（「Lemon」，「Kiwi」）定義要添加的新元素。
splice() 方法返回一個包含已刪除項的數組

10. 合併（鏈接）數組：
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 鏈接 myGirls 和 myBoys
concat() 方法不會更改現有數組。它老是返回一個新數組。
concat() 方法可使用任意數量的數組參數。

11. 裁剪數組：slice() 方法建立新數組。它不會從源數組中刪除任何元素。
var arr1 = arr.slice(1);     //截取索引1及之後的元素建立新數組
var arr1= arr.slice(1, 3);    //當給slice（）方法賦予兩個參數時，它從start參數中選擇數組元素，直到（但不包括）end參數

12. sort() 方法以字母順序對數組進行排序
反轉數組：reverse() 方法反轉數組中的元素。
數字排序：sort默認以字符串方式排序
修正：
var points = [40, 100, 1, 5, 25, 10];    
points.sort(function(a, b){return a - b}); 

13. Array.map()
map() 方法經過對每一個數組元素執行函數來建立新數組，map() 方法不會更改原始數組：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

14. Array.filter()方法建立一個包含經過測試的數組元素的新數組：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

15. Array.indexOf()方法在數組中搜索元素值並返回其位置：var a = arr.indexOf("Apple");
以及Array.lastIndexOf()

16. 肯定數組中全部數的總和：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

循環

for ... in循環遍歷的其實是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每一個元素的索引被視爲一個屬性。
當咱們手動給Array對象添加了額外的屬性後，for ... in循環將帶來意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x);     // '0', '1', '2', 'name'
}

for ... in循環將把name包括在內，但Array的length屬性卻不包括在內。
for ... of循環則徹底修復了這些問題，它只循環集合自己的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x);     // 'A', 'B', 'C'
}

forEach遍歷集合

a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象自己
    console.log(element + ', index = ' + index);
});

JavaScript 日期

建立日期對象

建立日期對象：var d = new Date();
在 HTML 中顯示日期對象時，會使用 toString() 方法自動轉換爲字符串：document.getElementById("demo").innerHTML = d;
方法將日期轉換爲 UTC 字符串（一種日期顯示標準）：toUTCString()
方法將日期轉換爲更易讀的格式：toLocaleString() // 2015/6/24 下午7:49:22

獲取日期方法

getTime()方法返回自 1970 年 1 月 1 日以來的毫秒數：document.getElementById("demo").innerHTML = d.getTime();
setTime()：設置時間（從 1970 年 1 月 1 日至今的毫秒數）

Math 對象

Math.round(x)的返回值是 x 四捨五入爲最接近的整數
Math.abs(x)返回 x 的絕對（正）值
Math.ceil(x)的返回值是 x 上舍入最接近的整數
Math.floor(x)的返回值是 x 下舍入最接近的整數
Math.min() 和 Math.max() 可用於查找參數列表中的最低或最高值
Math.random() 返回介於 0（包括）與 1（不包括）之間的隨機數
Math.floor(Math.random() * 10);返回 0 至 9 之間的數

let 和 const

塊做用域（Block Scope）變量（和常量）：let 和 const。

1. var x = 10;
    // 此處 x 爲 10
    { 
      var x = 6;
      // 此處 x 爲 6
    }
    // 此處 x 爲 6

2. var i = 7;
    for (var i = 0; i < 10; i++) {
      // 一些語句
    }
    // 此處，i 爲 10

3. let i = 7;
    for (let i = 0; i < 10; i++) {
      // 一些語句
    }
    // 此處 i 爲 7

4. 在相同的做用域，或在相同的塊中，經過 let 從新聲明一個 var 變量是不容許的：
    var x = 10;       // 容許
    let x = 6;       // 不容許

5. let x = 6;       // 容許
    {
      let x = 7;   // 容許
    }
    {
      let x = 8;   // 容許
    }

6. 您沒法從新爲常量數組賦值：
        const cars = ["Audi", "BMW", "porsche"];
        cars = ["Honda", "Toyota", "Volvo"];    // ERROR