任何語言的核心都必然會描述這門語言基本的工作原理。而描述的内容通常都要涉及這門語 言的文法、操作符、資料類型、内置功能等用于建構複雜解決方案的基本概念。如前所述, ECMA-262通過叫做 ECMAScript的“僞語言”為我們描述了 JavaScript的所有這些基本概念
本篇文章主要講文法,類型,操作符,語句和函數。
任何程式設計,都是從基礎的文法開始,例如java,java也有基礎文法,操作符,資料類型,控制語句等。c++,php,python也同理。
js與java在變量上有其共同點,這也是很多程式設計語言也有的共性:
一、文法
變量命名:
1.區分大小寫,例如在js中給變量命名可以是var,也可以是let, var t和vat T是兩個變量,而并不是一個變量;
2.辨別符,不能以數字開頭,第一個字元必須是一個字母,下劃線或$符号,建議命名駝峰命名法,首字母小寫,剩下的第二個單詞字母大寫;
3.不得以關鍵字和保留字進行命名,例如True命名可以,true則不行,因為true是js的基本資料類型boolean類型;
關鍵字:
保留字:當然上述列出的隻是一部分,還有其他,其他可以去w3school參考:http://www.w3school.com.cn/js/
變量有這麼幾種類型?
1.number
2.string
3.boolean
4.undefined
5.Object
上述js資料類型分别對應數字,字元串,布爾,未定義,對象等類型
typeof操作符可以得到該變量的類型
說到基本資料類型,不得不提一個類型轉換,類型轉換報錯是很常見的:
類型轉換應用:
比如字元串1,2,3,或者3.24,true等,我如何将其轉換為數字類型,可使用parseInt(),parseFloat(),parseDouble()等方法可以進行轉換
數字如何轉字元串,toString()方法即可解決
undefined,有的時候我們添加資料時,有那麼幾個非必填項,但在清單展示時,常常展示為undefined,為什麼會出現undefined,因為沒有初始值,在java中int類型可預設初始值為0,聲明尚未實作可以這樣,js就不能這樣,是以我們通常就要寫if判斷,當等于這個undefined時,我們給它賦個空串。
操作符也是開發中常用的,一進制操作符,運算符,位操作符,布爾操作符,關系操作符,條件操作符,在這裡我隻說關系和條件,因為這兩個用的比較多,當然還有布爾操作符,一進制操作符,運算符等,位運算符,用的少,幾乎沒用過。
一進制操作符類似于我們的if(condition){}else{},運算符,加減乘除,特别是關于購物車錢的計算及其日期的計算,例如下圖示例:
//本周
var date = new Date();
// 本周一的日期
date.setDate(date.getDate() - date.getDay() + 1);
var begin = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";
// 本周日的日期
date.setDate(date.getDate() + 6);
var end = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 23:59:59";
//當天
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var current=year+"-"+month+"-"+day;
//最近一個月
function timeForMat (count) {
// 拼接時間
let time1 = new Date()
time1.setTime(time1.getTime() - (24 * 60 * 60 * 1000))
let Y1 = time1.getFullYear()
let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())
let timer1 = Y1 + '-' + M1 + '-' + D1 // 目前時間
let time2 = new Date()
time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * count))
let Y2 = time2.getFullYear()
let M2 = ((time2.getMonth() + 1) > 10 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
let D2 = (time2.getDate() > 10 ? time2.getDate() : '0' + time2.getDate())
let timer2 = Y2 + '-' + M2 + '-' + D2 // 之前的7天或者30天
return {
t1: timer1,
t2: timer2
}
}
var timer = timeForMat(30)
alert(timer.t1)
布爾操作符,也比較常用,與(&),或(||),非(!)
關系操作符 小于(<)、大于(>)、小于等于(<=)和大于等于(>=)這幾個關系操作符用于對兩個值進行比 較,比較的規則與我們在數學課上所學的一樣。
條件操作符類似我們的if..else
(1)var max = (num1 > num2) ? num1 : num2;
(2)if(num1>num2){
alert(num1)
}else{
alert(num2)
}
(1)和(2)實際上是一樣的,沒多大差別。不過注意的是寫if時,連else也寫了吧,這樣邏輯清晰,還有if(){},這個{}可以省略,但建議不要省略。
二、語句
1.if語句
這個常用,就不多說了,總而言之,寫if,要寫就寫全套,不要省略else
if的話表單驗證用的挺多的,我開發用的js驗證全部用if
例如:
常見的密碼一緻性問題
if(password==null||password==""){
alert("密碼不能為空");
return false;
}else if(password2==null||password2==""){
alert("确認密碼不能為空");
return false;
}else if(password!=password2){
alert("兩次輸入密碼不一緻");
return false;
}else{
//ajax請求,這裡省略
}
2.do..while(condition)
注意:do..while和java中的一樣,至少執行一次
不會出現當條件不滿足時,不執行。先執行再判斷,用這句話形容do..while非常合适
開發中的話,我個人不常用,當然應用場景的話,可以用作于資料初始化
3.while(conditioini)
先判斷再執行,有可能一次都不執行
while的話,用的不多,應用場景當滿足條件時,進行函數調用。不過注意,如果代碼存在邏輯問題又或者其他原因,可能導緻死循環或者浏覽器崩潰。
4.for循環
這個玩意好啊,用的最多,不過用之不慎的話,也會導緻死循環。記得某個幽默的大牛對我說,十年前,初次做開發,别人問他,你會什麼,他回答說,我就會for循環。
for循環,我應用的地方是:
// 資料展示
var loadData3 = function(list) {
$("#s10_tbody tr[value != '']").remove();
var rows = "";
var comuStatus = "";
// 資料周遊
for (var i = 0; i < list.length; i++) {
var comuStatus = list[i].comuStatus
if (comuStatus == 1) {
comuStatus = "正常";
} else {
comuStatus = "異常";
}
rows = rows + '<tr>';
rows = rows + ' <td>' + list[i].id + '</td>';
rows = rows + ' <td>' + comuStatus + '</td>';
rows = rows + ' <td>' + list[i].time + '</td>';
rows = rows + '</tr>';
}
$("#s10_tbody").append(rows);
}
5.for in
對于這個玩意,我應用的場景如圖所示:通常for in是針對數組或集合
//按條件查找鎖
function searchLock(index,size) {
$(".list [value != '']").remove();
//使用者ID
var userId=$("#userId").val();
//門鎖編碼
var lockNo = $("#lock_no_search").val();
//房間編碼
var roomCode = $("#room_no_search").val();
//房源編碼
var houseCode = $("#house_bm_search").val();
//省市區
var province = $("#province").find("option:selected").text();
var city = $("#city").find("option:selected").text();
var district = $("#district").find("option:selected").text();
//安裝位址
var region = province+"_"+city+"_"+district;
//位址
var address = $("#address").val();
$.ajax({
type : "POST",
url : "lock/list",
data : {
userId : userId,
lockNo:lockNo,
roomCode:roomCode,
houseCode:houseCode,
region:region,
address:address,
pageIndex:index,
pageSize:size
},
dataType : 'json',
success : function(data) {
var json = eval("("+data+")");
//總數
lockCount=json.lines;
$("#locknum").html(lockCount);
if(lockCount!=0){
//将背景集合裝載入list
var list = json.lockList;
for (i in list){
var lockNo = list[i].lock_no;
var houseCode = list[i].houseCode;
var roomCode = list[i].roomCode;
var type = list[i].type;
var doorsensor = list[i].doorsensor;
var comuStatus = list[i].comuStatus;
var power = list[i].power;
var region = list[i].region;
var address = list[i].address;
var installTime = list[i].installTime;
var name = list[i].name;
var nodeNo = list[i].nodeNo;
if(type==1){
type="二代433門鎖";
}
if(doorsensor==1){
doorsensor="是";
}else{
doorsensor="否";
}
if(comuStatus==1){
comuStatus="強";
}
var rows=""
+"<span class='fl lockinfo lockcheck' style='width:7%;'> <a class='checks' href='javascript:;' data-id='162235c895b065' data-node-comu='00' data-node-type='3' checks='false'></a> </span>"
+" <span class='fl ip-p lockinfo'><a target='_blank' href='lockPassword.html?lockNo="+lockNo+"' class='listss-l'>"+lockNo+"</a></span>"
+"<span class='fl code-p lockinfo'>"+houseCode+"</span>"
+"<span class='fl room-p lockinfo'>"+roomCode+"</span>"
+"<span class='fl lock-p lockinfo'>"+type+"</span>"
+"<span class='fl magnetic-p lockinfo'>"+doorsensor+"</span>"
+"<div class='fl commit-p lockinfo'><span class='ico ico-cmt-s4'></span><p class='green'>"+comuStatus+"</div>"
+"<span class='fl qua-p lockinfo'><div class='iconfont icon-icon-test20 green'></div><div>"+power+"%</div></span>"
+"<span class='fl add address lockinfo'><span style='display:none'>"+region+"</span>"+address+"</span>"
+"<span class='fl time-p lockinfo'>"+installTime+"</span>"
+"<span class='fl ope-p lockinfo'>"+name+"</span>"
+"<span class='fl gate-p lockinfo'>"+nodeNo+"</span>"
+"<span class='fl lockinfo lockope'><a class='opebtn opechange' href='lockPassword.html?lockNo="+lockNo+"' data-node='3' style='display: inline;'>編輯</a></span>";
$(".list").append(rows);
}
var page='<div id="userPage" align="center" ><font size="2">共'
(lockCount+pageSize-1)/pageSize+'頁</font> <font size="2">第'
+(pageIndex+1)+'頁</font> <a href="javascript:void" onclick="GoToFirstPage()" id="aFirstPage" >首頁</a> '
+'<a href="javascript:void" onclick="GoToPrePage()" id="aPrePage" >上一頁</a> '
+'<a href="javascript:void" onclick="GoToNextPage()" id="aNextPage" >下一頁</a> '
+'<a href="javascript:void" onclick="GoToEndPage()" id="aEndPage" >尾頁</a> ';
page+='</div>';
$("#lockPage").html(page);
// document.getElementById("dltitle").innerHTML = "查找結果如下";
}
},error:function(){
alert("有異常");
}
});
}
6.switch
這個switch的話,我覺得也很有用,可以針對不同的條件和參數調用不同的函數,挺有用的,不過我用的不多,可能是因為沒有領會它的真谛吧,說到底就是用的太少不熟練。
應用場景的話,前後端分離,用的展示層就是html,如何進行權限控制呢?就通過switch,通過全局js函數獲得使用者角色,根據該角色,進行通路資源判斷。例如,
不過這裡的角色是有限的,基本定義為普通人員,安裝人員,運維,admin或者root等四到五個角色,如果想crm或erp之類的,角色很多,萬不可通過這種形式來定義對資源的通路。
三、函數
這個不能不提啊,現在我寫的最多的就是js函數
突然讓我想起了Linux,linux中的shell,shell腳本的基礎就是linux的指令的集合體,記得在上家公司一位同僚寫監控伺服器腳本就是用的函數,函數友善複用和子產品化,什麼是子產品化呢?我個人的了解是,比如我寫的一個使用者管理界面,引用的js檔案主要是使用者管理相關js,該js檔案專心于使用者管理界面上的一切操作。