JavaScript

2020-04-04 本文已影响0人游_弋

<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'

检索字符串中指定的子字符串下标 不存在返回 -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'

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()

JavaScript

<span id="header">数据类型</span>

说明

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

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

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

reduces

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

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

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

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

猜你喜欢

热点阅读

JavaScript

<span id="header">数据类型</span>

说明

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

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

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

reduces

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

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

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

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

猜你喜欢

热点阅读

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

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

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

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

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

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