js組成部分:
1、ECMAscript 核心語法
2钾埂、DOM
3、BOM
js書寫方式:
1科平、行內
2勃教、外聯 、在head標簽或在body標簽中使用script標簽匠抗,<script scr="路徑"></script>
優(yōu)點:徹底和html分離,便于后期維護
js輸出內容方式:
1污抬、alert
2汞贸、document.write
3、prompt
4印机、console.log
注釋: 單行注釋// 多行注釋 /**/
代碼的執(zhí)行順序:
從左到右矢腻、從上到下
數據類型
number 數值
String 單引號、雙引號 字符串和任何相加時都是字符串
unll 空
undefined 用var創(chuàng)建變量沒有賦值時會出現undefined
boolean true flase
引用數據類型:
數組 -Array
日期 - Date
對象 - Object
轉義符:
'把單引號變成普通字符
"把雙引號變成普通字符
字符串 拼接符(連接符) +
調試:
步驟一:在谷歌瀏覽器中鼠標右鍵射赛,選擇檢查多柑,打開開發(fā)者面板,選中soruces項楣责,打開并顯示我們的源代碼
步驟二:在指定js代碼處對應的行號單擊設置斷點
步驟三:刷新點擊下一步手動控制代碼的執(zhí)行過程竣灌。
變量
var
cons
let
變量的命名規(guī)范:規(guī)則:(法律)
變量名可以由數字、字母秆麸、下劃線_初嘹、$符組成、到不能藝術字開頭
不能使用關鍵字或保留字當作變量名沮趣。
變量名區(qū)分大小
規(guī)范(道德)
駝峰命名法屯烦,變量名若由多個單詞組成,第一個單詞首字母要小寫房铭,后面其它首字母要大寫
檢測:typeOf驻龟、indexOf
運算符
加+、減-缸匪、乘*翁狐、除/、取余%
賦值 =豪嗽、等于==谴蔑、全等===
加等于+=豌骏、減等于-=、*=隐锭、/=窃躲、
%=、<钦睡、>蒂窒、<=、>=荞怒、不全等!==
運算符的優(yōu)先級:
1. () 小括號
2. ++洒琢、--、! 一元運算符
3. +褐桌、-衰抑、、/荧嵌、% 算術運算符 先乘除取余數再加減
4. >呛踊、 <、 >=啦撮、 <=谭网、 ==、 !=赃春、 ===愉择、 !==、 比較運算符(關系運算符)
5. &&织中、 || 邏輯運算符锥涕, 先&&后||
6. =、 +=抠璃、-=站楚、=、/=搏嗡、%=
==和===區(qū)別:等于是比較值窿春,全等是比較的值和類型
轉義符
拼接 +
表示方式 十進制 、 小數采盒、NAN旧乞、isNAN(檢測)
一元運算符:
運算符僅僅運算一種數據【自增、自減磅氨、取反】
二元運算符:
運算符可以運算兩種數據【算術尺栖、比較、邏輯】
邏輯運算符:
且運算$$ 規(guī)則:兩邊條件都符合時候(true),最終結果就是true烦租,否則是false
或運算|| 規(guī)則:連邊條件符合一個就是true延赌、兩邊都不符合就是false
取反除盏! 規(guī)則:就是取反
返回布爾值
自增
自減
var a = 10;
var sum = ++a + a++;
// a = a+1; a=11;
// sum = 11+a++
// sum = 11 + 11;//22
// a= a + 1; a = 12
數據類型轉換
轉字符串 string() undefinde和null 不能調用string
轉數字 Number()
隱式轉換:
string:任何數據和字符串相加都會自動轉換為string類型
Number:任何數據在做算術運算時(除了和字符串相加外),或任何數據在
在和數據比較時挫以,其他運算都會自動轉換Number
NAN:任何數據和NaN做算術運算時者蠕,都是NaN, NaN==NaN(false)
boolean:- 在取反運算時掐松,其他數據會自動轉換為布爾值
在分支結構或循環(huán)結構的條件判斷中踱侣,其他數據會自動轉換成布爾值(后續(xù)演示...)
順序結構:
從左到右,從上到下
分支結構:
if大磺、else 抡句、else if else
switch case: break; default
三元表達式:hours = hours<10?'0'+hour:hour;
循環(huán)結構
while() do()while() for()
強制轉換字符串:
方式1 tostring()
undefined 和null不能調用toString()
方式2 string();
強制轉數字:
字符串數值轉數字
方式1 Number('')
非字符串數字轉數字
方式2 Number('abc') //NaN
布爾值轉數字
Number(true) //1
Number(false) //0
Undefined和NULL轉數字
Number(undefined) //NaN
Number(null) //0
轉換布爾值:
方式:Boolean(其他數據)
console.log( Boolean('') );
console.log( Boolean(0) );
console.log( Boolean(undefined) );
console.log( Boolean(NaN) );
console.log( Boolean(null) );
轉為整數:只顯示整數 若前面是數值,后面是字母杠愧,那么只會提取前面的數值
parseInt
轉為小數:會顯示小數
parseFloat ()
任何數據和字符串[相加]都會自動轉換為String類型待榔。
var age = '5' + 100; // '5' + '100'
console.log(age);
隱式轉換 ---- 會 布爾值 取反 或 $$
while(條件表達式) 和for循環(huán)很相似:1、先定義變量流济、2究抓、條件、3袭灯、count++
先滿足條件在執(zhí)行
count++
do-while{}(條件表達式)
不管條件是否滿足,至少執(zhí)行一次
for
針對循環(huán)次數確定時绑嘹,可以用for循環(huán)稽荧;
break
由于它是用來退出循環(huán)或者swicth語句,所以只有它出現這些語句工腋,這種形式break語句才是合法的姨丈。
是立即結束語句,并從頭執(zhí)行該語句
continue
continue語句只能用在while語句擅腰、do/while語句蟋恬、for語句或者for/in語句的循環(huán)
體內的,在其它地方都會報錯
結束當前循環(huán)趁冈,進入下個循環(huán)
循環(huán)結構
for歼争、while、do while
解決循環(huán)渗勘,for死循環(huán)沐绒,次確定時候用for循環(huán),加加也可以減減的
關鍵字:
break 跳出整個循環(huán)
continue 跳出這個給循環(huán)旺坠,循環(huán)下次循環(huán)
數組:
索引是有序的乔遮、從0開始
數組長度:
是從1開始的
創(chuàng)建:
var arr = new Array();
var arr = []
規(guī)范:
可以傳任何數據
操作數組:
根據數組中的某一個位置獲取數據 數組名【索引】length
遍歷數組:
可以通過for循環(huán)
獲取長度
數組名.length
修改數組指定的元素:
數組名[下標] = 值;//修改
清空數組:
數組名.length= 0;//清空數組
數組最后追加新元素:
數組名[數組中.lrngth-1] = 值取刃;//添加最后一個元素
函數創(chuàng)建
創(chuàng)建 function num(形參數){}
調用 num()
// 問題:針對按需使用的程序蹋肮,在使用的地方每次都復制源代碼出刷,造成代碼
形參:創(chuàng)建的函數形參
實參和形參是一一對應的,函數名是顧名思義的坯辩。
實參是調用里的就是實參
返回值
return關鍵字是配合函數的使用的
數組總結
冒泡排序 筆試題 手寫----過程 就是重復的【比較相鄰的數字】
規(guī)律:比較多少趟數
內層循環(huán)比較多少次 數組名馁龟。length-1
找到兩個相鄰的兩個位置
return 數據
函數體內沒有返回值 :就會返回undefined
})(實參)//這是調用
// 讓匿名函數和''運算符''配合使用
// "("function(){"}"
// (function()()調用{})//這個用的多一點
// !function(){}//運算符!語法不報錯濒翻,這就是匿名函數
// -function(){}//運算符- 語法不報錯屁柏,這就是匿名函數
(function fn(){})
匿名函數
(function(){
console.log(1)
console.log(1)
console.log(1)
})();//小括號就是調用了,只能用一次
// 自調用-創(chuàng)建好函數有送,馬上執(zhí)行
arguments 偽數組----只能在函數體內使用
可以獲取用戶傳入的所有實參
操作時淌喻,可以像數組一樣
針對用戶傳入的實參個數不確定時可以選用arguments,其它情況依然要寫參數
創(chuàng)建對象:
var arr = new Object{}
var arr = {}
創(chuàng)建對象
之前必須得先有模板(構造函數)
昨天作業(yè)總結:
階乘:
需求:寫一個函數雀摘,并返回值裸删,(如:3的階乘,1x2x3)阵赠;
功能:實現階乘
參數:
num表示是一個數組number
返回值:返回一個數字 (返回的結果是階乘的結果)
注意:未來不要在函數中處理結果涯塔,因為結果是要交給使用者的,使用者根據自己需求處理結果
質數:不懂
簡單計算機:
用函數封裝:實現加減乘除的效果
參數:
數值1清蚀,數值2匕荸,數值三(代表運算符)
技術用swicth寫的
返回值
回調函數
作用域:
全局變量:全局變量就是在函數外定義的var變量就是去全局變量
局部變量:就是函數體內的var定義的變量以及參數都是局部變量
作用域鏈:一個函數嵌套另一個函數:找本身的的變量,如果找不到就去上一級去找枷邪,這就形成了作用域鏈
預解析:提升變量榛搔、函數提升
變量提升,提升到當前作用域
函數提升东揣,提升到當前作用域
構造函數創(chuàng)建方式:
var arr = new Object();
var arr = {};
創(chuàng)建數組
var arr = Array()
var arr = []
函數表達式
var fn = function(){}
函數聲明
function fn(){}
創(chuàng)建對象
var arr = Object();
var arr = {}
匿名函數
(function fn(){})
自定義構造函數:
復習
函數進階
作用域
全局作用域 函數外部定義的var關鍵字就是全局作用域践惑,函數體外執(zhí)行環(huán)境
局部作用域 函數體內的執(zhí)行環(huán)境
作用域鏈 先從本身,如沒有去上級查找嘶卧,就形成了作用域鏈
與解析
提升變量var 僅僅提成的變量名 函數聲明整體會提升
函數創(chuàng)建方式
函數表達式
var 變量名 = function(){}
類型function就是函數的類型
匿名函數和自執(zhí)行函數
(function fn(){}())
就是自調用尔觉、后面哪個括號就是調用
arguments
在js中不用寫形參,像數組一樣獲取每一個下標芥吟,偽數組
對象基礎:
屬性和方法組成的
屬性:靜態(tài) 男
方法:動態(tài) 會吃侦铜、會跑
【創(chuàng)建對象】:
構造函數:1、系統(tǒng)給的 2钟鸵、自定義的
系統(tǒng)提供的構造函數:Object
創(chuàng)建方式1
var wc = new Object()
創(chuàng)建方式2 經常用
var wc = {}
添加屬性:
語法1:對象名.key = value
語法2:對象名['kay'] = value
獲缺枚睢:
對象名:key
對象名['kay']
調用方法:
對象名.方法名()
添加屬性:
name:'旺財',.....
刪除
delete 對象名.值
檢測對象的成員是否存在
語法:對象名.hasOwnProperty('age')
返回:存在true 不存在false
檢測一個對象是否某個類型
對象名 instanceof 構造函數名
是的true 不是false
遍歷:
數組:可以通過for循環(huán)遍歷,因為有索引携添,而且是有序的索引
數組:一組有序的數據集合嫁盲。
對象:一組無序的數據集合。
遍歷對象: for-in
在變量的過程中,key表示對象中某一個鍵名(屬性名或方法名)是一個變量羞秤,所以在使用時使用中括號的方式訪問缸托。
注意:遍歷中不要使用點的方式獲取鍵所對應的值。
for(var key in lb) {
console.log(lb[key])
}
構造函數
object Array function
創(chuàng)建一個自定義構造函數
1瘾蛋、創(chuàng)建對象 function num(){}
2俐镐、this.屬性=值;
3、var r = new 對象名(值);
new1和new2比較的是內存地址 那么就等于false
注意:自定義構造函數對象首字母是大寫哺哼,調用的時候用new的方式
new關鍵字的執(zhí)行過程
1佩抹、向內存中申請一塊空間,將要創(chuàng)建的對象
2取董、this關鍵字指向當前創(chuàng)建的對象(指向內存申請的這一塊空間)
3棍苹、通過this向內存中的空間添加屬性與方法
4、外部變量會接受所創(chuàng)建好的對象
相同:都是函數
不同點:
1茵汰、規(guī)范:普通函數命名要符合( 駝峰命名法)枢里;調用:直接調用
2、規(guī)范:構造函數命名法要符合蹂午,帕斯卡命名法(對象名首字母大寫)調用:通過new的方式調用
03基本數據類型和引用數據類型區(qū)別【理解】
1栏豺、棧和堆
2、基本數據類型 和 引用數據類型作為函數傳參時
內置對象:
系統(tǒng)所提供的對象如:Object豆胸、Array奥洼、Math、Date等等
宿主對象:js所運行環(huán)境的對象比如:Bom中的window晚胡、Dom中的document
自定義對象:自定義構造函數所創(chuàng)建的對象
內置對象--Math
console.log(Math)
// 屬性
console.log(Math.PI);
// 方法 絕對值
var r = Math.abs(-100);
// console.log(r)
// 四舍五入
var r = Math.round(100.1)
console.log(r);
// 向上取整
var r = Math.ceil(100.1);
console.log(r)
// 向下取整
var r = Math.floor(100.9999);
console.log(r);
// 最大數
var r = Math.max(1,7,2,54,9,4);
console.log(r)
// 最小數
var r = Math.min(824,4,57586,2);
console.log(r);
內置對象--Date
02操作對象
1溉卓、獲取和設置屬性與方法
2、刪除對象的成員
3搬泥、檢測對象成員
4、遍歷對象成員
5伏尼、檢測對象函數創(chuàng)建對象
5忿檩、new關鍵字和普通函數的區(qū)別
this方法指向
的是調用者
日期對象-date
3.2 Math對象常用屬性和方法
- Math.abs(數字); 獲取一個數字的絕對值
- Math.round(數字); 四舍五入
- Math.PI; π
- Math.ceil(數字); 向上取整
- Math.floor(數字); 向下取整
- Math.random(); 隨機數[0,1);
- Math.max(數字,數字,數字...); 求最大數
- Math.min(數字,數字,數字...); 求最小數
// gat 獲取
創(chuàng)建一個日期對象
var date = new Date()
// 獲取
var year = date.getFullYear() //獲取年份
var month = date.getMonth() //獲取月份 是從0到11月份
var day = date.getDate() //獲取日期
var hours = date.getHours() //獲取小時
var Minutes = date.getMinutes() //獲取分鐘
var Seconds = date.getSeconds() //獲取 秒
var Milliseconds = date.getMilliseconds() //獲取毫秒
var d = date.getDay()//獲取星期數
var time = date.getTime();//獲取總毫秒//獲取從1970到某一個時間點額時間戳
document.write(time);
// document.write(date)
設置 set
內置對象---數組對象
unshift 數組前面添加
shift 數組前面刪除
push 數組后面添加
pop 數組后面刪除
數組任意位置添加和刪除 刪除 修改 添加
splice()
1、在第幾個位置
2爆阶、在刪除幾個
3燥透、添加數據
檢測一個數據在數組中的位置 indexOf()
返回數據類型:number、string辨图、undefiend班套、unll、Boolean故河、object
返回-1 表示不存在
indexOf('aa',1);第一個之后查找aa
反轉
reverse()反轉
排序
sort
要用匿名函數吱韭,規(guī)則
截取
arr.slice
var j = arr.slice(1,3); //包括1不包括3,也就是截取第一個和第二個
拼接
arr.join('傳參')
默認用 '逗號' 拼接
\n 表示換行 \t tab鍵縮進
數組遍歷
1鱼的、數組名.forEach(function(value,index,currentArray){
console.log(value);
});
2理盆、過濾出符合篩選條件的元素痘煤,返回一個新的數組
數組名.filter(function(value,index,currentArray){
return 條件; // 如:return value >= 1000;
});
3、// 驗證數組中的每一個元素是否都符合指定的條件,返回布爾值
數組名.every(function(value,index,currentArray){
return 條件; // 如:return value >= 1000;
});
4猿规、// 驗證數組中的元素衷快,是否有符合指定條件的,返回布爾值
數組名.some(function(value,index,currentArray){
return 條件; // 如:return value >= 1000;
});
5姨俩、// 遍歷數組中的每一個元素蘸拔,更改后存入一個新的數組中,返回一個新的數組
數組名.map(function(value,index,currentArray){
return 操作; // 如:return value * 2;
});
清空數組的方法:
舉栗:
var arr = [11,44,22,66];
方式1
arr = [ ]
方式2
arr.length = 0;
方式3
arr.splice(0,arr.length)
string字符串的不可變性【了解】
var str = 'abc';
str = 'hello';
當重新給str賦值的時候环葵,數據'abc'不會被修改调窍,依然在內存中
重新給字符串賦值,會重新在內存中開辟空間积担,這個特點就是字符串的不可變
由于字符串的不可變陨晶,在大量拼接字符串的時候會有效率問題
基本包裝對象【了解】
普通字符串
var str = 'abc'; // 普通字符串不是對象
var len = str.length; // 但是為什么可以像對象一樣使用點出東西?
alert(len); //3
把字符串包裝成對象 → 基本包裝類型
var strObj = new String('abc'); // 把字符串包裝成對象
var len = strObj.length; // 因為是對象帝璧,所以可以點出東西先誉。
alert(len); //3
字符串對象常用的方法
字符串所有的發(fā)方法 都 不會修改字符串本身(字符串是不可變性的),
操作完成會 返回一個新的字符串
獲取字符串中的單個字符
字符串.charAt()
字符串[ibdex]的烁;推薦使用
字符串的拼接和截取
字符串.concat(1,2,3..);
拼接符 + 推薦使用
截群侄:字符串.slice(start,end);
查詢字符串是否在字符串中存在
字符串.indexOf();
字符串.lastIndexOf()
字母字符大小寫轉換
字符串.toUpperCase() //轉換大寫
字符串.toLowerCase()//轉換小寫
字符串替換:
字符串.replace(oldStr,newStr); 默認僅僅修改一次
字符串分割:
字符串.split();