文章目錄

1.宣告變數 var
2.變數命名的規則
3.資料型別以及注意事項
4.代碼注釋
5.其他型別轉換為字串
6.數值型別轉換
7.布爾型別轉換
8.算數運算子
9.一元運算子
10.邏輯運算子
11.比較運算子
12.賦值運算子
13.運算優先級
14.流程控制
15.JS中的陣列
- 15.1 陣列格式
- 15.2 獲取陣列中的元素
- 15.3 遍歷陣列
- 15.4 陣列求和
16. 函式
- 16.1 函式的宣告以及呼叫
- 16.2 函式的形參和實參
- 16.3 函式的回傳值
- 16.4 匿名函式
- 16.5 函式做為引數
- 16.6 函式作用域
- 16.7 函式的作用域鏈
17. JavaScript 物件
18. this用法
- 18.1 指向物件中的this
- 18.2 指向全域物件的this
- 18.3 this的指向
19. 物件的遍歷和洗掉
20. 包裝物件
21. 數學物件（標準庫物件，內置物件）
22. 日期物件
23. 陣列Array物件
24. 字串物件
25. JavaScript 補充
- 25.1 沒有用var宣告的變數
- 25.2 常用的HTML事件
- 25.3 == 和 === 有什么區別？

1.宣告變數 var

語法：

? var name = value；

2.變數命名的規則

變數命名必須是數字、字母、下劃線_ 和 $ 符號組成；
變數名字不能以數字開頭；
變數的名字不能是關鍵字；
在JS中，變數區分大小寫；
變數的命令盡可能使用駝峰法命名；
例如：var a,
b,
c,
...

3.資料型別以及注意事項

數值型別總共有六個：

Number(數值)，String(字串)，Boolean(布爾)，Undefined，Null，Object，

可以使用typeof來檢測變數的資料型別是什么，

字串
1>.這里必須使用單引號或者雙引號來定義的才是字串，
例如：
var str = 福爾摩斯;
和
var str = '福爾摩斯';
后者才是字串定義，
2>.如果在字串中要使用引號,或者在瀏覽器中顯示引號，請加轉義字符" \ "，同理其他符號也是一樣的，可以看下面3.1.2圖片，
例如：var str = '靚仔，你\'猴賽雷\'啊，'
3>.在這字串的+號要注意一下，尤其是遇到一個字串后，此后的所有加號都是字串拼接，詳情看圖片3.1.3，
Boolean型別
兩個值，true和false，在計算機內部存盤中，true為1，false為0，
Undefined和Null
undefined表示一個宣告一個沒有賦值的變數，變數只宣告的時候值默認是undefined，
null表示一個空，變數的值如果想為null,必須手動設定，

滑鼠懸浮在圖片上面就可以知道圖片幾號，

在這里插入圖片描述

4.代碼注釋

語法格式：

? // 和 /* */

這里和html一樣，此外，多運用 ctrl + / 來注釋內容，

5.其他型別轉換為字串

使用toString()方法，來轉換成字串，
使用String(變數名),來轉換成字串，
使用+的一個特性來轉換為字串，
例如:
var n = 3;
var s = ' '+n;
console.log(typeof s); //使用typeof來檢測s的型別，
可以在瀏覽器的Console下面查看一下，s的型別，是String型別，

6.數值型別轉換

使用Number(變數名):
在將其他型別轉換為數值型別時，例如：圖片6.1.0，
注意： null轉換數值型結果為‘0’；
undefined轉換數值型結果為‘NaN’；
使用parseInt()轉換，這里轉換和Number()轉換有點不同，尤其是null轉換為數值時，顯示NaN，而不是0，
例如：圖片6.2，
使用parseFloat()轉換
注意事項:圖片6.3，

在這里插入圖片描述

6.1

在這里插入圖片描述

6.2

在這里插入圖片描述

6.3

7.布爾型別轉換

格式：

? var name = Boolean('content');

使用Boolean()方法來轉換為布爾型，只有這一種方法，看圖7，

注意事項：

只要有內容就會輸出true，沒有內容輸出false，
例如：
var a = Boolean(""); //輸出false，因為沒有內容，
var b = Boolean(" "); //輸出true，因為有一個空格，

在這里插入圖片描述

? 在這里插入圖片描述

圖7

8.算數運算子

這個就很簡單，正常的，加(+),減(-),乘(*),除(/),取余(%)，

9.一元運算子

語法格式：

? ++ 或者 --

例如：
var n = 6;
n++;
console.log(n);

同時，注意++和 --，在前在后的結果和問題！

也就是n++和++n的區別，前者先執行后加1，后者是先加1后執行，

這里舉一個例子可以看一下：

在這里插入圖片描述

執行上面的結果發現是：13

在這里插入圖片描述

執行上面的結構發現是：12

這就是n++和++n的區別，前者先執行后加1，后者是先加1后執行，同理n–和--n也是一樣的

10.邏輯運算子

語法格式：

&& 邏輯與運算子;	//同為真(true)，則結果為真(true)，
|| 邏輯或運算子;	//只要有一個為真(true)，則結果為真(true)，
！ 邏輯非運算子;  //取相反，當前為真(true)，則結果為假(false)；當前為假(false)，則結果為真(true)，

其中true為0，false為1，

在JS中，邏輯運算的結果是決定整個運算式的子運算式的值，

這里運算優先級，先運行 && ，再運行 || ，

例如：a || c && b;

先運行c && b ,在和a || 進行運算，

11.比較運算子

> 大于號，< 小于號
= 大于等于，<= 小于等于
== 等于，=== 全等，!= 不等于，!== 不全等

解釋一下全等和等于：

全等比較的是值和型別，

等于只是比較值，

因為JS是一種弱型別語言，變數的資料型別存在自動轉換，因此，等于==，也只是比較的是值，

12.賦值運算子

= ， += ，-= ，/= ，*= ，%=

上面這些很簡單舉個例子：

var a = 1;

var b = 2;

b += a;

//這里b += a就是b = b + a；同理其他的也是一樣，

13.運算優先級

運算優先級從上往下：

1.()優先級最高

2.一元運算子 ++ ，-- ，！

3.算術運算子先 *，/ ，%，后 +， - ，和數學一樣先乘除取余后加減，

4.關系運算子 > ，< ，>= ，<=

5.相等運算子 == ，=== ，!= ，!==

6.邏輯運算子先&& 后 ||

7.賦值運算 =

再判斷一個復雜陳述句時，從上往下，依次來判斷和推匯出最后的結果，在中間推匯出的小結果可以使用false或者true來直接替換原式，

14.流程控制

順序結構：從上到下執行的代碼就是順序結構，
程式默認就是由上到下順序執行的，
分支結構：根據不同的情況及判斷，執行對應代碼，
回圈結構：重復執行一段代碼，

這里包括了一下幾種格式：

if語法：
if( true or false ){
}else if{
}else{
}

switch語法：
switch( 值 ){
case 值:
code;
break;
case 值2:
code1;
break;
default:
code2;
break;
}

回圈陳述句只要condition成立就執行里面的代碼，
while回圈陳述句：
while(condition){
code;
}
while是先判斷，再執行！

這里的do…while和while陳述句不同！！！
do…while陳述句是先執行一遍code，然后在條件判斷！
do…while陳述句：
do{
code;
}while(回圈條件);

for陳述句：
for(初始運算式; 判斷運算式; 自增或自減運算){
code;
}

舉例1：列印一個倒立三角形

		var s = '';
		for(var i=0;i<10;i++){
			for(var j=i;j<10;j++){
				s += "* "
			}
			s += "\n"
		}
		console.log(s);

舉例2：列印乘法口訣

		var s = '';
		for(var i=1;i<10;i++){
			for(var j=i;j<10;j++){
				s += i+' * '+j+'='+i*j+' ';
			}
			s+='\n';
		}
		console.log(s);

跳出回圈：
continue 和 break陳述句
1.break:while回圈break是用于永久終止回圈，即不執行本次回圈中break后面的陳述句,直接跳出回圈，
2.continue:while回圈continue是用于終止本次回圈，即本次回圈中continue后面的代碼不執行,進行下一次回圈的入口判斷，
在上面的陳述句中熟練的運用這兩個陳述句！

15.JS中的陣列

15.1 陣列格式

語法格式：

1.字面量方式創建的陣列
var array = []; //空陣列
var array2 = [1,‘A’,2,‘B’]
如果想列印array2陣列，直接使用下面陳述句就可以：
console.log(array2);

2.宣告建構式方式創造陣列
var array = new Array();//空陣列
var array2 = new Array(1,‘A’,‘2’,‘B’);
獲取陣列長度，array2.length就可以了，

3.陣列里面可以有陣列，這樣樣的陣列成為多維陣列(二維陣列、三維陣列 …)
例如：
var a1 = [1,2,‘A’,‘B’];
var a2 = [1,2,a1,‘A’,‘B’];
console.log(a2);

15.2 獲取陣列中的元素

陣列中的元素從0開始！！
多維陣列獲取的時候，只需要填好相應的元素標號就可以了，

15.3 遍歷陣列

遍歷陣列需要使用for回圈或者while回圈，并且熟練使用length來決定陣列長度，
下面是一個while回圈例子：

15.4 陣列求和

和遍歷一樣，使用for回圈，

16. 函式

16.1 函式的宣告以及呼叫

1.關鍵字宣告
function 函式名(){
code;
}

2.運算式宣告
var f_name = function(){
code;
}

函式宣告后，里面的代碼是不會執行的；
除非呼叫這個函式，否則，不管在什么情況下都不會執行函式種的代碼，

16.2 函式的形參和實參

形參格式：
function fun1(形參1,形參2,形參3, …){
code; //形參是在宣告函式時候
}

實參格式：
fun1(實參1,實參2,實參3, …) //呼叫的時候

實參將數值，傳遞給形參，
例如：

		function f1(a,b){
			console.log(a+b);
		}
		f1(1,2);
		f1(1,3);
		f1(1,4);

16.3 函式的回傳值

語法格式：
function f1(a,b){
code;
return c;
}

回傳值很重要，呼叫時回傳的結構，就是由return來回傳，
如果沒有回傳值或回傳值為空，則變數接受到的回傳值為undefined，
例如：

		function f(a,b){
				var c = a-b;
				return ;   // 沒有回傳值，則回傳undefined，	
		}
		var f = f(1,2);
		console.log(f);

注意：
函式種，return之后，不管有什么代碼，都不會被執行！！
也就是執行完return后，函式的呼叫結束，

16.4 匿名函式

匿名函式，函式本身是沒有名字的，
匿名函式格式一：
var fun = function(){
code;
}

匿名函式格式二：（自呼叫的匿名函式，立即執行函式）
( function(){
code; // 使用括號將函式做一個整體括起來，
} ) (); //這里的括號用來呼叫，

16.5 函式做為引數

函式也是一種資料型別，
之前說的六個資料型別當中，其中物件包含了陣列和函式，
可以使用typeof判斷一下：

function f1(){
}
console.log(typeof f1);

函式作為引數：
例如：
function f1(s){
s(); //注意這里是將f2作為值傳入的！
}
var f2 = funcation(){
console.log(222);
}
//f2函式會被當做值，傳入f1函式內
f1(f2);

函式作為回傳值：
例如：
function f1(){
var a = 10;
var f2 = function(){
alert(2);
}
return f2;
}
var f = f1();
f();

16.6 函式作用域

在這里插入圖片描述

全域作用域，不使用var宣告的變數是全域變數，不推薦使用，
變數推出作用域之后會銷毀，全域變數關閉網頁或瀏覽器才會銷毀，

對于全域作用域的三個例子：
例1：

例2：

例3：

可以看到上面的三種不同位置的全域變數得到的不同的結果，

JS 代碼的運行分為兩個階段，
1：決議（編譯）階段
語法檢查，變數及函式進行宣告，
2：運行階段
變數的賦值，代碼流程的執行，從上往下，

所以上面三個例子會出現不同的結果，

注意：
1.如果函式與變數同名，那么函式宣告會替換變數宣告，
例如：

**但是，因為宣告在賦值前面，所以在最后賦值時，輸出要非常小心！**例如：

function a(){
console.log(‘aaa’);
}
var a = 1;
console.log(a);

或者

var a = 1;
function a(){
console.log(‘aaa’);
}
console.log(a);

這里結果就變成了 1，因為宣告在前面，而賦值在最后！！！

16.7 函式的作用域鏈

舉個例子：

var a = 1;
function f1(){
	function f2(){
		function f3(){
			console.log(a);
		}
		f3();
	}
	f2();
}
f1();

通過上面不難看出是一條作用域鏈，
在這里插入圖片描述

17. JavaScript 物件

1.字面量宣告物件
var obj1 = {};

2.物件中的資料都是鍵值成對存在
通常來說，值是函式則成為方法，其他型別的值都是屬性，
var obj2 = {
age:12,
height:195,
name:‘張三’,
sex:function(){
}
};

3.實體化方式宣告物件（內置建構式）
var obj2 = new Object();

4.自定義建構式方式
function fun(){

}
var f = new fun(); //實體化自定義建構式方式

以下兩個獲取物件屬性或者方法的例子：
在這里插入圖片描述

18. this用法

18.1 指向物件中的this

直接舉個例子：

var obj1 = {
	age:18,
	name:'老鐵',
	fun:function(){
		// 在方法中的this就是這個方法所在的物件
		var s = this.age;
	}
	
}

實際上this指向的就是obj1這個物件，
也就是說上面的this.age就等于obj1.age，
只不過this替換了obj1這個物件，

18.2 指向全域物件的this

在一個普通的函式種也是有this的，并且這個this指向的是全域物件(window)，

function f(){
	console.log(this);//這里可以直接列印出來運行一下，
}

18.3 this的指向

直接上例子：

k = '678';
function fun(){
	console.log(this.k);
}
var o1 = {
		k:'123',
		f:fun,   //呼叫fun()函式
}
var o2 = {
		k:'345',
		f:fun,    //呼叫fun()函式
}
o1.f();
o2.f();

這里的this，就非常靈性，指向的自然是相對應的k值，this運行在那個物件下，就指向那個物件，

注意函式是否帶括號！！！

函式帶括號的相當于呼叫函式：
var o1 = {
age:18,
fun:function () {
console.log(this.age);
}
}
var o2 = {
age:16,
fun:o1.fun(),
}
o2.fun();
上面得到的結構就是18，因為這是呼叫完成后的結果，

沒有帶括號的函式：
var o1 = {
age:18,
fun:function () {
console.log(this.age);
}
}
var o2 = {
age:16,
fun:o1.fun, //只是把o1的鍵值對中的值，給傳遞過來了，
}
o2.fun();
這里沒有帶括號，結果就是16，因為fun函式沒有被呼叫執行，
這里的fun:o1.fun就等于
fun:function () {
console.log(this.age);
}
只是把鍵值對中的值轉遞過來了，并沒有呼叫，

19. 物件的遍歷和洗掉

遍歷語法格式：

for … in
for(鍵 in 物件)
for
例如：

var o1 = {
	name:'老鐵',
	age:18,
	sex:'female'
}
for(var a in o1){
		console.log(o1[k]);
}

for … in … 回圈不僅可以遍歷物件，還可以遍歷陣列，

洗掉屬性語法格式：

洗掉屬性：delete
例如：

var o1 = {
	name:'老鐵',
	age:18,
	sex:'female'
}
console.log(o1);  //先看一眼內容
delete o1.age;
console.log(o1);  //這時里面應該沒有了age屬性，

20. 包裝物件

這里介紹以下三種原始型別：
數值，字串，布爾
原始型別的資料在一定條件下可以自動轉為物件，這就是包裝物件，

例如：

	var v1 = new Number(123);
	console.log(v1);

上面的結果就是Number {123}，

原始值，可以自動當作物件來呼叫，因此可以呼叫各種屬性以及方法，
如果包裝物件使用完成，會自動立即銷毀，

例如：

var str = '123';
console.log(str.length);

21. 數學物件（標準庫物件，內置物件）

這里記錄幾個很常用的：

Math.abs() // 函式取絕對值

Math.random() //函式回傳一個浮點數，范圍在[0,1)之間，
公式：取2到8之間的數字
Math.random()*( 8 - 2 ) + 2
獲取 n - m 之間的亂數值
Math.random() * (m - n) + n
往后取特定的范圍都這樣取值！！！

Math.floor() //回傳小于或等于一個給定數字的最大整數，

22. 日期物件

實體化建構式獲取時間物件

這里顯示的是中國標準時間，
var date = new Date();
console.log(date);

這里顯示的是毫秒，
var date2 = Date.now();
console.log(date2);

獲取特a定的年月日小時等，
var date3 = new Date();
console.log(date3.getDetHours()); //獲取當前小時
console.log(date3.getDate()); //獲取當前日
console.log(date3.getFullYear); //獲取年份
console.log(date3.getMonth() + 1); //獲取月份
這里強調一下，JS中月份的陣列是從0開始的，所以要+1，
JS中獲取的時間是計算機本地時間，

23. 陣列Array物件

使用push()方法向陣列里面最后一個添加元素：

var arr = [1,2,3,4,5,6,7];
var s = 8;
arr.push(s);
console.log(arr);

使用pop()方法洗掉最后一個元素：

var arr = [1,2,3,4,5,6,7];
arr.pop();
console.log(arr);

使用slice()方法，由begin和end(不包括end),這里只是提取了一部分，原陣列不變：

var arr = [1,2,3,4,5,6,7];
console.log(arr.slice(2,4));
console.log(arr);

使用concat()方法，來合并陣列：

var arr = [1,2,3,4,5,6,7];
var arr2 = ['A','B','C'];
var arr3 = arr.concat(arr2);
console.log(arr);
console.log(arr3);

使用join()方法和分隔符來將所有陣列中的元素連接成字串：

var s = arr.join();
console.log(s);
這里顯示的字串，中間會參雜“ ，”，因此需要分隔符的幫助，
例如：
沒有分隔符號：
var s = arr.join('');
console.log(s);
分隔符為‘ - ’：
var s = arr.join('-');
console.log(s);

使用forEach()方法對陣列的每一元素執行一次提供的函式，

24. 字串物件

舉例學一些常用的：

indexOf()方法來查找相應的字符或字串第一次出現的位置：

var s = 'wasdfsdfsdf';
var arr = s.indexOf('d');
console.log(arr);

substr(start , Length)方法回傳一個字串中從指定位置開始到指定字符數的字符，

var s = 'wasdfsdfsdf';
var arr = s.substr(2,5);
console.log(arr);

上面就是從索引為2的位置開始的后5位，

toLowerCase()方法，將所有字符轉換為小寫，
toUpperCase()方法，將所有字符轉換為大寫，

var s = "Hello,World"
var arr = s.toLowerCase();
console.log(arr);

replace(‘被替換’ , ‘要替換’)方法，替換字符或字串，

trim()方法會從一個字串的兩端洗掉空白字符，

以下是一個查詢JS的一些相關內函式和陳述句的網站，可以看看：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

這個網站必備的！

25. JavaScript 補充

25.1 沒有用var宣告的變數

沒有用var宣告的變數會默認成為window下的屬性，我們可以使用window.變數名來呼叫它，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    carname = "Window_value";
    function myfun(){
        document.getElementById("id").innerHTML = window.carname;
    }

</script>
<body>
    <p id="id">我是一個段落</p>
    <button type="button" onclick="myfun()">按鈕</button>
</body>
</html>

此外，就算在函式中沒有是用var定義，他依然是window屬性屬于全域變數，

25.2 常用的HTML事件

下面是創建時間Date的三種方式，了解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <hr>
    方式一：<br>
    <button onclick="getElementById('demo').innerHTML = Date()">現在的時間是？</button>
    <p id="demo"></p>
    <hr>

    方式二：<br>
    <button onclick="this.innerHTML = Date()">現在的時間是？</button>
    <hr>

    方式三：<br>
    <button onclick="displayDate()">現在的時間是？</button>
    <p id="demo2"></p>
    <script>
        function displayDate(){
            document.getElementById("demo2").innerHTML = Date();
        }
    </script>

</body>
</html>

html事件有很多：

https://www.runoob.com/jsref/dom-obj-event.html

在這里插入圖片描述

25.3 == 和 === 有什么區別？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log("1"==true);//true
        console.log("1" === true) //false
        // == 會做一般比較，會強轉型別之后，在進行比較，
        // === 會直接比較兩者型別，不同就直接回傳false，
    </script>

</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/389192.html

標籤：其他

上一篇：JavaScript性能優化方案，你知道幾個？

下一篇：為什么我的行不會在資料工廠中被洗掉？

JavaScript 基礎筆記總結(全部)

文章目錄

1.宣告變數 var

2.變數命名的規則

3.資料型別以及注意事項

4.代碼注釋

5.其他型別轉換為字串

6.數值型別轉換

7.布爾型別轉換

8.算數運算子

9.一元運算子

10.邏輯運算子

11.比較運算子

12.賦值運算子

13.運算優先級

14.流程控制

15.JS中的陣列

15.1 陣列格式

15.2 獲取陣列中的元素

15.3 遍歷陣列

15.4 陣列求和

16. 函式

16.1 函式的宣告以及呼叫

16.2 函式的形參和實參

16.3 函式的回傳值

16.4 匿名函式

16.5 函式做為引數

16.6 函式作用域

16.7 函式的作用域鏈

17. JavaScript 物件

18. this用法

18.1 指向物件中的this

18.2 指向全域物件的this

18.3 this的指向

19. 物件的遍歷和洗掉

20. 包裝物件

21. 數學物件（標準庫物件，內置物件）

22. 日期物件

23. 陣列Array物件

24. 字串物件

25. JavaScript 補充

25.1 沒有用var宣告的變數

25.2 常用的HTML事件

25.3 == 和 === 有什么區別？