JS实用代码片段

132 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第20天,点击查看活动详情

在开发过程中大概率会用到的代码片段,做个汇总,以免遗忘。

数组去重的三种写法

第一种利用 new Set() 中数据唯一性做去重处理,使用es6的解构语法,降数组元素解构出来。第二种,同第一种方法的思路一直,Array.from() 会返回一个数组的浅拷贝,第三种就是一个个判断了。

//1
function unique(arr) {
  return [...new Set(arr)];
}

//2
function unique(arr){
  return Array.from(new Set(arr));
}

//3
function unique(arr){
  var newArr = [];
  for(var i in arr) {
    if(newArr.indexOf(arr[i]) == -1) {
      newArr.push(arr[i])
    }
  }
  return newArr;
}

取数组的元素的最大值与最小值

...[1,2,3,4,56,'23'] 等同于 1,2,3,4,56,23,max() ,min() 分别返回一组数种的最大最小值。

let arr = [1,2,3,4,56,'23']

Math.max(...arr) // 56

Math.min(...arr) // 1

字符串去除空格

replace正则匹配方法

去除字符串内所有的空格

str = str.replace(/\s*/g,"")

去除字符串内两头的空格

str = str.replace(/^\s*|\s*$/g,"")

去除字符串内左侧的空格

str = str.replace(/^\s*/,"")

去除字符串内右侧的空格

str = str.replace(/(\s*$)/g,"")

str.trim()方法

trim()方法是用来删除字符串两端的空白字符并返回,trim方法并不影响原来的字符串本身,它返回的是一个新的字符串。

单独去除左侧空格则使用

str.trimLeft();  //var str_1 = str.trimLeft()

单独去除右侧空格则使用

str.trimRight();  //var str_1 = str.trimRight()

数组扁平化

使用了递归,递归的条件是,当数组元素是数组时(Array.isArray(array[index]) 为 true 时)

function flatten(arr) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result = result.concat(arr[i]);
    }
  }

  return result;
}

const a = [1, [2, [3, 4]]];
console.log(flatten(a)); // [1,2,3,4]

浏览器嗅探

有时我们会遇到需要判断客户端是什么的情况。

const inBrowser = typeof window !== "undefined";

export const UA = inBrowser && window.navigator.userAgent.toLowerCase();
export const isIE = UA && /msie|trident/.test(UA);
export const isIE9 = UA && UA.indexOf("msie 9.0") > 0;
export const isEdge = UA && UA.indexOf("edge/") > 0;
export const isAndroid =  (UA && UA.indexOf("android") > 0) || weexPlatform === "android";
export const isIOS =  (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === "ios";
export const isChrome = UA && /chrome/\d+/.test(UA) && !isEdge;
export const isPhantomJS = UA && /phantomjs/.test(UA);
export const isFF = UA && UA.match(/firefox/(\d+)/);

二进制数据下载

大多数情况下我们使用a标签直接访问下载地址,但是当后端下载接口时个post的请求的情况时,这是返回的数据时二进制数,可以使用以下方式进行二进制的数据的下载。

downloadDetailTable(res.message).then(resChild => {
     let blob = new Blob([resChild], {
       type: 'application/vnd.ms-excel',
     });
     let URL = window.URl || window.webkitURL;
     let paramUrl = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = paramUrl;
     // a.download = 'downloadNames';
     document.body.appendChild(a);
     a.click();
     URL.revokeObjectURL(a.href);
     document.body.removeChild(a);
 });