Javascript基礎
閱讀目錄：javascript
1.概念html
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。由於Netscape與Sun合做，Netscape管理層但願它外觀看起來像Java，所以取名爲JavaScript。但實際上它的語法風格與Self及Scheme較爲接近。
[1]
爲了取得技術優點，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript一樣可在瀏覽器上運行。爲了統一規格，由於JavaScript兼容於ECMA標準，所以也稱爲ECMAScript。
注：ES6就是指ECMAScript 6。java
儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：python
- 核心（ECMAScript） 由ECMA-262定義，提供核心語言功能（ECMA是歐洲計算機制造商協會）
- 文檔對象模型（DOM） Document object model (整合js，css，html) 提供訪問和操做網頁內容的方法和接口
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）提供與瀏覽器交互的方法和接口
2.註釋
- 單行註釋 //
- 多行註釋 /*內容*/
單行註釋
// 這是單行註釋
多行註釋
/*
這是
多行註釋
*/
3.引入文件正則表達式
a.引入外部js文件
<script src="myscript.js"></script>
b.存放在HTML的<head>或<body>中數組
<script type="text/javascript">
Js代碼內容
</script>
4.語言規範
JavaScript中的語句要以分號（;）爲結束符。
5.聲明變量
- JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。
- 聲明變量使用 var 變量名; 的格式來進行聲明
注意：瀏覽器
- 變量名是區分大小寫的。
- 推薦使用駝峯式命名規則。
- 保留字不能用作變量名。
補充：閉包
ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。dom
for (let i=0;i<arr.length;i++){...}
ES6新增const用來聲明常量。一旦聲明，其值就不能改變。
const PI = 3.1415; PI // 3.1415 PI = 3 // TypeError: "PI" is read-only
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
在 JavaScript 中有 5 種不一樣的數據類型：
-
- string
- number
- boolean
- object
- function
3 種對象類型：
-
- Object
- Date
- Array
2 個不包含任何值的數據類型：
-
- null
- undefined
1.數字(Number)
JavaScript不區分整型和浮點型，就只有一種數字類型。
轉換：
- parseInt(..) 將某值轉換成整數，不成功則NaN
- parseFloat(..) 將某值轉換成浮點數，不成功則NaN
NaN not a number 不是一個數字
特殊值：
- NaN，非數字。可使用 isNaN(num) 來判斷。
- Infinity，無窮大。可使用 isFinite(num) 來判斷。
| Number.MAX_VALUE | 最大數值 |
| Number.MIN_VALUE | 最小數值 |
| Number.NaN | 非數字 |
| Number.NEGATIVE_INFINITY | 負無窮大 |
| Number.POSITIVE_INFINITY | 正無窮大 |
| Number.toExponential( ) | 返回四捨五入的科學計數法，加參數爲保留幾位 |
| Number.toFixed( ) | 小數點後面的數字四捨五入，加參數爲保留幾位 |
| Number.toPrecision( ) | 四捨五入，自動調用toFixed()或toExponential() |
| Number.toLocaleString( ) | 把數字轉換成本地格式的字符串 |
| Number.toString( ) | 將數字轉換成字符串 |
| Number.valueOf( ) | 返回原始數值 |
1 var a = 12.34; 2 var b = 20; 3 var c = 123e5; // 12300000 4 var d = 123e-5; // 0.00123 5 undefined 6 a 7 12.34 8 b 9 20 10 c 11 12300000 12 d 13 0.00123 14 parseInt(a) 15 12 16 parseInt(b) 17 20 18 parseInt(c) 19 12300000 20 parseInt(d) 21 0
2.字符串(String)
var a = "Hello" var b = "world; var c = a + b; console.log(c); // 獲得Helloworld
經常使用方法：
| String.length | 字符串的長度 |
| String.trim() | 移除空白 |
| String.trimLeft() | 移除左側空白 |
| String.trimRight() | 移除右側空白 |
| String.concat(value, ...) | 拼接 |
| String.slice(start, end) | 切片 |
| String.split( ) | 分割 |
| String.search( ) | 從頭開始匹配，返回匹配成功的第一個位置(g無效) |
| String.match( ) | 全局搜索，若是正則中有g表示找到所有，不然只找到第一個 |
| String.replace( ) | 替換，正則中有g則替換全部，不然只替換第一個匹配項；
$數字：匹配的第n個組內容；
$&：當前匹配的內容；
$`：位於匹配子串左側的文本；
$'：位於匹配子串右側的文本
$$：直接量$符號
|
| String.charAt( ) | 返回字符串中的第n個字符 |
| String.charCodeAt( ) | 返回字符串中的第n個字符的代碼 |
| String.fromCharCode( ) | 從字符編碼建立—個字符串 |
| String.indexOf( ) | 查找子字符串位置 |
| String.lastIndexOf( ) | 查找子字符串位置 |
| String.localeCompare( ) | 用本地特定的順序來比較兩個字符串 |
| String.substr( ) | 抽取一個子串 |
| String.substring( ) | 返回字符串的一個子串 |
| String.toLocaleLowerCase( ) | 把字符串轉換小寫(針對地區，在不知道程序在哪一個語言環境中運行時用) |
| String.toLocaleUpperCase( ) | 將字符串轉換成大寫(針對地區) |
| String.toLowerCase( ) | 小寫 |
| String.toUpperCase( ) | 大寫 |
| String.toString( ) | 返回原始字符串值 |
| String.toString() | 返回原始字符串值 |
| String.valueOf( ) | 返回原始字符串值 |
1 \0 空字節 2 \n 換行 3 \t 製表 4 \b 空格 5 \r 回車 6 \f 進紙 7 \\ 斜槓 8 \' 單引號 9 \" 雙引號
var s1 = " fex l i x " s1.length // 13 s1.trim() // "fex l i x" s1.trimLeft() // "fex l i x " s1.trimRight() // " fex l i x" s1.charAt(8) // "i" s1.concat('123') // " fex l i x 123" s1.indexOf('l') // 6 s1.substring(5) // " l i x " s1.substring(3,9) // "ex l i" s1.slice(3,9) // "ex l i" s1.substring(-3,9) // " fex l i" s1.slice(-3,9) // "" s1.toLocaleLowerCase() // " fex l i x " s1.toUpperCase() // " FEX L I X " s1.split(" ") // (8) ["", "", "fex", "l", "i", "x", "", ""] s1.split(' ',3) // (3) ["", "", "fex"] 第2個參數限制返回值個數
string.slice(start, stop)和string.substring(start, stop)： 二者的相同點： 若是start等於end，返回空字符串 若是stop參數省略，則取到字符串末 若是某個參數超過string的長度，這個參數會被替換爲string的長度 substirng()的特色： 若是 start > stop ，start和stop將被交換 若是參數是負數或者不是數字，將會被0替換 silce()的特色： 若是 start > stop 不會交換二者 若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符) 若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)
3.布爾類型（Boolean）
true和false
注意： ""(空字符串)、0、null、undefined、NaN都是false。
| toString() | 返回Boolean的字符串值('true'或'false') |
| toLocaleString() | 返回Boolean的字符串值('true'或'false') |
| valueOf() | 返回Boolean的原始布爾值(true或false) |
4.null和undefined
- null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
- undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。
5.JS中的對象---數組(Array)
var name = Array("felix","alina");
var name = ["felix","alina"];
經常使用方法：
| Array.length | 數組的大小 |
| Array.push() | 尾部添加元素 |
| Array.pop() | 刪除並返回數組的最後一個元素 |
| Array.unshift() | 在數組頭部插入一個元素 |
| Array.shift( ) | 在數組頭部移除一個元素 |
| Array.slice( ) | 切片 |
| Array.reverse( ) | 反轉 |
| Array.join( ) | 將數組元素鏈接起來以構建一個字符串 |
| Array.concat( ) | 拼接 |
| Array.sort( ) | 排序 |
| Array | 對數組的內部支持 |
| Array.splice( start, deleteCount, value, ...) | 插入、刪除或替換數組的元素 obj.splice(n,
0
,val) 指定位置插入元素
obj.splice(n,
1
,val) 指定位置替換元素
obj.splice(n,
1
) 指定位置刪除元素
|
| Array.toLocaleString( ) | 把數組轉換成局部字符串 |
| Array.toString( ) | 將數組轉換成一個字符串 |
1 // 數組 2 var a = [123,'abc',true,'123']; 3 a 4 // (4) [123, "abc", true, "123"] 5 a.length 6 // 4 7 a[2] 8 // true 9 a.push('abcd') 10 // 5 11 a.pop() 12 // "abcd" 13 a.unshift('AAA') 14 // 5 15 a 16 // (5) ["AAA", 123, "abc", true, "123"]
使用.sort()排序需注意：
若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。
若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：
若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。
function sortNumber(a,b){
return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
1 var a = [10, 20, 30, 40]; 2 for (var i=0;i<a.length;i++) { 3 console.log(a[i]); 4 }
6.JS中的對象---「字典」
var obj_dict = {name:'felix',age:18,gender:'boy'}
obj_dict
{name: "felix", age: 18, gender: "boy"}
obj_dict.name
"felix"
obj_dict.age
18
obj_dict["name"]
"felix"
7.判斷數據類型 typeof
typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。
對變量或值調用 typeof 運算符將返回下列值之一：
undefined - 若是變量是 Undefined 類型的 boolean - 若是變量是 Boolean 類型的 number - 若是變量是 Number 類型的 string - 若是變量是 String 類型的 object - 若是變量是一種引用類型或 Null 類型的
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
null == undefined true typeof null "object" list = [1,2,3] typeof list "object"
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [ 1,2,3,4] // 返回 object
typeof {name: 'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (if myCar is not declared)
typeof null // 返回 object
1.算數運算符
| 運算符 | 含義 |
| + | 加法 |
| - | 減法 |
| * | 乘法 |
| / | 除法 |
| % | 取餘 |
| ++ | 遞增1 |
| __ | 遞減1 |
2.比較運算符
| 運算符 | 含義 |
| > | 大於 |
| >= | 大於等於 |
| < | 小於 |
| <= | 小於等於 |
| != | 不等於 |
| == | 弱等於 若是兩個操做值不是同一類型，相等運算符會嘗試進行一些類型轉換，而後再進行比較 |
| === | 強等於 比較過程沒有任何類型轉換 |
| ！== | 嚴格運算符 ===的結果取反 |
1 == 「1」 // true 1 === "1" // false
3.邏輯運算符
| 運算符 | 含義 |
| && | 與 |
| || | 或 |
| ! | 非 |
4.賦值運算符
| 運算符 | 含義 |
| = | 賦值 |
| += | a+=b 等同於 a = a + b |
| -= | a-=b 等同於 a=a-b |
| *= | a*=b 等同於 a=a*b |
| /= | a/=b 等同於 a=a/b |
1.條件語句
JavaScript中支持兩個條件語句，分別是：if 和 switch。
(1)if else語句
//if語句
if(條件){
}else if(條件){
}else{
}
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
(2)switch語句
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
//switch語句，name等於nick是執行第一個case,等於第二個執行第二個case,其它執行default.
switch(name){
case 'felix':
age = 18;
break;
case 'alina':
age = 21;
break;
default :
age = 0;
}
2.循環語句
JavaScript中支持四種循環語句，分別是：for、for in、while、do-while
(1)for循環
for (語句 1; 語句 2; 語句 3)
{
被執行的代碼塊
}
語句 1 在循環（代碼塊）開始前執行
語句 2 定義運行循環（代碼塊）的條件
語句 3 在循環（代碼塊）已被執行以後執行
for循環：
var a = ["123","abc",123,true,false];
for (var i=0;i<a.length;i++){
console.log(i);
console.log(a[i]);
}
(2)for in循環
JavaScript for/in 語句循環遍歷對象的屬性：
for in 循環：
for (var index in a){
console.log(index);
console.log(a[index]);
}
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
(3)while循環
While 循環會在指定條件爲真時循環執行代碼塊。
while (條件)
{
須要執行的代碼
}
var age = 18;
while(age < 100) {
console.log(age);
age ++;
}
(4)do/while 循環
do/while 循環是 while 循環的變體。該循環會執行一次代碼塊，在檢查條件是否爲真以前，而後若是條件爲真的話，就會重複這個循環。
do
{
須要執行的代碼
}
while (條件);
var x="",i=0; do { x=x + "The number is " + i + "<br>"; i++; } while (i<5)
3.三元運算
var a = 10; var b = 20; var c = a > b ? a+b:a-b;
4.異常處理
- try 語句測試代碼塊的錯誤。
- catch 語句處理錯誤。
- throw 語句建立自定義錯誤。
try
{
//在這裏運行代碼
}
catch(err)
{
//在這裏處理錯誤
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <script> function myFunction(){ try{ var x=document.getElementById("demo").value; if(x=="") throw "值爲空"; if(isNaN(x)) throw "不是數字"; if(x>10) throw "太大"; if(x<5) throw "過小"; } catch(err){ var y=document.getElementById("mess"); y.innerHTML="錯誤：" + err + "。"; } } </script> </head> <body> <h1>個人第一個 JavaScript</h1> <p>請輸出一個 5 到 10 之間的數字:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">測試輸入</button> <p id="mess"></p> </body> </html>
在JavaScript中，函數即對象，能夠隨意地被程序操控，函數能夠嵌套在其餘函數中定義，這樣能夠訪問它們被定義時所處的做用域中的任何變量。
1.JS函數語法
函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：
function functionname()
{
執行代碼
}
提示：function 中的花括號是必需的，即便函數體內只包含一條語句，仍然必須使用花括號將其括起來。
JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，而且必須以與函數名稱相同的大小寫來調用函數。
// 普通函數定義
function f1() {
console.log("Hello world!");
}
// 帶參數的函數
function f2(a, b) {
console.log(arguments); // 內置的arguments對象
console.log(arguments.length);
console.log(a, b);
}
// 帶返回值的函數
function sum(a, b){
return a + b;
}
sum(1, 2); // 調用函數
// 匿名函數方式
var sum = function(a, b){
return a + b;
}
sum(1, 2);
// 當即執行函數
(function(a, b){
return a + b;
})(1, 2);
2.函數的調用
(1)直接調用
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
console.log("=======================================")
}
function f2(a,b) {
console.log('a:',a);
console.log('b:',b);
console.log('共有參數：'+ arguments.length + '個');
var ret = 0;
for (var i=0;i<arguments.length;i++){
console.log(i)
ret += arguments[i]
}
return ret
}
var c = 100;
console.log(f2(10,20,30,40,c))
(2)在鏈接中調用
在鏈接中調用以上函數
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>函數</title>
<script src="func.js"></script> //首先從外部導入
</head>
<body>
<a href="javascript:foo()" style="display: block">foo</a> //指定函數名稱調用
<a href="javascript:f2(10,20,30)">f2</a> //指定函數名稱調用
</body>
</html>
3.函數參數和arguments參數
函數傳參的個數能夠小於實際需傳參的個數，沒傳參的默認爲undefined
function person(name,age) {
console.log(name,age)
}
person("felix",18); //felix 18
person("felix"); //felix undefined
person("felix",18,"boy"); //felix 18
arguments參數：arguments 可接收全部參數，返回一個數組
function person() {
console.log(arguments);
console.log(arguments.length)
}
person('felix');
person('felix',18);
person('felix',18,'gender');
// 執行結果:
// Arguments ["felix", callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 1
// Arguments(2) ["felix", 18, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 2
// Arguments(3) ["felix", 18, "gender", callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 3
function add(a,b){
console.log(a+b);
console.log(arguments.length)
}
add(1,2)
執行結果：
3
2
4.函數的全局變量和局部變量
局部變量：
在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。
全局變量：
在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。
變量生存週期：
JavaScript變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行之後被刪除。
全局變量會在頁面關閉後被刪除。
5.做用域
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。
var name = 'felix';
(function person(){
console.log(name);//undefined
var name = 'alina';
console.log(name);//alina
})();
console.log(name);//felix
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //輸出結果是？ ShenZhen
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印結果是？ BeiJing
//閉包
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); //打印結果？ ShangHai
var name = 'nick';
function Main() {
function F1(){
var name = 'jenny';
console.log(name);//jenny
}
function F2() {
console.log(name);//nick
}
F1();
F2();
}
Main();
去掉F1();F2();則打印沒有任何輸出！
function f1(){
var n=1;
Add = function(){
n++;
};
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //1
Add();
result(); //2
//result就是閉包f2函數
//函數f1中的局部變量n一直保存在內存中，並無在f1調用後被自動清除
6.詞法分析
JavaScript代碼運行前有一個相似編譯的過程即詞法分析，詞法分析主要有三個步驟：
- 分析參數
- 再分析變量的聲明
- 分析函數聲明
具體步驟以下：
函數在運行的瞬間，生成一個活動對象（Active Object），簡稱AO
第一步：分析參數：
-
函數接收形式參數，添加到AO的屬性，而且這個時候值爲undefine,即AO.age=undefine
-
接收實參，添加到AO的屬性，覆蓋以前的undefine
第二步：分析變量聲明：如var age;或var age=18;
-
若是上一步分析參數中AO尚未age屬性，則添加AO屬性爲undefine，即AO.age=undefine
-
若是AO上面已經有age屬性了，則不做任何修改
第三步：分析函數的聲明：
若是有function age(){}把函數賦給AO.age ,覆蓋上一步分析的值
函數1： var name = "test"; function t() { console.log(name); var name = "test1"; console.log(name); } t(); 函數2： var name = "test"; function t() { console.log(name); } t(); 詞法分析： 0：函數的在運行的瞬間，生成一個活動對象（Active Object)就是所謂的AO 1：分析參數 1-1:函數接收參數，添加到AO的屬性上面，值所有都是undefine,如AO.age=undefine 1-2:接收實參，造成AO對應的屬性值 2：分析變量聲明，如var age, 2-1：若是AO上尚未age屬性，則添加AO 屬性，值是undefine 2-2：若是AO 上面已經有了age屬性,則不作任何操做。 3：分析函數的聲明，若是funcion foo(){}, 3-1： 則把函數賦給AO.fooo,若是數據屬性已經存在，則要被如今的新的值覆蓋 下面開始分析上面修改1的執行的過程（自上崦下）： 一、在window上面造成一個AO鏈，AO.name=undefine; 2、在函數的內部分析參數，函數沒有參數，略過 三、在到變量聲明階段，在t函數的內部造成AO1,AO1.name=undfine; 4、分析函數聲明，略過 執行過程： 一、首先是 在外層的AO.name=」test」 2、執行t函數，執行到console.log(name)時，函數內有name屬性，就不會在到外面去尋找 執行輸出undefine 三、執行賦值語句AO1.name=」test1」 四、輸出當前的name值,」test1」;
function t(age) { console.log(age);//1 var age = 99; console.log(age);//2 function age() { } console.log(age);//3 } t(5); 詞法分析： 1-一、分析參數，有一個參數，造成一個AO.age=undefine; 1-二、接收參數AO.age=5; 2、分析變量聲明，有一個var age,發現AO上面有一個AO.age，則不作任何處理 三、分析函數聲明，有一個function age(){}聲明， 則把原有的age覆蓋成AO.age=function(){}; 執行過程 1、執行第一個console.log(age)時，當前的AO.age是一個函數，因此輸出的一個函數 二、這句var age=99;是對不AO.age的屬性賦值，AO.age=99，因此在第二個輸出的是99 3、同理第三個輸出的是99,由於中間沒有改變age值的語句了， 具體結果是，function age(){...}，99,99
function t(age) { var age; console.log(age); age = "99"; console.log(age); function age() { } console.log(age); } t(5);
function t(age) { var age; console.log(age); age = "99"; console.log(age); function age() { console.log(age); } age();//這裏不同 console.log(age); } t(5); 分析： 第9行的age()根本不是一個函數，因此執行到這裏會報錯！！！
function t(age) { var age; //age=99;這裏被我註釋掉了 console.log(age); function age() { console.log(age); } age(); console.log(age); } t(5); 分析： 這裏沒有對age的賦值，說明age是一個函數，當這個函數執行的時候，age函數的內部沒有age變量，根據做用域鏈到外層的函數去找，找到了一個age,但它仍是一個函數，又再次輸出函數，後面一個也是如此，因此結果是下面結果：
function t(age) { // var age; console.log(age); var age=function () { console.log(age); } age(); console.log(age); } t(5); 分析： 把表達式拆開也就明白了，拆成以下的結果：var age;age=function(){},也就是函數表達是實際上是一個變量聲明和賦值的過程，而不是一個真正的函數聲明！
function t(age) { // var age; console.log(age); var age=function age () { console.log(age); } age(); console.log(age); } t(5);
JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...。此外，JavaScript 容許自定義對象。
1.內置對象介紹
JavaScript 提供多個內建對象，好比 String、Date、Array 等等。 對象只是帶有屬性和方法的特殊數據類型。對象只是一種特殊的數據。對象擁有屬性和方法。
- 布爾型能夠是一個對象。
- 數字型能夠是一個對象。
- 字符串也能夠是一個對象
- 日期是一個對象
- 數學和正則表達式也是對象
- 數組是一個對象
- 甚至函數也能夠是對象
注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object
2.自定義對象
建立新對象有兩種不一樣的方法：
- 定義並建立對象的實例
- 使用函數來定義對象，而後建立新的對象實例
方法1：建立自定義對象:
person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue";
訪問對象的屬性：
或者直接用聲明變量方法建立新對象：
//建立新對象：
var obj_dict = {name:'felix',age:18,gender:'boy'}
//訪問屬性：
obj_dict
{name: "felix", age: 18, gender: "boy"}
obj_dict.name
"felix"
obj_dict.age
18
obj_dict["name"]
"felix"
方法2：首先使用對象構造器建立對象：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
其次建立js對象實例：
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
再把屬性增長到js對象實例中：
經過爲對象賦值，向已有對象添加新屬性：
person.firstname="John"; person.lastname="Doe"; person.age=30; person.eyecolor="blue";
把方法增長到JS對象：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
changeName() 函數 name 的值賦給 person 的 lastname 屬性。
myMother.changeName("Doe");
3.Date(日期)對象
建立日期對象：
//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒並不直接顯示
Date對象的方法：
var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 //getMonth () 獲取月（0-11） //getFullYear () 獲取完全年份 //getHours () 獲取小時 //getMinutes () 獲取分鐘 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(從1970/1/1午夜)
//時間格式化輸出 var today = new Date(); var Y = today.getFullYear(); var M = today.getMonth() + 1 var D = today.getDate(); var H = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var today_format = Y +'-'+ M + '-' + D + ' ' + H + ':' + m + ':' + s ; console.log(today_format); //2019-1-6 13:29:54
Date() 返回當日的日期和時間。 getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 getDay() 從 Date 對象返回一週中的某一天 (0 ~ 6)。 getMonth() 從 Date 對象返回月份 (0 ~ 11)。 getFullYear() 從 Date 對象以四位數字返回年份。 getYear() 請使用 getFullYear() 方法代替。 getHours() 返回 Date 對象的小時 (0 ~ 23)。 getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。 getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。 getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒數。 getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。 getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。 getUTCDay() 根據世界時從 Date 對象返回週中的一天 (0 ~ 6)。 getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。 getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。 getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。 getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。 getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。 getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。 parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒數。 setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。 setMonth() 設置 Date 對象中月份 (0 ~ 11)。 setFullYear() 設置 Date 對象中的年份（四位數字）。 setYear() 請使用 setFullYear() 方法代替。 setHours() 設置 Date 對象中的小時 (0 ~ 23)。 setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。 setSeconds() 設置 Date 對象中的秒鐘 (0 ~ 59)。 setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。 setTime() 以毫秒設置 Date 對象。 setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。 setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。 setUTCFullYear() 根據世界時設置 Date 對象中的年份（四位數字）。 setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。 setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。 setUTCSeconds() 根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。 setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。 toSource() 返回該對象的源代碼。 toString() 把 Date 對象轉換爲字符串。 toTimeString() 把 Date 對象的時間部分轉換爲字符串。 toDateString() 把 Date 對象的日期部分轉換爲字符串。 toGMTString() 請使用 toUTCString() 方法代替。 toUTCString() 根據世界時，把 Date 對象轉換爲字符串。 toLocaleString() 根據本地時間格式，把 Date 對象轉換爲字符串。 toLocaleTimeString() 根據本地時間格式，把 Date 對象的時間部分轉換爲字符串。 toLocaleDateString() 根據本地時間格式，把 Date 對象的日期部分轉換爲字符串。 UTC() 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。 valueOf() 返回 Date 對象的原始值。
4.RegExp對象
正則表達式用於對字符串模式匹配及檢索替換，是對字符串執行模式匹配的強大工具。
(1)語法
var patt=new RegExp(pattern,modifiers); 或者更簡單的方式: var patt=/pattern/modifiers; 說明： pattern（模式） 描述了表達式的模式 modifiers(修飾符) 用於指定全局匹配、區分大小寫的匹配和多行匹配
var re = new RegExp("\\w+");
var re = /\w+/;
(2)RegExp修飾符
修飾符用於執行不區分大小寫和全文的搜索。
i 執行對大小寫不敏感的匹配。 g 執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。 m 執行多行匹配。
示例1：忽略大小寫查找
var str="Welcome to Myhome"; var patt1=/myhome/i;
示例2：全局查找
var str="Is this all there is?"; var patt1=/is/g;
示例3：全文查找和不區分大小寫搜索 "is"
var str="Is this all there is?"; var patt1=/is/gi;
(3)方括號和元字符
[abc] 查找方括號之間的任何字符。 [^abc] 查找任何不在方括號之間的字符。 [0-9] 查找任何從 0 至 9 的數字。 [a-z] 查找任何從小寫 a 到小寫 z 的字符。 [A-Z] 查找任何從大寫 A 到大寫 Z 的字符。 [A-z] 查找任何從大寫 A 到小寫 z 的字符。 [adgk] 查找給定集合內的任何字符。 [^adgk] 查找給定集合外的任何字符。 (red|blue|green) 查找任何指定的選項。
. 查找單個字符，除了換行和行結束符。 \w 查找單詞字符。 \W 查找非單詞字符。 \d 查找數字。 \D 查找非數字字符。 \s 查找空白字符。 \S 查找非空白字符。 \b 匹配單詞邊界。 \B 匹配非單詞邊界。 \0 查找 NUL 字符。 \n 查找換行符。 \f 查找換頁符。 \r 查找回車符。 \t 查找製表符。 \v 查找垂直製表符。 \xxx 查找以八進制數 xxx 規定的字符。 \xdd 查找以十六進制數 dd 規定的字符。 \uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。
(4)量詞
n+ 匹配任何包含至少一個 n 的字符串。 n* 匹配任何包含零個或多個 n 的字符串。 n? 匹配任何包含零個或一個 n 的字符串。 n{X} 匹配包含 X 個 n 的序列的字符串。 n{X,Y} 匹配包含 X 至 Y 個 n 的序列的字符串。 n{X,} 匹配包含至少 X 個 n 的序列的字符串。 n$ 匹配任何結尾爲 n 的字符串。 ^n 匹配任何開頭爲 n 的字符串。 ?=n 匹配任何其後緊接指定字符串 n 的字符串。 ?!n 匹配任何其後沒有緊接指定字符串 n 的字符串。
(5)RegExp對象方法
compile 編譯正則表達式。 exec 檢索字符串中指定的值。返回找到的值，並肯定其位置。 test 檢索字符串中指定的值。返回 true 或 false。
支持正則表達式的String對象方法：
search 檢索與正則表達式相匹配的值。 match 找到一個或多個正則表達式的匹配。 replace 替換與正則表達式匹配的子串。 split 把字符串分割爲字符串數組。
//RegExp對象 //建立正則對象方式1 // 參數1 正則表達式(不能有空格) // 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫) // 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。 // 建立RegExp對象方式（逗號後面不要加空格） var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配響應的字符串 var s1 = "bc123"; //RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。 reg1.test(s1); // true // 建立方式2 // /填寫正則表達式/匹配模式（逗號後面不要加空格） var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; reg2.test(s1); // true // String對象與正則結合的4個方法 var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容 s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割 s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換 // 關於匹配模式：g和i的簡單示例 var s1 = "name:Alex age:18"; s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不區分大小寫 // 注意事項1： // 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 // 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。 // 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。 // 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。 // 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0。 // 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。 var reg3 = /foo/g; // 此時 regex.lastIndex=0 reg3.test('foo'); // 返回true // 此時 regex.lastIndex=3 reg3.test('xxxfoo'); // 仍是返回true // 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，必定要加上^和$符號。 // 注意事項2(說出來你可能不信系列)： // 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true
// 坑1 (正則表達式中間必定不能夠有空格) console.log("============================================"); console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang")); console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("1xiaoqiang")); // 坑2 // test()不傳值至關於傳了一個undefined進去 // 而後test()就把這個undefined當成是"undefined"來判斷 console.log("============================================"); console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined")); console.log(/^[0-9a-zA-Z][a-zA-Z0-9_]{5,11}$/.test()); console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test(undefined)); console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test("undefined")); // JS正則的兩種模式 // 1. g 表示全局 // 2. i 忽略大小寫 var ss = "Alexdashabi"; var s3 = ss.replace(/a/gi, "哈哈哈"); // 不是改變默認的字符串,而是生成了一個新的字符串 console.log(s3); // 坑3 // 當正則表達式使用了全局模式(g)的時候,而且你還讓它去檢測一個字符串,此時會引出來一個lastIndex // lastIndex會記住上一次匹配成功的位置,並把下一次要開始椒鹽的位置記住 // console.log("==============================="); var r = /alex/g; console.log(r.test("alex")); // true console.log(r.lastIndex); // 4 console.log(r.test("alex")); // false console.log(r.lastIndex); console.log(r.test("alex")); // true console.log(r.lastIndex); console.log(r.test("alex")); // false
5.Math
Math對象是一個靜態對象，而不是構造函數。實際上，Math只是一個由Javascript設置的對象命名空間，用於存儲數學函數。
E 返回算術常量 e，即天然對數的底數（約等於2.718）。 LN2 返回 2 的天然對數（約等於0.693）。 LN10 返回 10 的天然對數（約等於2.302）。 LOG2E 返回以 2 爲底的 e 的對數（約等於 1.414）。 LOG10E 返回以 10 爲底的 e 的對數（約等於0.434）。 PI 返回圓周率（約等於3.14159）。 SQRT1_2 返回返回 2 的平方根的倒數（約等於 0.707）。 SQRT2 返回 2 的平方根（約等於 1.414）。
abs(x) 返回數的絕對值。 acos(x) 返回數的反餘弦值。 asin(x) 返回數的反正弦值。 atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。 atan2(y,x) 返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。 ceil(x) 對數進行上舍入。 cos(x) 返回數的餘弦。 exp(x) 返回 e 的指數。 floor(x) 對數進行下舍入。 log(x) 返回數的天然對數（底爲e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四捨五入爲最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。 toSource() 返回該對象的源代碼。 valueOf() 返回 Math 對象的原始值
6.JSON對象
JSON.stringify(obj) 序列化 JSON.parse(str) 反序列化
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1);
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);
相關文章
- 1. web基礎 (四) JavaScript基礎
- 2. JavaScript基礎2
- 3. JavaScript基礎
- 4. JavaScript基礎part2
- 5. javaScript 基礎2
- 6. JavaScript基礎 - 1
- 7. JavaScript基礎-01
- 8. javaScript基礎01
- 9. javascript基礎
- 10. JavaScript 基礎 （三）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. web基礎 (四) JavaScript基礎
- 2. JavaScript基礎2
- 3. JavaScript基礎
- 4. JavaScript基礎part2
- 5. javaScript 基礎2
- 6. JavaScript基礎 - 1
- 7. JavaScript基礎-01
- 8. javaScript基礎01
- 9. javascript基礎
- 10. JavaScript 基礎 （三）