写点什么

10 个实用的 JS 技巧

  • 2020-06-09
  • 本文字数:1100 字

    阅读完需:约 4 分钟

10个实用的JS技巧

将 arguments 对象转换为数组

arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。


与其他数组不同,这里我们可以访问值并获得长度(length),但是不能在其上使用其他数组方法。


幸运的是,我们可以将其转换为常规数组:


var argArray = Array.prototype.slice.call(arguments);
复制代码

对数组中的所有值求和

我一开始想到的是使用一个循环,但是那样会很浪费。


var numbers = [3, 5, 7, 2];var sum = numbers.reduce((x, y) => x + y);console.log(sum); // returns 17
复制代码

条件短路

我们有以下代码:


if (hungry) {    goToFridge();}
复制代码


我们可以进一步简化代码,同时使用变量和函数:


hungry && goToFridge()
复制代码

对条件使用或(OR)逻辑

我以前在函数开始时声明变量,只是为了避免在出现意外错误时遇到 undefined。


function doSomething(arg1){    arg1 = arg1 || 32; // if it's not already set, arg1 will have 32 as a default value}
复制代码

逗号运算符

逗号运算符(,)用来计算其每个操作数(从左到右)并返回最后一个操作数的值。


let x = 1;x = (x++, x);console.log(x);// expected output: 2x = (2, 3);console.log(x);// expected output: 3
复制代码

使用 length 调整数组大小

你可以调整大小或清空数组。


var array = [11, 12, 13, 14, 15];console.log(array.length); // 5array.length = 3;console.log(array.length); // 3console.log(array); // [11,12,13]array.length = 0;console.log(array.length); // 0console.log(array); // []
复制代码

使用数组解构来交换值

解构赋值语法是一种 JavaScript 表达式,可以将数组中的值或对象中的属性解包为不同的变量。


let a = 1, b = 2[a, b] = [b, a]console.log(a) // -> 2console.log(b) // -> 1
复制代码

随机排列数组中的元素

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(list.sort(function() {    return Math.random() - 0.5}));// [4, 8, 2, 9, 1, 3, 6, 5, 7]
复制代码

属性名称可以是动态的

你可以在声明对象之前分配一个动态属性。


const dynamic = 'color';var item = {    brand: 'Ford',    [dynamic]: 'Blue'}console.log(item);// { brand: "Ford", color: "Blue" }
复制代码

过滤唯一值

对于所有 ES6 爱好者而言,我们可以使用带有 Spread 运算符的 Set 对象来创建一个仅包含唯一值的新数组。


const my_array = [1, 2, 2, 3, 3, 4, 5, 5]const unique_array = [...new Set(my_array)];console.log(unique_array); // [1, 2, 3, 4, 5]
复制代码

总结

  • 履行好自己的责任比提升效率要重要的多。

  • 你的网站需要兼容所有浏览器。

  • 你可以使用 Endtest或其他类似工具来确保兼容性。


你还有其他 JavaScript 技巧或窍门要分享吗?

英文原文

10 Practical JavaScript Tricks


2020-06-09 14:472224
用户头像
小智 让所有人认同的文字称不上表达

发布了 408 篇内容, 共 392.4 次阅读, 收获喜欢 1983 次。

关注

评论

发布
暂无评论
发现更多内容

cad2024破解版Autodesk AutoCAD 2024下载安装教程-Mac/win

理理

MestReNova 14:精准解析NMR数据,助力科研突破!

Rose

Databend 2024 年度总结:乘势而上,创新无止境

Databend

年度总结

代码编辑器 sublime text破解安装包 附sublime text汉化补丁

Rose

苹果Mac远程管理Royal TSX使用教程

Rose

JimuReport 积木报表 v1.9.3发布,免费可视化报表

JEECG低代码

数据可视化 报表 报表工具 报表打印 大屏设计器

Java分析工具 JProfiler for mac注册码及安装教程

Rose

iZotope音乐制作 Ozone Advanced 11直装版下载安装

Rose

定制 CRM 的4个真实用户案例(帮你选择更灵活CRM产品)

NocoBase

开源 CRM 定制化 CRM系统 案例研究

Fluent Editor v3.25.0 正式发布!2025年第一个版本,增加标题列表导航、分隔线、多图多文件上传等实用特性

OpenTiny社区

开源 前端 富文本 OpenTiny

苹果Mac版SVN客户端 SnailSVN Pro 免激活版

Rose

Typeeto for Mac:让Mac键盘秒变蓝牙键盘,跨设备输入更高效

Rose

AIP智能体平台:赋能软件开发与运行的新时代

大东(AIP内容运营专员)

人工智能

WebGL在医学领域的应用

北京木奇移动技术有限公司

软件外包公司 webgl开发 医学领域

Moho Pro 14 for Mac(专业的2D动画制作软件)中文版

Mac相关知识分享

人工智能色彩匹配视频调色AE/PR插件 AI Color Match for Mac v1.3.1激活版 兼容AE2025

理理

低代码用户体验设计,极致易用不是梦!

高端章鱼哥

Set A Light 3D Studio:打造专业级3D灯光布局,摄影布光从此得心应手

Rose

百度视频搜索架构演进

百度Geek说

百度 架构 视频

AIP智能体平台:构建未来工作的智慧管家

大东(AIP内容运营专员)

人工智能

企业流程自动化:AI技术加持,解锁高效运营

合合技术团队

人工智能 AI 自动化 数据治理

KubeEdge SIG AI 产业革新与应用:跨越边界,迎向未来

华为云原生团队

云计算 容器 云原生

Mac苹果版-特殊编码加速输出渲染AE/PR/AME插件 AfterCodecs v1.11.2激活版 兼容AE2025

理理

MIT、OpenAI震撼力作!软件测试行业如何迎接未来挑战?

测试人

软件测试

探索AIP智能体平台:构建未来业务超级自动化

大东(AIP内容运营专员)

人工智能

pd19虚拟机永久许可证 Parallels Desktop 19下载安装

Rose

转转平台IM系统架构设计与实践(一):整体架构设计

JackJiang

即时通讯;IM;网络编程

DeepSeek 最新推理模型 R1-Lite:一场数学题的死胡同之旅

测试人

软件测试

玩具礼品行业怎么定义?什么场景下要用堡垒机?

行云管家

网络安全 堡垒机 玩具礼品行业

macOS笔记神器!GoodNotes 5 苹果中文免激活版下载

理理

观测云产品更新 | 日志索引、Pipeline、场景图表等优化

观测云

产品迭代

10个实用的JS技巧_大前端_Zander Shirley_InfoQ精选文章