JavaScript（數據類型、字符串操做）

JS基礎

建議：通常狀況下不在 head 標籤中寫 js 語句，由於該 js 語句會在 body 加載以前就執行，可能致使某些效果無效

// 單行註釋
/*多行
* 註釋*/
// 控制檯輸出語句
console.log('hello world');

// 瀏覽器的提示框
alert('這是一個提示框');
        
//頁面展現
document.write('hello world');
document.write('<h1>alert</h1>');

數據類型

基本數據類型

• Number：數字類型 整型 浮點型 NaN(不是一個數字) Infinity(不能處理的數字)
• String：字符串，使用單引號或雙引號的任意多個字符
• boolean：true false
• undefined：未定義類型 當定義變量時未賦值，默認爲undefined類型，值爲undefined
• null：空類型，表明空值或沒有值，空類型的值爲null

null 與 undefined 區別：當變量定義了但未賦值，默認值爲 undefined，當變量定義了而且賦予值爲 null 時 ，爲空類型

引用數據類型

• String：字符串
• Array：數組

Number類型

var num;
console.log(num); //undefined
console.log(typeof num); //undefined

var num = 20;
console.log(typeof num);  // number
console.log(num);

// 變量的數據類型根據賦值的類型而定

// 定義一個八進制數
// js八進制數以0開頭
var num3 = 056;  // 以十進制格式輸出
console.log(num3);  // 46

// 定義十六進制
var num4 = 0x56
console.log(num4) // 86

// js中最大的數爲1e308
console.log(1e308); //1e+308
        
// Infinity 特殊的number類型 特殊的值 當處理超出js的數值範圍時
console.log(1e309); // infinity
console.log(typeof Infinity) // number類型
        
console.log(10/0)
// Infinity與其餘任何數字進行數學計算 ，值依舊是Infinity
        
        
console.log(Infinity+(-Infinity));  // NaN
        
// NaN 表示不是一個數字，可是NaN是Number類型，只不過Number中
// 一個特殊的值
console.log(typeof NaN) //Number類型
        
//當運算符使用錯誤時，運算失敗返回NaN
console.log('f' * 3); // NaN
        
// NaN與任何數字進行運算都是NaN
console.log(1 + 2 + NaN)        
console.log(Infinity + NaN); // NaN

Boolean類型

• 數字 ：0、0.0、NaN
• 字符串： 空字符串
• 空值類型：null
• 未定義類型：undefined

以上爲 false， 除以上狀況都爲真

命名空間

在同一個html文件中，全部的script共用同一個命名空間

<script type="text/javascript">
        var a = 200;
        console.log(a); 
    </script>
    
    <script type="text/javascript">
        console.log(a)  // 200
    </script>

字符串相關操做

// 1、字符串的拼接
// 字符串拼接 + 
console.log('hello '+ 'world');
        
// 字符串+數字  變成字符串
console.log('1'+2);   // '12'
        
// 當運算符先後都是數字類型時 進行數學運算
console.log(1+2+'3');  // '33' 
console.log('1'+2+3); // '123'
console.log(typeof 1+2+'3'); // number23
console.log(typeof (1+2+'3')); //string
        
// 2、定義引用類型的字符串！！！
// new String()
// new:開闢空間 返回一個對象
// new： 建立一個類的實例對象的關鍵字， String():字符串的一個類
var str3 = new String('我是好人')
console.log(str3)
console.log(typeof str3);  // object
        
// string 基本數據類型
// object 引用數據類型
// 兩者本質上的數據類型是不同的
// 在實際操做中， 基本數據類型會自動轉爲引用數據類型，咱們能夠
// 用基本數據類型調用引用數據類型的方法或屬性
        
// 3、字符串是不可變的數據類型
        
// 4、字符串的相關方法
// 1-字符串長度
var str5 = 'abcd';
var str6 = new String('qwert');
console.log(str5.length)
console.log(str6.length)
        
// 2-大小寫轉行
var str7 = 'ABCdef';
console.log(str7.toLowerCase());
console.log(str7.toUpperCase());
        
// 3-字符串比較 比較acsii的值
var str8 = 'abc';
var str9 = 'auc';
var res = str8.localeCompare(str9); // -1 表明小於
console.log(res)
        
// 4-ascii值轉爲字符
var str10 = String.fromCharCode(97);
console.log(str10);  // a 
console.log(typeof str10);  // string 
         
 // 5-獲取字符串中某個下標的字符  
 console.log(str8.charAt(2)); // c
 console.log(str8[2]);
 console.log(str8.charAt(4)); // '' 下標越界不會報錯 是空
         
 // 6-字符串轉ASCII charCodeAt(下標)
 console.log(str8.charCodeAt(2));  //99

// 7-判斷是否相等
// == ：js中會自動進行數據轉行再進行比較
// ！=
// ===： 值與數據類型是否一致
// ！==
var num1 = 10;
var num2 = '10';
console.log(num1 == num2)   // 10==10  10=='10'
console.log(num1 === num2)  // false
        
// 8-字符串替換
// replace（舊字符串/正則表達式， 字符串）
// replace：目前只替換一次，若是想要所有替換須要正則
var str11 = 'today   is cool and cood so cool';
console.log(str11.replace('cool', 'hot')); //換一次
console.log(str11.replace(/cool/g, 'hot'));  // global 全局查找
        
// 9-切割字符串
// 若是不須要空字符串 也是須要正則的
console.log(str11.split(' '));
console.log(str11.split(/ +/))
        
// 10-將數組中元素拼接爲字符 和Python相反
arr1 = [1,2,3,4]
console.log(arr1.join('*'));
        
// 11-字符串截取
var str12 = 'abcdefghidefgk'
console.log(str12.substring(2)); //從第三個下標開始截取 cdefghigk
console.log(str12.substring(1,5)); // 5不包括
// substr 第二個參數是截取的個數
console.log(str12.substr(2));
console.log(str12.substr(1,5));
        
// 12-字符串查找
// indexOf:當可以找到：返回第一次找到的下標
// 找不到 返回-1
console.log(str12.indexOf('def'));
console.log(str12.indexOf('rrr')); 
// 從右向左找
console.log(str12.lastIndexOf('def'));

關係運算符與邏輯運算符

console.log(1>'2'); // false
console.log(1=='1'); // true
console.log(1==='1')  // false
        
console.log(5 / 2) // 2.5 Number
        
// true-> 1 false -> 0
console.log(1+true);  //2 
console.log(1+ false); //1

// null->0
console.log(1+ null);  // 1

// undefined->NaN
console.log(1+undefined)// NaN

&& || ！ ++ --

提示框類型

// alert
// confirm 有肯定及取消兩個按鈕
// confirm 有返回值 點肯定按鈕時候返回true
var res = confirm('在麼');
if(res == true){
    console.log('66');
}else{
    console.log('滾');
}
        
//prompt 有返回值
//點擊肯定按鈕時候，返回輸入框的文字
// 點擊取消 返回 null
res= prompt('請輸入');
document.write(res);