写点什么

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:472184
用户头像
小智 让所有人认同的文字称不上表达

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

关注

评论

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

施工项目进度管理系统怎么选?9款工具评测

爱吃小舅的鱼

施工项目进度管理系统

Pencils Protocol 用户特权:DAPP持有者将长期获得生态空投

大瞿科技

鸿蒙开发案例:电子木鱼

zhongcx

CrossOver软件安装成功,但找不到为什么 crossover安装后找不到应用程序

禁止废话

容器 #Mac CrossOver Mac下载 苹果电脑使用 CrossOver 24

智能监控,精细分析:淘宝API赋能商家商品管理新境界

代码忍者

pinduoduo API API 性能测试

文献管理软件:EndNote 21(Win&Mac) 激活版

你的猪会飞吗

Photoshop 2025(PS2025)直装版

你的猪会飞吗

PS2025下载 PS2025破解版 Photoshop 2025下载

XMind for mac (XMind思维导图)中文版

Mac相关知识分享

Veritas Enterprise Vault 15.1 (Windows) - 自动捕获数据并归档信息

sysin

vault Veritas Enterprise

图解HashMap数据结构设计与应用案例

肖哥弹架构

Java 容器 数据结构

Scroll 生态首个 meme 项目 $Baggor,我们可以有哪些期待?

西柚子

Sophos Firewall v21 发布,新增功能概览

sysin

防火墙 sophos

VMware Aria Operations for Logs 8.18 发布,新增功能概览

sysin

vmware Aira Operations

MathType导数符号怎么打 MathType导数头上一点怎么打

禁止废话

数学 教程分享 MathType 导数 公式函数

如何挑选适合企业的项目进度工具?9款推荐

爱吃小舅的鱼

项目进度系统

专业视频编辑软件Final Cut Pro X for Mac(fcpx视频剪辑)

Mac相关知识分享

办公软件Microsoft 365 for Mac(原Office 365)

Mac相关知识分享

Pencils Protocol 用户福利,DAPP持有者将获 Scroll 生态空投

BlockChain先知

图解TreeMap数据结构设计与应用案例

肖哥弹架构

Java 容器 数据结构

Pencils Protocol 用户福利,DAPP持有者将获 Scroll 生态空投

股市老人

Windows Server 2022 中文版、英文版下载 (updated Oct 2024)

sysin

windows Server 2022

guitar pro可以制作简谱吗 guitar pro怎么编辑六线谱

禁止废话

五线谱 吉他学习 软件包 Guitar Pro8 Mac乐谱制作软件

Mac下的压缩包和Win看到的不一样怎么办 Mac压缩后Win电脑看文件名会乱码

禁止废话

#Mac 苹果电脑 解压缩工具 压缩软件 BetterZip 5

如何在2024选择8款项目进度跟踪系统

爱吃小舅的鱼

项目进度跟踪系统

Pencils Protocol 用户特权?持有 DAPP 将获 Scroll 生态空投!

石头财经

Docker启动容器报错:cannot allocate memory: unknown

百度搜索:蓝易云

我对智能体产品整体设计思路

软件工程师-罗小东

功能强大的虚拟机软件VMware Fusion Pro 13 for Mac

Mac相关知识分享

Pencils Protocol 用户特权:DAPP持有者将长期获得生态空投

加密眼界

深度解析阿里巴巴1688商品详情API返回的JSON数据结构

代码忍者

pinduoduo API API 性能测试

专业的矢量图形设计工具Sketch for mac

Mac相关知识分享

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