【JS】常用js方法

1、判断是否是数组、字符串等方法

a instanceof b

a是你需要判断的数据

b是判断的类型

//直接判断原型
var a = [1,5,8]
var b = '123456'

console.log(a instanceof Array)//true
console.log(a instanceof String)//false

console.log(b instanceof String)//true

2、分割字符串

a.split(str,num)

a就是需要分割的字符串

str是分隔符，默认是空

num分割的次数

var a ='api/Getuser'
var b = a.split("/");

console.log(b)//['api','Getuser']

3、替换指定字符串

a.replace(old,new)

a就是所替换的字符串所在

old是需要替换的字符串（旧字符串）

new替换成的字符串（新字符串）

var a ='{{url}}/api/GetList'
var b = a.split('/')//先分割字符串
console.log(b) //['{{url}}','api','GetList']

//第一种方法--变量
var c = a.replace(b[0],'http://198.4.100:8090');
//第二种--字符串
var c = a.replace(/{{url}}/,'http://198.4.100:8090');

console.log(c) //'http://198.4.100:8090/api/GetList'

4、数组排序

在表格中进行多选，多选后的数据顺序是根据自己选择的顺序进行排序的。我的需求是把多选后的数据根据id从小到大进行重新排序。

get () {
      this.numbers = [
        { id: 1, zu: '王小虎1', state: 1, },
        { id: 4, zu: '王小虎2', state: 1 },
        { id: 3, zu: '王小虎3', state: 1 },
        { id: 2, zu: '王小虎4', state: 1 },
      ]
 
      var compare = function (prop) {
        return function (obj1, obj2) {
          var val1 = obj1[prop];
          var val2 = obj2[prop];
          if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
          }
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        }
      }
      this.numbers.sort(compare('id'))
      console.log(this.numbers.sort(compare('id')));
    }

根据name进行排序（字符串），则是按照abc顺序排序

get () {
      var arr = [{ name: "zlw", age: 24 }, { name: "wlz", age: 25 }];
      var compare = function (obj1, obj2) {
        var val1 = obj1.name;
        var val2 = obj2.name;
        if (val1 < val2) {
          return -1;
        } else if (val1 > val2) {
          return 1;
        } else {
          return 0;
        }
      }
      console.log(arr.sort(compare));
    }

5、中文文字均等换行，也就是上下文字尽量一致

文字均等换行的意思就是，如果有10个字就上下显示5个字展示，8个字就上下4个字展示，尽量让两行文字显示相同

我使用的是先获取字符串的长度，然后除以2，看是否除得尽，除得尽就在哪换行，除不尽则加1然后换行

huanhang(_str) {
                var str = _str,
                    result = "";
                // 判断字符串长度多少后除以2，除后有小数点就加1换行，没有则直接换行
                var rep = /[\.]/;
                if (str.length > 5) {//低于5个字就不换行
                    let a = (str.length / 2)
                    if (rep.test(a)) {
                        var n = parseInt(str.length / 2) + 1; //指定第n位换行
                    } else {
                        var n = parseInt(str.length / 2); //指定第n位换行
                    }
                    for (var i = 0, len = str.length; i < len; i++) {
                        result += str[i];
                        if ((i + 1) % n == 0)
                            result += "\r\n";
                    }
                    return result;
                } else {
                    return str
                }
            },

使用：

<text>{{huanhang(SceneData.Title1)}}</text>

6、根据字符串中的符号进行换行

字符串：‘检测项目1；检测项目2’
注意：一定要用v-html

 <div v-html="htmlchange(obj.cpmc)"></div>

methods: {
    htmlchange(content) {
      content = content.replace(/;/g, ";</br>");
      content = content.replace(/；/g, "；</br>");
      return content;
    },
}

7、除去数组对象重复字符串

修改成这样

接口返回类型如下，最后一级不返children，只返fileName和id，其余反children和fileName

getne(item) {
      item.map((i, index) => {
        if (i.children && i.children.length > 0) {
          i.children.forEach((j, ind) => {
            if (j.fileName.indexOf(i.fileName) !== -1) {
              const a = j.fileName.split(i.fileName);
              if (a[0] === "") {
                // 第一次
                j.fileName = j.fileName.replace(i.fileName, "");
              } else {
                // 剩余次数
                j.fileName = a[a.length - 1];
              }
              this.getne(i.children);
            }
          });
        }
      });
    },
//接口调用
 async getFileAllList(item) {
      // const res = await getFileAllList({ FilePath: "" });//查看全部文件
      const res = await getFileAllList({
        FilePath: item["文件路径"],
      });
      this.getne(res.data);
      this.treeData = res.data;
    },

8、一个数组删除掉另一个数组

let arr1 = [
    { name: "1",title: "第一组"},
    { name: "3",title: "第三组"},
    { name: "4",title: "第四组"}
 ]
let arr2 = [
    { name: "1",title: "第一组"},
    { name: "2",title: "第二组"},
    { name: "3",title: "第三组"},
    { name: "4",title: "第四组"},
    { name: "5",title: "第五组"},
    { name: "6",title: "第六组"}
 ]

第一种方法：

  /*
   *   every方法，只要有一项不满足条件就返回false，也就是说必须每一项都得满足才能返回true。返回的是布尔值。
   *   filter方法，只要条件满足，我就将此元素返回出去，返回的是元素。
   *   判断arr1中存在与arr2中相同的元素，则返回false。如果name都不相等，满足所有条件，则返回true。
   *   在filter中，只要条件为true，则返回。
   */
 let arr3 = arr2.filter(item=>{
    return arr1.every(item2=>{
      return item.name != item2.name;
    })
 })

第二种方法：

//for循环写法，因为arr2会改变，所以需要i--
for(let i = arr2.length - 1; i >= 0; i--){
  for(let j = 0; j < arr1.length;j++){
    if(arr2[i].name == arr1[j].name){
      arr2.splice(i,1);
    }
   }
 }

9、根据地址获取文件名

后端返给我的是文件地址，前端不需要展示整个文件地址，只要文件名加后缀名即可

<div v-html="getname(obj)"></div>

methods: {
    getname(i) {
      i = i.substring(i.lastIndexOf("/") + 1);
      return i;
    },
}

同理，如果是需要后缀名，那就是把lastIndexOf("/")换成lastIndexOf(".")即可

methods: {
    getname(i) {
      i = i.substring(i.lastIndexOf(".") + 1);
      return i;
    },
}

10、UrlDecode解码

后端返回的文件路径中，中文是编码的形式，需要前端进行转码并截取文件名

getname(i) {
      i = i.substring(i.lastIndexOf("/") + 1);//先截取文件名(用/进行截取判断是准确的，因为文件名中禁止有/等符号的)
      i = decodeURIComponent(i); //乱码转换成中文
      return i;
    },

//结果是：20230705-0706修改(1).docx

11、预览图片、PDF、word、Excel

window.open的方法

//打开新标签页并预览图片
window.open("", "", "").document.write(`<!DOCTYPE html>
          <html>
            <body
                style="display: flex;
                justify-content: center;
                align-items: center;">
              <img src='${URL}' width="70%"/>
            </body>
          </html>`);
//打开新标签页并预览pdf，其余的word改成对应的contentType即可
window.open(URL + "?response-content-type=application/pdf");

微软预览文件的方法

注意的是：如果是nas 就没有https的域名了，所以只适用于https

 let url = encodeURIComponent(data.path);
 let officeUrl = "http://view.officeapps.live.com/op/view.aspx?src=" + url;
 // 在新窗口打开编码后 的链接
 window.open(officeUrl, "blank");

还有插件的方法，这里就不写了