js基本語法

在學習 js 基本語法的過程中，把遇見的知識點和問題記錄下來，以便未來複習和參考。

數據類型有：數據，字符串，數組，數字，布爾值等。

一、數據類型#

1.number#

2. 布爾值#

只有 true 和 false 兩種，可以直接用 true 和 false 來表達，比如：

true;	//true
false;	//false
2>1;	//true
2>3;	//fasle

與 &&
兩者同時為true，運算結果為true

或 ||
只要有一個為true，運算結果就是true

非！
當程序為true時，運算結果取反為false

var age = 15;
if(age >= 18) {
    alert('成人')
}else{
    alert('青少年')
}

age 值是 15，當 age 大於且等於 18 的時候瀏覽器彈出成人，反之彈出青少年

3. 字符串#

4. 比較運算符#

==和===

當使用==進行比較的時候，一般會自動轉換類型然後再進行比較

當使用===進行比較的時候，如果數據類型不一樣，直接返回false，等到類型一致了，然後再進行比較

有一個特殊的number就是NaN，它不與任何值相等，包括它自己NaN

NaN === NaN	//false

5.`null`和`undefined`#

null表示一個空值，0表示一個數值，''表示長度為 0 的字符串，但是null表示空

undefined表示未定義

但是區分兩者意義不大，大多數還是在用null，undefined僅僅在判斷函數參數是否傳遞的情況下有用

6. 數組 Array#

[ ] ，表示一組按順序排列的集合，其中的每個值稱為元素

new Array(1,2,3)	//[1,2,3]

數組的索引

二、對象和變量#

var person = {
	name: 'jack',
	age: 20,
	city: 'hangzhou'
}

person是對象變量，name: 'jack'這就是一個鍵值對，name是屬性名，'jack'是屬性

要獲取一個對象的屬性，用對象變量.屬性，也就是person.name，結果是jack

person.name	//jack
person.age	//20

var是一個動態語言，就算 var 定義了 x = 100，後面又有 x = x + 100, 所以就變成了 200,

var x = 100;
x = x + 100;
console.log(x)	//200

假如用 int 來定義 x，後面的 x = x + 100 就會報錯

並且使用 var 定義的變量只會存在與該函數作用域，并不是默認的全局變量

而如果沒有使用var，直接定義i = 100，變量 i 會被默認為全局變量

三、字符串#

需要用到轉義字符\

1. 模板字符串#

var name = '小明';
var age = 20;
var message = name + '今年' + age + '了';
//小明今年20了
var message = `${naem}，你今年${20}了`
//ES6新增的語法，一樣的結果

字符串不可改變

如果對字符串的某個索引賦值，不會報錯，不會發生任何改變

var a = 'hello,world!'
a[0];	//h
a[0] = k;
console.log(a);	//結果為'hello,world!'，不會發生改變

2.toUpperCase 大寫#

它會返回一個新的字符串，把一個字符串全部變成大寫

var a = 'hello';
a.toUpperCase();	//返回HELLO

3.toLowerCase 小寫#

它會返回一個新的字符串，它會把一個字符串全部變成小寫

var a = 'hello'
a.toLowerCase();	//HELLO

4.indexOf#

它會返回指定字符串的索引，如果沒有找到指定的字符串，則會返回-1

var a = 'hello,world!'
a.indexOf('world');	//6

5.substring#

它會返回指定區間索引的字符串，包括前一個數，不包括後一個數

var a = 'hello,world!'
a.substrng(0, 5);	//hello

如果()裡面只有一個數值，則從這個數值的索引開始直到結束，比如：

var a = 'hello,world!';
a.substring(6);	//返回world!

四、數組#

數組Array可以包含任何類型的數據，並通過索引來訪問每個數據

1.length 屬性#

Array的長度可以用length屬性來獲取，它和索引不一樣，從 1 開始計算

var arr = [1,2,3,'hello',null,true]
arr.length;	//返回6

並且通過改變length的值，可以改變數組的內容大小變化

var arr = [1,2,3,'hello',null,true]
arr.length;	//6
arr.length = 8;	//[1,2,3,'hello',null,true,undefined,undefined]
arr.length = 2;	//[1,2]

2. 通過索引改變數組#

Array可以直接通過索引修改對應的元素

var arr = [1,2,3]
arr[1] = 'hello'
console.log(arr); 	//[1,'hello',3]

js 允許直接通過索引改變數組的長度，不會報錯，但是不建議這麼做

3.indexOf#

Array可以通過indexOf來搜索一個指定的元素的索引

var arr = [1,2,3,'hello']
arr.indexOf(1);	//0
arr.indexOf(3); //2

4.slice#

slice屬性與substring類似，後者是截取字符串的內容，slice是截取數組的內容，然後返回一個新的數組

如果有兩個數值，包括前面的數值，不包括後面的數值；如果只有一個數值，則從它開始算起一直到結束

var arr = [1,2,3,4,5];
arr.slice[0,2];	//返回[1,2]
arr.slice[2];	//返回[3,4,5]

如果slice不指定數值，則返回數組的全部內容，可以利用這個特性複製一個相同的數組出來

var arr = [1,2,3];
var arr1 = arr.slice();
console.log(arr1);	//[1,2,3]
arr1 === arr;	//true

注意：兩個數組相比都是 false，就算數組內容一樣也會 false
var arr = [1,2,3]
var arr1 = [1,2,3]
arr === arr1	//false

5.push 和 pop#

push()向數組的末尾添加元素

pop()把數組的最後一個元素刪掉

6.unshifth 和 shift#

unshift()向數組的頭部添加元素

shift()把數組的第一個元素刪掉

7.sort#

sort()可以對數組進行排序，會直接修改當前數組的元素位置，直接調用時，會按照默認的方式排序

var arr = [B,A,C]
arr.sort();
arr	//[A,B,C]

8.reverse#

reverse()會把整個數組調個個，不是反向排序

var arr = [2,1,3]
arr.reverse();
arr;	//[3,1,2]

9.splice#

這個屬性是萬能的方法，通過調用splice()，可以從指定的索引刪除元素或者添加元素

五、條件判斷#

在 js 中，使用 if() {...} else {...}進行條件判斷

var age = 22;
if(age>20) {
	// 如果age>20成立，執行該語句
	console.log('22>20')
}else {
	// 如果age>20不成立，則執行該語句
	conosle.log('22<20')
}

最終，控制台會打印出22>20，因為條件成立

執行的語句要用{}包裹起來，防止其他情況會報錯

多條件判斷語句

三個或者三個以上多判斷語句，被稱為多條件判斷語句

var a = 10
if(a<10) {
	console.log('a<10')
}else if(a>20){
	console.log('a>10')
}else{
	console.log('10<=a<=20')
}

如果多個條件中都滿足，則取第一個滿足的結果，執行其代碼，之後滿足的自動忽略掉，所以在進行條件判斷的時候，不要重複判斷情況

一個複雜的多條件判斷語句

var height = parseFloat(prompt('請輸入身高(m):'));
var weight = parseFloat(prompt('請輸入體重(kg):'));
var bmi = weight/(height*height);
if(bmi < 18.5) {
	console.log('過輕')
}else if(bmi>18.5,bmi<25) {
	console.log('正常')
}else if(bmi>25,bmi<28){
	console.log('過重')
}else  if(bmi>28,bmi<32){
	console.log('肥胖')
}else{
	console.log('嚴重肥胖')
}

parseFloat可以解析一個字符串，並返回一個數字

六、循環#

簡單的運算可以手打出來

1 + 2 + 3
// 控制台輸出 6

但是幾百次，幾千次，幾萬次的運算無法手打，可以依靠循環語句來進行計算，為了讓計算機能夠進行成千上萬次的運算

循環語句有兩種 for 和 while，他們有不同的用法，適應不同的情況

1. for 循環#

通過初始條件，結束條件和遞增條件來循環執行語句塊

var x = 0
var i
for(i = 1; i <= 1000; i++) {
	x = x + i
}

i = 1 是初始條件，i 從 1 開始算起
i<= 是判斷條件，滿足就執行循環，不滿足就退出循環
i++ 是遞增條件，每次循環過後都是＋1，當無數次後不滿足了 i<=1000，會跳出循環

2. 通過 for 語句遍歷數組#

var arr = ['apple', 'banana', 'oringen']
var x,i
for(i = 0; i <= arr.length; i++) {
	x = arr[i]
	console.log(x)
}

3. 用 break 終止 for 循環#

var x = 0;
for (  ;  ;  ) { // 將無限循環下去
    if (x > 100) {
	console.log(x)
	break; // 通過if判斷來退出循環
    }
    x ++;
}

4. for...in#

可以把一個對象的屬性循環遍歷出來

var person = {
	name: 'jack',
	age: 20,
	city: 'beijing'
};
for(var i in person) {
	console.log(i)
	console.log(person[i])
}

var i in person會把 person 裡面所有的屬性遍歷，然後通過console.log(i)可以把屬性名打印出來，console.log(person[i])可以把屬性值打印出來

如果對一個數組進行這樣的操作，就可以把數組元素的索引打印出來，打印結果是字符串形式

5. while 循環#

while循環適用於忽視判斷條件的情況，for適用於明確了初始條件和結束條件的情況

比如要計算 1-100 之間的寄數和，可以用while循環

var x = 0
var n = 99
while (n > 0) {
	x = x + n
	n = n - 2
}
x

在變量內部，n 不斷自減，直接 n=-1，不滿足判斷條件，此時退出循環

6. do...while#

do...while循環是先循環，然後再判斷條件，所以不論條件是否滿足，do...while至少循環一次，這是它與for和while的區別

比如：

var n = 0
do{
	n = n + 1
}while(n > 1)
n;	//1

先定義n=0，然後執行n=n+1，所以n=1，再判斷條件，當 n>1 的時候執行，不符合，退出循環，控制台輸出n，結果為 1

七、Map 和 Set#

1. Map#

Map是一組鍵值對的結構，具有極快的查找速度

只要我們定義一個屬性名和屬性值對應的數組，就可以從這個數組裡面通過 name 直接查找數據

var m = new Map([['jack', 95], ['Bob', 94], ['linda', 93]])
m.get('jack')

首先，要初始化一個Map數組

var m = new Map();	//空map
m.set('jack', 95)	//添加一個新的鍵值對		key-value
m.has('jack')		//檢查是否存在 '			jack'key
m.get('jack')		//獲取'jack'對應的數據		value
m.delete('jack')	//刪除'jack'鍵值對			key-value
m.get('jack')		//undefined

一個 key 只能對應一個 value，所以如果重複賦值的話，後面的數據會把前面的數據覆蓋掉

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

2. Set#

set中值儲存key，不儲存value，而且在set中，key不能重複，如果重複了，會自動忽略掉重複

首先，創建一個空的set

var m = new Set()	//空set
m.add(1)			//添加一個key
m.delete(1)			//刪除一個key
m	//控制台輸入［ ］空數組，沒有數據