JS基本數據類型及變量聲明

• 在js中有三種聲明變量的方式：var let const,let var const的區別？

  var

  由于變量聲明（以及其他聲明）總是在任意代碼執行之前處理的，所以在代碼中的任意位置聲明變量總是等效于在代碼開頭聲明。

  a = 2
  var a;
  // ...
  // 可以理解為： 
  var a；//聲明一個變量，且這個變量為undefined.
  a=2；//給聲明的變量a賦值，由于這個原因，我們建議總是在作用域的最開        始（函數或者全局代碼的開頭）聲明變 量。這樣可以使變量的作用域變得清  晰。
  

  let

  let作用域：只在let命令所在的代碼塊內有效。

  //let聲明 的變量只在它所在的代碼塊有效。
  {let a=3;} 
  console.log(a);//VM11918:1 Uncaught ReferenceError: a is not defined
  
  //計數器i只在for循環體內有效，在循環體外引用就會報錯
  for (let i = 0; i < 3; i++) {}
  console.log(i);//VM13498:1 Uncaught ReferenceError: i is not defined
  
  //for循環還有一個特別之處，就是循環語句部分是一個父作用域，而循環體  內部 是一個單獨的子作用域。
  for (let i = 0; i < 3; i++) {
    let i = 'abc';
    console.log(i);
  }
  
  

  const

  1、const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

  const PI = 3.1415;//不報錯
  PI=3;//VM33690:1 Uncaught TypeError: Assignment to constant variable.
  

  2、const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

  const foo;//VM35236:1 Uncaught SyntaxError: Missing initializer in const   declaration
  

• 基本類型
  js有6種數據類型,包括五種基本數據類(Number,String,Boolean,Undefined,Null),和一種復雜數據類型(Object)。

  1.Number類型
    Number類型包含整數和浮點數（浮點數數值必須包含一個小數點，且小數點后面至少有一位數字）兩種值。
  
    NaN:非數字類型。特點：① 涉及到的 任何關于NaN的操作，都會返回NaN   ② NaN不等于自身。
  
    isNaN() 函數用于檢查其參數是否是非數字值。
  
    isNaN(123)  //false   
    isNaN("hello")  //true
  
  2.String類型
    字符串有length屬性。
  
    字符串轉換：轉型函數String(),適用于任何數據類型（null,undefined 轉換后為null和undefined）；toString()方法（null,defined沒有toString()方法）。
  
  3.Boolean類型
    該類型只有兩個值，true和false
  
  4.Undefined類型
    只有一個值，即undefined值。使用var聲明了變量，但未給變量初始化值，那么這個變量的值就是undefined。
  
  5.Null類型
    null類型被看做空對象指針，前文說到null類型也是空的對象引用。
  
  6.Object類型
    js中對象是一組屬性與方法的集合。這里就要說到引用類型了，引用類型是一種數據結構，用于將數據和功能組織在一起。引用類型有時候也被稱為對象定義，因為它們描述的是一類對象所具有的屬性和方法。
  

類型轉換
轉Boolean

!!''         //=> false
!!null       //=> false
!!undefined  //=> false
!!NaN        //=> false
!!0          //=> false
!!1          //=> true
!!-1         //=> true
!![]         //=> true
!!{}         //=> true
!!window     //=> true
!!Infinity   //=> true

轉String

''+hello//=>'hello'
''+true//=>'true'

轉Number

+new Date     //=> 1456480246437
+'123'        //=> 123

向下取整

~~3.4          //=> 3
3.4|0          //=> 3
-3.4^0         //=> -3
-3.4 >> 0      //=> -3

類數組轉數組

var arrLike = {0:'abc',1:'xyz',length:2};
Array.prototype.slice.call(arrLike)        //=> ['abc','xyz']
//常用 Array.prototype.slice.call(arguments)

類型檢測
typeof操作符，由于js中的變量是松散類型的，所以它提供了一種檢測當前變量的數據類型的方法，也就是typeof關鍵字.

typeof 123　　 //Number

typeof 'abc'　　//String

typeof true       //Boolean

typeof undefined   //Undefined

typeof null        //Object

typeof { }           //Object

typeof [ ]           //Object

typeof  console.log()       //Function

null類型進行typeof操作符后，結果是object，原因在于，null類型被當做一個  空對象引用。

比較運算符
比較運算符在邏輯語句中使用，以測定變量或值是否相等。
1.給定 x=5，下面的表格解釋了比較運算符：

2.如何使用
可以在條件語句中使用比較運算符對值進行比較，然后根據結果來采取行動：

var age=16;
if(age<18){
    alert('還很年輕')
}else{
    alert("你懂的")
}

字符串操作

• 字符串拼接

   //如果將加號(+)運算符用于數字，表示兩數相加。
   //但將它作用于字符串，則表示字符串連接，將第二個字符串拼接在第一個字符串之后，如下
   msg="hello,"+"world";
   console.log(msg);//生成字符串"hello,world";
  

• 字符串裁剪
  JavaScript字符串方法有很多，其中有三個方法與字符串裁剪有關，他們分別是slice()、substring()和substr()，我把他們統稱為“三劍客”。

  一、共同點

  ① 接受一個或兩個參數，其中第一個參數為裁剪的開始位置
  ② 都會返回被裁剪下來的子字符串，而原字符串不受影響
  ③ 若不傳第二個參數，則從開始位置（第一個參數）一直截取到字符串結尾。

  var str = '高德地圖持續為你導航';
  var str1 = str.slice(2);  
  console.log(str1);    // "地圖持續為你導航"
  str1 = str.substring(2);
  console.log(str1);   // "地圖持續為你導航"
  str1 = str.substr(2);
  console.log(str1);   // "地圖持續為你導航"
  console.log(str);   // "高德地圖持續為你導航"
  

  可以看出，當只傳入一個參數時，這三個方法的用法和作用都是一致的，都是將“地”字（索引值為2）一直到字符串末尾的字符串裁剪下來并返回，并且都不會影響到原字符串

  二、區別

  ① slice()和substring()的第二個參數均表示的是裁剪的結束位置（但不包括 該項，這與數組中的slice()方法類似），而substr()的第二個參數則表示的是裁剪下來字符串長度
  ② 當傳入的參數為負值時，slice()會將所有負參數與字符串的長度相加，substring()會把所有負參數都轉換為0，而substr()就相對比較復雜了，它會將第一個負參數加上字符串長度，第二個參數轉換為0

  1.參數為正數

  var str = '高德地圖持續為你導航';
  var str1 = str.slice(2,4);
  console.log(str1);    // "地圖
  str1 = str.substring(2,4);
  console.log(str1);    // "地圖"
  str1 = str.substr(2,4);
  console.log(str1);    // "地圖持續"
  

  很明顯，slice()和substring()用法一致，兩個參數分別都表示的是起始位置2和結束位置4，不包含結束位置4所在字符（“持”），而substr()第二個參數表示的是要裁剪下來的字符串長度，實例中是裁剪4個字符。

  2.參數為負數

  var str = '高德地圖持續為你導航';
  console.log(str.length);   // 10
  var str1 = str.slice(-4);   //  相當于str.slice(6)
  console.log(str1);   //  "為你導航"
  str1 = str.substring(-4);   //  相當于str.substring(0)
  console.log(str1);   //  "高德地圖持續為你導航"
  str1 = str.substr(-4);   //  相當于str.substr(6)
  console.log(str1);   //  "為你導航"
  
  var str2 = str.slice(2,-4);   //  相當于str.slice(2,6)
  console.log(str2);   //  "地圖持續"
  str2 = str.substring(2,-4);   //  相當于str.substring(2,0)，也就是            str.substring(0,2)
  console.log(str2);   //  "高德"
  str2 = str.substr(2,-4);   //  相當于str.substr(2,0)
  console.log(str2);   //  ""
  
  var str3 = str.slice(-2,-4);   //  相當于str.slice(8,6)
  console.log(str3);    // ""
  str3 = str.substring(-2,-4);   //  相當于str.substring(0,0)
  console.log(str3);   // ""
  str3 = str.substr(-2,-4);   //  相當于str.substr(8,0)
  console.log(str3);   // ""
  
  var str4 = str.slice(-4,-2);   //  相當于str.slice(6,8)
  console.log(str4);   // "為你"
  str4 = str.substring(-4,-2);  //  相當于str.substring(0,0)
  console.log(str4);  // ""
  str4 = str.substr(-4,-2);  //  相當于str.substr(6,0)
  console.log(str4);  // ""
  

  當參數為負數時，只需牢記，slice()見負加總長，substring()見負則歸零，substr()一加總長一歸零。 另外還需要特別注意的一點是，slice()第一個參數須小于第二個參數才能正常截取字符串，否則返回的是空字符串，而substring()則沒有這個問題。

• 字符串分割
  說完字符串的裁剪，這次來說說字符串的分割。
  你可能會有所疑惑，裁剪和分割，這兩者到底有什么區別呢？

  裁剪： 一次裁剪一部分子字符串并返回，可使用slice()、substring()和substr()方法實現
  分割： 一次可將字符串分割成多個子字符串并返回由這些子字符串組成的數組，可使用split()實現

  首先，我們先定義一個字符串：

  var str='Hello World!'
  

  1、只傳一個參數，傳入字符串或正則

  console.log(str.split('l'));    // [ "He","","o Wor","d!" ]
  console.log(str.split(''));    // [ "H","e","l","l","o","","W","o","r","l","d","!" ]
   console.log(str.split(/l+/));   // [ "He","o Wor","d!" ]
  

  2、傳入兩個參數
  第一個參數還是一樣，字符串或正則，而第二個參數則是一個數字，用于指定返回數組的大小。例如：

  console.log(str.split('',5));   // [ "H","e","l","l","o" ]
  

  這實際就是在str.split('')的基礎上又截取了輸出數組的前5項，與下面兩種方式的運行結果是一樣的：

  console.log(str.slice(0,5).split(''));   // [ "H","e","l","l","o" ]
  console.log(str.split('').slice(0,5));   // [ "H","e","l","l","o" ]
  

  這兩種方式，一個是先裁后分，另一個則是先分后裁，最終結果都是一樣的。而給split()方法傳入第二個參數則相當于是個簡化版，效果其實是一樣的。
  3、逆操作方法
  說完了split()的用法，再順便提一提該方法的逆操作方法——join()。

  split(): 將字符串分割成數組
  join(): 將數組合并成字符串

  • 不傳參數

    console.log(str.split('',5).join());   // "H,e,l,l,o"
    

    默認使用逗號來連接數組的每一項而組成字符串并返回。

  • 傳入空字符串

    console.log(str.split('',5).join(''));   // "Hello"
    

    直接將數組中的每一項連接起來組成字符串并返回。

  • 傳入非空字符串

    console.log(str.split('',5).join('|'));   // "H|e|l|l|o"
    

    使用所傳字符串參數來連接數組的每一項而組成字符串并返回。

字符串替換

var str="Hello World";
str=str.replace('World','Curry');
console.log(str);//"Hello Curry"
str=str.replace(/hello/i,'Hi');
console.log(str);//"Hi Curry"

字符串查詢
1、test

RegExpObject.test(string)

test()方法是正則對象的一個方法，用于是否匹配某個模式，返回true或false

 var str='javascript';
 var reg=/java/;//正則表達式
 reg.test(str);//true

2、exec

RegExpObject.exec(string)
在循環中反復地調用 exec() 方法是唯一一種獲得全局模式的完整模式匹配信息的方法。

 var str='javascript java';
 var reg=/java/;//正則表達式
 reg.exec(str);//返回["java", index: 0, input: "javascript java", groups: undefined]
 var str1='高德地圖持續為你導航';
 var reg1=/百度/;
 reg1.exec(str1);//返回null

3、search

stringObject.search(regexp)

用于檢索字符串中指定的子字符串，或檢索 與正則表達式相匹配的子字符串。返回第一個與regexp相匹配的子串的起始位置,如果要執行忽略大小寫的檢索，追加標志i

 var a="Jianshu markdown bu zhi chi table Markdown";
 a.search('jianshu');      //-1
 a.search('Jianshu');      //0
 a.search('markdown');      //8
 a.search(/\bmarkdown\b/) ; //8
 a.search(/JIanShu/i)    //0 使用search做忽略大小寫的匹配呢，就是在后面加i

4、match

stringObject.match(regexp)

 var b='Markdown markdown markdown'; 
 b.match(/markdown/ig) //["Markdown", "markdown", "markdown"]
 b.match(/markdown/i)  //["Markdown"]
 b.match('markdown') //["markdown"] 這里發生了一次隱式轉換
 b.match('markdown/i') //null 因為是直接吧markdown/i整個字符串進行RegExp構建的

 var c=b.match(/markdown/) 
 console.log(c); //["markdown", index: 9, input: "Markdown markdown   markdown"]
 //嘗試設置lastIndex改變匹配起始處
 var b='Markdown markdown markdown'; 
 var temp=new RegExp(/markdown/);
 temp.lastIndex=18;
 var c=b.match(temp);
 console.log(c)
 //["markdown", index: 9, input: "Markdown markdown markdown"]

5、includes
includes()方法用于 判斷一個字符串是否被包含在另一個字符串中，如果是返回 true，否則返回 false。該方法區分大小寫
兼容性：ECMA6，chrome 41+、firefox 40+，safari 9+；ie全系不支持

stringObject.includes(searchString [, position])

 var str = 'To be, or not to be, that is the question.';
 console.log(str.includes('To be'));       // true
 console.log(str.includes('question'));    // true
 console.log(str.includes('nonexistent')); // false
 console.log(str.includes('To be', 1));    // false
 console.log(str.includes('TO BE'));       // false

數組操作

• 數組創建

  var arr1=[1,2,3,4,5,6];//聲明一個數組
  console.log(arr1);//輸出[1,2,3,4,5,6]
  var arr2=new Array();
  console.log(arr2);//輸出[]
  arr2[2]=1;
  console.log(arr2);//輸出[, , 1]
  

• 數組長度及索引

  • 數組長度

    var arr=[1,2,3];
    console.log(arr.length);//輸出3
    
    

  • 數組索引

    var arr=[1,2,3];
    console.log(arr[0]);//輸出1
    console.log(arr[1]);//輸出2
    console.log(arr[2]);//輸出3
    arr[5]=1;//通過索引修改數組的長度
    console.log(arr);  //輸出[1,2,3,,,1];
    console.log(arr.length);//輸出6
    

• 數組中值的添加和刪除
  我們可以使用數組對象中的內置方法對數組中的值進行添加和刪除，常用的有如下四種方法：(pop、push、shift、unshift、splice)；

  • pop()
    pop()方法用于刪除數組中的最后一位值，并返回這個值，使用方法如下：

     var arr=[1,2,3,4,5];
     arr.pop();//返回5
     console.log(arr);//[1,2,3,4]
    

  • push()
    push()方法用于添加一個值到數組的最后一位，參數填寫需要添加進去的值，執行后返回添加后數組的長度：

     var arr=[1,2,3];
     arr.push(6);//返回數組長度4
     console.log(arr);//[1,2,3,6]
    

  • shift()
    shift()方法用于刪除數組中的第一位值，并返回這個值：

     var arr=[1,2,3,4,5];
     arr.shift();//返回1
     console.log(arr);//[2,3,4,5]
    

  • unshift()
    unshift()方法用于添加一個值到數組的第一位，然后返回添加后的數組長度，參數為需要被添加進去的值：

     var arr=[1,2,3,4,5];
     arr.unshift(0);//返回數組長度6
     console.log(arr);//[001,2,3,4,5]
    

  • splice()
    然而上面四種操作都不是很方便，比如需要對數組中間的值進行刪除和添加它們就無能為力了，這時候我們可以使用數組對象內置的方法splice()；
    splice功能非常強大，它可以接受兩個、三個或多個參數，它的第一個參數代表需要操作的值的索引，第二個參數是需要刪除的值的個數，第三個參數可以是多個參數，代表需要添加進去的值，下面來看一下使用例子：

     var arr=[1,2,3,4,5];
     //刪除數組中的3
     arr.splice(2,1);//返回[3]
     console.log(arr);//返回[1,2,4,5]
    
     //添加100到4的前面
     arr.splice(2,0,100);
     console.log(arr);//返回[1,2,100,4,5] 
    
     //添加很多個100到4的前面
     arr.splice(3,0,100,100,100,100);
     console.log(arr);//返回[1,2,100,100,100,100,100,4,5]     
    

• 數組排序
  我們可以使用reverse()、sort()對數組進行排序

  • reverse()
    reverse()方法可以將數組反轉，逆向排序，這個方法會對原數組產生影響，使用如下：

     var a=[1,2,3,4,5];
     a.reverse();//返回[5,4,3,2,1]
     console.log(arr);//[5,4,3,2,1]
    

  • sort()
    sort()方法功能更加強大，它可以按照我們想要的方式對數組進行排序，無參數時按照ASCII碼的大小進行排序，此外它可以接收一個回調函數作為參數，然后按照該函數返回的值對數組進行排序，這個方法也會對原數組產生影響
    1.無參數時，按照值的第一位的ASCII碼進行排序：

     var arr=[,56,23,34,78];
     arr.sort();//[23, 34, 56, 78]
     console.log(arr);//[23, 34, 56, 78]
    

    2.傳入回調函數，該函數返回的是正數的話，則按照從小到大的順序排序：
    返回的如果是負數，則按照從大到小的順序排序：

     var arr=[,56,23,34,78];
     arr.sort(function(a,b){return a-b});//[23,34,56,78]
     arr.sort(function(a,b){return b-a});//[78,56,34,23]
    

• 數組的分割和組合
  除了上面的對數組中的值進行添加和刪除的五種操作方法外，數組對象還內置了對數組進行分割和組合的方法

  • concat()
    concat()方法用于將兩個數組結合成一個數組，參數為需要結合的數組，該方法不會對原數組產生影響，返回的是一個新的數組，生成的新數組一般通過賦值進行使用，用法如下

     var a=[1,2,3,4,5];
     var b=[6,7,8,9];
     var c=a.concat(b);
     console.log(c);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
    

  • slice()
    slice()方法用于分割數組，它接受兩個參數，第一個是分割的起始索引（包括該值），第二個是結束索引（分割不包括該值），參數允許負數，該方法不會影響原數組，而是返回一個新的數組：

     var a=[1,2,3,4,5];
     a.slice(0,2);//返回[1,2]
     console.log(a);//[1,2,3,4,5]
    

• 數組轉化為字符串(join()方法)
  數組可以通過join()方法將數組轉化為字符串：
  join()方法可以傳入一個參數，用作分隔轉化后的字符串的參照物，該參數可以是空字符串，沒有參數則默認使用逗號進行分隔，這個方法不會對原數組產生影響：

  • 1.無參轉化

     var a=[1,2,3,4,5];
     a.join();//返回"1,2,3,4,5"
    

  • 2.有參轉化：

     var a=[1,2,3,4,5];
     a.join('');//返回"12345"
    

• 數組遍歷
  常見的方法有for循環、forEach、map、for ..... in、for ... of

  • for循環

     var arr=["Curry","Kobe","James","Durant"];
      for(var i=0;i<arr.length;i++){
        console.log(arr[i])
      }
      //依次輸出
        Curry
        Kobe
        James
        Durant
    

  • for… in

     var arr=["Curry","Kobe","James","Durant"];
      for(var i in arr){
        console.log(arr[i]+'/'+i)
      }
      //依次輸出
        Curry/0
        Kobe/1
        James/2
        Durant/3
    

  • for…of

     var arr=["Curry","Kobe","James","Durant"];
      for(var item of arr){
        console.log(item)
      }
      //依次輸出
        Curry
        Kobe
        James
        Durant
    

  • forEach方法：被傳遞給foreach的函數會在數組的每個元素上執行一次，元素作為參數傳遞給該函數

     var arr=["Curry","Kobe","James","Durant"];
     arr.forEach(function(element,index){
        console.log(element+"/"+index)
      })
      //依次輸出
        Curry/0
        Kobe/1
        James/2
        Durant/3
    

  • map 遍歷數組，并通過callback對數組元素進行操作，并將所有操作結果放入數組中并返回該數組

     var arr=["Curry","Kobe","James","Durant"];
     var arr1=arr.map(function(item){
        return item.toUpperCase();
      })
      console.log(arr1) // ["CURRY", "KOBE", "JAMES", "DURANT"]
    

  • filter( )返回一個包含所有在回調函數上返回為true的元素新數組，回調函數在此擔任的是過濾器的角色，當元素符和條件，過濾器就返回true,而filter則會返回所有符合過濾條件的元素

     var arr=["Curry","Kobe","James","Durant",30,24,23,35];
     var arr2=arr.filter(function(item){
        if(typeof item=="number"){
          return item;
        }
      })
      console.log(arr2) // [30, 24, 23, 35]
    

  • every() 當數組中的每一個元素在callback上被返回true時就返回true(注意：要求每一個單元項都返回true時才為true)

    var arr=["Curry","Kobe","James","Durant",30,24,23,35];
    var arr3=arr.every(function(item){
      if(typeof item=="string"){
        return item;
      }
    })
    console.log(arr3) // false
    

  • some()只要數組中有一項在callback上就返回true

    var arr=["Curry","Kobe","James","Durant",30,24,23,35];
       var arr4=arr.some(function(item){
        if(typeof item=="string"){
        return item;
      }
    })
    console.log(arr4) // true