1.JS的HelloWorld
alert('控制瀏覽器彈出一個(gè)警告框');
document.write('向body中輸出一個(gè)內(nèi)容');
console.log('向控制臺(tái)輸出一個(gè)內(nèi)容');
?
2.JS編寫(xiě)位置
可以將JS代碼寫(xiě)到
標(biāo)簽的onclick屬性中:<button onclick="alert('你點(diǎn)了我');">點(diǎn)我</button>
點(diǎn)擊執(zhí)行
超鏈接的href屬性中:<a href="javascript:alert('你點(diǎn)了超鏈接');">點(diǎn)我</a>
點(diǎn)擊執(zhí)行,可阻止超鏈接的默認(rèn)跳轉(zhuǎn)事件
以上兩種方式雖然可以,但是他們屬于結(jié)構(gòu)與行為耦合,不方便維護(hù),所以不推薦使用
寫(xiě)到script標(biāo)簽中也可以,這種方式稱(chēng)為:內(nèi)嵌式,與之對(duì)應(yīng)的還可以引入外部的js文件:
<script src="外部js文件路徑"></script>
這么做的優(yōu)勢(shì)是可以在不同的頁(yè)面中同時(shí)引用,推薦使用。
PS:script標(biāo)簽一旦用于引入外部文件就不能再在標(biāo)簽中編寫(xiě)代碼了,即使編寫(xiě)瀏覽器也會(huì)忽略,如果需要可創(chuàng)建一個(gè)新script標(biāo)簽。
?
3.JS的基本語(yǔ)法
/**/
? 多行注釋
//
? ? 單行注釋
被注釋的語(yǔ)句不會(huì)執(zhí)行
JS中嚴(yán)格區(qū)分大小寫(xiě);以分號(hào)結(jié)尾(英文分號(hào));會(huì)自動(dòng)忽略多個(gè)空格和換行;
?
4.字面量和變量
字面量:都是一些不可改變的值,都是可以直接使用的,但是一般不會(huì)直接使用字面量,例如:1 2 3 4 5
,
變量:可以保存字面量,而且變量的值可以任意改變,例如:a=1;
聲明變量:在JS中可以用var關(guān)鍵字來(lái)聲明一個(gè)變量,例如:var a=1;
還可以用let
和const
關(guān)鍵字定義。詳細(xì)使用說(shuō)明參考阮一峰的《ECMAScript 6 入門(mén)》的let和const命令一章
?
5.標(biāo)識(shí)符
在js中所有的可以由我們自主命名的都可以稱(chēng)為是標(biāo)識(shí)符,例如:變量、函數(shù)名、屬性名都屬于標(biāo)識(shí)符,命名規(guī)則參考Java
PS:JS底層保存的標(biāo)識(shí)符實(shí)際上是采用Unicode編碼,所以理論上所有的utf-8中含有的內(nèi)容都可以作為標(biāo)識(shí)符
? ? ? ? 例如:var 鋤禾日當(dāng)午=789;//但是一般不這么用
?
6.數(shù)據(jù)類(lèi)型
數(shù)據(jù)類(lèi)型指的就是字面量的類(lèi)型,在JS中一共有七種數(shù)據(jù)類(lèi)型:
String? 字符串:文本 ,例:var str = 'hello';
或 var str = "hello";
?
PS:?jiǎn)坞p引號(hào)不能混著用,但是雙引號(hào)中可以放單引號(hào),單引號(hào)中也可以放雙引號(hào),例:'hello."World"!'
。
Base64轉(zhuǎn)碼:btoa()
:任意值轉(zhuǎn)為 Base64 編碼
atob()
:Base64 編碼轉(zhuǎn)為原來(lái)的值
Number? 數(shù)值 :包括整數(shù)和f浮點(diǎn)數(shù)(小數(shù)),例:var num = 1;
或 var num = 0.1;
JS中可以表示的數(shù)字的最大值:Number.MAX_VALUE
,最小值:Number.MIN_VALUE
,
超出這兩個(gè)范圍的值分別被表示為Infinity
和-Infinity
,表示正無(wú)窮大和負(fù)無(wú)窮大
? 其中NaN
是一個(gè)特殊值,它是唯一不等于自身的值,且不等于任何值,與任何值的運(yùn)算結(jié)果都是NaN
?
? 英文全稱(chēng)是:Not a Number,但是它的類(lèi)型是Number
? PS:
JavaScript 內(nèi)部,所有數(shù)字都是以64位浮點(diǎn)數(shù)形式儲(chǔ)存,即使整數(shù)也是如此。
所以,1
與1.0
是相同的,是同一個(gè)數(shù)。
1 === 1.0 // true
這就是說(shuō),JavaScript 語(yǔ)言的底層根本沒(méi)有整數(shù),所有數(shù)字都是小數(shù)(64位浮點(diǎn)數(shù))。容易造成混淆的是,
某些運(yùn)算只有整數(shù)才能完成,此時(shí) JavaScript 會(huì)自動(dòng)把64位浮點(diǎn)數(shù),轉(zhuǎn)成32位整數(shù),然后再進(jìn)行運(yùn)算。
由于浮點(diǎn)數(shù)不是精確的值,所以涉及小數(shù)的比較和運(yùn)算要特別小心。
0.1 +?0.2 ===?0.3// false
0.3 / 0.1 // 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)// false
boolean? 布爾值:只有兩個(gè):true
和false
,分別表示真和假
undefined
、null
、false
、0
、NaN
、空字符串(''
)的值都是false,其他的值都是true
null? 空值
undefined? 未定義
Object對(duì)象:包括了狹義上的對(duì)象、數(shù)組和函數(shù)
狹義上的對(duì)象:Object
定義:var obj={foo:'Hello',bar:'World'};
或?var obj={'foo':'Hello','bar':'World'};
讀?。?code>obj['foo']? 或 obj.foo
修改:obj['foo'] = 'abc'
? 或??obj.foo = 'abc'
刪除:delete obj.p? // true
? 刪除成功,當(dāng)該屬性存在且不能刪除時(shí)會(huì)返回false
添加:obj['a'] = '123'
? 或? obj.a = '123'
遍歷:for(var key in obj){console.log('key:'+key); console.log('value:'+obj[key]);}
查看一個(gè)對(duì)象本身的所有屬性:Object.keys(obj);? ?//['foo', 'bar']
屬性是否存在:in運(yùn)算符: 'foo' in obj; // true
存在返回true,不存在返回false
with語(yǔ)句:with(obj){foo = '123'; bar = '321'}
等同于obj.foo = '123';
obj.bar='321'
數(shù)組:Array
定義:var array = ['a', 'b', 'c'];
length屬性:array.length //3
讀取:array[0] //'a'
或 array['0'] //'a'
修改:array[0] = 'aaa'
? 或??array['0'] = 'aaa'
刪除:delete a[2]; //['aaa', 'b']
? ?或?? array.length = 2; //['aaa', 'b']
添加:array.push('c');? //['aaa', 'b', 'c']
遍歷:for(var key in array){}
,forEach()?
,for(var i=0;i<array.length;i++){}
屬性是否存在:in運(yùn)算符:'1' in array;// true?
或?1 in array;//true
存在返回true,不存在返回false
原理:數(shù)組是一個(gè)鍵值為索引的對(duì)象,可以console.log(array);看看輸出結(jié)果
數(shù)組常用的幾個(gè)函數(shù):
?。?)push():該方法可以向數(shù)組的末尾添加一個(gè)或多個(gè)元素,并返回添加后數(shù)組的長(zhǎng)度。
例:array.push("a")
或array.push("a","b")
?。?)pop():該方法可以刪除數(shù)組的最后一個(gè)元素,并返回被刪除的元素。例:array.pop()
?。?)unshift():向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的長(zhǎng)度。
(4)shift():刪除數(shù)組的第一個(gè)元素,并返回被刪除的元素。
其他函數(shù):
?。?)concat():連接兩個(gè)或更多數(shù)組,并返回結(jié)果。
例:arr3 = arr1.concat(arr2)
或?arr4 = arr1.concat(arr2,arr3)
?。?)join():把數(shù)組的所有元素融入一個(gè)字符串,元素通過(guò)指定的分隔父進(jìn)行分隔,默認(rèn)為逗號(hào)分隔。
例:arr = ['a','bc','def']; arr.join();//a,bc,def
?
或? arr = ['a','bc','def']; arr.join('*');//a*bc*def
(7)reverse():顛倒數(shù)組中元素的順序,會(huì)改變?cè)瓟?shù)組。例:arr.reverse();//['def','bc','a']
?。?)slice():接受兩個(gè)參數(shù),如 (1, 3)。該方法會(huì)從開(kāi)始參數(shù)選取元素,直到結(jié)束參數(shù)(不包括)為止。
(9)sort():對(duì)數(shù)組的元素進(jìn)行排序。排序順序可以按字母或數(shù)字,也可以升序(向上)或降序(向下)。
默認(rèn)情況下,sort()?方法將按字母和升序?qū)⒅底鳛樽址M(jìn)行排序。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//Apple,Banana,Mango,Orange
這適用于字符串("Apple" 出現(xiàn)在 "Banana" 之前)。但是,如果數(shù)字按字符串排序,則 "25"
大于 "100" ,因?yàn)?"2" 大于 "1"。正因?yàn)槿绱?,sort()?方法在對(duì)數(shù)字進(jìn)行排序時(shí)會(huì)產(chǎn)生不正確
的結(jié)果??梢酝ㄟ^(guò)提供“比較函數(shù)”來(lái)解決此問(wèn)題。會(huì)改變?cè)瓟?shù)組。
? 例:按升序?qū)?shù)組中的數(shù)字進(jìn)行排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
按降序?qū)?shù)組中的數(shù)字進(jìn)行排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
(10)splice():刪除元素,并向數(shù)組添加新元素。
例:在位置 2,添加新項(xiàng)目,并刪除 1 個(gè)項(xiàng)目:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
(11)forEach():方法按順序?yàn)閿?shù)組中的每個(gè)元素調(diào)用一次函數(shù)??捎糜跀?shù)組的遍歷。
......
更多函數(shù)參考《JavaScript數(shù)組參考手冊(cè)》
函數(shù):Function
聲明:function print(msg){console.log(msg);}
? 或? var print = function(msg){console.log(msg);}
?
或? var print = new Function('msg', 'console.log(msg)');//構(gòu)造函數(shù)聲明
如果同一個(gè)函數(shù)被多次聲明,后面的聲明就會(huì)覆蓋前面的聲明。
如果有同名的參數(shù),則取最后出現(xiàn)的那個(gè)值。
調(diào)用:print('打印數(shù)據(jù)');
關(guān)于return:JavaScript 引擎遇到return語(yǔ)句,就直接返回return后面的那個(gè)表達(dá)式的值,后面即使還有語(yǔ)句,
也不會(huì)得到執(zhí)行。也就是說(shuō),return語(yǔ)句所帶的那個(gè)表達(dá)式,就是函數(shù)的返回值。return語(yǔ)句不是必
需的,如果沒(méi)有的話(huà),該函數(shù)就不返回任何值,或者說(shuō)返回undefined。
函數(shù)的屬性:print.name? //'print'
print.length //1
,返回函數(shù)參數(shù)的個(gè)數(shù),但如有參數(shù)設(shè)置了默認(rèn)值則返回0
設(shè)置參數(shù)默認(rèn)值:function f(a=1, b){}
print.toString() //返回函數(shù)的源代碼 :function print(msg){console.log(msg);}
關(guān)于arguments:
由于 JavaScript 允許函數(shù)有不定數(shù)目的參數(shù),所以需要一種機(jī)制可以在函數(shù)體內(nèi)部讀取所有參數(shù)。
這就是arguments對(duì)象的由來(lái)。arguments對(duì)象包含了函數(shù)運(yùn)行時(shí)的所有參數(shù),arguments[0]就是第
一個(gè)參數(shù),arguments[1]就是第二個(gè)參數(shù),以此類(lèi)推。這個(gè)對(duì)象只有在函數(shù)體內(nèi)部,才可以使用。
var f = function (one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f(1, 2, 3)
// 1
// 2
// 3
正常模式下,arguments對(duì)象可以在運(yùn)行時(shí)修改。
var f = function(a, b) {
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1) // 5
上面代碼中,函數(shù)f()調(diào)用時(shí)傳入的參數(shù),在函數(shù)內(nèi)部被修改成3和2。嚴(yán)格模式下,arguments對(duì)象
與函數(shù)參數(shù)不具有聯(lián)動(dòng)關(guān)系。也就是說(shuō),修改arguments對(duì)象不會(huì)影響到實(shí)際的函數(shù)參數(shù)。
var f = function(a, b) {
'use strict'; // 開(kāi)啟嚴(yán)格模式
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1) // 2
上面代碼中,函數(shù)體內(nèi)是嚴(yán)格模式,這時(shí)修改arguments對(duì)象,不會(huì)影響到真實(shí)參數(shù)a和b。
通過(guò)arguments對(duì)象的length屬性,可以判斷函數(shù)調(diào)用時(shí)到底帶幾個(gè)參數(shù)。
function f() {
return arguments.length;
}
f(1, 2, 3) // 3
f(1) // 1
f() // 0
PS:arguments是一個(gè)對(duì)象
Symbol 表示唯一的值
可以用typeof來(lái)檢測(cè)一個(gè)變量的類(lèi)型,語(yǔ)法:typeof 要檢測(cè)的值,例:typeof 'hello';
PS:typeof null;
的結(jié)果是‘Object’;typeof沒(méi)法區(qū)分對(duì)象和數(shù)組返回的都是Object,可以用instanceof來(lái)區(qū)分
基本數(shù)據(jù)類(lèi)型:Number、String、boolean、null、undefined、Symbol
?
7.數(shù)據(jù)類(lèi)型的轉(zhuǎn)換
? ? ? ? ?強(qiáng)制類(lèi)型轉(zhuǎn)換
? ? ?轉(zhuǎn)String:(1)調(diào)用被轉(zhuǎn)換數(shù)據(jù)類(lèi)型的toString()方法,該方法不會(huì)影響到原變量,它會(huì)將轉(zhuǎn)換結(jié)果返回;
PS:null、undefined沒(méi)有toString方法
? ? (2)調(diào)用String()方法,例:String(null);? ? //"null"
? ? ? 轉(zhuǎn)Number:(1)使用Number()函數(shù),例:Number("123");? //123
? ? ?(2)parseInt()函數(shù),把一個(gè)字符串轉(zhuǎn)換為一個(gè)十進(jìn)制整數(shù);parseFloat()函數(shù),把一個(gè)字符串轉(zhuǎn)換為一個(gè)十進(jìn)制小數(shù)。
? ? ?轉(zhuǎn)Boolean:Boolean()函數(shù),除了0、NaN、空串、null和undefined其他的都是true。
?
?
?
8.運(yùn)算符
算數(shù)運(yùn)算符:
加法運(yùn)算符:x + y
? ? PS:對(duì)象的相加
減法運(yùn)算符:?x - y
乘法運(yùn)算符:?x * y
除法運(yùn)算符:x / y
指數(shù)運(yùn)算符:x ** y
x的y次方
余數(shù)運(yùn)算符:x % y
自增運(yùn)算符:++x
?或者?x++
自減運(yùn)算符:--x
?或者?x--
數(shù)值運(yùn)算符:?+x
負(fù)數(shù)值運(yùn)算符:-x
PS:猜猜1 + +"2" + 3=?;
答案:6;+"2"這里+是做一元運(yùn)算符,會(huì)把其他數(shù)據(jù)類(lèi)型轉(zhuǎn)換為Number,使用原理和Number()函數(shù)一樣,同理-"2" = -2
比較運(yùn)算符:
>
?大于運(yùn)算符
<
?小于運(yùn)算符
<=
?小于或等于運(yùn)算符
>=
?大于或等于運(yùn)算符
==
?相等運(yùn)算符 比較值,1=='1'? //true
===
?嚴(yán)格相等運(yùn)算符? ?比較值和數(shù)據(jù)類(lèi)型? ? 1==='1'? //false
!=
?不相等運(yùn)算符? ? ? ??
!==
?嚴(yán)格不相等運(yùn)算符? ?
布爾運(yùn)算符:
取反運(yùn)算符:!
????用于將布爾值變?yōu)橄喾粗担磘rue變成false,false變成true。
且運(yùn)算符:&&
????用于多個(gè)表達(dá)式的求值,運(yùn)算規(guī)則是:如果第一個(gè)運(yùn)算子的布爾值為true,則返回第二個(gè)運(yùn)算子的值
? ? ?(注意是值,不是布爾值);如果第一個(gè)運(yùn)算子的布爾值為false,則直接返回第一個(gè)運(yùn)算子的值,
? ? 且不再對(duì)第二個(gè)運(yùn)算子求值。
? ? 這種跳過(guò)第二個(gè)運(yùn)算子的機(jī)制,被稱(chēng)為“短路”。有些程序員喜歡用它取代if
結(jié)構(gòu),比如下面是一段
? ??if
結(jié)構(gòu)的代碼,就可以用且運(yùn)算符改寫(xiě)。
? ??if (i) {doSomething();}
等價(jià)于 i && doSomething();
? ? 上面代碼的兩種寫(xiě)法是等價(jià)的,但是后一種不容易看出目的,也不容易除錯(cuò),建議謹(jǐn)慎使用。
或運(yùn)算符:||
? ? 用于多個(gè)表達(dá)式的求值,運(yùn)算規(guī)則和且運(yùn)算符相反
三元運(yùn)算符:?:
? ? JS中唯一一個(gè)需要三個(gè)運(yùn)算子的運(yùn)算符。如果第一個(gè)表達(dá)式的布爾值為true
,則返回第二個(gè)表達(dá)式
? 的值,否則返回第三個(gè)表達(dá)式的值。
? 二進(jìn)制位運(yùn)算符:
進(jìn)制或運(yùn)算符(or):符號(hào)為|
,表示若兩個(gè)二進(jìn)制位都為0
,則結(jié)果為0
,否則為1
。
二進(jìn)制與運(yùn)算符(and):符號(hào)為&
,表示若兩個(gè)二進(jìn)制位都為1,則結(jié)果為1,否則為0。
二進(jìn)制否運(yùn)算符(not):符號(hào)為~
,表示對(duì)一個(gè)二進(jìn)制位取反。
異或運(yùn)算符(xor):符號(hào)為^
,表示若兩個(gè)二進(jìn)制位不相同,則結(jié)果為1,否則為0。
左移運(yùn)算符(left shift):符號(hào)為<<
??
右移運(yùn)算符(right shift):符號(hào)為>>
頭部補(bǔ)零的右移運(yùn)算符(zero filled right shift):符號(hào)為>>>
PS:位運(yùn)算符只對(duì)整數(shù)起作用,如果一個(gè)運(yùn)算子不是整數(shù),會(huì)自動(dòng)轉(zhuǎn)為整數(shù)后再執(zhí)行。位運(yùn)算符只對(duì)整數(shù)起作用,
? 如果一個(gè)運(yùn)算子不是整數(shù),會(huì)自動(dòng)轉(zhuǎn)為整數(shù)后再執(zhí)行。
i = i | 0;
??上面這行代碼的意思,就是將i
(不管是整數(shù)或小數(shù))轉(zhuǎn)為32位整數(shù)。
??利用這個(gè)特性,可以寫(xiě)出一個(gè)函數(shù),將任意數(shù)值轉(zhuǎn)為32位整數(shù)。
function toInt32(x) {return x | 0;}
其他運(yùn)算符:
void
運(yùn)算符:
作用是執(zhí)行一個(gè)表達(dá)式,然后不返回任何值,或者說(shuō)返回undefined
例:void(0) // undefined
主要用途是瀏覽器的書(shū)簽工具(Bookmarklet),以及在超級(jí)鏈接中插入代碼防止網(wǎng)頁(yè)跳轉(zhuǎn)。
? 逗號(hào)運(yùn)算符:可用于分隔,例:var a=1, b=2;
也可用于對(duì)兩個(gè)表達(dá)式求值,并返回后一個(gè)表達(dá)式的值。例:var y = (1, 10);? //10
運(yùn)算順序:優(yōu)先級(jí);優(yōu)先級(jí)高則先計(jì)算;圓括號(hào)的優(yōu)先級(jí)很高,可以用來(lái)提高運(yùn)算的優(yōu)先級(jí);
js中大部分運(yùn)算符是左結(jié)合,少數(shù)是右結(jié)合(=、?:、**等)
?
本文摘自 :https://www.cnblogs.com/