<span id="header">數(shù)據(jù)類型</span>

<details>
<summary><b >目錄</b></summary>
<a href="#Number" style="">[ Number ]</a> --
<a href="#String" style="">[ String ]</a> --
<a href="#Array" style="">[ Array ]</a> --
<a href="#Object" style="">[ Object ]</a> --
<a href="#Math" style="">[ Math ]</a> --
<a href="#chajian" style="">[ 插件 ]</a> --
<a href="#xiaojiqiao" style="">[ 小技巧 ]</a> --

</details>

說明

• 屬性 返回值 類型

• 作用

• 代碼
  模板

 + 123
    - 123
      ```javascript
            123
        ```

<a id="Number" href="#header">Number</a>

• toString
  • 把數(shù)字轉(zhuǎn)換為字符串 返回字符串

        var num = 10;
        // typeof num.toString() == String
    

• toFixed
  • 小數(shù)點后有指定位數(shù)的數(shù)字 字符串

    var num = 5.56789;
    //num.toFixed(2) == 5.56
    

• toPrecision
  • 格式化數(shù)字 字符串

    var num = new Number(13.3714);
    // num.toPrecision(3) == 13.3
    // num.toPrecision(4) == 13.37
    

<a id="String" href="#header">String</a>

不改變原字符串 [x]

• charAt
  • 返回字符串的第 n 字符

        var str="HELLO WORLD";
        // str.charAt(0); == H
        // str.charAt(1); == E
    

• concat
  • 將指定的字符串參數(shù)連接到字符串上

        var str = 'hello';
        var str1 = 'Word';
        // str.concat(str1); == helloWord
    

• includes
  • 查找字符串是否包含 "word" 返回值為Boolean

        var str = "hello word";
        // str.includes("world"); == true || false
    

• indexOf
  • 返回 n 最先出現(xiàn)的下標(biāo) 不存在返回 -1

        var str = '12341234';
        // str.indexOf(1); 0
        // str.indexOf(4); 3
    

• lastIndexOf
  • 返回 n 最后出現(xiàn)的下標(biāo) 不存在返回 -1

        var str = '12341234';
        // str.indexOf(1); 4
        // str.indexOf(4); 7
    

• match
  • 在字符串中查找 "ain" 返回值為Array

          var str="The rain in SPAIN stays mainly in the plain"; 
          // str.match(/ain/g); == ['ani','ani','ani']
    

• repeat
  • 復(fù)制字符串 "Runoob" 兩次:

          var str = "Runoob";
          // str.repeat(2); == RunoobRunoob
    

• replace
  • 替換; 用第二個參數(shù)替換第一個參數(shù)

          var str = 'name: xxx';
          // str.replace('xxx','tian'); == 'name: tian'
    

• search
  • 檢索字符串中指定的子字符串下標(biāo) 不存在返回 -1

          var str = 'name: tian'
          // str.search('tian'); == 6
          // str.search('name'); == 0
    

• split
  • 分割成字符串?dāng)?shù)組 返回值A(chǔ)rray

          var str = 'tian guo yuan';
          // str.split(' '); == ['tian','guo','yuan']
    

• slice == substring
  • 提取字符串的某個部分 返回新字符串--第一個參數(shù)下標(biāo)到第二個參數(shù)下標(biāo)前

          var str = 'hello word';
          // str.slice(0,1); == h
          // str.slice(1,3); == el
    

• substring == slice
  • 提取字符串的某個部分 返回新字符串--第一個參數(shù)下標(biāo)到第二個參數(shù)下標(biāo)前

          var str = 'hello word';
          // str.substring(0,1); == h
          // str.substring(1,3); == el
    

• substr
  • 抽取從開始下標(biāo)到指定數(shù)目的字符 返回新字符串--第一個參數(shù)下標(biāo)到第二個參數(shù)下標(biāo)

          var str = 'hello word';
          // str.substr(0,1); == h
          // str.substr(1,3); == ell
    

• startsWith
  • 查看字符串是否為 "Hello" 開頭 返回Boolean

          var str = "Hello world, welcome to the Runoob.";
          // str.startsWith("Hello"); == true
    

• toString 返回String
  • 轉(zhuǎn)成字符串

          var num = 123;
          // num.toString(); == string
    

• trim
  • 刪除字符串的頭尾空格琐簇。
    • trimLeft trimRight

          var str = '   tian   ';
          // str.trim(); == 'tian'
    

• toLocaleLowerCase || toLowerCase
  • 將字符串轉(zhuǎn)換為小寫:

          var str = 'TIAN';
          // str.trim(); == 'tian'
    

• toLocaleUpperCase || toUpperCase
  • 將字符串轉(zhuǎn)換為大寫:

          var str = 'tian';
          // str.trim(); == 'TIAN'
    

<a id="Array" href="#header">Array</a>

• concat

  • 連接兩個或多個數(shù)組摆昧。 返回新數(shù)組,不改變原有數(shù)組.

        var arr = [1,2];
        var arr1 = [3,4];
        var arr2 = [5,6];
        // arr.concat(arr1,arr2); == [1,2,3,4,5,6]
    

• indexOf

  • 返回指定字符在此字符串中第一次出現(xiàn)處的索引啦撮，如果沒有則返回 -1惶我。

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

• lastIndexOf

  • 返回指定字符在此字符串中最后一次出現(xiàn)處的索引，如果沒有則返回 -1。

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

• shift

  • 刪除第一個元素 返回刪除的元素 -- 改變原始數(shù)組

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

• pop

  • 移除最后一個數(shù)組元素 返回刪除的元素-- 改變原始數(shù)組

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

• unshift

  • 開始位置增加一個元素 返回元素長度 -- 改變原始數(shù)組

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

• push

  • 最后位置增加一個元素 返回元素長度 -- 改變原始數(shù)組

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

• reverse

  • 顛倒數(shù)組中元素的順序 返回新數(shù)組 -- 改變原始數(shù)組

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

• slice

  • 返回從第一個參數(shù)元素到第二個參數(shù)前的元素; 返回新數(shù)組 -- 不改變原數(shù)組

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

• splice

  • 提取刪除數(shù)組,或者 增加數(shù)組 返回新數(shù)組 -- 改變原始數(shù)組

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

• includes

  • 判斷一個數(shù)組是否包含一個指定的值 返回Boolean

          var arr = [1,2,3];
          // arr.includes('1'); == true
    

• join

  • 把數(shù)組中的所有元素轉(zhuǎn)換為一個字符串

          var arr = [1,2,3];
          // arr.join(",") || arr.join(",") == 1,2,3
          // arr.join(""); == 123
    

• sort

  • 排序數(shù)組 返回新數(shù)組 -- 改變原數(shù)組

          var arr = [1,3,2,5,4];
          // arr.sort((a,b)=>a-b); == [1,2,3,4,5]
          // arr.sort((a,b)=>b-a); == [5,4,3,2,1]
    

• find

  • 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)躯喇。沒有則返回 undefined

        var arr = [1,1,2,3,4,5];
        // arr.find(it=>it==0); undefined
        // arr.find(it=>it==1); 1
    ```
  

• findIndex

  • 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)硝枉。沒有符合條件的元素返回 -1

        var arr = [1,1,2,3,4,5];
        // arr.findIndex(it=>it==0); == -1
        // arr.findIndex(it=>it==5); == 5
    ```
  

• forEach 沒有返回值

  • 遍歷數(shù)組 第一個參數(shù):當(dāng)前元素,第二個參數(shù):元素索引值,第三個參數(shù):當(dāng)前元素所屬的數(shù)組對象廉丽。

          var arr = [1,2,3,4,5];
          // arr.forEach((item,index,selfData)=>)
    

• map 返回新數(shù)組

  • 遍歷數(shù)組 第一個參數(shù):當(dāng)前元素,第二個參數(shù):元素索引值,第三個參數(shù):當(dāng)前元素所屬的數(shù)組對象。

          var arr = [1,2,3,4,5];
          // var newArr = arr.map((item,index,selfData)=> return item);
          // newArr == [1,2,3,4,5]
    

• filter 返回新數(shù)組

  • 返回數(shù)組 ages 中所有元素都大于 n 的元素:

          var arr = [1,2,3,6,7,8];
          // var arr = [1,2,3,6,7,8];
          // var newArr = arr.filter(item=>item>5)
          // newArr == [6,7,8]
    

• every 返回值Boolean

  • 檢測數(shù)組所有元素是否都符合指定條件,有一個元素不滿足返回false,所有滿足,返回true

          var arr = [1,2,3,4];
          // arr.every(item=>item>0)  // true
    

• some 返回新數(shù)組

  • 檢測數(shù)組所有元素是否都符合指定條件,有一個元素滿足返回true并剩下的元素不會在執(zhí)行檢測

          var arr = [1,2,3,4];
          // arr.every(item=>item>3)  // true
    

• reduces

        // 示例1--數(shù)組求和：
        [1,2,3,4,5].reduce((prev,next)=>{
                return prev+next;
        })//返回值15
  
        //示例2--對象求和：
        var ps = [{'p':1,'num':1},{'p':2,'num':2},{'p':3,'num':3},{'p':4,'num':4}];
        ps.reduce((prev,next)=>{
                return prev+next.p*next.num;
        },0)//回調(diào)函數(shù)的第一次調(diào)用時妻味，第一個參數(shù)是0雅倒，第二個參數(shù)是ps[0]
    ```
  

• Array.from 返回數(shù)組, 具備下標(biāo)且 有l(wèi)ength

  • 轉(zhuǎn)換數(shù)組, 或者創(chuàng)建數(shù)組 Array.from([1,2,3]) == [1,2,3]

      let array = {
              0: 'name', 
              1: 'age',
              2: 'sex',
              3: ['user1','user2','user3'],
              // 'length': 4 //需要具備length
          }
          // Array.from(array ) == ["name","age","sex",["user1","user2","user3"]]
    

<a id="Object" href="#header">Object</a>

• bind call apply
  • 改變this指向

        var obj1 = {name:'張三'};
        var obj2 = {name:'李四'};
        var obj3 = {name:'王五'};
        function logThis(){
            console.log(this.name)
        }
        logThis.call(obj1,arg1,agg2); // 張三
        logThis.bind(obj2,arg1,agg2)(); // 李四
        logThis.apply(obj3,[arg1,agg2]); // 王五
    

• constructor
  • 用于創(chuàng)建和初始化class創(chuàng)建的對象的特殊方法。

• prototype
  • 原型, 自身屬性

• _proto_
  • 對象的原型鏈引用

• Proxy
  • 用于定義基本操作的自定義行為（如屬性查找弧可，賦值蔑匣，枚舉，函數(shù)調(diào)用等

• defineProperty
  • 用于攔截對對象的操作

• hasOwnProperty
  • 指示對象自身屬性中是否具有指定的屬性 返回一個布爾值

• isPrototypeOf
  • 用于測試一個對象是否存在于另一個對象的原型鏈上棕诵。

• 對象的深淺拷貝

  • 淺拷貝就是拷貝后裁良，并沒有進行真正的復(fù)制，而是復(fù)制的對象和原對象都指向同一個內(nèi)存地址

    深拷貝是真正的復(fù)制了一份校套，復(fù)制的對象指向了新的內(nèi)存地址
    ```javascript
    //淺拷貝
    for(var i in father) {
    copy[i] = obj[i];
    }
    var copy = Object.assign({},obj);
    var copy = {...obj};

     //深拷貝 
         ①var copy = JSON.parse( JSON.stringify( obj) );
         ②function objectClone(obj){
              let objClone = Array.isArray(obj)?[]:{}; 
              if(obj && typeof obj==="object"){
                   for(key in obj){
                          if(obj.hasOwnProperty(key)){
                               /*判斷ojb子元素是否為對象价脾，如果是，遞歸復(fù)制*/ if(obj[key]&&typeof obj[key] ==="object"){
                                      objClone[key] = objectClone(obj[key]); 
                                 }else{
                                  /*如果不是笛匙，簡單復(fù)制*/ objClone[key] = obj[key]; 
                                 } 
                             } 
                         } 
                 } 
             return objClone; 
          }
    

• 合并兩個對象
  • 復(fù)制一個對象

        var aa = {...obj1,...obj2 };  //返回新對象 ,  修改會改變原對象
            var obj1 = {a:1};
            var obj2 = {a:2};
            var obj3 = {c:3};
            var newObj = {...obj1,...obj2,...obj3};
            // newObj == { a: 2,c:3 }
    
        Object.assign({},obj1,obj2,obj3) //返回新對象 ,修改會改變原對象,
            var obj1 = {a:1};
            var obj2 = {a:2};
            var obj3 = {c:3};
            var newObj = {...obj1,...obj2,...obj3};
            // newObj == { a: 2,c:3 }
    
        創(chuàng)建一個純凈的對象:  Object.create( null ) //返回新對象 ,修改會改變原對象, 可以繼承{}對象屬性
            var obj1 = {a:1};
            var obj2 = {b:2}; 
            var newObj = Object.create(obj2); 
            // newObj.b == 2 == obj2.b 
    

<a id="Math" href="#header">Math</a>

• ceil
  • 對數(shù)進行上舍入侨把。

          var num1 = 1.9;
          var num2 = 1.1;
          // Math.ceil(num1); 2
          // Math.ceil(num2); 2
    

• floor(x)
  • 對數(shù)進行下舍入犀变。

        var num1 = 1.9;
        var num2 = 1.1;
        // Math.ceil(num1); 1
        // Math.ceil(num2); 1
    ```
  

• round(x)
  • 四舍五入。

          var num1 = 1.4;
          var num2 = 1.5;
          // Math.round(num1); 1
          // Math.round(num2); 2
    
          Math.floor(Math.random()*10+1); // 1--10之間數(shù)值
          function selectFrom(lowerValue,upperValue){
          var choices = upperValue - lowerValue + 1;
          return Math.floor(Math.random() * choices + lowerValue)
          }
    

• sqrt(x)
  • 返回數(shù)的平方根秋柄。

          // Math.sqrt(16); 4
          // Math.sqrt(25); 5
    

• pow(x,y)
  • 返回 x 的 y 次冪获枝。

          // Math.pow(5,1); 5
          // Math.pow(5,2); 25
          // Math.pow(5,3); 125
    

• max(x,y,z,...,n)
  • 返回 x,y,z,...,n 中的最高值。

          // Math.max(1,2,3,4,5);  5
    

• max(x,y,z,...,n)
  • 返回 x,y,z,...,n 中的最小值骇笔。

          // Math.min(1,2,3,4,5);  1
      ```0
    

<a href="#header" id="chajian">插件</a>

• normalize
  • css格式化

      //#下載
          npm install --save normalize.css
      //#引用
          import 'normalize.css'
    

• Cookie
  • js-cookie插件

      //#下載
          npm install js-cookie --save 
      //#引入
          import Cookie from 'js-cookie' 
      //#expires:有效期 path:路徑
          Cookies.set('name', 'value', { expires: 7, path: '' });  
      //#設(shè)置一個json
          Cookies.set('name', { foo: 'bar' });
      // => 'name'  =>{foo:'bar'} //#讀取某個key
          Cookies.get('name'); 
      //#讀取所有的cookie
          Cookies.get(); 
      //#刪除cookie時必須是同一個路徑省店。
          Cookies.remove('name'); 
    

• localStorage
  • lockr插件

      //#下載
          npm i lockr --save 
      //#引入
          import Lockr from 'lockr'
      //#設(shè)置一個指定的值，可以是任意類型
          Lockr.set('username', 'Coyote');
      //#通過給定的鍵返回被保存的值
          Lockr.get('username'); 
      //#刪除指定的鍵值對
          Lockr.rm('username'); 
      //#追加一個值在之前的基礎(chǔ)上面
          Lockr.set("Json",[{"a":"1"}]); 
      //#[{"a":"1"},{"b":"2"}]
          Lockr.sadd("Json",{"b":"2"}); 
      //#獲取本地存儲中所有的鍵值對
          Lockr.getAll();
      //#清空本地存儲所有的鍵值對
          Lockr.flush();
    

• DATE
  • moment日期插件

          http://www.reibang.com/p/e5b7c0606a3f
    

• md5
  • js-md5加密

          https://blog.csdn.net/skyblacktoday/article/details/80255348
    

• base64
  • js-base64加密

          https://blog.csdn.net/liub37/article/details/83310879
    

• 二維碼
  • jq生成二維碼插件

          https://www.cnblogs.com/miaSlady/p/9071735.html
    

• fastclick
  • fastclick移動端點擊300ms延遲

          https://www.cnblogs.com/cangqinglang/p/9948880.html
    

• normalize
  • Vue scrollBehavior滾動行為

    使用前端路由笨触，當(dāng)切換到新路由時懦傍，想要頁面滾到頂部，或者是保持原先的滾動位置芦劣，就像重新加載頁面那樣粗俱。
    javascript https://www.cnblogs.com/sophie_wang/p/7880261. html

• vue-count-to
  • 數(shù)字滾動(商品價格)

          https://www.cnblogs.com/tuspring/p/9801603.html
    

• vue-preview
  • vue-preview圖片預(yù)覽

          https://www.npmjs.com/package/vue2-preview
    

• tinymce-vue || wangEdit
  • vue富文本編輯器

          https://blog.csdn.net/liub37/article/details/83310879
    

• vuedraggable
  • vue實現(xiàn)拖拽功能

          <!--components:{draggable};-->
          <draggable @start="drag=true" @end="drag=false">  DIVxxx </draggable>
    

• vue-savedata
  • vuex數(shù)據(jù)持久化

• 進度條NProgress
  • 進度條NProgress( 頁面載入 )

          npm install --save nprogress
          import NProgress from 'nprogress'
          import 'nprogress/nprogress.css'
          router.beforeEach((to, from, next) => {
               NProgress.start();  
               next(); 
          })
          router.afterEach((to,from,next) => {
              NProgress.done();
          })
          // 顏色修改App.vue     
          // #nprogress .bar {background: red !important; } //自定義顏色 
    

<a href="#header" id="xiaojiqiao">小技巧</a>

• JS技巧

  • isNaN || Array.isArray

          break跳出循環(huán)  <==>  return跳出函數(shù)
          //函數(shù)用于檢查其參數(shù)是否是非數(shù)字值。 返回不是為true是為false
              isNaN(num) 
          //方法用于判斷一個對象是否為數(shù)組虚吟。如果對象是數(shù)組返回 true寸认，否則返回 false。
              Array.isArray( arr ) 
          //字符串反轉(zhuǎn)小技巧
              message.split('').reverse().join('') 
          //自定義屬性  ==> 獲取稍味、設(shè)置
              data-aa = '123321' ------- xx.dataset.aa
    

• JSON排序

  • jsonSort( JSON,"id",true||false ) <==> JSON,要排序的屬性废麻，是否反轉(zhuǎn)

          function jsonSort(array, field, reverse) {
              if(array.length < 2 || !field ||typeof array[0] !=="object") return array; //數(shù)字類型排序
            if(typeof array[0][field] === "number" ) {
                  array.sort(function(x, y) {
                       return x[field] - y[field]
                  }); 
              } //字符串類型排序
              if(typeof array[0][field] === "string") {
                  array.sort(function(x, y) {
                      return x[field].localeCompare(y[field])
                  });
              } //倒序
              if(reverse) { 
                  array.reverse(); 
              } return array; 
          }
    

• 自動打字小技巧

  • var str = '自動打字小技巧-----';

          var divText = document.querySelector("#divTyping");  
          var i = 0;
          function typing(){ 
              if( i<= str.length ){ 
                  divText.innerHTML = str.slice(0,i++)+'_'; 
                  setTimeout(typing(),200 )
              }else{
                  divText.innerHTML = str; 
              }  
          }        
          typing()