摘要:它可以接收兩個參數,表示要查找的子字符串,表示查找的開始位置,省略的話則從開始位置進行檢索。它會返回第一個匹配的子字符串的起始位置,如果沒有匹配的,則返回。返回一個布爾值,表示指定的對象是否在本對象的原型鏈中。
前言
前端開發最基本的就是HTML + CSS + JS了,剛入行時聽到的介紹就是,寫頁面亦如造房子,HTML為搭戶型,CSS是房屋裝飾,JS則好比是水電安裝,是最后的功能了。 下面我們開始裝水電了.....
ECMAScript 和 JavaScript關系ECMAScript是由歐洲計算機制造商協會(European Computer Manufacturers Association)頒布的關于JavaScript的語言規范,即JS的發展是以ECMAScript為標準進行的。自1997年發布首版以來,已經歷經N多版,好像我還在百度搜索let、const等ES6語法時,聽說現在倏的就ES10都出草案了!目前個人開發主要是 ES5/6。ECMAScript版本歷史
Javascript基礎語法1. 輸出
window.alert("hello guys!")//彈出警告窗
document.write("I am contents.");//將內容寫到HTML文檔中
console.log("我在控制臺輸出!","others");//將內容輸出到瀏覽器控制臺
console.log("Let us play %s this %s !","basketball","friday");//%s 字符串占位符===>
// "Let us play basketball this friday"
var familyInfo = {
name:"前端牛逼",
id:666
}
console.log("家族ID是 %d,家族信息是 %O",1235,familyInfo)//%d 整數占位符 %O對象占位符
//當然,如果覺得這樣的log輸出有點“脫褲子放屁”,還是直接如下不用占位符吧
console.log("家族ID是:",familyID ,"家族信息是",familyInfo);
//有一些用的相對少些的Log輸出:
console.debug(object)
//在控制臺輸出一條消息,包含一個指向代碼調用位置的超鏈接。假如是直接在控制臺輸入該命令,//就不會出現超鏈接(和console.log()一樣)。
console.info(object)
//在控制臺輸出一條帶有“信息”圖標的消息和一個指向代碼調用位置的超鏈接。
console.warn(object)
//在控制臺輸出一條帶有“警告”圖標的消息和一個指向代碼調用位置的超鏈接。
console.error(object)
//在控制臺輸出一條帶有“錯誤”圖標的消息和一個指向代碼調用位置的超鏈接。
console.dir(object)
//以列表形式輸出一個對象的所有屬性,有點和你查看DOM窗口相類似。
2.運算
var num = (5 + 2)*10; // 70 = + - * / %(取膜 ) ++ --
10%3// 1
//注意一下這兩個區別
var i = 0;
var num = i++;//0
var num1 = ++i;//1
//比較運算
var count = 0;
if(count > 0){console.log("num 大于 0")}// JS比較運算符中: == === !== != < >
null == undefined //true
null === undefined //false
不同數據類型做比較時的一些規則
//邏輯運算符
// && and
(2 < 10 && 3 > 1) //true
// || or
(a || b) //只要一個為true,結果即為true
// ! not
var num = 0;
!num //true(將num轉換為布爾值再取反);
3.javascript 關鍵字和保留字(備胎咯)
關鍵字 (用于標識要執行的操作): break、case、catch、continue、default、delete、do、else、finally、for、function、
if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void
保留字(當前的語言版本中并沒有使用,但在以后 JavaScript 擴展中會用到):abstract
boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int
4.注釋
//單行注釋
//console.log("num");
alert("error") // 單行末注釋
//塊注釋
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/
5.條件語句
if(isVVmusic){
//客戶端內
}else{
//端外
}
if(sex == "男"){
console.log("小哥哥")
}else if(sex == "女"){
console.log("小姐姐")
}else{
console.log("薩瓦迪卡~")
}
switch(res.retCode){
case 1000:
console.log("創建活動成功!")
break;
case 1001:
console.log("不在申請時間內!")
break;
case 1002:
console.log("userID不存在!")
break;
default:
console.log("參數不正確");
}
//有一種情況可能只是要根據條件去取一個值,比如toast的提示文案,這時用條件判斷顯得裹腳布又長又臭的時候,可以考慮另一種方式比如:
var toastTexts = {
"1000":"創建活動成功!",
"1001":"不在申請時間內!",
"1002":"參數不正確",
"1003":"userID不存在!",
"1008":"比賽以結束",
......
}
if(res && res.retCode){
let toast = toastTexts[res.retCode];
alert(toast);
}
6.循環語句
for - 循環代碼塊一定的次數
for (語句 1; 語句 2; 語句 3){
被執行的代碼塊
}
語句 1 (代碼塊)開始前執行
語句 2 定義運行循環(代碼塊)的條件
語句 3 在循環(代碼塊)已被執行之后執行
for (var i =0 ;i
for/in - 循環遍歷對象的屬性
var res = {
name:"劉德華",
age:50,
place:"hongkong"
}
for (var key in res){
console.log("%O : %O",key,res[key]);
}
while - 當指定的條件為 true 時循環指定的代碼塊
var i =0;
while (i<5)
{
if(i === 2) break;
console.log("當前數字是"+ i);
i++;
}
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊
do/while 循環是 while 循環的變體。該循環會在檢查條件是否為真之前執行一次代碼塊,然后如果條件為真的話,就會重復這個循環。
var i = 0;
do{
console.log("number is "+ i)
i++;
}
while (i<5);
break 語句用于跳出循環。(不可以用于es6的forEach)
continue 用于跳過循環中的一個迭代。
JavaScript數據類型
Javascript的數據類型可以分為:基本數據類型(值類型)和引用數據類型
值類型(基本類型):
字符串(String)
數字(Number)
空(Null)
未定義(Undefined)
布爾(Boolean)
Symbol(*Symbol 是 ES6 引入了一種新的原始數據類型,表示獨一無二的值)
引用數據類型:
對象(Object)
數組(Array)
函數(Function)
從上圖可以看出,基本數據類型保存的是具體的值,當將a變量的值賦值給b變量,b變量之后的任何 操作就和a無關了;而當把引用數據類型的值賦值給些個( C、D )變量,C得到的是一個引用地址,同樣D也是,當操作C或者D中某一個的屬性時,實際上是順著這條同樣的引用地址改了堆內存中的值,因此其它引用了這一相同地址的變量再取自身當中某屬性值時,都是被更改過的。
判斷數據類型
typeof 123 //"number"
typeof "abc" //"string"
typeof true //"boolean"
typeof undefined //"undefined"
typeof null //"object"
typeof { } //"object"
typeof [ ] //"object"
typeof console.log //"function"
各類型常用的操作方法
1.String
charAt 獲取字符串中指定位置的字符,若指定位置沒有,則返回空字符串
"let us play basketball!".charAt(0);//"l" 返回索引位置0處的字符
"let us play basketball!".charAt(100000);// "" 如果參數 大于 "string".length-1 (找不到)即返回 ""
charCodeAt 獲取字符串指定位置字符的unicode編碼
"let us play basketball!".charCodeAt(1);// 101
"let us play basketball!".charCodeAt(1000) //NaN 如果參數 大于 "string".length-1 (找不到)即返回 NaN
fromCharCode() 可接受一個或多個Unicode值,然后返回一個字符串。
String.fromCharCode(97, 98, 99, 100, 101); //"abcde"
indexOf(string,start)用來檢索指定的字符串值在字符串中首次出現的位置。它可以接收兩個參數,string表示要查找的子字符串,start表示查找的開始位置,省略的話則從開始位置進行檢索。
"let us play basketball!".indexOf("us");// 4
"let us play basketball!".indexOf("us",5);// -1 找不到則返回-1
lastIndexOf(string) 與indexOf類似,它返回的是一個指定的子字符串值最后出現的位置,其檢索順序是從后向前
"let us play basketball!".lastIndexOf("b");// 18
"let us play basketball!".lastIndexOf(" ",5);// 3 從索引為5處開始往前查找
-search(substr/regexp) 檢索字符串中指定的子字符串,或檢索與正則表達式相匹配的子字符串。它會返回第一個匹配的子字符串的起始位置,如果沒有匹配的,則返回-1。
"let us play basketball!".search("us");// 4
"let us play basketball!".search(/us/);// 4
"let us play basketball!".search(/usb/);// -1
subString(start,end) 從start位置截取到end位置截取字符串
"let us play basketball!".substring(4,6);// "us" //注意是包括開始項位置,不包括結束項位置
"let us play basketball!".substring(7);// "play basketball!" //第二個參數不傳,則默認截取到最后一位
"let us play basketball!".substring(1000);//"" 參數大于字符串length時返回 ""
slice(start,end) 與substring()方法非常類似,它傳入的兩個參數也分別對應著開始位置和結束位置。而區別在于,slice()中的參數可以為負值,如果參數是負數,則該參數規定的是從字符串的尾部開始算起的位置。也就是說,-1 指字符串的最后一個字符。
"let us play basketball!".slice(0,3);// "let"
"let us play basketball!".slice(-5,-1);// "ball" //截取順序依然是從左到右
replace(string/regexp,string) 字符串替換 第一個參數可以是字符串也可以是正則,將匹配到的內容用第2個參數替換掉
"let us play basketball!".replace("us","me");// "let me play basketball!"
"let us play basketball!".replace(/basketball/,"baseball");// "let us play baseball!"
"let us play basketball!".replace(/ /g,"--");// "let--us--play--basketball!" 利用g修飾符全部替換
split("") 按某字符將整個字符串拆分成數組,參數為字符串或者正則
"let us play basketball!".split(" ");//["let", "us", "play", "basketball!"]
"let us play basketball!".split(/ /);//["let", "us", "play", "basketball!"]
toLowerCase()和toUpperCase() 將字符串轉換成全部大寫或者全部小寫
"let us play basketball!".toUpperCase();//LET US PLAY BASKETBALL!"
2.Array
push(arg1,arg2,arg3) 向數組后面依次添加新的一項,返回的是新數組的長度
var arr1 = [1,2,3];
arr1.push(3,4,5);//6
console.log(arr1);//[1, 2, 3, 3, 4, 5]
pop() 刪除數組最后一項,并且返回該項
var arr1 = [1,2,3];
arr1.pop();//3
console.log(arr1);//[1, 2]
shift() 刪除數組第一項,并且返回該項
var arr1 = [1,2,3];
arr1.shift();//1
console.log(arr1);//[2,3]
unshift() 向數組開頭添加一項,并且返回新數組長度
var arr1 = [1,2,3];
arr1.unshift(0);// 4
console.log(arr1);//[0,1,2,3]
concat() 將多個數組拼成一個新的數組,并返回新數組
var arr1 = [1,2,3],
arr2 = [4,5,6],
arr3;
arr3 = arr1.concat(arr2);
console.log(arr1);// [1,2,3]
console.log(arr2);//[4,5,6]
console.log(arr3);//[1,2,3,4,5,6]
join() 把數組中的每一項 按照指定的分隔符拼接成字符串
var arr1 = ["let","us","play","basketball"];
var str1 = arr1.join(" ");
console.log(str1);//"let us play basketball"
splice 刪除數組中的任意項 返回值是被刪除的數組項(會改變原數組)
var arr1 = ["let","us","play","basketball"];
var arr2 = arr1.splice(0,2);
console.log(arr1);//?["play", "basketball"]
console.log(arr2);?//["let", "us"]
slice:復制數組 返回值是復制到的新數組 寫上數值之后 不包含被復制的最后一項(不改變原數組)
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1,3);
console.log(arr1);//?[1, 2, 3, 4, 5, 6]
console.log(arr2);?//?[2, 3] 也是包括開始位置項,不包括結束位置項
reverse:倒序數組 返回值倒序數組 (原有數組改變)
var arr1 = ["a","b","c","d"];
var arr2 = arr1.reverse();
console.log(arr1);//["d", "c", "b", "a"]
console.log(arr2);//["d", "c", "b", "a"]
sort 數組排序
var arr1 = [1,5,6,8,2];
arr1.sort(function(a,b){return a-b});//[1, 2, 5, 6, 8] 升序
arr1.sort(function(a,b){return b-a});//?[8, 6, 5, 2, 1] 降序
3.Object
hasOwnProperty():返回一個布爾值,表示某個對象是否含有指定的屬性,而且此屬性非原型鏈繼承。
var obj1 = {name:"kobe",age:18};
obj1.hasOwnProperty("name");//true
obj1.hasOwnProperty("height");//false
isPrototypeOf():返回一個布爾值,表示指定的對象是否在本對象的原型鏈中。
var Plays = function(obj){
this.name = obj.name;
this.age = obj.age;
}
var player1 = new Plays({name:"kobe",age:18});
console.log(Plays.prototype.isPrototypeOf(player1));//true
propertyIsEnumerable():判斷指定屬性是否可枚舉。
var obj1 = {a:1};
obj1.propertyIsEnumerable("a");//true
obj1.propertyIsEnumerable("__proto__");//false
toString():返回對象的字符串表示。
var obj1 = {a:1};
obj1.toString();//"[object Object]"
watch():給對象的某個屬性增加監聽。
unwatch():移除對象某個屬性的監聽。
valueOf():返回指定對象的原始值。
4.Number
toFixed(x)——把數字轉換為字符串,x為小數點后位數
10.235233.toFixed(1);///10.2
toPrecision(x)——把數字格式化為指定的長度
23.3336.toPrecision(2);//23
111.toPrecision(2); //Uncaught SyntaxError: Invalid or unexpected token
valueOf()——返回值
var boo = new Boolean(false)
document.write(boo.valueOf());//false
以上就是我的分享內容了!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/103091.html
摘要:基礎鞏固基礎總結使用已經好幾年了,由于工作主要是做服務端開發,在工作中逐漸發現的使用范圍原來越廣泛。這里要注意,務必將基礎部分掌握牢靠,磨刀不誤砍柴功,只有將基礎部分掌握并建立起系統的知識體系,在后面學習衍生的其他模式才能游刃有余。 基礎鞏固:JavaScript基礎總結 使用JavaScript已經好幾年了,由于工作主要是做服務端開發,在工作中逐漸發現JavaScript的使用范圍原...
摘要:函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言,然而,近幾年,函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此,...
摘要:然而,雖然先生對無所不知,被譽為世界的愛因斯坦,但他的語言精粹并不適合初學者學習。即便如此,在后面我還是會建議把當做補充的學習資源。但目前為止,依然是學習編程的好幫手。周正則表達式,對象,事件,閱讀權威指南第,,,章。 既然你找到這篇文章來,說明你是真心想學好JavaScript的。你沒有想錯,當今如果要開發現代網站或web應用(包括互聯網創業),都要學會JavaScript。而面對泛...
摘要:是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分,你將更好地理解并使用它們。到目前為止,你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。 本文是 前端練級攻略 第二部分,第一部分請看下面: 前端練級攻略(第一部分) 在第二部分,我們將重點學習 JavaScript 作為一種獨立的語言,如...
摘要:百煉成仙走紅該書于年月出版,作者楊逸飛是一名從事開發六年的程序員,寫過諸多技術博客。作者在博客上對粉絲提出關于百煉成仙的問題進行了統一回復,該博文持續占據熱榜第二,熱度達。 剛接觸編程的小伙伴,估計都想過把枯燥無聊的編程教材變成小說讀的念頭,這不,說曹操曹操就來了,真的有程序員用寫修仙小說的...
摘要:首先,需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考,面向對象編程是其一種思維方式,與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者(包括本人)低估甚至忽視了,這是因為絕大多數人沒有想要深刻理解這個機制的內涵,以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...
閱讀 1625·2023-04-26 02:43
閱讀 3045·2021-11-11 16:54
閱讀 1363·2021-09-23 11:54
閱讀 1182·2021-09-23 11:22
閱讀 2373·2021-08-23 09:45
閱讀 855·2019-08-30 15:54
閱讀 3107·2019-08-30 15:53
閱讀 3198·2019-08-30 15:53