基礎教程 2. 數據類型深刻 |8月更文挑戰

1、普通對象

js中的普通對象：無序的鍵值對集合。
由大括號包裹起來的{key: value}
由零到多組屬性名和屬性值（鍵值對）組成。屬性名能夠是數字、字母、或者下劃線等，而且屬性名都是字符串類型的。

屬性是用來描述當前對象特徵的，屬性名是當前對象具有的特徵，屬性值是這個特徵的描述，一組屬性名和屬性值成爲一組鍵值對javascript

聲明對象

var feTraining = {
    name: '江外琉璃',
    age: 9,
    characters: '琉璃鑲內江10年',
    9: 'age'
}
複製代碼

對象的操做：鍵值對的增刪改查

獲取對象的某個屬性的值
- 對象.屬性名
- 對象['屬性名']

console.log(feTraining.name);
console.log(feTraining['name']);
var str = 'age';
console.log(feTraining[str]); // 9

複製代碼

若是用. 後面的屬性名不用寫引號，若是使用[]，屬性名須要用字符串包裹vue
若是屬性名是數字，只能使用 []java
方括號裏面還能夠寫變量或者表達式node
若是獲取一個對象不存在的屬性，會獲得一個undefinedreact
增長/修改數組

js對象中的屬性名是不容許重複的，是惟一的瀏覽器

如給個一個對象的屬性賦值，有兩種狀況:
- 若是對象以前不存在這個屬性，那麼就是給這個對象增長一個屬性，值是等號右側的值
- 若是對象以前已經存在這個屬性了，再賦值就是修改對象中的這個屬性的值
複製代碼

feTraining.courses = 'JS高級+vue+react+node'; // feTraining以前不存在courses這個屬性，因此是增長；
console.log(feTraining);

feTraining.name = 'Everest Training'; // feTraining以前就存在name屬性，因此是修改
console.log(feTraining);
複製代碼

刪除

完全刪除：把對象的屬性名和屬性值都刪除。 delete obj['name']
軟刪除：將對象的某個屬性的值賦值爲null。 obj.name = null

delete feTraining.age;
console.log(feTraining);

feTraining.courses = null;
console.log(feTraining); // course屬性名還在，只是值爲null了
複製代碼

思考？

var obj = {
    name: '江外琉璃',
    age: 10
};
obj.name // '江外琉璃'
obj['name'] // '江外琉璃'
obj[name] ?? =+ name和 'name'有什麼區別？'name'表示的是一個字符串，而name表示一個變量名
複製代碼

對象中的屬性名都是字符串類型的markdown

2、數組對象

數組是【有序】的鍵值對集合；可是數組的鍵是瀏覽器設置的，不須要咱們手動設置，而且鍵都是從0開始的數字，咱們稱數字屬性名爲【索引】。數組的第一項的對應的索引是0，第二項對應的索引是1，以此類推，第n項對應的索引是 n - 1。

var ary = [12, 23]; // ? 12和23是都是屬性值，屬性名呢？ console.log(ary); // 從控制檯能夠發現是有鍵的，而且鍵都是數字測試

數組的操做

數組的鍵是數字，因此只能用方括號的方式獲取、修改，並且寫在方括號裏面的屬性名不須要用引號包裹；ui

var ary = [12, 23];
console.log(ary[0]);
console.log(ary.0); // 報錯
console.log(ary[1]);
console.log(ary[2]); // 訪問一個數組不存在的索引，會獲得一個undefined
複製代碼

3、基本數據類型和引用數據類型的區別

var a = 12;
var b = a;
b = 13;
console.log(a); // 12
console.log(b); // 13

var obj1 = {
  name: '江外',
  age: 10
};
var obj2 = obj1;
obj2.age = 100;
console.log(obj1.age); // 100
console.log(obj2.age); // 100
複製代碼

爲何會有這種狀況？

基本數據類型（也叫作值類型）的操做，直接操做就是這個值，意思就是說變量自己就表明這個值。因此： var b = a; 存儲12這個值，而後聲明一個變量b，而後讓變量b和這個新的12關聯起來。這一行和 var b = 12本質上沒有任何區別；

引用數據類型都是存放在堆內存空間中的，同時這個堆內存空間有一個十六進制的內存地址。咱們在聲明一個引用數據類型時，不是直接把對象賦值給變量，而是把對象的堆內存地址賦值給變量。因此引用數據類型的操做不是直接操做的值，而是操做它的引用數據類型的堆內存地址。因此var obj2 = obj1; 只是把obj1表明的堆內存地址地址賦值給了變量obj2。因此obj2.age = 100;是經過obj2的堆內存地址找到堆內存地址中的存儲的age的值，把它修改爲100。同時，咱們訪問obj1.name 時也是先經過obj1存儲的堆內存地址找到內存空間，而後從裏面把屬性age的值取到，此時這個內存空間中的值已經修改爲100了。因此obj.name 也是100

4、布爾類型、布爾運算

布爾類型值只有兩個值，true和false；布爾運算用來測試真假值，即運算結果是真的仍是假的，一般結合js的判斷語句（if/switch-case/三元表達式）使用。

其餘數據類型和布爾值進行轉換

Boolean方法

語法：Boolean(須要轉換的值) ；獲得轉換後的規則

var boo = Boolean(1);
var boo2 = Boolean(0);
console.log(boo, boo2); // true
複製代碼

!運算符（取反運算符）true取反就是false，而false取反就是true

運算符是有固定功能的關鍵字或者符號。它經過操做值也能夠獲得返回結果，與方法不一樣的是運算符不須要小括號。
語法：!須要取反的值；獲得取反後的布爾值。其內部機制是先把其餘數據類型轉換成布爾值，而後再取反。

轉換規律：在js中只有 0/NaN/空字符串''/null/undefined 這5個值轉換成布爾值是false，其他的都是true。

var str = '江外琉璃，10年琉璃鑲內江';
var result = !str;
// 內部運做機制：
// 第一步先將str轉換成布爾值，str不屬於那5個值，因此 Boolean(str) =+ true
// 而後再取反，true 取反 =+ false
console.log(result); // false

複製代碼

!! 運算符等效於 Boolean方法

語法：!!須要轉換的值；

var num1 = !!1;
var num2 = !!0;
console.log(num1, num2); // true false

console.log(!!{}); // true
console.log(!![]); // true
console.log(!!{name: 'zhufeng'}); // true

複製代碼

5、null和undefined

null空對象指針；不佔內存，通俗理解就是人爲的手動先賦值爲null，後面程序中咱們會再給它賦值爲其餘值；
undefined 未定義。多數狀況是某些瀏覽器內置機制設置的默認值，聲明一個變量不賦值，這個變量的默認值就是undefined

6、js中的判斷語句

判斷語句是流程控制的重要語句，其做用是當知足某些條件時才能執行某些代碼

一、if/else if/else

// 單獨使用if
if (條件) {
  // 瀏覽器會對條件進行布爾運算，即求出條件時true仍是false。條件爲true時，即條件成立的時候纔會執行這個花括號裏面的代碼
}

// 兩種狀況，結合else
if (條件) {
  // 條件爲true時
} else {
  // 不知足條件的時候要執行的代碼
}

// 多種狀況，結合else if
if (條件) {
  // 條件1爲true時
} else if (條件2) {
  // 條件2爲true的時候要執行的代碼
} else {
    // 上面條件都不知足條件的時候要執行的代碼
}

複製代碼

示例：

var num = 6;
if (num + 6) {
  num++; // =+ num = num + 1; 在自身上累加一個
} else if (num +=10) {
  num--;
} else {
  num+=2
}
console.log(num);
複製代碼

只要有一個條件成立，後面不論是否還有成立的條件，都不會在執行了

var num = 10;
if (num + 5) {
  num += 2;
} else if (num + 8) {
  // 雖然num知足大於8，可是再上面已經執行過num+5的代碼，因此這裏不會執行
  num += 3;
} else {
  num += 4;
}
console.log(num); // 12
複製代碼

二、條件怎麼寫？

if (條件) 條件最終須要的是一個布爾值，而後根據是true仍是false來判斷條件是否成立。若是條件裏面寫的是能夠返回布爾值的表達式，那麼就利用這個表達式的返回結果；若是不是返回布爾值，那麼瀏覽器會自動把它轉換成布爾值，而後用轉換出來的結果判斷條件是否成成立

常見比較運算符：比較運算符都會返回布爾值

大於(+)， a + b，當a大於b時返回true，不然返回false
大於等於(+=)， a += b ，當a大於等於b時返回true，不然返回false
小於(<)，a < b
小於等於(<=)
不等於(!=)、
等於(相對比較== 或者絕對比較===)
- == 是相對比較，只要兩邊的值相同就行，不比較類型，如 1 == '1' 返回true
- === 是絕對比較，兩邊值相同還不夠，還要比較類型。1 === '1' 返回false，由於1是number，而'1'是string，類型不一樣

console.log(1 + 0); // true
console.log(1 < 0); // false
console.log(1 == '1'); // true
console.log(1 === '1'); // false
複製代碼

條件常見形式：

使用比較運算符，直接返回布爾值
若是是數學表達式，那麼會先運算求值，而後再把運算出來的結果轉換成布爾值。
在js中，+ - * / % 都是數學運算，除+之外，其他的運算符在運算時，若是遇到非數字類型的值，首先會轉成數字類型（Number），而後再進行運算

if ('3px' + 3) {
  // + 操做符在兩邊都是數字時纔是加法運算符，若是有一個不是數字，那麼加好就是字符串拼接。
  // 因此 '3px' + 3的結果是字符串'3px3'，而字符串 '3px3'轉換成布爾值之後是true，因此條件成立
}

if ('3px' - 3) {
  // - 會調用Number()方法把'3px'轉成數字，Number('3px') -+ NaN，而NaN - 3 -+ NaN，而NaN轉成布爾值是false，因此條件不成立
}
複製代碼

其餘狀況，均會把條件轉成布爾值。

練習

var num = parseInt('width: 35.5px');
if (num == 35.5) {
  alert(0);
} else if (num == 35) {
  alert(1);
} else if (num == NaN) {
  alert(2);
} else if (typeof num == 'number') {
  alert(3);
} else {
  alert(4);
}
複製代碼

二、三元運算符

語法：條件 ? 成立要作的事情 : 不成立要作的事情
至關於簡單的 if else判斷
而且三元運算符是有返回值的，當條件成立時三元運算符返回條件成立時的值，不成立時返回不成立的值。
通常狀況

var num = 12;
if (num < 10) {
  num++;
} else {
  num--;
}

// 改寫成三元運算符

num + 10 ? num++ : num--;
複製代碼

特殊狀況：
- 若是三元運算符中條件成立或者不成立時不須要任何操做，咱們用null/undefined/ void 0佔位

// num + 10就++，不然啥也不作

num + 10 ? num++ : null;
num + 10 ? num++ : undefined;
num + 10 ? num++ : void 0;
複製代碼

- 若是在條件成立（或不成立）時有多條語句，須要用小括號括起來，每條語句；
複製代碼

var num = 10;
num += 10 ? (num++, num*=2) : null;
複製代碼

三、switch case

語法：

switch (變量或者表達式) {
  case 值1:
    變量或者表達式的值是值1的時候執行的代碼;
    break;
  case 值2:
     變量或者表達式的值是值2的時候執行的代碼;
     break;
  ...
  case 值n:
    變量或者表達式的值是值1的時候執行的代碼;
    break;
  default:
    以上狀況都不知足時，至關於else
}
複製代碼

switch case應用於變量（表達式）在不一樣值的狀況下的不一樣操做，每一種case結束後都須要加break（break是結束整個判斷）;

var num = 12;
if (num == 10) {
  num++;
} else if (num == 5) {
  num--;
} else {
  num = 0;
}

// 改寫成switch case
switch (num) {
  case 10:
    num++;
    break;
  case 5:
    num--;
    break;
  default:
    num = 0;
}
複製代碼

注意：switch case 中每個case的比較都是基於 === 絕對相等來完成判斷的。即 10 === '10' 是false。真實項目中經常使用絕對比較。