Javascript初學者筆記篇

JavaScript最初命名LiveScript，它是一種腳本語言，運行在客戶端。也可以基於Node.js技術進行服務端編程。

JS作用

• 表單驗證
• 網頁特效
• 服務端開發（Node.js）
• 桌面程序（Electron）
• App（Cordova）
• 控制硬件-物聯網（Ruff）
• 遊戲開發 （cocos2d-js）

JS的組成

• ECMAScript - Javascript語法
• DOM - 頁面文檔對象模型
• BOM - 瀏覽器對象模型

JS書寫位置

• 行內式

<input type="button" value="行內式" onClick="alert('Hello World!')" >

• 內嵌式

<script>
	alert('Hello World!');
</script>

• 外部

<script src="xxx.js">這裏不允許寫任何代碼</script>

註釋

• 單行註釋

// 這是單行註釋

• 多行註釋

/*
	這是多行註釋 
*/

輸入輸出語句

• alert(msg) - 瀏覽器彈出警示框

alert('警示框');

• console.log(msg) - 瀏覽器控制檯打印輸出信息

// 在瀏覽器開發者工具(F12)的Console中查看
console.log('測試使用')

• prompt(info) - 瀏覽器彈出輸入框，用戶可以輸入

prompt('輸入框');

變量

// 聲明變量
var age;
// 給變量賦值
age = 18;
// 變量的初始化
var myname = '落葉';
// 聲明多個變量
var employeename = 'Kevin',
	phonenumber = 186,
	address = 'xxxx';
// 聲明變量的特殊情況
// 1. 只聲明不賦值，結果是undefined未定義的
var sex;
// 2. 不聲明不賦值，會報錯
console.log(tel);
// 3. 不聲明直接使用，是可以的，但是不提倡使用。
email = '[email protected]';

變量命名規範

• 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號($)組成，如：usrAge, num01, _name
• 嚴格區分大小寫。var app；和var App；是兩個變量
• 不能以數字開頭。18age 是錯誤的
• 不能是關鍵字、保留字。如：var、for、while
• 變量名必須有意義，最好是英文單詞。
• 遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。如：myFirstName

變量類型

Javascript是一種弱類型或者說動態語言。變量的類型在程序運行過程中被自動確定。

var age = 18; 				   // 這是一個數字型
var myName = 'Pianpianluoye';  // 這是一個字符串
var a = b = c = 9; //等同於 var a = 9; b = 9; c = 9;
var e = 9 , f = 9 , g = 9; // 等同於 var e = 9; var f = 9; var g = 9;

// JavaScript 擁有動態類型，相同變量可以作用不同類型
var x = 6;				// x 爲數字
var x = 'Material';		// x 爲字符串

簡單數據類型

• Number - 數字型，包含整型值和浮點型值，默認值爲0

// 數字型最大值
console.log(Number.MAX_VALUE);
// 數字型最小值
console.log(Number.MIN_VALUE);
// 無窮大
alert(Infinity);
// 無窮小
alert(-Infinity);
// Nan - 代表一個非數值
alert(NaN);
// 判斷非數字,非數字爲true，數字爲false
console.log(isNaN(12)); // false

• Boolean - 布爾類型，默認值false

// Boolean類型參與運算預算時 true = 1 false = 0
console.log(true + 1);   // result: 2
console.log(false + 1);  // result: 1

• String - 字符串類型，默認值""

// 字符串類型必須要加引號，因爲HTML中使用的是雙引號，建議JS裏使用單引號
var strName = 'Pianpianluoye'; 
var strAddress = "Pianpianluoye"; 
// 如果引號嵌套，可以外雙內單或外單內雙的規則
var strProject = '這是一個"項目"描述';
var strType = "這是一個'類型'描述";

字符串轉義符

• \n - 換行
• \\ - 斜槓
• \’ - 單引號
• \" - 雙引號
• \t - 縮進
• \b - 空格

字符串拼接

// 字符串拼接 +
// 只要有字符串類型和其他類型的拼接，結果一定是字符串拼接，數字相加，字符相連口訣。
console.log('str1' + 'str2');
console.log('我' + 18 + '歲');
// 含有變量的字符串拼接
var age = 18;
console.log('我' + age + '歲');

• Undefined - 未定義類型，默認值undefined

// 如果一個變量聲明未賦值，就是undefined未定義數據類型
var str;
console.log(str);
var variable = undefined;
console.log(variable + '未定義類型'); // result:undefined未定義類型
console.log(variable + 1); // result:NaN

• Null - 空值，默認值爲null

// Null 代表空值
var space = null;
console.log(space + '空值'); // result:null空值
console.log(space + 1); // result:1

進制

• 八進制：數字前加0，表示八進制

// 八進制表示 0 ~ 7
var num = 010;

• 十六進制：數字前加0x，表示十六進制

// 十六進制表示 0 ~ 9  a ~ f
var = 0x9;

獲取數據類型

// 獲取變量的數據類型
var num = 10;
console.log(typeof num);
var date = null;
console.log(typeof date); // 結果輸出類型爲 object！！！

數據類型轉換

數字轉換成字符串

// 數字轉換成字符串 toString()
var num = 1;
alert(num.toString());

// 數字轉換成字符串 String()
var num = 1;
alert(String(num));

// 加號拼接字符串，也稱隱士轉換
var num = 1;
console.log(num + '');

字符串轉換成數字

var age = '18';
var price = '18.88'

// parseInt(string)函數，將string類型轉換爲整數數值型
console.log(parseInt(age));	  // 18
console.log(parseInt(3.14));  // 3，取整
console.log(parseInt(3.94));  // 3，取整不進位
console.log(parseInt(120px)); // 120，會去掉單位

// parseFloat(string)函數，將string類型轉爲成浮點數數值型
console.log(parseFloat(price)); // 18.88

// Number()強制轉換函數，將string類型轉換爲數值型
console.log(Number(age)); // 18
console.log(Number(price)); // 18.88

// js隱士轉換(-*/) 利用算術運算隱士轉換爲數值型
console.log('18' - 0); // 18
console.log('15' * 1); // 15
console.log('16' / 1); // 16

轉換成布爾值

// 代表空、否定的值會被轉換成false，如：''、0、NaN、null、undefined。其餘值都會轉換成true。
console.log(Boolean(''));     //false
console.log(Boolean('true')); //true

運算符

算術運算符

// + 加
// - 減
// * 乘
// / 除
// % 取餘
// 不要直接判斷兩個浮點數是否相等
// 因爲浮點數精度，運算時會出問題

表達式和返回值

// 任何表達式都會有一個返回值
var num = 1 + 1;

遞增和遞減運算符

var num = 1;
// 前置遞增,先自加1後返回值
// ++num; 等同於 num = num + 1;
console.log(++num + 15); // 17
// 後置遞增,先返回原值後自加
// num++; 等同於 num = num + 1;
console.log(num++ + 15); // 16
// 此時num的值已從1自加成2
console.log(num); // 2

var num1 = 5;
// 前置遞減,先自減1後返回值
// num1; 等同於 num1 = num1 - 1;
console.log(--num1 + 15); // 19
// 後置遞減，先返回原值後自減
// num1--; 等同於 num1 = num1 - 1;
console.log(num-- + 15); // 20
// 此時num1的值已從5自減成4
console.log(num1--); // 4

var num2 = 20;
var result = num2++ + ++num2; // 42

// num++ 和 ++num 單獨使用時沒有任何區別
// num-- 和 --num 單獨使用時沒有任何區別

比較運算符

// 比較運算符中的等於是 ==
console.log(25 == '25'); // true  == 會默認轉換數據類型
// 比較運算符中的不等於是 !=
console.log(25 != '25'); // false  != 會默認轉換數據類型
// 比較運算符中的全等是===
console.log(18 === 18);   // true
console.log(18 === '18'); // false  要求值和數據類型完全一致
// 比較運算符中的不全等於是!==
console.log(18 !== 18);   // false
console.log(18 !== '18'); // true

邏輯運算符

• && - 與

// 兩邊都爲true才爲true
console.log(3 > 5 && 6 > 4); // false
console.log(3 < 5 && 6 > 4); // true

• || - 或

// 兩邊都爲false才爲false，否則就是true
console.log(3 > 5 || 6 > 4); // true
console.log(3 > 5 && 6 < 4); // false

• ! - 非

console.log(!true);     // false
console.log(!(3 > 5));  // true

短路運算（邏輯中斷）

當有多個表達式（值）時，左邊的表達式值可以確定結果時，就不再繼續運算右邊的表達式的值。

// 爲值的時候，除了0 '' null undefined NaN全是真
// 如果第一個表達式的值爲真，則返回表達式2
// 如果第一個表達式的值爲假，則返回表達式1
console.log(123 && 456); // 456
console.log(0 && 456);   // 0
console.log(0 && 1 + 2 && 342 * 523); // 0

// 如果第一個表達式的值爲真，則返回表達式1
// 如果第一個表達式的值爲假，則返回表達式2
console.log(123 || 456); // 123
console.log(0 || 456);   // 456
console.log(0 || 1 + 2 || 342 * 523); // 3

var num = 0;
console.log(123 || num++);
console.log(num);  // 0 , 邏輯中斷，num++不運算。

賦值運算符

var num = 10;
num = num + 1; num++;
num = num + 2; num += 2;
num = num - 2; num -= 2;
num = num * 2; num *= 2;
num = num / 2; num /= 2;
num = num % 2; num %= 2;

運算符的優先級

優先級	運算符	順序
1	小括號	()
2	一元運算符	++ - - !
3	算術運算符	先* / 後 + -
4	關係運算符	> >= < <=
5	相等運算符	== != === !==
6	邏輯運算符	先 與 後 或
7	賦值運算符	=
8	逗號運算符	,

流程控制

流程控制 順序結構 分支結構 循環結構

IF語法結構

if (條件表達式) {
   
   
	// 執行語句1;
};

if (條件表達式) {
   
   
	// 執行語句1;
} else {
   
   
	// 執行語句2;
};

if (條件表達式1) {
   
   
	// 執行語句1;
} else if (條件表達式2) {
   
   
	// 執行語句2;
} else {
   
   
	// 執行語句3;
};

三元表達式

// 如果表達式條件爲真，則返回表達式1的值，如果表達式條件爲假，則返回表達式2的值
var num = 10;
var result = num > 5 ? 'Yes' : 'No';

SWITCH 語句

// 表達式條件值 和case後面的值是全等條件
switch (表達式) {
   
   
    case value1:
        執行語句1;
        break;
    case value2:
        執行語句2;
        break;
    ...
    default:
        執行最後的語句;
};

循環

for 循環

for (初始化變量; 條件表達式; 操作表達式) {
	// 循環體
};

for (var i = 1; i<=100; i++) {
   
   
	console.log('Hello World!');
};
//------------------------------------------
var sum = 0
for (var i = 1; i <= 100; i++) {
   
   
    sum += i;
};
console.log(sum)

while 循環

// 當條件表達式爲真時執行循環體
while (條件表達式) {
   
   
	// 循環體代碼
}

do while 循環

// 先執行一次循環體，在判斷條件
do {
   
   
	// 循環體代碼
} while (條件表達式)

Continue

用於立即跳出本循環，繼續下一循環。

Break

用於立即跳出整個循環。

數組

一組數據的集合。

創建數組

// new 關鍵字創建數組
var arr1 = new Array();

// 利用數組字面量創建數組
var arr2 = [];
var arr3 = [1,2,3,4,5,true,'P'];  // 元素用逗號分開，元素的類型可以是任意類型。

數組的索引

用來訪問數組元素的序號(數組下標從0開始)

// 訪問數組元素
var arr3 = [1,2,3,4,5,true,'P'];
console.log(arr3[3]);

// 遍歷數組
// arr3.length 數組的長度是元素的個數
for (i = 0; i < arr3.length; i++) {
   
   
	console.log(arr[i]);
}

新增數組元素

可以通過修改length長度

var arr = [1,2,3,4,5,true,'P'];
arr.length = 10;

可以通過修改索引號

var arr = [1,2,3,4,5,true,'P'];
arr[8] = 'R';
arr[13] = 'U';

冒泡排序

冒泡排序是一種簡單的排序算法，它重複的走過要排序的數列，一次比較兩個元素，如果他們的順序錯誤就把它們交換過來。走訪數列的工作是重複的進行直到沒有再需要交換，也就是說該數列已經排序完成。這個算法的名字由來是因爲越小的元素會經由交換慢慢"浮"到數列的頂端。

 var arr = [4, 3, 5, 1, 7];

 for (var i = 0; i <= arr.length - 1; i++) {
   
    // 外循環，用來確定比較幾輪 
 
 // arr.length - i 內循環都走完之後會確定一個最大值，
 // 所以下一輪的內循環不需要arr.length - 1的次數，
 // 只需要arr.length - 1再減去外循環的次數i即可，不需要做無用的比較。
 
     for (var j = 0; j <= arr.length - i - 1; j++) {
   
    // 內循環，用來做每輪的交換次數
         if (arr[j] > arr[j + 1]) {
   
   
             var tmp = arr[j];
             arr[j] = arr[j + 1];
             arr[j + 1] = tmp;
         }
     }
 }
 console.log(arr);

函數

1. 聲明函數

function 函數名() {
   
   
	// 函數體
}

1. 調用函數

function sayHello() {
   
   
	console.log('Hello World!');
	sayHello();
}

1. 函數的參數

// 1. 形參
function 函數名(形參1, 形參2, 形參3) {
   
   
	// 函數體
}
// 2. 實參
函數名(實參1, 實參2, 實參3);
// 形參無實參傳遞值時，爲undefined類型。

// 3. 函數的返回值
function 函數名() {
   
   
	// return 需要返回的結果;
}

function getAge (age) {
   
   
	return age;
}
console.log(getAge(18));
// return 後面的代碼不會執行，並且只能返回一個值(最後一個值)
// 返回多個值可以放到數組裏實現 return [1,2,3,4];
// 沒有寫return的話函數就返回undefined

arguments
函數的一個內置對象，所有函數都有，arguments對象存儲了傳遞的所有實參。
arguments是一個僞數組（具有數組的length屬性、按照索引的方式進行存儲、它沒有真正數組的一些方法）

function arg(){
   
   
	console.log(arguments);
}
arg(1,2,3);

函數表達式聲明函數，由於函數沒有名字也叫匿名函數。

var 變量名 = function (){
   
   
	console.log('函數表達式');
};
// 調用
變量名();

函數的形參可以看成是局部變量
如果函數內部沒有聲明直接賦值的變量也屬於全局變量
在JS中，es6中才增加的塊級作用域，es6之前是沒有塊級作用域的。
塊級作用域 {} , if {} 、 for {} 作用域鏈，內部函數可以訪問外部函數的變量。

預解析

JS引擎運行js分兩步：預解析、代碼運行
JS引擎會把js裏面所有的var還有function提升到當前作用域的最前面

變量預解析

又叫變量提升，就是把所有的變量聲明提升到當前作用域的最前面，不提升賦值操作。

函數預解析

又叫函數提升，就是把所有的函數聲明提升到當前作用域的最前面，不調用函數。

對象

創建對象

字面量創建

// var obj = {};
var obj = {
   
   
	uname: '',
	age: 20,
	sex: '男'
	sayHello: function () {
   
   
		console.log('Hello World!');
	}
};

// 調用對象方法
console.log(obj.uname); 
console.log(obj['sex']);
obj.sayHello();

new Object創建對象

var obj = new Object();
obj.uname = 'Pianpianluoye';
obj.age = 20;
obj.sex = '男';
obj.sayHello = function() {
   
   
	console.log('Hello World!');
}

利用構造函數創建對象

構造函數，是一種特殊的函數，主要用來初始化對象，即爲對象成員變量賦初始值，它總與new運算符一起使用。

// 構造函數名，首字母大寫。因爲new會返回這個新對象，所以構造函數裏不需要return。
function Employees(uname, age, sex) {
   
   
	this.name = uname;
	this.age = age;
	this.sex = sex;
	this.sayHello = function(say) {
   
   
		console.log(say);
	}
}
var pply = new Employees('Pianpianluoye', 25, '男');
console.log(pply.name);
console.log(pply['age']);
pply.sayHello('Hello World!');

遍歷對象

for (var k in obj) {
   
   
	console.log(k); // 輸出的是屬性名
	console.log(obj[k]); // 輸出的是屬性值
}

內置對象

對象分爲：自定義對象、內置對象、瀏覽器對象