JS - 常用函数(二)

最新推荐文章于 2020-02-06 20:38:13 发布

kelly0721

最新推荐文章于 2020-02-06 20:38:13 发布

阅读量209

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/kelly0721/article/details/103447138

版权

JS 专栏收录该内容

50 篇文章 3 订阅

订阅专栏

一、Number

1. string强制转换为数字

使用 ES6 中的 Number方法，再用Number.isNaN来判断是否为 NaN

用运算符+1来转化为数字(实际上是调用 .valueOf方法)，再使用 a!==a 来判断是否为 NaN，因为 NaN!==NaN

function testNumber(val) {

  // 1. Number
  // val = Number(val);
  // if (Number.isNaN(val)){
  //   return 0;
  // }
  // return val;
 
  // 2. 运算法
  val = + val;
  if (val !== val) {
    return 0;
  }
  return val;
}
const a = '444';
const d = 'aaaa';

testNumber(a); // 444
testNumber(d); // 0

2. 精确到指定位数的小数

将数字四舍五入到指定的小数位数。使用 Math.round() 和模板字面量将数字四舍五入为指定的小数位数。省略第二个参数 decimals ，数字将被四舍五入到一个整数

const round =(n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
round(1.345, 2) // 1.34
round(1.3 2) // 1.3

3. 运算

取整: 对一个数字 |0可以取整，负数也同样适用, num | 0

1.3 | 0 // 1
-1.3 | 0 // -1

判断奇偶数: 对一个数字 &1可以判断奇偶数，负数也同样适用， num&1

let num = 3;
num & 1 // 1
num = 4
num & 1 // 0

4. 数字补0操作

有时候比如显示时间的时候有时候会需要把一位数字显示成两位，这时候就需要补0操作，可以使用 slice和string的 padStart方法

const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)
const addZero2 = (num, len = 2) => (`${num}`).padStart( len , '0')
addZero1(3) // 03
addZero2(32,4) // 0032

二、字符串

1. 字符串比较时间先后

比较时间先后顺序可以使用字符串
因为字符串比较大小是按照字符串从左到右每个字符的 charCode来的，但所以特别要注意时间形式注意补0

const a = '2019-12-01';
const b = '2020-01-01';
const c = '21:30';
const d = '09:30';
const e = '9:30';

a>b // false
c>d // true
c>e // false

三、数组

1. reduce方法同时实现map和filter,

假设现在有一个数列，你希望更新它的每一项（map的功能）然后筛选出一部分（filter的功能）。如果是先使用map然后filter的话，你需要遍历这个数组两次。如果你使用 reduce 那么仅需要遍历一次
reduce 还可以改变自身数组

const  numbers = [10,20,30,40];

const doubledOver50 = numbers.reduce((finalList, num) => {
  num = num * 2;
  if (num > 50) {
    finalList.push(num);
  }

  return finalList;
}, []);
doubledOver50 // [60, 80]

numbers.reduce((finalList, num, index) => {
  num = num * 2;
   finalList[index] = {
      [index]: num
    }
  return finalList;
}, numbers);
numbers // [ { '0': 20 }, { '1': 40 }, { '2': 60 }, { '3': 80 } ]

2. 统计数组中相同项的个数

很多时候，你希望统计数组中重复出现项的个数然后用一个对象表示。那么你可以使用reduce方法处理这个数组。

下面的代码将统计每个数字出现的次数然后把总数用一个对象表示

const  numbers = [10,10,20,20,20,30,40];

const singleNumers = numbers.reduce((obj, num) => {
  obj[num] = obj[num] ? ++ obj[num] : 1;
  return obj;
}, {});
singleNumers // { '10': 2, '20': 3, '30': 1, '40': 1 }

3. 将数组平铺到指定深度

使用递归，为每个深度级别 depth 递减 1 。使用 Array.reduce() 和 Array.concat() 来合并元素或数组。基本情况下， depth 等于 1 停止递归。省略第二个参数， depth 只能平铺到 1 (单层平铺) 的深度。

const flatten = (arr, depth = 1) => depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), []) : arr.reduce((a, v) => a.concat(v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

四、代码

1. Object [key]


const rule = {
  first: {
    required: true
  },
  second: {
    required: true
  }
};

const validate = (rule, values) => {
  for(let i in rule) {
    if (rule[i].required) {
      if (!values[i]) {
        return false;
      }
    }
  }
  return true;
}

const a = { first: 2 };
const b = { first: 2, second: 1 };
validate(rule, a); // false
validate(rule, b); // true

2. 惰性载入函数

在某个场景下我们的函数中有判断语句，这个判断依据在整个项目运行期间一般不会变化，所以判断分支在整个项目运行期间只会运行某个特定分支，那么就可以考虑惰性载入函数

const a = 1;
const b = 2;

function foo() {
  console.log('333');
  if (a !== b) {
    foo = function foo () {
      console.log('111')
    }
  } else {
    foo =  function foo () {
      console.log('2222')
    }
  }
  return foo();

}
foo(); // 333 111
foo(); // 111
foo(); // 111

3. 一次性函数

跟上面的惰性载入函数同理，可以在函数体里覆写当前函数，那么可以创建一个一次性的函数，重新赋值之前的代码相当于只运行了一次，适用于运行一些只需要执行一次的初始化代码

function foo() {
  console.log('333');
  foo = function foo () {
      console.log('111')
    }

}
foo(); // 333
foo(); // 111
foo(); // 111