日常js开发中的一些小技巧

作者:某猫    发布于:

生成指定范围内的随机数

当我们需要获取指定范围(min, max)内的整数的时候,下面的代码非常适合;这段代码用的还挺多的。

function setRadomNum(min, max){
    return  Math.floor(Math.random() * (max - min + 1)) + min;
}

json或对象转url参数

当我们进行http请求时,可能需要把json或者对象转化为url参数,这时下面这段代码就派上用场了。

function jsonToUrl(url, json) {
    let arr = [];
    for(var name in json){
        arr.push(`${name}=${json[name]}`);
    }
    return `${url}?${arr.join('&')}`;
}

验证是否为数组

先检验本地是否有Array.isArray函数,没有就执行后面的方法检测。

function isArray(obj){
    return Array.isArray(obj) || Object.prototype.toString.call(obj) === '[object Array]';
}

清空数组

通过将长度设置为0

let arr=[1,2,3,4,5];
arr.length=0;

保留指定小数位

这个需求在项目中也是很常见的,可以toFixed()方法

let num =3.1415926;
num = num.toFixed(4); //toFixed()方法可把 Number 四舍五入为指定小数位数的数字,括号里面取值0~20(包括0和20)
console.log(num); //3.1416

打乱数组的顺序

方式一使用了数组的内置排序方法:sort,而方式二是借助了一个中间量,随机数组里的两个值,让它们交换位置。

方式一
arr.sort(function(){return Math.random()-0.5});
方式二
function shuffle(arr) {
    var i,
        j,
        temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;    
};

使用 ===

== (或者 !=) 操作在需要的情况下自动进行了类型转换。=== (或 !==)操作不会执行任何转换。===在比较值和类型时,可以说比==更快。

[10] ==  10      // 为 true
[10] === 10      // 为 false
'10' ==  10      // 为 true
'10' === 10      // 为 false
 []  ==  0       // 为 true
 []  === 0       // 为 false
 ''  ==  false   // 为 true 但 true == "a" 为false
 ''  === false   // 为 false

妙用“&&”和“||”

||和&&运算符妙用,可用于精简代码,降低程序的可读性。
&&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦)
|| : 从左往右依次判断,当当前值为false则继续,为true则返回此值(是返回未转换为布尔值时的原值哦)

用于赋值

var attr = true && 4 && "aaa"; //aaa;
var attr = true && 0 && "aaa"; //0
var attr = 100 || 12; //100
var attr = "e" || "hahaha" //'e'
var attr = "" || "hahaha" //'hahaha'

用于条件执行语句

// 普通的if语句
if(test){
  isTrue();
}
// 上面的语句可以使用 '&&' 写为:
( test && isTrue() );
test = false;
if(!test){
  isFalse();
}
// 上面的语句可以使用 '||' 写为:
( test || isFalse());

用于多次判断后的赋值

var add_level = 0;
if(add_step == 5){
    add_level = 1;
}
else if(add_step == 10){
    add_level = 2;
}
else if(add_step == 12){
    add_level = 3;
}
else if(add_step == 15){
    add_level = 4;
}
else {
    add_level = 0;
}
//可以写成
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

获取数组中的最大值或最小值

function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(',').split(',')),
       min:Math.min.apply(null,arr.join(',').split(','))
    }
}

该方法适合一维或者多维数组。

随机获取数组里的元素

function getRadomFromArr(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}

从数组里查找指定的值

查到了返回true,没查到返回false。

function findInArr(arr, value){
    for (var i=0; i<arr.length; i++){
        if (arr[i] == value){
            return true;
        }
    }
    return false;
}

去除字符串的空格

虽然在ECMAScript5中已经实现了trim方法,它对低版本浏览器并不支持,所以有时候我们需要自己实现。

去除首尾空格

function trim(str){
    return str.replace(/(^\s*)|(\s*$)/g, "");
}
trim('  hello world    '); //"hello world"

去除所有空格

function trimAll(str){
    return str.replace(/\s+/g,"");
}
trimAll('   he ll o  wo  r ld    '); //"helloworld"

初始化一个指定长度的数组并为每一项赋初值

//num: 数组的长度 item:填充的值 es5方法
function getArry(num, item) {
  return Array.apply(null, Array(num)).map(() => item);
}
//使用ES6的fill()方法
function getArry(num, item) {
          return new Array(num).fill(item)
    }

数组快速去重

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

利用set这种数据结构没有重复项的性质来实现,仅限es6

[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
    return index===array.indexOf(ele)
})
`

es5方法

通过正则把数字变成千分位格式

展示数据时会经常用到,如果还要格式化小数还可以与toFixed()一起使用

function thousandBitSeparator(num) {
  return num && (num.toString().indexOf('.') !== -1 ? num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
        return $1 + ',';
      }) : num.toString().replace(/(\d)(?=(\d{3}))/g, function ($0, $1) {
        return $1 + ',';
      }));
}

根据对象内某个属性进行排序

//property为根据哪个属性排序,how为true升序false反之
function objSort(property, how) {
  if (how){
  return (a, b) => {
    return (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
  }}else{
      return (a, b) => {
    return (a[property] < b[property]) ? 1 : (a[property] > b[property]) ? -1 : 0;
  }}
}

多维数组拍平去重排序

常规的多维数组拍平需要递归 这里记录一种简便方法

let arr = [[1,2,2],[3, 4, 5, 5],[6, 7, 8, 9,[11,12,[12,13,[14]]]],10];
let arryNew = Array.from(new Set(arr.toString().split(","))).map( s => Number(s)).sort((a,b) => a-b);
console.log(arryNew); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ]

在对象中使用for…of遍历器

let obj = {
  ['sss'] : 1,
  bbb : 2,
  ccc :3,
}
obj[Symbol.iterator] = function(){
  const self = this;
  let index = 0;
    return {
      next() {
        if (index < Object.keys(self).length) {
          return {
            value: self[Object.keys(self)[index++]],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
}
for (let a of obj){
  console.log(a)
}

通过实现Symbol.iterator定义next方法来实现Iterator

两个数组快速合并

let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8,9,10];
[].push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

简单的深复制的实现

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
      '[object Boolean]'  : 'boolean', 
      '[object Number]'   : 'number', 
      '[object String]'   : 'string', 
      '[object Function]' : 'function', 
      '[object Array]'    : 'array', 
      '[object Date]'     : 'date', 
      '[object RegExp]'   : 'regExp', 
      '[object Undefined]': 'undefined',
      '[object Null]'     : 'null', 
      '[object Object]'   : 'object'
  };
  if(obj instanceof Element) {
        return 'element';
  }
  return map[toString.call(obj)];
}
function deepClone(data) {
  var t = type(data), o, i, ni;

  if(t === 'array') {
      o = [];
  }else if( t === 'object') {
      o = {};
  }else {
      return data;
  }

  if(t === 'array') {
      for (i = 0, ni = data.length; i < ni; i++) {
          o.push(deepClone(data[i]));
      }
      return o;
  }else if( t === 'object') {
      for( i in data) {
          o[i] = deepClone(data[i]);
      }
      return o;
  }
}
format_list_numbered

(无)

  1. 1. 生成指定范围内的随机数
  2. 2. json或对象转url参数
  3. 3. 验证是否为数组
  4. 4. 清空数组
  5. 5. 保留指定小数位
  6. 6. 打乱数组的顺序
  7. 7. 使用 ===
  8. 8. 妙用“&&”和“||”
  9. 9. 获取数组中的最大值或最小值
  10. 10. 随机获取数组里的元素
  11. 11. 从数组里查找指定的值
  12. 12. 去除字符串的空格
  13. 13. 初始化一个指定长度的数组并为每一项赋初值
  14. 14. 数组快速去重
  15. 15. 通过正则把数字变成千分位格式
  16. 16. 根据对象内某个属性进行排序
  17. 17. 多维数组拍平去重排序
  18. 18. 在对象中使用for…of遍历器
  19. 19. 两个数组快速合并
  20. 20. 简单的深复制的实现
vertical_align_top

Copyright © 2017 某猫のBlog

Powered by Hexo & Theme - Vateral