HelloWorld
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JS代碼需要編寫到script標籤中-->
<script type="text/javascript">
/*
* 控制瀏覽器彈出一個警告框
* alert("哥，你真帥啊！！");
*/
/*
* 讓計算機在頁面中輸出一個內容
* document.write()可以向body中輸出一個內容
* document.write("看我出不出來~~~");
*/
/*
* 向控制檯輸出一個內容
* console.log()的作用是向控制檯輸出一個內容
* console.log("你猜我在哪出來呢？");
*/
alert("哥，你真帥啊！！");
document.write("看我出不出來~~~");
console.log("你猜我在哪出來呢？");
</script>
</head>
<body>
</body>
</html>
JS編寫位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
可以將js代碼編寫到外部js文件中，然後通過script標籤引入
寫到外部文件中可以在不同的頁面中同時引用，也可以利用到瀏覽器的緩存機制
推薦使用的方式
-->
<!--
script標籤一旦用於引入外部文件了，就不能在編寫代碼了，即使編寫了瀏覽器也會忽略
如果需要則可以在創建一個新的script標籤用於編寫內部代碼
-->
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
alert("我是內部的JS代碼");
</script>
<!--
可以將js代碼編寫到script標籤
<script type="text/javascript">
alert("我是script標籤中的代碼！！");
</script>
-->
</head>
<body>
<!--
可以將js代碼編寫到標籤的onclick屬性中
當我們點擊按鈕時，js代碼纔會執行
雖然可以寫在標籤的屬性中，但是他們屬於結構與行爲耦合，不方便維護，不推薦使用
-->
<button onclick="alert('討厭，你點我幹嘛~~');">點我一下</button>
<!--
可以將js代碼寫在超鏈接的href屬性中，這樣當點擊超鏈接時，會執行js代碼
-->
<a href="javascript:alert('讓你點你就點！！');">你也點我一下</a>
<a href="javascript:;">你也點我一下</a>
</body>
</html>
基本語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
多行註釋
JS註釋
多行註釋，註釋中的內容不會被執行，但是可以在源代碼中查看
要養成良好的編寫註釋的習慣，也可以通過註釋來對代碼進行一些簡單的調試
*/
//單行註釋
//alert("hello");
//document.write("hello");
console.log("hello"); //該語句用來在控制檯輸出一個日誌
/*
* 1.JS中嚴格區分大小寫
* 2.JS中每一條語句以分號(;)結尾
* - 如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源，
* 而且有些時候，瀏覽器會加錯分號，所以在開發中分號必須寫
* 3.JS中會忽略多個空格和換行，所以我們可以利用空格和換行對代碼進行格式化
*
*/
alert("hello");
</script>
</head>
<body>
</body>
</html>
字面量和變量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 字面量，都是一些不可改變的值
* 比如 ：1 2 3 4 5
* 字面量都是可以直接使用，但是我們一般都不會直接使用字面量
*
* 變量 變量可以用來保存字面量，而且變量的值是可以任意改變的
* 變量更加方便我們使用，所以在開發中都是通過變量去保存一個字面量，
* 而很少直接使用字面量
* 可以通過變量對字面量進行描述
*/
//聲明變量
//在js中使用var關鍵字來聲明一個變量
var a;
//爲變量賦值
a = 123;
a = 456;
a = 123124223423424;
//聲明和賦值同時進行
var b = 789;
var c = 0;
var age = 80;
console.log(age);
</script>
</head>
<body>
</body>
</html>
標識符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 標識符
* - 在JS中所有的可以由我們自主命名的都可以稱爲是標識符
* - 例如：變量名、函數名、屬性名都屬於標識符
* - 命名一個標識符時需要遵守如下的規則：
* 1.標識符中可以含有字母、數字、_、$
* 2.標識符不能以數字開頭
* 3.標識符不能是ES中的關鍵字或保留字
* 4.標識符一般都採用駝峯命名法
* - 首字母小寫，每個單詞的開頭字母大寫，其餘字母小寫
* helloWorld xxxYyyZzz
*
* - JS底層保存標識符時實際上是採用的Unicode編碼，
* 所以理論上講，所有的utf-8中含有的內容都可以作爲標識符
*/
/*var if = 123;
console.log(if);*/
//千萬不要這麼用
var 鋤禾日當午 = 789;
console.log(鋤禾日當午);
</script>
</head>
<body>
</body>
</html>
數據類型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
* 數據類型指的就是字面量的類型
* 在JS中一共有六種數據類型
* String 字符串
* Number 數值
* Boolean 布爾值
* Null 空值
* Undefined 未定義
* Object 對象
*
* 其中String Number Boolean Null Undefined屬於基本數據類型
* 而Object屬於引用數據類型
*/
/*
* String字符串
* - 在JS中字符串需要使用引號引起來
* - 使用雙引號或單引號都可以，但是不要混着用
* - 引號不能嵌套，雙引號不能放雙引號，單引號不能放單引號
*/
var str = 'hello';
str = '我說:"今天天氣真不錯！"';
/*
在字符串中我們可以使用\作爲轉義字符，
當表示一些特殊符號時可以使用\進行轉義
\" 表示 "
\' 表示 '
\n 表示換行
\t 製表符
\\ 表示\
* */
str = "我說:\"今天\t天氣真不錯！\"";
str = "\\\\\\";
//輸出字面量 字符串str
//alert("str");
//輸出變量str
//alert(str);
var str2 = "hello";
str2 = "你好";
str2 = 3;
//alert("hello，你好");
//console.log("我就是不出來~~~");
</script>
</head>
<body>
</body>
</html>
Number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在JS中所有的數值都是Number類型，
* 包括整數和浮點數（小數）
*
* JS中可以表示的數字的最大值
* Number.MAX_VALUE
* 1.7976931348623157e+308
*
* Number.MIN_VALUE 大於0的最小值
* 5e-324
*
* 如果使用Number表示的數字超過了最大值，則會返回一個
* Infinity 表示正無窮
* -Infinity 表示負無窮
* 使用typeof檢查Infinity也會返回number
* NaN 是一個特殊的數字，表示Not A Number
* 使用typeof檢查一個NaN也會返回number
*/
//數字123
var a = 123;
//字符串123
var b = "123";
/*
可以使用一個運算符 typeof
來檢查一個變量的類型
語法：typeof 變量
檢查字符串時，會返回string
檢查數值時，會返回number
* */
//console.log(typeof b);
a = -Number.MAX_VALUE * Number.MAX_VALUE;
a = "abc" * "bcd";
a = NaN;
//console.log(typeof a);
a = Number.MIN_VALUE;
//console.log(a);
/*
* 在JS中整數的運算基本可以保證精確
*/
var c = 1865789 + 7654321;
/*
* 如果使用JS進行浮點運算，可能得到一個不精確的結果
* 所以千萬不要使用JS進行對精確度要求比較高的運算
*/
var c = 0.1 + 0.2;
console.log(c);
</script>
</head>
<body>
</body>
</html>
Boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Boolean 布爾值
* 布爾值只有兩個，主要用來做邏輯判斷
* true
* - 表示真
* false
* - 表示假
*
* 使用typeof檢查一個布爾值時，會返回boolean
*/
var bool = false;
console.log(typeof bool);
console.log(bool);
</script>
</head>
<body>
</body>
</html>
Null和Undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Null（空值）類型的值只有一個，就是null
* null這個值專門用來表示一個爲空的對象
* 使用typeof檢查一個null值時，會返回object
*
* Undefined（未定義）類型的值只有一個，就undefind
* 當聲明一個變量，但是並不給變量賦值時，它的值就是undefined
* 使用typeof檢查一個undefined時也會返回undefined
*/
var a = null;
var b = undefined;
console.log(typeof b);
</script>
</head>
<body>
</body>
</html>
強制類型轉換（轉換爲String）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 強制類型轉換
* - 指將一個數據類型強制轉換爲其他的數據類型
* - 類型轉換主要指，將其他的數據類型，轉換爲
* String Number Boolean
*
*/
/*
* 將其他的數據類型轉換爲String
* 方式一：
* - 調用被轉換數據類型的toString()方法
* - 該方法不會影響到原變量，它會將轉換的結果返回
* - 但是注意：null和undefined這兩個值沒有toString()方法，
* 如果調用他們的方法，會報錯
*
* 方式二：
* - 調用String()函數，並將被轉換的數據作爲參數傳遞給函數
* - 使用String()函數做強制類型轉換時，
* 對於Number和Boolean實際上就是調用的toString()方法
* 但是對於null和undefined，就不會調用toString()方法
* 它會將 null 直接轉換爲 "null"
* 將 undefined 直接轉換爲 "undefined"
*
*/
var a = 123;
//調用a的toString()方法
//調用xxx的yyy()方法，就是xxx.yyy()
a = a.toString();
a = true;
a = a.toString();
a = null;
//a = a.toString(); //報錯
a = undefined;
//a = a.toString(); //報錯
a = 123;
//調用String()函數，來將a轉換爲字符串
a = String(a);
a = null;
a = String(a);
a = undefined;
a = String(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
轉換爲Number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 將其他的數據類型轉換爲Number
* 轉換方式一：
* 使用Number()函數
* - 字符串 --> 數字
* 1.如果是純數字的字符串，則直接將其轉換爲數字
* 2.如果字符串中有非數字的內容，則轉換爲NaN
* 3.如果字符串是一個空串或者是一個全是空格的字符串，則轉換爲0
* - 布爾 --> 數字
* true 轉成 1
* false 轉成 0
*
* - null --> 數字 0
*
* - undefined --> 數字 NaN
*
* 轉換方式二：
* - 這種方式專門用來對付字符串
* - parseInt() 把一個字符串轉換爲一個整數
* - parseFloat() 把一個字符串轉換爲一個浮點數
*/
var a = "123";
//調用Number()函數來將a轉換爲Number類型
a = Number(a);
a = false;
a = Number(a);
a = null;
a = Number(a);
a = undefined;
a = Number(a);
a = "123567a567px";
//調用parseInt()函數將a轉換爲Number
/*
* parseInt()可以將一個字符串中的有效的整數內容去出來，
* 然後轉換爲Number
*/
a = parseInt(a);
/*
* parseFloat()作用和parseInt()類似，不同的是它可以獲得有效的小數
*/
a = "123.456.789px";
a = parseFloat(a);
/*
* 如果對非String使用parseInt()或parseFloat()
* 它會先將其轉換爲String然後在操作
*/
a = true;
a = parseInt(a);
a = 198.23;
a = parseInt(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
其他的進制數字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = 123;
/*
* 在js中，如果需要表示16進制的數字，則需要以0x開頭
* 如果需要表示8進制的數字，則需要以0開頭
* 如果要要表示2進制的數字，則需要以0b開頭
* 但是不是所有的瀏覽器都支持
*
*/
//十六進制
a = 0x10;
a = 0xff;
a = 0xCafe;
//八進制數字
a = 070;
//二進制數字
//a = 0b10;
//向"070"這種字符串，有些瀏覽器會當成8進制解析，有些會當成10進制解析
a = "070";
//可以在parseInt()中傳遞一個第二個參數，來指定數字的進制
a =parseInt(a,10);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
轉換爲Boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 將其他的數據類型轉換爲Boolean
* - 使用Boolean()函數
* - 數字 ---> 布爾
* - 除了0和NaN，其餘的都是true
*
* - 字符串 ---> 布爾
* - 除了空串，其餘的都是true
*
* - null和undefined都會轉換爲false
*
* - 對象也會轉換爲true
*
*/
var a = 123; //true
a = -123; //true
a = 0; //false
a = Infinity; //true
a = NaN; //false
//調用Boolean()函數來將a轉換爲布爾值
a = Boolean(a);
a = " ";
a = Boolean(a);
a = null; //false
a = Boolean(a);
a = undefined; //false
a = Boolean(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 運算符也叫操作符
* 通過運算符可以對一個或多個值進行運算,並獲取運算結果
* 比如：typeof就是運算符，可以來獲得一個值的類型
* 它會將該值的類型以字符串的形式返回
* number string boolean undefined object
*
* 算數運算符
* 當對非Number類型的值進行運算時，會將這些值轉換爲Number然後在運算
* 任何值和NaN做運算都得NaN
*
* +
* +可以對兩個值進行加法運算，並將結果返回
* 如果對兩個字符串進行加法運算，則會做拼串
* 會將兩個字符串拼接爲一個字符串，並返回
* 任何的值和字符串做加法運算，都會先轉換爲字符串，然後再和字符串做拼串的操作
* -
* - 可以對兩個值進行減法運算，並將結果返回
*
* *
* * 可以對兩個值進行乘法運算
* /
* / 可以對兩個值進行除法運算
* %
* % 取模運算（取餘數）
*/
var a = 123;
var result = typeof a;
//console.log(typeof result);
result = a + 1;
result = 456 + 789;
result = true + 1; //2
result = true + false; //1
result = 2 + null; //2
result = 2 + NaN; //NaN
result = 2+undefined //NaN
result = "你好" + "大帥哥";
var str = "鋤禾日當午，" +
"汗滴禾下土，" +
"誰知盤中餐，" +
"粒粒皆辛苦";
result = 123 + "1"; //'1231'
result = true + "hello"; 'truehello'
//任何值和字符串相加都會轉換爲字符串，並做拼串操作
/*
* 我們可以利用這一特點，來將一個任意的數據類型轉換爲String
* 我們只需要爲任意的數據類型 + 一個 "" 即可將其轉換爲String
* 這是一種隱式的類型轉換，由瀏覽器自動完成，實際上它也是調用String()函數
*/
var c = 123;
c = c + ""; //'123'
c = null;
c = c + ""; //'null'
//console.log(result);
//console.log(typeof c);
//console.log("c = "+c);
result = 1 + 2 + "3"; //33
result = "1" + 2 + 3; //123
result = 100 - 5;
result = 100 - true; //99
result = 100 - "1"; //99
result = 2 * 2; //4
result = 2 * "8"; //16
result = 2 * undefined; //NaN
result = 2 * null; //0
result = 4 / 2;
result = 3 / 2;
/*
* 任何值做- * /運算時都會自動轉換爲Number
* 我們可以利用這一特點做隱式的類型轉換
* 可以通過爲一個值 -0 *1 /1來將其轉換爲Number
* 原理和Number()函數一樣，使用起來更加簡單
*/
var d = "123";
//console.log("result = "+result);
d = d - 0;
/*console.log(typeof d);
console.log(d);*/
result = 9 % 3;
result = 9 % 4;
result = 9 % 5;
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
一元運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 一元運算符，只需要一個操作數
* + 正號
* - 正號不會對數字產生任何影響
* - 負號
* - 負號可以對數字進行負號的取反
*
* - 對於非Number類型的值，
* 它會將先轉換爲Number，然後在運算
* 可以對一個其他的數據類型使用+,來將其轉換爲number
* 它的原理和Number()函數一樣
*/
var a = 123;
a = -a;
a = true;
a = "18";
a = +a;
/*console.log("a = "+a);
console.log(typeof a);*/
var result = 1 + +"2" + 3; //6
console.log("result = "+result);
var a ="a = "+ 1 + +"2" + 3;
a = +"2";
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
自增和自減
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 自增 ++
* - 通過自增可以使變量在自身的基礎上增加1
* - 對於一個變量自增以後，原變量的值會立即自增1
* - 自增分成兩種：後++(a++) 和 前++(++a)
* 無論是a++ 還是 ++a，都會立即使原變量的值自增1
* 不同的是a++ 和 ++a的值不同
* a++的值等於原變量的值（自增前的值）
* ++a的值等於新值 （自增後的值）
*
* 自減 --
* - 通過自減可以使變量在自身的基礎上減1
* - 自減分成兩種：後--(a--) 和 前--(--a)
* 無論是a-- 還是 --a 都會立即使原變量的值自減1
* 不同的是a-- 和 --a的值不同
* a-- 是變量的原值 （自減前的值）
* --a 是變量的新值 （自減以後的值）
*
*
*/
var num = 10;
//num--;
//--num;
//console.log(num--);
console.log(--num);
console.log("num = "+num);
var a = 1;
//使a自增1
//a++;
//++a;
//console.log(a++);
//console.log("++a = " + ++a);
/*console.log("a++ = " + a++);
console.log("a = "+a);*/
var c = 10;
//第一次c++，是在10的基礎上自增
//console.log(c++);
//第二次c++，是在11的基礎上自增
c++;
var d = 20;
//console.log(++d);//21
//console.log(++d);//22
//20 + 22 + 22
//var result = d++ + ++d + d ;
//d = 20
d = d++;
/*
* var e = d++;
* d = e;
*/
//console.log("d = "+d);
</script>
</head>
<body>
</body>
</html>
邏輯運算符1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* JS中爲我們提供了三種邏輯運算符
* ! 非
* - !可以用來對一個值進行非運算
* - 所謂非運算就是值對一個布爾值進行取反操作，
* true變false，false變true
* - 如果對一個值進行兩次取反，它不會變化
* - 如果對非布爾值進行元素，則會將其轉換爲布爾值，然後再取反
* 所以我們可以利用該特點，來將一個其他的數據類型轉換爲布爾值
* 可以爲一個任意數據類型取兩次反，來將其轉換爲布爾值，
* 原理和Boolean()函數一樣
*
* && 與
* - &&可以對符號兩側的值進行與運算並返回結果
* - 運算規則
* - 兩個值中只要有一個值爲false就返回false，
* 只有兩個值都爲true時，纔會返回true
* - JS中的“與”屬於短路的與，
* 如果第一個值爲false，則不會看第二個值
*
* || 或
* - ||可以對符號兩側的值進行或運算並返回結果
* - 運算規則：
* - 兩個值中只要有一個true，就返回true
* 如果兩個值都爲false，才返回false
* - JS中的“或”屬於短路的或
* 如果第一個值爲true，則不會檢查第二個值
*/
//如果兩個值都是true則返回true
var result = true && true;
//只要有一個false，就返回false
result = true && false;
result = false && true;
result = false && false;
//console.log("result = "+result);
//第一個值爲true，會檢查第二個值
//true && alert("看我出不出來！！");
//第一個值爲false，不會檢查第二個值
//false && alert("看我出不出來！！");
//兩個都是false，則返回false
result = false || false;
//只有有一個true，就返回true
result = true || false;
result = false || true ;
result = true || true ;
//console.log("result = "+result);
//第一個值爲false，則會檢查第二個值
//false || alert("123");
//第一個值爲true，則不再檢查第二個值
//true || alert("123");
var a = false;
//對a進行非運算
a = !a;
//console.log("a = "+a);
var b = 10;
b = !!b;
//console.log("b = "+b);
//console.log(typeof b);
</script>
</head>
<body>
</body>
</html>
邏輯運算符2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* && || 非布爾值的情況
* - 對於非布爾值進行與或運算時，
* 會先將其轉換爲布爾值，然後再運算，並且返回原值
* - 與運算：
* - 如果第一個值爲true，則必然返回第二個值
* - 如果第一個值爲false，則直接返回第一個值
*
* - 或運算
* - 如果第一個值爲true，則直接返回第一個值
* - 如果第一個值爲false，則返回第二個值
*
*/
//true && true
//與運算：如果兩個值都爲true，則返回後邊的
var result = 5 && 6; //6
//與運算：如果兩個值中有false，則返回靠前的false
//false && true
result = 0 && 2; //0
result = 2 && 0; //0
//false && false
result = NaN && 0; //NaN
result = 0 && NaN; //0
//true || true
//如果第一個值爲true，則直接返回第一個值
result = 2 || 1; //2
result = 2 || NaN; //2
result = 2 || 0; //2
//如果第一個值爲false，則直接返回第二個值
result = NaN || 1; //1
result = NaN || 0; //0
result = NaN || 0 || 2 //2
result = NaN || 1 || 2 //1
result = "" || "hello"; //hello
result = -1 || "你好";
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
賦值運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* =
* 可以將符號右側的值賦值給符號左側的變量
* +=
* a += 5 等價於 a = a + 5
* -=
* a -= 5 等價於 a = a - 5
* *=
* a *= 5 等價於 a = a * 5
* /=
* a /= 5 等價於 a = a / 5
* %=
* a %= 5 等價於 a = a % 5
*
*/
var a = 10;
//a = a + 5;
//a += 5;
//a -= 5;
//a *= 5;
// a = a%3;
a %= 3;
console.log("a = "+a);
</script>
</head>
<body>
</body>
</html>
關係運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 通過關係運算符可以比較兩個值之間的大小關係，
* 如果關係成立它會返回true，如果關係不成立則返回false
*
* > 大於號
* - 判斷符號左側的值是否大於右側的值
* - 如果關係成立，返回true，如果關係不成立則返回false
*
* >= 大於等於
* - 判斷符號左側的值是否大於或等於右側的值
*
* < 小於號
* <= 小於等於
*
* 非數值的情況
* - 對於非數值進行比較時，會將其轉換爲數字然後在比較
* - 如果符號兩側的值都是字符串時，不會將其轉換爲數字進行比較
* 而會分別比較字符串中字符的Unicode編碼
*/
var result = 5 > 10;//false
result = 5 > 4; //true
result = 5 > 5; //false
result = 5 >= 5; //true
result = 5 >= 4; //true
result = 5 < 4; //false
result = 4 <= 4; //true
//console.log("result = "+result);
//console.log(1 > true); //false
//console.log(1 >= true); //true
//console.log(1 > "0"); //true
//console.log(10 > null); //true
//任何值和NaN做任何比較都是false
//console.log(10 <= "hello"); //false
//console.log(true > false); //true
//console.log("1" < "5"); //true
//console.log("11" < "5"); //true
//比較兩個字符串時，比較的是字符串的字符編碼
//console.log("a" < "b");//true
//比較字符編碼時是一位一位進行比較
//如果兩位一樣，則比較下一位，所以借用它來對英文進行排序
//console.log("abc" < "bcd");//true
//比較中文時沒有意義
//console.log("戒" > "我"); //true
//如果比較的兩個字符串型的數字，可能會得到不可預期的結果
//注意：在比較兩個字符串型的數字時，一定一定一定要轉型
console.log("11123123123123123123" < +"5"); //false
</script>
</head>
<body>
</body>
</html>
編碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在字符串中使用轉義字符輸入Unicode編碼
* \u四位編碼
*/
console.log("\u2620");
</script>
</head>
<body>
<!--在網頁中使用Unicode編碼
&#編碼; 這裏的編碼需要的是10進制
-->
<h1 style="font-size: 200px;">☠</h1>
<h1 style="font-size: 200px;">⚀</h1>
</body>
</html>
相等運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 相等運算符用來比較兩個值是否相等，
* 如果相等會返回true，否則返回false
*
* 使用 == 來做相等運算
* - 當使用==來比較兩個值時，如果值的類型不同，
* 則會自動進行類型轉換，將其轉換爲相同的類型
* 然後在比較
* 不相等
* 不相等用來判斷兩個值是否不相等，如果不相等返回true，否則返回false
* - 使用 != 來做不相等運算
* - 不相等也會對變量進行自動的類型轉換，如果轉換後相等它也會返回false
*
*
* ===
* 全等
* - 用來判斷兩個值是否全等，它和相等類似，不同的是它不會做自動的類型轉換
* 如果兩個值的類型不同，直接返回false
* !==
* 不全等
* - 用來判斷兩個值是否不全等，和不等類似，不同的是它不會做自動的類型轉換
* 如果兩個值的類型不同，直接返回true
*/
//console.log(1 == 1); //true
var a = 10;
//console.log(a == 4); //false
//console.log("1" == 1); //true
//console.log(true == "1"); //true
//console.log(null == 0); //false
/*
* undefined 衍生自 null
* 所以這兩個值做相等判斷時，會返回true
*/
//console.log(undefined == null);
/*
* NaN不和任何值相等，包括他本身
*/
//console.log(NaN == NaN); //false
var b = NaN;
//判斷b的值是否是NaN
//console.log(b == NaN);
/*
* 可以通過isNaN()函數來判斷一個值是否是NaN
* 如果該值是NaN則返回true，否則返回false
*/
//console.log(isNaN(b));
//console.log(10 != 5); //true
//console.log(10 != 10); //false
//console.log("abcd" != "abcd"); //false
//console.log("1" != 1);//false
//console.log("123" === 123);//false
//console.log(null === undefined);//false
console.log(1 !== "1"); //true
</script>
</head>
<body>
</body>
</html>
條件運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 條件運算符也叫三元運算符
* 語法：
* 條件表達式?語句1:語句2;
* - 執行的流程：
* 條件運算符在執行時，首先對條件表達式進行求值，
* 如果該值爲true，則執行語句1，並返回執行結果
* 如果該值爲false，則執行語句2，並返回執行結果
* 如果條件的表達式的求值結果是一個非布爾值，
* 會將其轉換爲布爾值然後在運算
*/
//false?alert("語句1"):alert("語句2");
var a = 300;
var b = 143;
var c = 50;
//a > b ? alert("a大"):alert("b大");
//獲取a和b中的最大值
//var max = a > b ? a : b;
//獲取a b c 中的大值
//max = max > c ? max : c;
//這種寫法不推薦使用，不方便閱讀
var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
//console.log("max = "+max);
//"hello"?alert("語句1"):alert("語句2");
</script>
</head>
<body>
</body>
</html>
運算符的優先級
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* , 運算符
* 使用,可以分割多個語句，一般可以在聲明多個變量時使用,
*/
//使用,運算符同時聲明多個變量
//var a , b , c;
//可以同時聲明多個變量並賦值
//var a=1 , b=2 , c=3;
//alert(b);
/*
* 就和數學中一樣，在JS中運算符也有優先級，
* 比如：先乘除 後加減
* 在JS中有一個運算符優先級的表，
* 在表中越靠上優先級越高，優先級越高越優先計算，
* 如果優先級一樣，則從左往右計算。
* 但是這個表我們並不需要記憶，如果遇到優先級不清楚
* 可以使用()來改變優先級
*/
//var result = 1 + 2 * 3;
/*
* 如果||的優先級高，或者兩個一樣高，則應該返回3
* 如果與的優先級高，則應該返回1
*
*/
var result = 1 || 2 && 3;
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 我們的程序是由一條一條語句構成的
* 語句是按照自上向下的順序一條一條執行的
* 在JS中可以使用{}來爲語句進行分組,
* 同一個{}中的語句我們稱爲是一組語句，
* 它們要麼都執行，要麼都不執行，
* 一個{}中的語句我們也稱爲叫一個代碼塊
* 在代碼塊的後邊就不用再編寫;了
*
* JS中的代碼塊，只具有分組的的作用，沒有其他的用途
* 代碼塊內容的內容，在外部是完全可見的
*/
{
var a = 10;
alert("hello");
console.log("你好");
document.write("語句");
}
console.log("a = "+a);
</script>
</head>
<body>
</body>
</html>
流程控制語句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 流程控制語句
* - JS中的程序是從上到下一行一行執行的
* - 通過流程控制語句可以控制程序執行流程，
* 使程序可以根據一定的條件來選擇執行
* - 語句的分類：
* 1.條件判斷語句
* 2.條件分支語句
* 3.循環語句
*
*
* 條件判斷語句：
* - 使用條件判斷語句可以在執行某個語句之前進行判斷，
* 如果條件成立纔會執行語句，條件不成立則語句不執行。
* - if語句
* - 語法一：
* if(條件表達式){
* 語句...
* }
*
* if語句在執行時，會先對條件表達式進行求值判斷，
* 如果條件表達式的值爲true，則執行if後的語句，
* 如果條件表達式的值爲false，則不會執行if後的語句。
* if語句只能控制緊隨其後的那個語句,
* 如果希望if語句可以控制多條語句，
* 可以將這些語句統一放到代碼塊中
* if語句後的代碼塊不是必須的，但是在開發中儘量寫上代碼塊，即使if後只有一條語句
*
*/
var a = 25;
if(a > 10 && a <= 20){
alert("a大於10，並且 a小於等於20");
}
</script>
</head>
<body>
</body>
</html>
if語句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* if語句
* 語法二:
* if(條件表達式){
* 語句...
* }else{
* 語句...
* }
*
* if...else...語句
* 當該語句執行時，會先對if後的條件表達式進行求值判斷，
* 如果該值爲true，則執行if後的語句
* 如果該值爲false，則執行else後的語句
*
* 語法三：
* if(條件表達式){
* 語句...
* }else if(條件表達式){
* 語句...
* }else if(條件表達式){
* 語句...
* }else{
* 語句...
* }
*
* if...else if...else
* 當該語句執行時，會從上到下依次對條件表達式進行求值判斷
* 如果值爲true，則執行當前語句。
* 如果值爲false，則繼續向下判斷。
* 如果所有的條件都不滿足，則執行最後一個else後的語句
* 該語句中，只會有一個代碼塊被執行，一旦代碼塊執行了，則直接結束語句
*/
var age = 50;
/*if(age >= 60){
alert("你已經退休了~~");
}else{
alert("你還沒退休~~~");
}*/
age = 200;
/*if(age > 100){
alert("活着挺沒意思的~~");
}else if(age > 80){
alert("你也老大不小的了~~");
}else if(age > 60){
alert("你也退休了~~");
}else if(age > 30){
alert("你已經中年了~~");
}else if(age > 17){
alert("你已經成年了");
}else{
alert("你還是個小孩子~~");
}*/
age = 90;
if(age > 17 && age <= 30){
alert("你已經成年了");
}else if(age > 30 && age <= 60){
alert("你已經中年了");
}else if(age > 60 && age <= 80){
alert("你已經退休了");
}else{
alert("你歲數挺大的了~~");
}
</script>
</head>
<body>
</body>
</html>
條件分支語句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 條件分支語句也叫switch語句
* 語法：
* switch(條件表達式){
* case 表達式:
* 語句...
* break;
* case 表達式:
* 語句...
* break;
* default:
* 語句...
* break;
* }
*
* 執行流程：
* switch...case..語句
* 在執行時會依次將case後的表達式的值和switch後的條件表達式的值進行全等比較，
* 如果比較結果爲true，則從當前case處開始執行代碼。
* 當前case後的所有的代碼都會執行，我們可以在case的後邊跟着一個break關鍵字，
* 這樣可以確保只會執行當前case後的語句，而不會執行其他的case
* 如果比較結果爲false，則繼續向下比較
* 如果所有的比較結果都爲false，則只執行default後的語句
*
* switch語句和if語句的功能實際上有重複的，使用switch可以實現if的功能，
* 同樣使用if也可以實現switch的功能，所以我們使用時，可以根據自己的習慣選擇。
*/
//根據num的值，輸出對應的中文
var num = 3;
/*if(num == 1){
console.log("壹");
}else if(num == 2){
console.log("貳");
}else if(num == 3){
console.log("叄");
}*/
num = "hello";
switch(num){
case 1:
console.log("壹");
//使用break可以來退出switch語句
break;
case 2:
console.log("貳");
break;
case 3:
console.log("叄");
break;
default:
console.log("非法數字~~");
break;
}
</script>
</head>
<body>
</body>
</html>
循環語句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 向頁面中輸出連續的數字
*/
/*var n = 1;
document.write(n++ +"<br />");*/
/*
* 循環語句：
* 通過循環語句可以反覆的執行一段代碼多次
*
* while循環
* - 語法：
* while(條件表達式){
* 語句...
* }
*
* - while語句在執行時，
* 先對條件表達式進行求值判斷，
* 如果值爲true，則執行循環體，
* 循環體執行完畢以後，繼續對錶達式進行判斷
* 如果爲true，則繼續執行循環體，以此類推
* 如果值爲false，則終止循環
*
* do...while循環
* - 語法：
* do{
* 語句...
* }while(條件表達式)
*
* - 執行流程：
* do...while語句在執行時，會先執行循環體，
* 循環體執行完畢以後，在對while後的條件表達式進行判斷，
* 如果結果爲true，則繼續執行循環體，執行完畢繼續判斷以此類推
* 如果結果爲false，則終止循環
*
* 實際上這兩個語句功能類似，不同的是while是先判斷後執行，
* 而do...while會先執行後判斷，
* do...while可以保證循環體至少執行一次，
* 而while不能
*/
var n = 1;
//向這種將條件表達式寫死爲true的循環，叫做死循環
//該循環不會停止，除非瀏覽器關閉，死循環在開發中慎用
//可以使用break，來終止循環
/*while(true){
alert(n++);
//判斷n是否是10
if(n == 10){
//退出循環
break;
}
}*/
//創建一個循環，往往需要三個步驟
//1.創初始化一個變量
var i = 11;
//2.在循環中設置一個條件表達式
/*while(i <= 10){
//3.定義一個更新表達式，每次更新初始化變量
document.write(i++ +"<br />")
}*/
/*do{
document.write(i++ +"<br />");
}while(i <= 10);*/
/*while(true){
alert(1);
}*/
</script>
</head>
<body>
</body>
</html>
for循環
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* for語句，也是一個循環語句，也稱爲for循環
* 在for循環中，爲我們提供了專門的位置用來放三個表達式：
* 1.初始化表達式
* 2.條件表達式
* 3.更新表達式
*
* for循環的語法：
* for(①初始化表達式;②條件表達式;④更新表達式){
* ③語句...
* }
*
* for循環的執行流程：
* ①執行初始化表達式，初始化變量（初始化表達式只會執行一次）
* ②執行條件表達式，判斷是否執行循環。
* 如果爲true，則執行循環③
* 如果爲false，終止循環
* ④執行更新表達式，更新表達式執行完畢繼續重複②
*/
//創建一個執行10次的while循環
//初始化表達式
/*var i = 0;
//創建一個循環，定義條件表達式
while(i < 10){
//設置更新表達式
alert(i++);
}*/
for(var i = 0 ; i < 10 ; i++ ){
alert(i);
}
/*
* for循環中的三個部分都可以省略，也可以寫在外部
* 如果在for循環中不寫任何的表達式，只寫兩個;
* 此時循環是一個死循環會一直執行下去，慎用
* for(;;){
alert("hello");
}
*/
</script>
</head>
<body>
</body>
</html>
break和continue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* break關鍵字可以用來退出switch或循環語句
* 不能在if語句中使用break和continue
* break關鍵字，會立即終止離他最近的那個循環語句
*/
/*for(var i=0 ; i<5 ; i++){
console.log(i);
if(i == 2){
break;
}
}*/
/*for(var i=0 ; i<5 ; i++){
console.log("@外層循環"+i)
for(var j=0 ; j<5; j++){
break;
console.log("內層循環:"+j);
}
}*/
/*
* 可以爲循環語句創建一個label，來標識當前的循環
* label:循環語句
* 使用break語句時，可以在break後跟着一個label，
* 這樣break將會結束指定的循環，而不是最近的
*/
/*outer:
for(var i=0 ; i<5 ; i++){
console.log("@外層循環"+i)
for(var j=0 ; j<5; j++){
break outer;
console.log("內層循環:"+j);
}
}*/
/*
* continue關鍵字可以用來跳過當次循環
* 同樣continue也是默認只會對離他最近的循環循環起作用
*/
/*for(var i=0 ; i<5 ; i++){
if(i==2){
continue;
}
console.log(i);
}*/
outer:
for(var i=0 ; i<5 ; i++){
for(var j=0 ; j<5 ; j++){
continue;
console.log("-->"+j);
}
console.log("@--->"+i);
}
</script>
</head>
<body>
</body>
</html>
對象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* JS中數據類型
* - String 字符串
* - Number 數值
* - Boolean 布爾值
* - Null 空值
* - Undefined 未定義
* - 以上這五種類型屬於基本數據類型，以後我們看到的值
* 只要不是上邊的5種，全都是對象
* - Object 對象
*
*
* 基本數據類型都是單一的值"hello" 123 true,
* 值和值之間沒有任何的聯繫。
*
* 在JS中來表示一個人的信息（name gender age）：
* var name = "孫悟空";
* var gender = "男";
* var age = 18;
* 如果使用基本數據類型的數據，我們所創建的變量都是獨立，不能成爲一個整體。
*
* 對象屬於一種複合的數據類型，在對象中可以保存多個不同數據類型的屬性。
*
* 對象的分類：
* 1.內建對象
* - 由ES標準中定義的對象，在任何的ES的實現中都可以使用
* - 比如：Math String Number Boolean Function Object....
*
* 2.宿主對象
* - 由JS的運行環境提供的對象，目前來講主要指由瀏覽器提供的對象
* - 比如 BOM DOM
*
* 3.自定義對象
* - 由開發人員自己創建的對象
*
*/
//創建對象
/*
* 使用new關鍵字調用的函數，是構造函數constructor
* 構造函數是專門用來創建對象的函數
* 使用typeof檢查一個對象時，會返回object
*/
var obj = new Object();
/*
* 在對象中保存的值稱爲屬性
* 向對象添加屬性
* 語法：對象.屬性名 = 屬性值;
*/
//向obj中添加一個name屬性
obj.name = "孫悟空";
//向obj中添加一個gender屬性
obj.gender = "男";
//向obj中添加一個age屬性
obj.age = 18;
/*
* 讀取對象中的屬性
* 語法：對象.屬性名
*
* 如果讀取對象中沒有的屬性，不會報錯而是會返回undefined
*/
//console.log(obj.gender);
//console.log(obj.hello);
/*
* 修改對象的屬性值
* 語法：對象.屬性名 = 新值
*/
obj.name = "tom";
/*
* 刪除對象的屬性
* 語法：delete 對象.屬性名
*/
delete obj.name;
console.log(obj.age);
</script>
</head>
<body>
</body>
</html>
屬性名和屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = new Object();
/*
* 向對象中添加屬性
* 屬性名：
* - 對象的屬性名不強制要求遵守標識符的規範
* 什麼亂七八糟的名字都可以使用
* - 但是我們使用是還是儘量按照標識符的規範去做
*
*/
obj.name = "孫悟空";
//obj.var = "hello";
/*
* 如果要使用特殊的屬性名，不能採用.的方式來操作
* 需要使用另一種方式：
* 語法：對象["屬性名"] = 屬性值
* 讀取時也需要採用這種方式
*
* 使用[]這種形式去操作屬性，更加的靈活，
* 在[]中可以直接傳遞一個變量，這樣變量值是多少就會讀取那個屬性
*
*/
obj["123"] = 789;
obj["nihao"] = "你好";
var n = "nihao";
//console.log(obj[n]);
/*
* 屬性值
* JS對象的屬性值，可以是任意的數據類型
* 甚至也可以是一個對象
*/
obj.test = true;
obj.test = null;
obj.test = undefined;
//創建一個對象
var obj2 = new Object();
obj2.name = "豬八戒";
//將obj2設置爲obj的屬性
obj.test = obj2;
//console.log(obj.test.name);
/*
* in 運算符
* - 通過該運算符可以檢查一個對象中是否含有指定的屬性
* 如果有則返回true，沒有則返回false
* - 語法：
* "屬性名" in 對象
*/
//console.log(obj.test2);
//檢查obj中是否含有test2屬性
//console.log("test2" in obj);
//console.log("test" in obj);
console.log("name" in obj);
</script>
</head>
<body>
</body>
</html>
基本和引用數據類型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 基本數據類型
* String Number Boolean Null Undefined
*
* 引用數據類型
* Object
*
* JS中的變量都是保存到棧內存中的，
* 基本數據類型的值直接在棧內存中存儲，
* 值與值之間是獨立存在，修改一個變量不會影響其他的變量
*
* 對象是保存到堆內存中的，每創建一個新的對象，就會在堆內存中開闢出一個新的空間，
* 而變量保存的是對象的內存地址（對象的引用），如果兩個變量保存的是同一個對象引用，
* 當一個通過一個變量修改屬性時，另一個也會受到影響
*/
var a = 123;
var b = a;
a++;
/*console.log("a = "+a);
console.log("b = "+b);*/
var obj = new Object();
obj.name = "孫悟空";
var obj2 = obj;
//修改obj的name屬性
obj.name = "豬八戒";
/*console.log(obj.name);
console.log(obj2.name);*/
//設置obj2爲null
obj2 = null;
/*console.log(obj);
console.log(obj2);*/
var c = 10;
var d = 10;
//console.log(c == d);
var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
/*console.log(obj3);
console.log(obj4);*/
/*
* 當比較兩個基本數據類型的值時，就是比較值。
* 而比較兩個引用數據類型時，它是比較的對象的內存地址，
* 如果兩個對象是一摸一樣的，但是地址不同，它也會返回false
*/
console.log(obj3 == obj4);
</script>
</head>
<body>
</body>
</html>
對象字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個對象
//var obj = new Object();
/*
* 使用對象字面量來創建一個對象
*/
var obj = {};
//console.log(typeof obj);
obj.name = "孫悟空";
//console.log(obj.name);
/*
* 使用對象字面量，可以在創建對象時，直接指定對象中的屬性
* 語法：{屬性名:屬性值,屬性名:屬性值....}
* 對象字面量的屬性名可以加引號也可以不加，建議不加,
* 如果要使用一些特殊的名字，則必須加引號
*
* 屬性名和屬性值是一組一組的名值對結構，
* 名和值之間使用:連接，多個名值對之間使用,隔開
* 如果一個屬性之後沒有其他的屬性了，就不要寫,
*/
var obj2 = {
name:"豬八戒",
age:13,
gender:"男",
test:{name:"沙僧"}
};
console.log(obj2.test);
</script>
</head>
<body>
</body>
</html>
函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 函數 function
* - 函數也是一個對象
* - 函數中可以封裝一些功能（代碼），在需要時可以執行這些功能（代碼）
* - 函數中可以保存一些代碼在需要的時候調用
* - 使用typeof檢查一個函數對象時，會返回function
*/
//我們在實際開發中很少使用構造函數來創建一個函數對象
//創建一個函數對象
//可以將要封裝的代碼以字符串的形式傳遞給構造函數
//var fun = new Function("console.log('Hello 這是我的第一個函數');");
//封裝到函數中的代碼不會立即執行
//函數中的代碼會在函數調用的時候執行
//調用函數 語法：函數對象()
//當調用函數時，函數中封裝的代碼會按照順序執行
//fun();
/*
* 使用 函數聲明 來創建一個函數
* 語法：
* function 函數名([形參1,形參2...形參N]){
* 語句...
* }
*/
function fun2(){
console.log("這是我的第二個函數~~~");
alert("哈哈哈哈哈");
document.write("~~~~(>_<)~~~~");
}
//console.log(fun2);
//調用fun2
//fun2();
/*
* 使用 函數表達式 來創建一個函數
* var 函數名 = function([形參1,形參2...形參N]){
* 語句....
* }
*/
var fun3 = function(){
console.log("我是匿名函數中封裝的代碼");
};
fun3();
</script>
</head>
<body>
</body>
</html>
函數參數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 定義一個用來求兩個數和的函數
* 可以在函數的()中來指定一個或多個形參（形式參數）
* 多個形參之間使用,隔開，聲明形參就相當於在函數內部聲明瞭對應的變量
* 但是並不賦值
*/
function sum(a,b){
console.log("a = "+a);
console.log("b = "+b);
console.log(a+b);
}
/*
* 在調用函數時，可以在()中指定實參（實際參數）
* 實參將會賦值給函數中對應的形參
*/
/*sum(1,2);
sum(123,456);*/
/*
* 調用函數時解析器不會檢查實參的類型,
* 所以要注意，是否有可能會接收到非法的參數，如果有可能則需要對參數進行類型的檢查
* 函數的實參可以是任意的數據類型
*/
//sum(123,"hello");
//sum(true , false);
/*
* 調用函數時，解析器也不會檢查實參的數量
* 多餘實參不會被賦值
* 如果實參的數量少於形參的數量，則沒有對應實參的形參將是undefined
*
*/
//sum(123,456,"hello",true,null);
sum(123);
</script>
</head>
<body>
</body>
</html>
返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
* 創建一個函數，用來計算三個數的和
*
* 可以使用 return 來設置函數的返回值
* 語法：
* return 值
*
* return後的值將會會作爲函數的執行結果返回，
* 可以定義一個變量，來接收該結果
*
* 在函數中return後的語句都不會執行
*
* 如果return語句後不跟任何值就相當於返回一個undefined，
* 如果函數中不寫return，則也會返回undefined
*
* return後可以跟任意類型的值
*
*/
function sum(a , b , c){
//alert(a + b +c);
var d = a + b + c;
return d;
//return undefined;
}
//調用函數
//變量result的值就是函數的執行結果
//函數返回什麼result的值就是什麼
var result = sum(4,7,8);
//var result = alert("hello");
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
return
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function fun(){
alert("函數要執行了~~~~");
for(var i=0 ; i<5 ; i++){
if(i == 2){
//使用break可以退出當前的循環
//break;
//continue用於跳過當次循環
//continue;
//使用return可以結束整個函數
//return;
}
console.log(i);
}
alert("函數執行完了~~~~");
}
//fun();
/*
* 返回值可以是任意的數據類型
* 也可以是一個對象，也可以是一個函數
*/
function fun2(){
//返回一個對象
return {name:"沙和尚"};
}
var a = fun2();
//console.log("a = "+a);
function fun3(){
//在函數內部再聲明一個函數
function fun4(){
alert("我是fun4");
}
//將fun4函數對象作爲返回值返回
return fun4;
}
a = fun3();
//console.log(a);
//a();
fun3()();
</script>
</head>
<body>
</body>
</html>
立即執行函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//函數對象()
/*
* 立即執行函數
* 函數定義完，立即被調用，這種函數叫做立即執行函數
* 立即執行函數往往只會執行一次
*/
/*(function(){
alert("我是一個匿名函數~~~");
})();*/
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
</script>
</head>
<body>
</body>
</html>
對象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 創建一個對象
*/
var obj = new Object();
//向對象中添加屬性
obj.name = "孫悟空";
obj.age = 18;
//對象的屬性值可以是任何的數據類型，也可以是個函數
obj.sayName = function(){
console.log(obj.name);
};
function fun(){
console.log(obj.name);
};
//console.log(obj.sayName);
//調方法
obj.sayName();
//調函數
//fun();
/*
* 函數也可以稱爲對象的屬性，
* 如果一個函數作爲一個對象的屬性保存，
* 那麼我們稱這個函數時這個對象的方法
* 調用這個函數就說調用對象的方法（method）
*
* 但是它只是名稱上的區別沒有其他的區別
*
*/
var obj2 = {
name:"豬八戒",
age:18,
sayName:function(){
console.log(obj2.name);
}
};
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
枚舉對象中的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = {
name:"孫悟空",
age:18,
gender:"男",
address:"花果山"
};
//枚舉對象中的屬性
//使用for ... in 語句
/*
* 語法：
* for(var 變量 in 對象){
*
* }
*
* for...in語句 對象中有幾個屬性，循環體就會執行幾次
* 每次執行時，會將對象中的一個屬性的名字賦值給變量
*/
for(var n in obj){
console.log("屬性名:"+n);
console.log("屬性值:"+obj[n]);
}
</script>
</head>
<body>
</body>
</html>
作用域（scope）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 作用域
* - 作用域指一個變量的作用的範圍
* - 在JS中一共有兩種作用域：
* 1.全局作用域
* - 直接編寫在script標籤中的JS代碼，都在全局作用域
* - 全局作用域在頁面打開時創建，在頁面關閉時銷燬
* - 在全局作用域中有一個全局對象window，
* 它代表的是一個瀏覽器的窗口，它由瀏覽器創建我們可以直接使用
* - 在全局作用域中：
* 創建的變量都會作爲window對象的屬性保存
* 創建的函數都會作爲window對象的方法保存
* - 全局作用域中的變量都是全局變量，
* 在頁面的任意的部分都可以訪問的到
*
* 2.函數作用域
*
*/
var a = 10;
var b = 20;
//var c = "hello";
//console.log(window.c);
function fun(){
console.log("我是fun函數");
}
//window.fun();
//window.alert("hello");
</script>
</head>
<body>
</body>
</html>
變量的聲明提前
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 變量的聲明提前
* - 使用var關鍵字聲明的變量，會在所有的代碼執行之前被聲明（但是不會賦值），
* 但是如果聲明變量時不適用var關鍵字，則變量不會被聲明提前
*
* 函數的聲明提前
* - 使用函數聲明形式創建的函數 function 函數(){}
* 它會在所有的代碼執行之前就被創建，所以我們可以在函數聲明前來調用函數
* 使用函數表達式創建的函數，不會被聲明提前，所以不能在聲明前調用
*/
/*console.log("a = "+a);
var a = 123;*/
//fun();
//函數聲明，會被提前創建
function fun(){
console.log("我是一個fun函數");
}
//函數表達式，不會被提前創建
var fun2 = function(){
console.log("我是fun2函數");
};
fun2();
</script>
</head>
<body>
</body>
</html>
函數的作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 函數作用域
* - 調用函數時創建函數作用域，函數執行完畢以後，函數作用域銷燬
* - 每調用一次函數就會創建一個新的函數作用域，他們之間是互相獨立的
* - 在函數作用域中可以訪問到全局作用域的變量
* 在全局作用域中無法訪問到函數作用域的變量
* - 當在函數作用域操作一個變量時，它會先在自身作用域中尋找，如果有就直接使用
* 如果沒有則向上一級作用域中尋找，直到找到全局作用域，
* 如果全局作用域中依然沒有找到，則會報錯ReferenceError
* - 在函數中要訪問全局變量可以使用window對象
*/
//創建一個變量
var a = 10;
function fun(){
var a = "我是fun函數中的變量a";
var b = 20;
//console.log("a = "+a);
function fun2(){
console.log("a = "+window.a);
}
fun2();
}
//fun();
//console.log("b = "+b);
/*
* 在函數作用域也有聲明提前的特性，
* 使用var關鍵字聲明的變量，會在函數中所有的代碼執行之前被聲明
* 函數聲明也會在函數中所有的代碼執行之前執行
*/
function fun3(){
fun4();
//console.log(a);
var a = 35;
function fun4(){
alert("I'm fun4");
}
}
//fun3();
var c = 33;
/*
* 在函數中，不適用var聲明的變量都會成爲全局變量
*/
function fun5(){
//console.log("c = "+c);
//c = 10;
//d沒有使用var關鍵字，則會設置爲全局變量
d = 100;
}
fun5();
//在全局輸出c
//console.log("d = "+d);
var e = 23;
/*
* 定義形參就相當於在函數作用域中聲明瞭變量
*/
function fun6(e){
alert(e);
}
fun6();
</script>
</head>
<body>
</body>
</html>
this_1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 解析器在調用函數每次都會向函數內部傳遞進一個隱含的參數,
* 這個隱含的參數就是this， this指向的是一個對象，
* 這個對象我們稱爲函數執行的 上下文對象，
* 根據函數的調用方式的不同，this會指向不同的對象
* 1.以函數的形式調用時，this永遠都是window
* 2.以方法的形式調用時，this就是調用方法的那個對象
*/
function fun(){
//console.log("a = "+a+", b = "+b);
console.log(this.name);
}
//fun();
//創建一個對象
var obj = {
name:"孫悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
//console.log(obj.sayName == fun);
var name = "全局的name屬性";
//obj.sayName();
//以函數形式調用，this是window
//fun();
//以方法的形式調用，this是調用方法的對象
//obj.sayName();
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
this_2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個name變量
var name = "全局";
//創建一個fun()函數
function fun(){
console.log(this.name);
}
//創建兩個對象
var obj = {
name:"孫悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
//我們希望調用obj.sayName()時可以輸出obj的名字
//obj.sayName();
obj.sayName();
</script>
</head>
<body>
</body>
</html>
對象（工廠方法創建對象）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 創建一個對象
*/
var obj = {
name:"孫悟空",
age:18,
gender:"男",
sayName:function(){
alert(this.name);
}
};
/*
* 使用工廠方法創建對象
* 通過該方法可以大批量的創建對象
*/
function createPerson(name , age ,gender){
//創建一個新的對象
var obj = new Object();
//向對象中添加屬性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//將新的對象返回
return obj;
}
/*
* 用來創建狗的對象
*/
function createDog(name , age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHello = function(){
alert("汪汪~~");
};
return obj;
}
var obj2 = createPerson("豬八戒",28,"男");
var obj3 = createPerson("白骨精",16,"女");
var obj4 = createPerson("蜘蛛精",18,"女");
/*
* 使用工廠方法創建的對象，使用的構造函數都是Object
* 所以創建的對象都是Object這個類型，
* 就導致我們無法區分出多種不同類型的對象
*/
//創建一個狗的對象
var dog = createDog("旺財",3);
console.log(dog);
console.log(obj4);
</script>
</head>
<body>
</body>
</html>
構造函數（new的過程）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 創建一個構造函數，專門用來創建Person對象的
* 構造函數就是一個普通的函數，創建方式和普通函數沒有區別,
* 不同的是構造函數習慣上首字母大寫
*
* 構造函數和普通函數的區別就是調用方式的不同
* 普通函數是直接調用，而構造函數需要使用new關鍵字來調用
*
* 構造函數的執行流程：
* 1.立刻創建一個新的對象
* 2.將新建的對象設置爲函數中this,在構造函數中可以使用this來引用新建的對象
* 3.逐行執行函數中的代碼
* 4.將新建的對象作爲返回值返回
*
* 使用同一個構造函數創建的對象，我們稱爲一類對象，也將一個構造函數稱爲一個類。
* 我們將通過一個構造函數創建的對象，稱爲是該類的實例
*
* this的情況：
* 1.當以函數的形式調用時，this是window
* 2.當以方法的形式調用時，誰調用方法this就是誰
* 3.當以構造函數的形式調用時，this就是新創建的那個對象
*
*/
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};
}
function Dog(){
}
var per = new Person("孫悟空",18,"男");
var per2 = new Person("玉兔精",16,"女");
var per3 = new Person("奔波霸",38,"男");
var dog = new Dog();
/*console.log(per);
console.log(dog);*/
/*
* 使用instanceof可以檢查一個對象是否是一個類的實例
* 語法：
* 對象 instanceof 構造函數
* 如果是，則返回true，否則返回false
*/
//console.log(per instanceof Person);
//console.log(dog instanceof Person);
/*
* 所有的對象都是Object的後代，
* 所以任何對象和Object左instanceof檢查時都會返回true
*/
//console.log(dog instanceof Object);
</script>
</head>
<body>
</body>
</html>
原型1
原型的這一節知識，我在另外的筆記裏有詳細的介紹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 原型 prototype
*
* 我們所創建的每一個函數，解析器都會向函數中添加一個屬性prototype
* 這個屬性對應着一個對象，這個對象就是我們所謂的原型對象
* 如果函數作爲普通函數調用prototype沒有任何作用
* 當函數以構造函數的形式調用時，它所創建的對象中都會有一個隱含的屬性，
* 指向該構造函數的原型對象，我們可以通過__proto__來訪問該屬性
*
* 原型對象就相當於一個公共的區域，所有同一個類的實例都可以訪問到這個原型對象，
* 我們可以將對象中共有的內容，統一設置到原型對象中。
*
* 當我們訪問對象的一個屬性或方法時，它會先在對象自身中尋找，如果有則直接使用，
* 如果沒有則會去原型對象中尋找，如果找到則直接使用
*
* 以後我們創建構造函數時，可以將這些對象共有的屬性和方法，統一添加到構造函數的原型對象中，
* 這樣不用分別爲每一個對象添加，也不會影響到全局作用域，就可以使每個對象都具有這些屬性和方法了
*/
function MyClass(){
}
//向MyClass的原型中添加屬性a
MyClass.prototype.a = 123;
//向MyClass的原型中添加一個方法
MyClass.prototype.sayHello = function(){
alert("hello");
};
var mc = new MyClass();
var mc2 = new MyClass();
//console.log(MyClass.prototype);
//console.log(mc2.__proto__ == MyClass.prototype);
//向mc中添加a屬性
mc.a = "我是mc中的a";
//console.log(mc2.a);
mc.sayHello();
</script>
</head>
<body>
</body>
</html>
原型2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 創建一個構造函數
*/
function MyClass(){
}
//向MyClass的原型中添加一個name屬性
MyClass.prototype.name = "我是原型中的名字";
var mc = new MyClass();
mc.age = 18;
//console.log(mc.name);
//使用in檢查對象中是否含有某個屬性時，如果對象中沒有但是原型中有，也會返回true
//console.log("name" in mc);
//可以使用對象的hasOwnProperty()來檢查對象自身中是否含有該屬性
//使用該方法只有當對象自身中含有屬性時，纔會返回true
//console.log(mc.hasOwnProperty("age"));
//console.log(mc.hasOwnProperty("hasOwnProperty"));
/*
* 原型對象也是對象，所以它也有原型，
* 當我們使用一個對象的屬性或方法時，會現在自身中尋找，
* 自身中如果有，則直接使用，
* 如果沒有則去原型對象中尋找，如果原型對象中有，則使用，
* 如果沒有則去原型的原型中尋找,直到找到Object對象的原型，
* Object對象的原型沒有原型，如果在Object原型中依然沒有找到，則返回undefined
*/
//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
//console.log(mc.__proto__.__proto__.__proto__);
//console.log(mc.hello);
//console.log(mc.__proto__.__proto__.__proto__)
</script>
</head>
<body>
</body>
</html>
toString
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};
//創建一個Person實例
var per = new Person("孫悟空",18,"男");
var per2 = new Person("豬八戒",28,"男");
//當我們直接在頁面中打印一個對象時，事件上是輸出的對象的toString()方法的返回值
//如果我們希望在輸出對象時不輸出[object Object]，可以爲對象添加一個toString()方法
//Person[name=孫悟空,age=18,gender=男]
/*per.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};*/
var result = per.toString();
//console.log("result = " + result);
//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
console.log(per2);
console.log(per);
</script>
</head>
<body>
</body>
</html>
垃圾回收
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 垃圾回收（GC）
* - 就像人生活的時間長了會產生垃圾一樣，程序運行過程中也會產生垃圾
* 這些垃圾積攢過多以後，會導致程序運行的速度過慢，
* 所以我們需要一個垃圾回收的機制，來處理程序運行過程中產生垃圾
* - 當一個對象沒有任何的變量或屬性對它進行引用，此時我們將永遠無法操作該對象，
* 此時這種對象就是一個垃圾，這種對象過多會佔用大量的內存空間，導致程序運行變慢，
* 所以這種垃圾必須進行清理。
* - 在JS中擁有自動的垃圾回收機制，會自動將這些垃圾對象從內存中銷燬，
* 我們不需要也不能進行垃圾回收的操作
* - 我們需要做的只是要將不再使用的對象設置null即可
*
*/
var obj = new Object();
//對對象進行各種操作。。。。
obj = null;
</script>
</head>
<body>
</body>
</html>
數組1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 內建對象
* 宿主對象
* 自定義對象
*
* 數組（Array）
* - 數組也是一個對象
* - 它和我們普通對象功能類似，也是用來存儲一些值的
* - 不同的是普通對象是使用字符串作爲屬性名的，
* 而數組時使用數字來作爲索引操作元素
* - 索引：
* 從0開始的整數就是索引
* - 數組的存儲性能比普通對象要好，在開發中我們經常使用數組來存儲一些數據
*/
//創建數組對象
var arr = new Array();
//使用typeof檢查一個數組時，會返回object
//console.log(typeof arr);
/*
* 向數組中添加元素
* 語法：數組[索引] = 值
*/
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;
/*arr[10] = 31;
arr[100] = 90;*/
/*
* 讀取數組中的元素
* 語法：數組[索引]
* 如果讀取不存在的索引，他不會報錯而是返回undefined
*/
//console.log(arr[3]);
/*
* 獲取數組的長度
* 可以使用length屬性來獲取數組的長度(元素的個數)
* 語法：數組.length
*
* 對於連續的數組，使用length可以獲取到數組的長度（元素的個數）
* 對於非連續的數組，使用length會獲取到數組的最大的索引+1
* 儘量不要創建非連續的數組
*/
/*console.log(arr.length);
console.log(arr);*/
/*
* 修改length
* 如果修改的length大於原長度，則多出部分會空出來
* 如果修改的length小於原長度，則多出的元素會被刪除
*/
//arr.length = 10;
/*arr.length = 2;
console.log(arr.length);
console.log(arr);*/
arr[4] = 50;
arr[5] = 60;
//向數組的最後一個位置添加元素
//語法：數組[數組.length] = 值;
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
數組2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個數組
//var arr = new Array();
//使用字面量來創建數組
//語法:[]
//var arr = [];
//console.log(typeof arr);
//使用字面量創建數組時，可以在創建時就指定數組中的元素
var arr = [1,2,3,4,5,10];
//console.log(arr[3]);
//使用構造函數創建數組時，也可以同時添加元素，將要添加的元素作文構造函數的參數傳遞
//元素之間使用,隔開
var arr2 = new Array(10,20,30);
//console.log(arr2);
//創建一個數組數組中只有一個元素10
arr = [10];
//創建一個長度爲10的數組
arr2 = new Array(10);
//console.log(arr2.length);
//數組中的元素可以是任意的數據類型
arr = ["hello",1,true,null,undefined];
//也可以是對象
var obj = {name:"孫悟空"};
arr[arr.length] = obj;
arr = [{name:"孫悟空"},{name:"沙和尚"},{name:"豬八戒"}];
//也可以是一個函數
arr = [function(){alert(1)},function(){alert(2)}];
//console.log(arr);
//arr[0]();
//數組中也可以放數組，如下這種數組我們稱爲二維數組
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);
</script>
</head>
<body>
</body>
</html>
數組的方法1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個數組
var arr = ["孫悟空","豬八戒","沙和尚"];
/*
* push()
* - 該方法可以向數組的末尾添加一個或多個元素，並返回數組的新的長度
* - 可以將要添加的元素作爲方法的參數傳遞，
* 這樣這些元素將會自動添加到數組的末尾
* - 該方法會將數組新的長度作爲返回值返回
*/
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
//console.log(arr);
//console.log("result = "+result);
/*
* pop()
* - 該方法可以刪除數組的最後一個元素,並將被刪除的元素作爲返回值返回
*/
result = arr.pop();
/*console.log(arr);
console.log("result = "+result);*/
/*
* unshift()
* - 向數組開頭添加一個或多個元素，並返回新的數組長度
* - 向前邊插入元素以後，其他的元素索引會依次調整
*/
//console.log(arr);
arr.unshift("牛魔王","二郎神");
console.log(arr);
/*
* shift()
* - 可以刪除數組的第一個元素，並將被刪除的元素作爲返回值返回
*/
result = arr.shift();
result = arr.shift();
console.log(arr);
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
數組的遍歷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個數組
var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
//所謂的遍歷數組，就是將數組中所有的元素都取出來
/*console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);*/
for(var i=0 ; i<arr.length ; i++){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
forEach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 一般我們都是使用for循環去遍歷數組，
* JS中還爲我們提供了一個方法，用來遍歷數組
* forEach()
* - 這個方法只支持IE8以上的瀏覽器
* IE8及以下的瀏覽器均不支持該方法，所以如果需要兼容IE8，則不要使用forEach
* 還是使用for循環來遍歷
*/
//創建一個數組
var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
/*
* forEach()方法需要一個函數作爲參數
* - 像這種函數，由我們創建但是不由我們調用的，我們稱爲回調函數
* - 數組中有幾個元素函數就會執行幾次，每次執行時，瀏覽器會將遍歷到的元素
* 以實參的形式傳遞進來，我們可以來定義形參，來讀取這些內容
* - 瀏覽器會在回調函數中傳遞三個參數：
* 第一個參數，就是當前正在遍歷的元素
* 第二個參數，就是當前正在遍歷的元素的索引
* 第三個參數，就是正在遍歷的數組
*
*/
arr.forEach(function(value , index , obj){
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
數組的方法2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
/*
* slice()
* - 可以用來從數組提取指定元素
* - 該方法不會改變元素數組，而是將截取到的元素封裝到一個新數組中返回
* - 參數：
* 1.截取開始的位置的索引,包含開始索引
* 2.截取結束的位置的索引,不包含結束索引
* - 第二個參數可以省略不寫,此時會截取從開始索引往後的所有元素
* - 索引可以傳遞一個負值，如果傳遞一個負值，則從後往前計算
* -1 倒數第一個
* -2 倒數第二個
*/
var result = arr.slice(1,4);
result = arr.slice(3);
result = arr.slice(1,-2);
//console.log(result);
/*
* splice()
* - 可以用於刪除數組中的指定元素
* - 使用splice()會影響到原數組，會將指定元素從原數組中刪除
* 並將被刪除的元素作爲返回值返回
* - 參數：
* 第一個，表示開始位置的索引
* 第二個，表示刪除的數量
* 第三個及以後。。
* 可以傳遞一些新的元素，這些元素將會自動插入到開始位置索引前邊
*
*/
arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(3,0,"牛魔王","鐵扇公主","紅孩兒");
console.log(arr);
//console.log(result);
//["孫悟空", "豬八戒", "沙和尚", "牛魔王", "鐵扇公主", "紅孩兒", "唐僧", "白骨精"]
</script>
</head>
<body>
</body>
</html>
練習——去除數組中重複的數字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個數組
var arr = [1,2,3,2,2,1,3,4,2,5];
//去除數組中重複的數字
//獲取數組中的每一個元素
for(var i=0 ; i<arr.length ; i++){
//console.log(arr[i]);
/*獲取當前元素後的所有元素*/
for(var j=i+1 ; j<arr.length ; j++){
//console.log("---->"+arr[j]);
//判斷兩個元素的值是否相等
if(arr[i] == arr[j]){
//如果相等則證明出現了重複的元素，則刪除j對應的元素
arr.splice(j,1);
//當刪除了當前j所在的元素以後，後邊的元素會自動補位
//此時將不會在比較這個元素吧，我需要在比較一次j所在位置的元素
//使j自減
j--;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
數組的方法3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var arr = ["孫悟空","豬八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];
/*
* concat()可以連接兩個或多個數組，並將新的數組返回
* - 該方法不會對原數組產生影響
*/
var result = arr.concat(arr2,arr3,"牛魔王","鐵扇公主");
/*
* join()
* - 該方法可以將數組轉換爲一個字符串
* - 該方法不會對原數組產生影響，而是將轉換後的字符串作爲結果返回
* - 在join()中可以指定一個字符串作爲參數，這個字符串將會成爲數組中元素的連接符
* 如果不指定連接符，則默認使用,作爲連接符
*/
arr = ["孫悟空","豬八戒","沙和尚","唐僧"];
result = arr.join("@-@"); //"孫悟空@-@豬八戒@-@沙和尚@-@唐僧"
/*
* reverse()
* - 該方法用來反轉數組（前邊的去後邊，後邊的去前邊）
* - 該方法會直接修改原數組
*/
arr.reverse();
//console.log(arr);
arr = ["b","d","e","a","c"];
/*
* sort()
* - 可以用來對數組中的元素進行排序
* - 也會影響原數組，默認會按照Unicode編碼進行排序
*/
arr.sort();
//arr.reverse();
/*
* 即使對於純數字的數組，使用sort()排序時，也會按照Unicode編碼來排序，
* 所以對數字進排序時，可能會得到錯誤的結果。
*
* 我們可以自己來指定排序的規則
* 我們可以在sort()添加一個回調函數，來指定排序規則，
* 回調函數中需要定義兩個形參,
* 瀏覽器將會分別使用數組中的元素作爲實參去調用回調函數
* 使用哪個元素調用不確定，但是肯定的是在數組中a一定在b前邊
* - 瀏覽器會根據回調函數的返回值來決定元素的順序，
* 如果返回一個大於0的值，則元素會交換位置
* 如果返回一個小於0的值，則元素位置不變
* 如果返回一個0，則認爲兩個元素相等，也不交換位置
*
* - 如果需要升序排列，則返回 a-b
* 如果需要降序排列，則返回b-a
*/
arr = [5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
//前邊的大
/*if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}*/
//升序排列
//return a - b;
//降序排列
return b - a;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>
函數的方法（call和apply）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function fun(a,b) {
console.log("a = "+a);
console.log("b = "+b);
//alert(this);
}
var obj = {
name: "obj",
sayName:function(){
alert(this.name);
}
};
/*
* call()和apply()
* - 這兩個方法都是函數對象的方法，需要通過函數對象來調用
* - 當對函數調用call()和apply()都會調用函數執行
* - 在調用call()和apply()可以將一個對象指定爲第一個參數
* 此時這個對象將會成爲函數執行時的this
* - call()方法可以將實參在對象之後依次傳遞
* - apply()方法需要將實參封裝到一個數組中統一傳遞
*
* - this的情況：
* 1.以函數形式調用時，this永遠都是window
* 2.以方法的形式調用時，this是調用方法的對象
* 3.以構造函數的形式調用時，this是新創建的那個對象
* 4.使用call和apply調用時，this是指定的那個對象
*/
//fun.call(obj,2,3);
fun.apply(obj,[2,3]);
var obj2 = {
name: "obj2"
};
/*fun.apply();
fun.call();
fun();*/
//fun.call(obj);
//fun.apply(obj);
//fun();
//obj.sayName.apply(obj2);
</script>
</head>
<body>
</body>
</html>
arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在調用函數時，瀏覽器每次都會傳遞進兩個隱含的參數：
* 1.函數的上下文對象 this
* 2.封裝實參的對象 arguments
* - arguments是一個類數組對象,它也可以通過索引來操作數據，也可以獲取長度
* - 在調用函數時，我們所傳遞的實參都會在arguments中保存
* - arguments.length可以用來獲取實參的長度
* - 我們即使不定義形參，也可以通過arguments來使用實參，
* 只不過比較麻煩
* arguments[0] 表示第一個實參
* arguments[1] 表示第二個實參 。。。
* - 它裏邊有一個屬性叫做callee，
* 這個屬性對應一個函數對象，就是當前正在指向的函數的對象
*
*/
function fun(a,b){
console.log(arguments instanceof Array); //false
console.log(Array.isArray(arguments)); //false
console.log(arguments[1]); //true
console.log(arguments.length); //2
console.log(arguments.callee == fun); //true
}
fun("hello",true);
</script>
</head>
<body>
</body>
</html>
Date
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Date對象
* - 在JS中使用Date對象來表示一個時間
*/
//創建一個Date對象
//如果直接使用構造函數創建一個Date對象，則會封裝爲當前代碼執行的時間
var d = new Date();
//創建一個指定的時間對象
//需要在構造函數中傳遞一個表示時間的字符串作爲參數
//日期的格式 月份/日/年 時:分:秒
var d2 = new Date("2/18/2011 11:10:30");
/*
* getDate()
* - 獲取當前日期對象是幾日（18日）
*/
var date = d2.getDate();
/*
* getDay()
* - 獲取當前日期對象時周幾
* - 會返回一個0-6的值
* 0 表示週日
* 1表示週一
* 。。。
*/
var day = d2.getDay();
/*
* getMonth()
* d2 = new Date("12/18/2011 11:10:30");
* - 獲取當前時間對象的月份
* - 會返回一個0-11的值
* 0 表示1月
* 1 表示2月
* 11 表示12月
*/
var month = d2.getMonth();
/*
* getFullYear()
* - 獲取當前日期對象的年份
*/
var year = d2.getFullYear();
//console.log(d2);
//console.log("date = "+date);
//console.log("day = "+day);
//console.log("month = "+month);
//console.log(year);
/*
* getTime()
* - 獲取當前日期對象的時間戳
* - 時間戳，指的是從格林威治標準時間的1970年1月1日，0時0分0秒
* 到當前日期所花費的毫秒數（1秒 = 1000毫秒）
* - 計算機底層在保存時間時使用都是時間戳
*/
var time = d2.getTime();
//console.log(time/1000/60/60/24/365);
/*var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
console.log(time);*/
//利用時間戳來測試代碼的執行的性能
//獲取當前的時間戳
var start = Date.now();
for(var i=0 ; i<100 ; i++){
console.log(i);
}
var end = Date.now();
console.log("執行了："+(end - start)+"毫秒");
</script>
</head>
<body>
</body>
</html>
Math
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Math
* - Math和其他的對象不同，它不是一個構造函數，
* 它屬於一個工具類不用創建對象，它裏邊封裝了數學運算相關的屬性和方法
* - 比如
* Math.PI 表示的圓周率
*/
//console.log(Math.PI);
/*
* abs()可以用來計算一個數的絕對值
*/
//console.log(Math.abs(-1));
/*
* Math.ceil()
* - 可以對一個數進行向上取整，小數位只有有值就自動進1
* Math.floor()
* - 可以對一個數進行向下取整，小數部分會被舍掉
* Math.round()
* - 可以對一個數進行四捨五入取整
*/
//console.log(Math.ceil(1.1));
//console.log(Math.floor(1.99));
//console.log(Math.round(1.4));
/*
* Math.random()
* - 可以用來生成一個0-1之間的隨機數
* - 生成一個0-10的隨機數
* - 生成一個0-x之間的隨機數
* Math.round(Math.random()*x)
*
* - 生成一個1-10
* - 生成一個x-y之間的隨機數
* Math.round(Math.random()*(y-x)+x)
*/
/*for(var i=0 ; i<100 ; i++){
//console.log(Math.round(Math.random()*10));
//console.log(Math.round(Math.random()*20));
//console.log(Math.round(Math.random()*9)+1);
//console.log(Math.round(Math.random()*8)+2);
//生成1-6之間的隨機數
console.log(Math.round(Math.random()*5+1));
}*/
/*
* max() 可以獲取多個數中的最大值
* min() 可以獲取多個數中的最小值
*/
var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);
//console.log(min);
/*
* Math.pow(x,y)
* 返回x的y次冪
*/
//console.log(Math.pow(12,3));
/*
* Math.sqrt()
* 用於對一個數進行開方運算
*/
console.log(Math.sqrt(2));
</script>
</head>
<body>
</body>
</html>
包裝類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 基本數據類型
* String Number Boolean Null Undefined
* 引用數據類型
* Object
*
* 在JS中爲我們提供了三個包裝類，通過這三個包裝類可以將基本數據類型的數據轉換爲對象
* String()
* - 可以將基本數據類型字符串轉換爲String對象
* Number()
* - 可以將基本數據類型的數字轉換爲Number對象
* Boolean()
* - 可以將基本數據類型的布爾值轉換爲Boolean對象
* 但是注意：我們在實際應用中不會使用基本數據類型的對象，
* 如果使用基本數據類型的對象，在做一些比較時可能會帶來一些不可預期的結果
*/
//創建一個Number類型的對象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
//向num中添加一個屬性
num.hello = "abcdefg";
//console.log(str === str2); false
var b = new Boolean(false);
/*if(b){
alert("我運行了~~~");
}*/
/*
* 方法和屬性之能添加給對象，不能添加給基本數據類型
* 當我們對一些基本數據類型的值去調用屬性和方法時，
* 瀏覽器會臨時使用包裝類將其轉換爲對象，然後在調用對象的屬性和方法
* 調用完以後，在將其轉換爲基本數據類型
*/
var s = 123;
s = s.toString();
s.hello = "你好";
console.log(s.hello);
//console.log(typeof s);
</script>
</head>
<body>
</body>
</html>
字符串的相關方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//創建一個字符串
var str = "Hello Atguigu";
/*
* 在底層字符串是以字符數組的形式保存的
* ["H","e","l"]
*/
/*
* length屬性
* - 可以用來獲取字符串的長度
*/
//console.log(str.length);
//console.log(str[5]);
/*
* charAt()
* - 可以返回字符串中指定位置的字符
* - 根據索引獲取指定的字符
*/
str = "中Hello Atguigu";
var result = str.charAt(6);
/*
* charCodeAt()
* - 獲取指定位置字符的字符編碼（Unicode編碼）
*/
result = str.charCodeAt(0);
/*
* String.formCharCode()
* - 可以根據字符編碼去獲取字符
*/
result = String.fromCharCode(0x2692);
/*
* concat()
* - 可以用來連接兩個或多個字符串
* - 作用和+一樣
*/
result = str.concat("你好","再見");
/*
* indexof()
* - 該方法可以檢索一個字符串中是否含有指定內容
* - 如果字符串中含有該內容，則會返回其第一次出現的索引
* 如果沒有找到指定的內容，則返回-1
* - 可以指定一個第二個參數，指定開始查找的位置
*
* lastIndexOf();
* - 該方法的用法和indexOf()一樣，
* 不同的是indexOf是從前往後找，
* 而lastIndexOf是從後往前找
* - 也可以指定開始查找的位置
*/
str = "hello hatguigu";
result = str.indexOf("h",1);
result = str.lastIndexOf("h",5);
/*
* slice()
* - 可以從字符串中截取指定的內容
* - 不會影響原字符串，而是將截取到內容返回
* - 參數：
* 第一個，開始位置的索引（包括開始位置）
* 第二個，結束位置的索引（不包括結束位置）
* - 如果省略第二個參數，則會截取到後邊所有的
* - 也可以傳遞一個負數作爲參數，負數的話將會從後邊計算
*/
str = "abcdefghijk";
result = str.slice(1,4);
result = str.slice(1,-1);
/*
* substring()
* - 可以用來截取一個字符串，可以slice()類似
* - 參數：
* - 第一個：開始截取位置的索引（包括開始位置）
* - 第二個：結束位置的索引（不包括結束位置）
* - 不同的是這個方法不能接受負值作爲參數，
* 如果傳遞了一個負值，則默認使用0
* - 而且他還自動調整參數的位置，如果第二個參數小於第一個，則自動交換
*/
result = str.substring(0,1);
/*
* substr()
* - 用來截取字符串
* - 參數：
* 1.截取開始位置的索引
* 2.截取的長度
*/
str = "abcdefg";
result = str.substr(3,2);
/*
* split()
* - 可以將一個字符串拆分爲一個數組
* - 參數：
* -需要一個字符串作爲參數，將會根據該字符串去拆分數組
*/
str = "abcbcdefghij";
result = str.split("d");
/*
* 如果傳遞一個空串作爲參數，則會將每個字符都拆分爲數組中的一個元素
*/
result = str.split("");
//console.log(Array.isArray(result));
//console.log(result[0]);
console.log(result);
str = "abcdefg";
/*
* toUpperCase()
* - 將一個字符串轉換爲大寫並返回
*/
result = str.toUpperCase();
str = "ABCDEFG";
/*
* toLowerCase()
* -將一個字符串轉換爲小寫並返回
*/
result = str.toLowerCase();
//console.log(result);
</script>
</head>
<body>
</body>
</html>
正則表達式1
這一節正則表達式，我有更加詳細的筆記，具體請查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 正則表達式
* - [email protected]
* - [email protected] adminatguigu.com
* - 郵件的規則：
* 1.前邊可以是xxxx亂七八糟
* 2.跟着一個@
* 3.後邊可以是xxxx亂七八糟
* 4..com獲取其他的亂七八糟
*
* - 正則表達式用於定義一些字符串的規則，
* 計算機可以根據正則表達式，來檢查一個字符串是否符合規則，
* 獲取將字符串中符合規則的內容提取出來
*/
//創建正則表達式的對象
/*
* 語法：
* var 變量 = new RegExp("正則表達式","匹配模式");
* 使用typeof檢查正則對象，會返回object
* var reg = new RegExp("a"); 這個正則表達式可以來檢查一個字符串中是否含有a
* 在構造函數中可以傳遞一個匹配模式作爲第二個參數，
* 可以是
* i 忽略大小寫
* g 全局匹配模式
*/
var reg = new RegExp("ab","i");
var str = "a";
/*
* 正則表達式的方法：
* test()
* - 使用這個方法可以用來檢查一個字符串是否符合正則表達式的規則，
* 如果符合則返回true，否則返回false
*/
var result = reg.test(str);
//console.log(result);
console.log(reg.test("Ac"));
</script>
</head>
<body>
</body>
</html>
正則表達式2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 使用字面量來創建正則表達式
* 語法：var 變量 = /正則表達式/匹配模式
* 使用字面量的方式創建更加簡單
* 使用構造函數創建更加靈活
*
*/
//var reg = new RegExp("a","i");
var reg = /a/i;
//console.log(typeof reg);
//console.log(reg.test("abc"));
//創建一個正則表達式，檢查一個字符串中是否有a或b
/*
* 使用 | 表示或者的意思
*/
reg = /a|b|c/;
/*
* 創建一個正則表達式檢查一個字符串中是否有字母
*/
//reg = /a|b|c|d|e|f|g/;
/*
* []裏的內容也是或的關係
* [ab] == a|b
* [a-z] 任意小寫字母
* [A-Z] 任意大寫字母
* [A-z] 任意字母
* [0-9] 任意數字
*/
reg = /[A-z]/;
//檢查一個字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
/*
* [^ ] 除了
*/
reg = /[^ab]/;
reg = /[^0-9]/;
console.log(reg.test("12a3456"));
</script>
</head>
<body>
</body>
</html>
字符串和正則相關的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f7";
/*
* split()
* - 可以將一個字符串拆分爲一個數組
* - 方法中可以傳遞一個正則表達式作爲參數，這樣方法將會根據正則表達式去拆分字符串
* - 這個方法即使不指定全局匹配，也會全都插分
*/
/*
* 根據任意字母來將字符串拆分
*/
var result = str.split(/[A-z]/);
//console.log(result);
/*
* search()
* - 可以搜索字符串中是否含有指定內容
* - 如果搜索到指定內容，則會返回第一次出現的索引，如果沒有搜索到返回-1
* - 它可以接受一個正則表達式作爲參數，然後會根據正則表達式去檢索字符串
* - serach()只會查找第一個，即使設置全局匹配也沒用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
//console.log(result);
/*
* match()
* - 可以根據正則表達式，從一個字符串中將符合條件的內容提取出來
* - 默認情況下我們的match只會找到第一個符合要求的內容，找到以後就停止檢索
* 我們可以設置正則表達式爲全局匹配模式，這樣就會匹配到所有的內容
* 可以爲一個正則表達式設置多個匹配模式，且順序無所謂
* - match()會將匹配到的內容封裝到一個數組中返回，即使只查詢到一個結果
*
*
*/
str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[a-z]/ig);
//console.log(result[2]);
/*
* replace()
* - 可以將字符串中指定內容替換爲新的內容
* - 參數：
* 1.被替換的內容，可以接受一個正則表達式作爲參數
* 2.新的內容
* - 默認只會替換第一個
*/
//result = str.replace(/[a-z]/gi , "@_@");
result = str.replace(/[a-z]/gi , "");
//console.log(result);
</script>
</head>
<body>
</body>
</html>