css、js小技巧

灵活运用css开发技巧摘自： https://juejin.im/post/5d4d0ec651882549594e7293

灵活运用js开发技巧摘自：https://juejin.im/post/5cc7afdde51d456e671c7e48#heading-72

灵活运用PS切图技巧摘自：https://juejin.im/post/5ce68402f265da1b7a4b4d4d

1 判断数据类型

可判断类型：undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

function DataType(tgt, type) {
    const dataType = Object.prototype.toString.call(tgt).replace(/\[object /g, "").replace(/\]/g, "").toLowerCase();
    return type ? dataType === type : dataType;
}
DataType("young"); // "string"
DataType(20190214); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false

2. 手机号码中间号码用*表示

 let tel = "" + 13866668888  // 数字转换成字符串
 let reg=/(\d{3})\d{4}(\d{4})/;
 let result = tel.replace(reg, "$1****$2")
console.log(result) // 138****8888

3. 判断空数组和空对象

//是否为空数组
const arr = [];
const flag = Array.isArray(arr) && !arr.length;
console.log(flag) // true


//  是否为空对象
const obj = {};
const flag = DataType(obj, "object") && !Object.keys(obj).length;
console.log(flag) // true

// 过滤空值
const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean);
console.log(arr) // [1,2]

4. 精确小数

const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.69, 1);
console.log(num) //  1.7

5.格式化金钱

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
console.log(money)  // "20,190,214"

6.时间戳：

const timestamp = +new Date("2019-02-14");

7.switch/case使用区间

const age = 26;
switch (true) {
    case isNaN(age):
        console.log("not a number");
        break;
    case (age < 18):
        console.log("under age");
        break;
    case (age >= 18):
        console.log("adult");
        break;
    default:
        console.log("please set your age");
        break;
}

8.自适应页面（页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进行设置）

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}