1. 程式人生 > 實用技巧 >js基礎語法

js基礎語法

js:由三個部分組成

1 ECMAscript5的核心 js語言
2 BOM 瀏覽器物件模型 js操作瀏覽器,做出對應的一些效果
3 DOM 文件物件模型 -- HTML檔案

引入方式:

1 head標籤的script標籤裡面(alert('xx'), confirm('xx'))
2 body標籤後者body標籤下面html標籤上面的script標籤裡面
3 外部檔案引入的方式來使用
a 建立一個.js結尾的檔案,寫上咱們的js程式碼
比如:alert('are you ok?');
b 在想使用這個js程式碼的html檔案中,head標籤或者body標籤下面或者上面寫下面的內容
<script src="01test.js"></script>


<script src="js檔案路徑"></script>
<script></script> 標籤推薦寫在body下面和html標籤之間

變數:

var a = 10;  變數定義 var 變數名;
var b;  只宣告,沒有賦值的情況下,b的值為undefined 

number型別(整數,浮點數):

var n = 11;
var n2 = 11.11;
js程式碼註釋  // js程式碼

檢視資料型別 typeof 變數名;
    typeof n; -- number型別
    
變數宣告,但沒有賦值的時候,變數的值為undefined

string型別(字串):

var a = 'alexsb';  此種類型為string
var a = new String('ss');  typeof a; -- "object"

移除兩端,左邊,右邊空格: s.trim();   s.trimLeft(); s.trimRight();

var s2 = '   hello   ';
s2
"   hello   "
s2.trimLeft();
"hello   "

s2.trimRight();
"   hello"

s2.trim();
"hello"


var value = name.charAt(index)             //
根據索引獲取字元 示例: var s = 'hello'; -- s.charAt(4); -- 'o' var value = name.substring(start,end) // 根據索引獲取子序列,切片 示例: s.substring(1,3); -- "el" 左包右不包 字串拼接: + s1 "hello world" s2 " hello " s1 + s2 "hello world hello "

布林型別(boolean型別):

var a = true;
var b = false;
typeof a; -- "boolean"

undefined和null型別:

undefined 變數聲明瞭,但是沒有賦值,此時這個變數是undefined型別
null : 變數不用了,就可以給變數賦值為null, --- object型別 -- 和python的None一樣

陣列(array):

var name = [11,22,33];  typeof name; -- "object"

name.length -- 得到陣列長度

陣列常用方法:
names[0]                        // 索引,索引也是從0開始的

names.push(ele)                 // 尾部追加元素
    示例:a.push('xx'); -- [11, 22, 33, "xx"]
var ele = names.pop()         // 尾部移除一個元素
    示例:a.pop(); -- [11, 22, 33]
names.unshift(ele)              // 頭部插入元素
    示例:a.unshift('ssss'); -- ["ssss", 11, 22, 33]
var ele = obj.shift()             // 頭部移除一個元素
    示例:a.shift(); -- [11, 22, 33]
names.splice(index,0,ele)         // 在指定索引位置刪除元素
names.splice(從哪刪(索引),刪幾個(個數),刪除位置替換的新元素(可不寫,可寫多個)) 
names.splice(index,1,ele)         // 指定索引位置替換元素
names.splice(index,1)             // 指定位置刪除元素
    示例: a.splice(1,2) -- [11, 22, 33]
        a.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33]


names.slice(start,end)            // 切片
    示例:a.slice(1,3);-- [22, 33]
    
names.reverse()                  // 原陣列反轉
    示例:a.reverse(); -- [44, 33, 22, 11]
names.join(sep)                   // 將陣列元素連線起來以構建一個字串
    示例: var a = ['ni','hao','ma',18]
        a.join('+'); -- "ni+hao+ma+18"
names.concat(val,..)              // 連線陣列
    示例: var a = [11,22]; var b = ['aa','bb']
    var c = a.concat(b); c --[11, 22, "aa", "bb"]
    
names.sort()                     // 對原陣列進行排序
    很尬!
    需要自己定義規則:
        var l4 = [11.11,2,4.5,33];
        function compare(a,b){
           return a - b;  當大於0時,兩個資料換位置
        };
        使用: l4.sort(compare); 升序排列

自定義物件(dict):

// 宣告
info = {
    name:'武沛齊',
    "age":18
}

var a = {username:'xx',password:'123'}; //可以不加引號
typeof info;
"object"

// 常用方法
var val = info['name']        // 獲取,通過鍵取值必須加引號,
info.name 也是可以的
info['age'] = 20            // 修改
info['gender'] = 'male'        // 新增
delete info['age']            // 刪除

if判斷:

if (a == 1){  //判斷條件寫在小括號裡面,大括號裡面寫條件判斷成功後的程式碼內容
    console.log('1111');
}
else{
   console.log('222');
}

多條件判斷

 var a = 0;
    if(a > 1){
        // console.log('1111');
        // var hhhh = document.getElementById('d1');
        // hhhh.innerText = '彭于晏';
    }else if(a<1){

        console.log('2222');
    }else {
        console.log('3333');
    }

運算子

> < == !=  >=  <=   ===  !==

var a = 2;
var b = '2';
a == b;  true  弱等於
a === b;  false  強等於
a != b;  false
a !== b;   true

算術運算

+  -  * / %   ++  --  
++ 自增 1  
-- 自減 1

var a = 2;
a++  先執行邏輯  在+1
++a  先+1 在執行邏輯

簡單示例:
    if (++a === 4){
        console.log('xxx');
    }
    else{
        console.log('ooo');
    };

switch判斷

var num = 200;
switch(num++){  引數必須是數字或者得到數字的算式
    case 10:
        console.log('未成年');
        break;
    case 18:
        console.log('成年');
        break;
    case 35:
        console.log('油膩老男人');
        break;
    case 100:
        console.log('....');
        break;
        
    #上面的case條件都不成立就執行default
    default:
        console.log('太大了');
};

異常捕獲

try{
    console.log(xx);
}catch(e){
    console.log(e);
}
// 不管有沒有異常都會執行finally
finally{
    console.log('sssss');
}

for迴圈

for (var i=0;i<100;++i){
    console.log(i);  
};

迴圈陣列
    var d = [11,22,33];
    for (var i in d){
        if (d[i] === 22){
            continue;  //跳出本次迴圈
            // break; // 結束迴圈
        }
        console.log(i,d[i]);
    }
    for (var i=0;i<d.length;i++){
        console.log(i,d[i]);
    };
迴圈自定義物件--python字典
    for (var i in d){
        console.log(i,d[i]);  #不要用d.i來取值
    }

while

var a = 0;
while(a<5){
    a++;
    if (a===2){
      continue;
    }
    console.log(a);
}

轉化

字串轉數字:
    var a = '11';
    parseInt(a);
    
    var a = '23abc';
    parseInt(a);   23
    var a = '11.11';
    parseFloat(a) -- 轉換為浮點型
    
    var a = 'asdfabc';
    parseInt(a); -- NaN  -- not a number
    typeof NaN;  -- "number"
    NaN === NaN; -- false
    NaN == NaN; -- false
    
    
    數字轉字串
    var b = 20;
    String(b);

普通函式

function f1(a,b){
    return a+b;
}

執行: f1(1,2) -- 3

function f1(a,b){
    return a,b;
};

f1(1,2);
不能返回多個值:  2 如果返回多個值, 要用一個容器型別接收

匿名函式

var a = function (a,b){
    console.log('xxx');
}

var d = {'xx':'oo','f':function (a,b){
    console.log('xxx');
}};
執行:d.f(1,2);

自執行函式:函式後面加括號

 (function () {
        alert('自執行函式!')
    })()