<span id="header">数据类型</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
  • 把数字转换为字符串 返回字符串

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

• toFixed
  • 小数点后有指定位数的数字 字符串

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

• toPrecision
  • 格式化数字 字符串

    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
  • 将指定的字符串参数连接到字符串上

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

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

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

• indexOf
  • 返回 n 最先出现的下标 不存在返回 -1

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

• lastIndexOf
  • 返回 n 最后出现的下标 不存在返回 -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
  • 复制字符串 "Runoob" 两次:

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

• replace
  • 替换; 用第二个参数替换第一个参数

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

• search
  • 检索字符串中指定的子字符串下标 不存在返回 -1

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

• split
  • 分割成字符串数组 返回值Array

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

• slice == substring
  • 提取字符串的某个部分 返回新字符串--第一个参数下标到第二个参数下标前

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

• substring == slice
  • 提取字符串的某个部分 返回新字符串--第一个参数下标到第二个参数下标前

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

• substr
  • 抽取从开始下标到指定数目的字符 返回新字符串--第一个参数下标到第二个参数下标

          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
  • 转成字符串

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

• trim
  • 删除字符串的头尾空格。
    • trimLeft trimRight

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

• toLocaleLowerCase || toLowerCase
  • 将字符串转换为小写:

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

• toLocaleUpperCase || toUpperCase
  • 将字符串转换为大写:

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

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

• concat

  • 连接两个或多个数组。 返回新数组,不改变原有数组.

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

• indexOf

  • 返回指定字符在此字符串中第一次出现处的索引，如果没有则返回 -1。

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

• lastIndexOf

  • 返回指定字符在此字符串中最后一次出现处的索引，如果没有则返回 -1。

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

• shift

  • 删除第一个元素 返回删除的元素 -- 改变原始数组

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

• pop

  • 移除最后一个数组元素 返回删除的元素-- 改变原始数组

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

• unshift

  • 开始位置增加一个元素 返回元素长度 -- 改变原始数组

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

• push

  • 最后位置增加一个元素 返回元素长度 -- 改变原始数组

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

• reverse

  • 颠倒数组中元素的顺序 返回新数组 -- 改变原始数组

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

• slice

  • 返回从第一个参数元素到第二个参数前的元素; 返回新数组 -- 不改变原数组

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

• splice

  • 提取删除数组,或者 增加数组 返回新数组 -- 改变原始数组

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

• includes

  • 判断一个数组是否包含一个指定的值 返回Boolean

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

• join

  • 把数组中的所有元素转换为一个字符串

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

• sort

  • 排序数组 返回新数组 -- 改变原数组

          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

  • 返回符合条件的元素，之后的值不会再调用执行函数。没有则返回 undefined

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

• findIndex

  • 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。没有符合条件的元素返回 -1

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

• forEach 没有返回值

  • 遍历数组 第一个参数:当前元素,第二个参数:元素索引值,第三个参数:当前元素所属的数组对象。

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

• map 返回新数组

  • 遍历数组 第一个参数:当前元素,第二个参数:元素索引值,第三个参数:当前元素所属的数组对象。

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

• filter 返回新数组

  • 返回数组 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

  • 检测数组所有元素是否都符合指定条件,有一个元素不满足返回false,所有满足,返回true

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

• some 返回新数组

  • 检测数组所有元素是否都符合指定条件,有一个元素满足返回true并剩下的元素不会在执行检测

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

• reduces

        // 示例1--数组求和：
        [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)//回调函数的第一次调用时，第一个参数是0，第二个参数是ps[0]
    ```
  

• Array.from 返回数组, 具备下标且 有length

  • 转换数组, 或者创建数组 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
  • 用于创建和初始化class创建的对象的特殊方法。

• prototype
  • 原型, 自身属性

• _proto_
  • 对象的原型链引用

• Proxy
  • 用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等

• defineProperty
  • 用于拦截对对象的操作

• hasOwnProperty
  • 指示对象自身属性中是否具有指定的属性 返回一个布尔值

• isPrototypeOf
  • 用于测试一个对象是否存在于另一个对象的原型链上。

• 对象的深浅拷贝

  • 浅拷贝就是拷贝后，并没有进行真正的复制，而是复制的对象和原对象都指向同一个内存地址

    深拷贝是真正的复制了一份，复制的对象指向了新的内存地址
    ```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子元素是否为对象，如果是，递归复制*/ if(obj[key]&&typeof obj[key] ==="object"){
                                      objClone[key] = objectClone(obj[key]); 
                                 }else{
                                  /*如果不是，简单复制*/ objClone[key] = obj[key]; 
                                 } 
                             } 
                         } 
                 } 
             return objClone; 
          }
    

• 合并两个对象
  • 复制一个对象

        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 }
    
        创建一个纯净的对象:  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
  • 对数进行上舍入。

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

• floor(x)
  • 对数进行下舍入。

        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之间数值
          function selectFrom(lowerValue,upperValue){
          var choices = upperValue - lowerValue + 1;
          return Math.floor(Math.random() * choices + lowerValue)
          }
    

• sqrt(x)
  • 返回数的平方根。

          // 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: '' });  
      //#设置一个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'
      //#设置一个指定的值，可以是任意类型
          Lockr.set('username', 'Coyote');
      //#通过给定的键返回被保存的值
          Lockr.get('username'); 
      //#删除指定的键值对
          Lockr.rm('username'); 
      //#追加一个值在之前的基础上面
          Lockr.set("Json",[{"a":"1"}]); 
      //#[{"a":"1"},{"b":"2"}]
          Lockr.sadd("Json",{"b":"2"}); 
      //#获取本地存储中所有的键值对
          Lockr.getAll();
      //#清空本地存储所有的键值对
          Lockr.flush();
    

• DATE
  • moment日期插件

          https://www.jianshu.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滚动行为

    使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
    javascript https://www.cnblogs.com/sophie_wang/p/7880261. html

• vue-count-to
  • 数字滚动(商品价格)

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

• vue-preview
  • vue-preview图片预览

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

• tinymce-vue || wangEdit
  • vue富文本编辑器

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

• vuedraggable
  • vue实现拖拽功能

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

• vue-savedata
  • vuex数据持久化

• 进度条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跳出循环  <==>  return跳出函数
          //函数用于检查其参数是否是非数字值。 返回不是为true是为false
              isNaN(num) 
          //方法用于判断一个对象是否为数组。如果对象是数组返回 true，否则返回 false。
              Array.isArray( arr ) 
          //字符串反转小技巧
              message.split('').reverse().join('') 
          //自定义属性  ==> 获取、设置
              data-aa = '123321' ------- xx.dataset.aa
    

• JSON排序

  • jsonSort( JSON,"id",true||false ) <==> JSON,要排序的属性，是否反转

          function jsonSort(array, field, reverse) {
              if(array.length < 2 || !field ||typeof array[0] !=="object") return array; //数字类型排序
            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()