分享32个JavaScript工作中常用的代码片段

头像
秦声
    阅读 5 分钟
    English
    31
    头图

    前言

    初衷： 整理一下工作中常用的JavaScript小技巧分享给大家，希望能帮助到各位小伙伴们，在工作中提升开发效率。

    适合人群： 前端初级开发，大佬绕道。

    1.函数参数默认值

    在Es6之前，我们要写参数默认值的话，还需要在函数体内写一堆判断逻辑，而Es6之后新出参数默认值语法，我们来看一下。

    function person(name, age, sex = "male") {
    console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)

    2.数组求和使用reduce

    之前我们都使用for循环进行遍历求和，也可以使用reduce方法进行求和，简洁代码。

    let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)

    3.废弃if else侠

    我们写判断时，都会使用if else但当业务越来越庞大时有好几种状态时，这样代码太冗余了，我们做一下简化。

    if(xxx = 1) {
    xxx = "启用"
} else if(xxx = 2) {
    xxx = "停用"
}
// ...省略
// 废除以上写法

let operation = {
    1: "启用",
    2: "停用"
    3: "注销",
    4: "修改"
    5: "详情"
}
xxx = operation[status] // 代码简洁清晰

    4.交换变量

    在Es6之前，我们交互变量值时得使用第三个变量，当Es6出现解构赋值时，我们可以非常快速的交换变量。

    let x = 10;
let y = 20;
[x, y] = [y, x];

    5.数组去重

    在Es6之前，我们数组去重都使用for循环遍历或者indexOf等，但Es6出现了Set结构，非常便捷。

    不明白Set结构可以看我上一篇文章哦 《理解数据结构之Set，只要5分钟！》
    let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434

    6.快速获取URL地址栏参数

    有时候我们想获取地址栏上参数，都是手写方法，有一个Api实用的方法来处理 URL 的查询字符串。

    let params = new URLSearchParams(location.search);
params.get("xxx") // 获取地址栏参数

    7.生成随机Id

    有些情况下我们想要获取随机不重复的字符串，就可以使用如下方法

    Math.random().toString(36).substr(2)

    8.获取对象key键值

    快速获取对象的key值

    let person = {name: "蛙人", age: 24};
console.log(Object.keys(person)) // ["name", "age"]

    9.获取对象value值

    快速获取对象的value值

    let person = {name: "蛙人", age: 24};
console.log(Object.values(person)) // ["蛙人", 24]

    10.模板字符串表达式

    在Es6之前，我们字符串拼接变量，都是使用 + 号来拼接，这样拼接还好，要是拼接html标签就非常的难受，稍不注意就报错符号问题。Es6出现了模板字符串使用 ``，然后${}里面绑定变量，使我们开发非常的便捷。

    let name = "蛙人"
console.log(`hello ${name}`)
console.log(`<p>${name}</p>`)

    11.获取对象里指定的值

    使用对象解构获取对象值非常简洁，不用在向传统那样使用.语法一个一个去获取

    const person = {name: "蛙人", age: 24, sex: "male"};
let { age, sex } = person
console.log(age, sex) // 24 male

    12.快速将字符串转换为数组

    不再使用字符串split方法，使用扩展运算符可以快速转换为数组。

    let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]

    13.使用三目运算判断值

    如果只有两种状态的情况强烈推荐使用三目运算，抛弃if else。

    let status = 1;
status = status == 1 ? "男" : "女"

    14.??运算符

    ??运算符只有前面的值是undefined or null才会执行，工作中有的情况下使用，我们来看一下。

    let status = undefined;
let text = status ?? "暂无"
console.log(text) // 暂无

    15.?.运算符

    ?.运算符这在有时候处理对象时非常有用，看下面案例，person.name返回undefined然后在调用toString这时肯定会报错，这时使用?.运算符就不会产生错误，?.运算符是只有在当值不是undefined时才会调用toString方法。

    let person = {}
console.log(person.name.toString()) // 报错
console.log(person.name?.toString()) // undefined

    16.~~双非运算符

    ~~双非运算符可以用于向下取整。

    console.log(~~4.3) // 4

    17.合并对象

    使用Es6新增方法Object.assign，合并对象如果对象里面有重复的值，则后面覆盖前面，可以接收无限参数。在工作中也是经常使用。

    let person = {name: "蛙人", age: 24}
let obj = Object.assign({}, person)
console.log(obj) // {name: "蛙人", age: 24}

    18.数组里的值是否满足一个要求

    当前方法只要数组里面有一个值符合需求，就返回true，否则false。

    let list = [1,2,2,2,2,2]
let res = list.some(item => item > 1)
console.log(res) // true

    19.数组里的值是否都满足要求

    我们之前使用for遍历在判断当前数组里的值是否全符合要求，还要声明一个变量来进行累计，直接使用every当全部满足需求时返回true，否则返回false

    let list = [1,2,2,2,2,2]
let res = list.every(item => item > 1)
console.log(res) // false

    20.随机打乱数组顺序

    有时我们场景有需要将一个数组顺序进行打乱。

    let list = [1,2,'蛙人', 1, 34, 3, 12]
let res = list.sort(() => Math.random() - 0.5)
console.log(res)

    21.事件委托

    之前我们有100个li元素，都要绑定一个onclick事件，这样性能不怎么好，我们可以通过事件委托实现。

    ul.on("click", "li", e => {
   ....省略 操作
})

    22.检测值是否为数组

    let arr = []
console.log(Array.isArray(arr)) // true
console.log(Object.prototype.toString.call(arr) == "[object Array]") // true

    23.伪数组转换为真数组

    伪数组不能调用真数组对象上的方法，所以得将伪数组转换为真数组，获取js元素是伪数组。

    document.querySelectAll("div") // NodeList[div, div, div, div]
[...document.querySelectorAll('div')] // 转换为真数组
Array.from(document.querySelectorAll('div')) // 转换为真数组

    24.快速获取时间戳

    console.log(+ new Date())
console.log(Date.now())

    25.获取一个值的下标

    在Es6之前，我们只知道使用indexOf方法去获取下标，Es6之后还有一个方法哦，如果找到该值返回当前值的下标，找不到返回 -1

    let colors = ["red", "blue", "green"]
function getIndex(val) {
    return colors.findIndex(i => i == val)
}
getIndex("blue") // 1

    26.数组转换为对象

    在有的情况需要将数组转换为对象，可以这样做。

    let person = ["蛙人", 24, "male"]
let obj = {}
person.forEach(item => (obj[item] = item))

    27.是否为奇偶数

    let num = val => val % 2 == 0;
num(10) // ture 偶数
num(1) // false 奇数

    28.检测当前页面是否被隐藏

    监测当前页面是否被隐藏，当切换页面时显示true, false就是打开状态。一般在工作用主要用到用户在页面停留了多长时间。

    document.addEventListener("visibilitychange", function() {
   console.log(document.hidden);
});

    29.去除当前数组里的false值

    把数组里面的假值过滤掉。

    let list = ["", false, 1, null, undefined, "蛙人", 24]
let res = item => item.filter(Boolean)
console.log(res(list))

    30.this指向

    有时我们不想this是这个值，所以就要改变this指向，改变this指向有很多种，箭头函数、bind、apply、call、我这里就演示一种，小伙伴可以根据不同业务场景来选择使用哪种方法！

    let person = {name: "蛙人"}
ul.onclick = (function(e) {
    console.log(this.name )
}).bind(person)

    31.判断地址是否有效

    function IsUrl(val) {
    try {
        if (new URL(val)) {
            return true        
        }
    } catch(e) {
        return false
    }
}
IsUrl("https://www.baidu.cn") // true
IsUrl("www.baidu.cn") // false

    32.使用Map使数组直接返回结果

    有时我们处理数组时，想直接返回处理完的结果，而不是在重新组合一个数组，这时Map就登场了。

    let person = [10, 20, 30]
function fn(item) {
    return item + 1
}
let res = person.map(fn)
console.log(res) // [11, 21, 31]

    感谢

    谢谢阅读，如有帮助请点个关注、收藏吧

    觉得有帮助可以关注前端娱乐圈公众号，每天为你推送一篇小知识

    大家也可以加我微信交个朋友，可以找我聊天或拉你进技术交流群

    javascript前端
    秦声
    334 声望2.4k 粉丝
    « 上一篇
    爆肝一周，写给初级前端快速转TypeScript指南
    下一篇 »
    这些操作删除console.log代码，你都知道吗

    引用和评论

    推荐阅读
    头像
    一枚普通前端平淡无奇的一年 - 2021年终总结

    秦声赞 2阅读 6.8k评论 2

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新