写点什么

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

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

关注

评论

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

交互式产品原型设计工具 Axure RP 9 mac中文破解版 含永久密钥

Rose

Flink CDC 在阿里云 DataWorks 数据集成入湖场景的应用实践

阿里云大数据AI技术

大数据 阿里云 数据集成 Dataworks FFA

技术干货|Altair HyperWorks 二次开发与 Python 重构仿真新体验

Altair RapidMiner

Python 重构 开发语言 前处理软件

音视频互动APP的技术难点

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

音视频开发 软件外包公司 音视频APP

Three-Body Technology Lost Soul for mac(三体洞箫软件音源) 激活版

Rose

综合治理系统(源码+文档+部署+讲解)

深圳亥时科技

探索生成式AI与低代码结合的无限可能

天津汇柏科技有限公司

低代码 生成式AI

未来技术路线选择:低代码开发还是传统开发?

秃头小帅oi

高效文件查找工具ProFind for Mac中文激活版

小玖_苹果Mac软件

低代码开发中的创新实践

伤感汤姆布利柏

谷歌访问助手(谷歌浏览器插件)Mac版

Rose

2024年最受欢迎的5个Go框架

王中阳Go

后端 go框架

Numa初识

天翼云开发者社区

服务器 构架 NUMA

阿里云 EMR Serverless Spark 在微财机器学习场景下的应用

阿里云大数据AI技术

大数据 数据采集 分布式训练 EMR

音视频互动APP的成本

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

音视频开发 软件外包公司 音视频APP

人工智能丨DeepSeek-V3:推理速度飙升,开源模型新王者诞生!

测试人

人工智能 软件测试

Volcano v1.11 重磅发布!开启AI与大数据的云原生调度新纪元

华为云原生团队

云计算 开源 容器 云原生

PlistEdit Pro for Mac(Plist编辑器)v1.9.7直装版

Rose

音视频互动APP的开发框架

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

软件外包公司 音视频APP 音视频编解码

提示词工程的十大认知误区

阿里技术

提示词

火山引擎数据飞轮2.0助力中信银行,用“AI”开启新年新气象

字节跳动数据平台

华为Mate 70的麒麟9020芯片是谁生产的?

博文视点Broadview

Type Fu for Mac(打字练习)v4.8.0激活版

Rose

专业级别的视频编辑软件Adobe Premiere Pro 2025 for Mac中文激活

小玖_苹果Mac软件

3D渲染和动画制作 KeyShot 2024.3浮动许可证

Rose

DeepSeek 爆火全球,昇腾让DeepSeek上线加速

极客天地

【YashanDB知识库】对比Oracle和YashanDB对象不一致的方法

YashanDB

数据库 yashandb

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