写点什么

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

发布了 410 篇内容, 共 409.0 次阅读, 收获喜欢 1986 次。

关注

评论

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

信息的表示与存储-整数的表示

引花眠

深度解读 Flink 1.11:流批一体 Hive 数仓

Apache Flink

大数据 flink 流计算 实时计算

不想被下载限速,教你自建属于自己的云盘!

小傅哥

小傅哥 云服务 云盘 在线网盘

【大厂面试01期】高并发场景下,如何保证缓存与数据库一致性?

NotFound9

Java MySQL 数据库 redis 后端

是公司养活了你,还是你养活了公司?

四猿外

生涯规划 程序员 个人成长

关于区块链的“去中心化”,90% 的人都搞错了

CECBC

CECBC 区块链技术 去中心化 专制

产品经理的商业能力

punkboy

程序人生 产品经理 商业 商业模式 商业价值

赢的境界 - 双赢思维

石云升

创业 创业心态 双赢思维

坏的开始是成功的一半

escray

iOS 动画 - 窗景篇(一)

柯烂

ios objective-c swift 移动应用 动画

【求锤得锤的故事】Redis锁从面试连环炮聊到神仙打架。

why技术

redis 分布式锁 分布式系统

[Redis] 你了解 Redis 的三种集群模式吗?

猴哥一一 cium

redis redis高可用 redis哨兵模式 群集安装

搞定 HTTP 协议(一):HTTP 与网络基础

零和幺

技术 大前端 HTTP

机器学习算法评估指标——2D目标检测

做技术BP的文案Gou

CPU的性能,编译器是这样压榨的!

GPU

算法 cpu 编译器 程序语言

深入理解ClassLoader

Skye

类加载 深入理解JVM ClassLoader

游戏夜读 | 2020周记(5.24-5.31)

game1night

java的时间利器:joda

毛佳伟🐳

Java

万字长文,助你吃透Eureka服务发现机制!

攀岩飞鱼

分布式 微服务 Eureka

除了直接看余额,谁更有钱还能怎么比(三)

石君

零知识证明 多方计算 同态加密

架构学习历程

从技术到管理,我在极客时间的成长历程

邓建春

深入理解ContextClassLoader

Skye

深入理解JVM ContextClassLoader

我的 Windows 利器

玄兴梦影

工具 Win

这些Java8官方挖的坑,你踩过几个?

牧码哥

Java 踩坑 加密 「Java 25周年」

匆忙的一周 ARTS第二周

困到清醒

Linux 自动化运维工具 ansible

杨仪军

Linux 运维自动化

MySQL实战笔记-事务隔离和MVCC

shiziwen

MySQL 学习 事务隔离级别

ARTS打卡 第2周

引花眠

ARTS 打卡计划

啪啪,打脸了!领导说:try-catch必须放在循环体外!

王磊

Java 性能优化 性能 java编程

深入理解JVM类加载机制

Skye

类加载 深入理解JVM

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