【技巧】JS代码这么写,前端小姐姐都会爱上你

简介: 本文介绍了JavaScript编程中的实用技巧,包括解构赋值的多种妙用、数组操作技巧及常用JS功能片段。解构赋值部分涵盖短路语法防错、深度解构及默认值赋值;数组技巧包括按条件添加数据、获取最后一个元素及使用`includes`优化`if`语句;常用功能片段则涉及URL参数解析、页面滚动回顶部及获取滚动距离等。通过这些技巧,提升代码质量和效率。

前言

🍊缘由

JS代码小技巧,教你如何守株待妹

🍍你想听的故事:

顶着『前端小王子』的称号,却无法施展自己的才能

想当年本狗赤手空拳打入前端阵地,就是想通过技术的制高点来带动前端妹子。奈何时不待我,前端妹子成了稀有资源,只剩下抠脚大汉前端大叔。

秉承没有妹子也得继续学习的态度,本狗将实际代码编写中J使用技巧总结。分享给小伙伴们,希望这些姿势知识 能够成为吸引妹子的引路石。

正文

一.JS解构赋值妙用

1.采用短路语法防止报错

解构时加入短路语法兜底,防止解构对象如果为 undefined 、null 时,会报错

const user = null;
// 短路语法,如果user为undefined 、null则以{}作为解构对象
const {
   name, age, sex} = user || {
   };

举例🌰

通过接口获取用户user对象,解构对象信息

❌错误示例

未使用短路语法兜底,不严谨写法

// 模拟后端接口返回user为null时
const user = null;
const {
   name, age, sex} = user;
console.log("用户信息name=", name, "age=", age, "sex=", sex);

// 控制台直接报错
// Cannot destructure property 'name' of 'user' as it is null.

✅正确示例

使用短路语法兜底,严谨写法

// 模拟后端接口返回user为null时
const user = null;
// 加入短路语法,意思为如果user为空则以{}作为解构对象
const {
   name, age, sex} = user || {
   };
console.log("用户信息name=", name, "age=", age, "sex=", sex);

// 控制台打印
// 用户信息name= undefined age= undefined sex= undefined

2.深度解构

解构赋值可以深度解构:嵌套的对象也可以通过解构进行赋值

举例🌰

通过模拟接口获取用户user对象,解构user对象中联系人concat信息

// 深度解构
const user = {
   
    name:'波',
    age:'18',
    // 联系人
    concat: {
   
        concatName:'霸',
        concatAge:'20',
    },
};
const {
   concat: {
   concatName, concatAge}} = user || {
   };
console.log("用户联系人concatName=", concatName, "concatAge=", concatAge);

// 控制台打印
// 用户联系人concatName= 霸 concatAge= 20

3.解构时赋值默认值

解构赋值时可以采取默认值填充

举例🌰

通过模拟接口获取用户user对象,解构user对象时,没有dept科室字段时,可以加入默认值

// 解构时设置默认值
const user = {
   
    name:'波',
    age:'18',
};
const {
   name, age, dept = '信息科'} = user || {
   };
console.log("用户信息name=", name, "age=", age, "dept=", dept);

// 控制台打印
// 用户信息name= 波 age= 18 dept= 信息科


二.数组小技巧

1.按条件向数组添加数据

根据条件向数组中添加数据

举例🌰

设置一个路径白名单数组列表,当是开发环境添加部分白名单路径,若生产环境则不需要添加


// 不是生产环境
const isEnvProduction = false;

// 基础白名单路径
const baseUrl = [
    '/login',
    '/register'
]

// 开发环境白名单路径
const devUrl = [
    '/test',
    '/demo'
]
// 如果是生产环境则不添加开发白名单
const whiteList = [...baseUrl, ...(isEnvProduction? [] : devUrl)];

console.table(whiteList)


// 控制台打印
// Array(4) ["/login", "/register", "/test", "/demo"]

// 是生产环境
const isEnvProduction = true;

// 基础白名单路径
const baseUrl = [
    '/login',
    '/register'
]

// 开发环境白名单路径
const devUrl = [
    '/test',
    '/demo'
]
// 如果是生产环境则不添加开发白名单
const whiteList = [...baseUrl, ...(isEnvProduction? [] : devUrl)];

console.table(whiteList)
// 控制台打印
// Array(2) ["/login", "/register"]

2.获取数组最后一个元素

给到一个数组,然后访问最后一个元素

举例🌰

获取一个数组中最后一个值

const arr = [1, 2, 3, 4];
// 通过slice(-1) 获取只包含最后一个元素的数组,通过解构获取值
const [last] = arr.slice(-1) || {
   };
console.log('last=',last)

// 控制台打印
// last= 4

3.使用 includes 优化 if

灵活使用数组中方法includes可以对if-else进行优化

举例🌰

如果条件a值是 1,2,3时,打印有个男孩叫小帅

一般写法

const a = 1;

// 基本写法
if(a==1 || a==2 || a==3){
   
    console.log('基本写法:有个男孩叫小帅');
}

// 优化写法
if([1, 2, 3].includes(a)){
   
    console.log('优化写法:有个男孩叫小帅');
}

// 控制台打印
// 基本写法:有个男孩叫小帅
// 优化写法:有个男孩叫小帅


三.JS常用功能片段

1.通过URL解析搜索参数

通过页面URL获取解析挂参参数,适用于当前页面需要使用到URL参数时解析使用

JavaDog程序狗

一个低端小气没档次的渣男程序狗

公众号

// 通过URL解析搜索参数

const getQueryParamByName = (key) => {
   
    const query = new URLSearchParams(location.search)
    return decodeURIComponent(query.get(key))
}

const url = "http://javadog.net?user=javadog&age=31"

// 模拟浏览器参数(此处是模拟浏览器参数!!!)
const location = {
   
    search: '?user=javadog&age=31'
}

console.log('狗哥名称:', getQueryParamByName('user'));
console.log('狗哥年龄:', getQueryParamByName('age'));

// 控制台打印
// 狗哥名称: javadog
// 狗哥年龄: 31

2.页面滚动回到顶部

页面浏览到某处,点击返回顶部

// 页面滚动回到顶部
const scrollTop = () => {
   
    // 该函数用于获取当前网页滚动条垂直方向的滚动距离
    const range = document.documentElement.scrollTop || document.body.scrollTop
    // 如果大于0
    if (range > 0) {
   
        // 该函数用于实现页面的平滑滚动效果
        window.requestAnimationFrame(scrollTop)
        window.scrollTo(0, range - range / 8)
    }
}

3.获取页面滚动距离

获取页面滚动距离,根据滚动需求处理业务

// 该函数用于获取当前页面滚动的位置,可选参数target默认为window对象
const getPageScrollPosition = (target = window) => ({
   
    // 函数返回一个包含x和y属性的对象,分别表示页面在水平和垂直方向上的滚动位置。函数内部通过判断target对象是否具有pageXOffset和pageYOffset属性来确定滚动位置的获取方式,如果存在则使用该属性值,否则使用scrollLeft和scrollTop属性。
    x: target.pageXOffset !== undefined ? target.pageXOffset : target.scrollLeft,
    y: target.pageYOffset !== undefined ? target.pageYOffset : target.scrollTop,
})

getPageScrollPosition()

总结

这篇文章主要介绍了JavaScript编程中的几个实用技巧,包括解构赋值的妙用、数组操作以及一些常用的JS功能片段,总结如下:

解构赋值妙用

  • 短路语法防止报错:在解构可能为undefined或null的对象时,使用短路语法(|| {})来避免错误。
  • 深度解构:可以解构嵌套的对象,方便地获取深层属性。
  • 解构时赋值默认值:在解构时可以为未定义的属性提供默认值。

数组小技巧

  • 按条件向数组添加数据:根据条件动态地决定是否向数组添加特定元素。
  • 获取数组最后一个元素:使用slice(-1)获取数组的最后一个元素。
  • 使用includes优化if语句:用includes检查元素是否在数组中,简化条件判断。

JS常用功能片段

  • 通过URL解析搜索参数:创建函数解析URL的查询参数,便于获取URL中的参数值。
  • 页面滚动回到顶部:实现页面平滑滚动回顶部的函数。
  • 获取页面滚动距离:获取页面滚动位置的函数,可用于处理滚动相关的业务逻辑。

🍯猜你喜欢

文章推荐

【工具】珍藏免费宝藏工具,不好用你来捶我

【插件】IDEA这款插件,爱到无法自拔

【规范】看看人家Git提交描述,那叫一个规矩

【工具】用nvm管理nodejs版本切换,真香!

【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目

【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

【模块分层】还不会SpringBoot项目模块分层?来这手把手教你!

目录
相关文章
|
16天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
6月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1207 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
91 1
|
4月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
6月前
|
JavaScript 前端开发 API
|
5月前
|
自然语言处理 前端开发 IDE
用通义灵码全新智能体+MCP实现从设计稿到前端代码,个人免费用
通义灵码全新升级,发布国内首个支持“自主决策+工具链闭环”的编程智能体,面向个人免费!新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区(涵盖2400+服务)及长期记忆能力。用户可通过IDE插件使用,兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码,简化开发流程。探索链接:[通义灵码官网](https://lingma.aliyun.com/)。
|
6月前
|
前端开发 JavaScript 安全
|
4月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
72 0
|
6月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
452 9
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
217 8