2021-12-25 每个前端工程师都应该知道的12个重要的Javascript函数

本文翻译自此处,感兴趣的朋友可以阅读原文

本文将展示12个javascript函数,将帮助你加快你的开发,节省宝贵的时间

1、缩短console log函数

当我们想要打印一些信息时,经常会使用console.log,我们可以使用bind来减少输入,加快开发进程。

const log = console.log.bind(document)
log("能正常使用吗?")
log("确实!")
log(7)

2、合并两个数组为一个数组

const array1 = ["one", "two", "three"]
const array2 = ["four", "five", "six"]
const merged = array1.concat(array2)

// 当然也可以使用这个方法
merged = [...array1,...array2]

3、合并两个对象为一个

const user = {
  name:"Paul",
  gender:'male'
};

const article = {
  title: "你为何这么帅",
  date: "2020-02-02"
};

const summary = {...user,...article}

4、减少数组长度

const big_array = ["one", "two", "three", "four", "five", "six"]
big_array.length = 3
console.log(big_array)
// 输出为
// ["one", "two", "three"]

5、随机打乱数组元素的顺序

主要使用Array.sort函数,使用返回随机数的compareFunction来实现

const array = ["one", "two", "three", "four", "five", "six"]
array.sort(()=>{return Math.random() - 0.5})
console.log(array)

6、使用isNum来判断是否为数值类型

function isNum(n) { return !IsNaN(parseFloat(n)) && isFinite(n);}
console.log(isNum(1377)) // true
console.log(isNum(13.77)) // true
console.log(isNum('Javascript')) // false

7、使用isStr来判断是否为字符串类型

const isStr = (value) = > typeof value === 'string';

console.log(isStr('Javascript')); // true
console.log(isStr(345)); // false
console.log(isStr(true)); // false

8 、使用isNull来判断是否为空

const isNull = (value) => value === null || value === undefined;
console.log(isNull(null)); // true
console.log(isNull()); // true
console.log(isNull(123)); // false
console.log(isNull("J")); // false

9、 计算函数的性能

如果你想知道函数运行了多少时间,可以用这个方法

const start = performance.now();

// 此处运行你想要测试的函数
someFunction()

const end = performance.now();

const total = start - end
console.log("函数运行:" + total + "微秒")

10、数组去重

const array = ["one", "two", "three", "four", "five", "six" ,"four", "five", "six","two", "three", "four", "five", "six"];
const delDuplicates = [... new Set(array)]

console.log(delDuplicates)
// 输出
// ["one", "two", "three", "four", "five", "six"]

11、使用逻辑&&或||来做条件判断

const input = 2
input === 5 && console.log("input 值等于5")
input === 5 || console.log("input 值不等于5")

// 也可以用来赋予默认值
function defaultsTo5(arg){
  arg = arg || 5; // 如果arg在函数调用时没有设置,或是为null,arg将被赋予默认值5
 console.log(arg)
}

let arg1 = 2;
let arg2 = null;

defaultsTo5(arg1) // 2
defaultsTo5(arg2) // 5

12、三元操作符

使用三元操作符来替代if..elseif..elseif

function temperature(temp){
  return (temp > 9 || temp < 35.5) ? "去看医生!"
        : (temp < 37.5 && temp > 36.5) ? "出去嗨!"
        : (temp <= 39 && temp >= 35.5) ? "休息一下吧!"
        : ""
}

console.log(temperature(38)) // 休息一下吧
console.log(temperature(36)) // 休息一下吧
console.log(temperature(39.1)) // 去看医生!
console.log(temperature(35.1)) // 去看医生!
console.log(temperature(37)) // 出去嗨!

希望以上的信息能帮到大家,愉快码代码!

你可能感兴趣的:(2021-12-25 每个前端工程师都应该知道的12个重要的Javascript函数)