写点什么

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

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

关注

评论

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

C++的异常类型与多级catch匹配

芯动大师

ARTS打卡第5周

苏籍

国产GPT到底哪家强?看看专家怎么选

豆哥

AI 评测 ChatGPT 文心一言 国产大模型

打工人要的安慰,GPT 给不了

豆哥

AI 打工人 ChatGPT 工具人 自我意识

我设计的专注背单词小程序更新了,欢迎交流功能UI设计

花十君

技术 产品设计 用户体验 页面布局 色彩搭配

学习 CodeWhisperer 的一些总结

亚马逊云科技 (Amazon Web Services)

Java 人工智能

Python 基本操作

小万哥

Python 程序员 软件 后端 开发

少林寺、玄武湖景区签约、鲸鱼陪诊上架元服务,鸿蒙生态共繁荣

最新动态

在HTML里,attribute和property有什么区别?

Lee Chen

前端

测试团队绩效考核的关键指标

老张

OKR 绩效考核

使用VirtualBox新建虚拟机CentOS

衣谷

centos virtualbox

适合自身业务的HTTP代理有哪些因素决定?

巨量HTTP

代理IP http代理

金九银十!GitHub星标137k霸榜,国外友人直呼太卷了!

程序员万金游

Java 面试 #java #程序员 #Java面试题 #Mysql

Programming abstractions in C阅读笔记:p161-p165

codists

华为828 B2B企业节,开启企业数字化转型新篇章

YG科技

开启企业数字化转型新篇章,华为云828企业节来了

YG科技

Nautilus Chain 引入 $NAUT 通证,延续 $ZBC 的价值

鳄鱼视界

中国GPT用户的第三阶段:揭秘你不知道的道与术

豆哥

ChatGPT 文心一言

Arbitrum 公链 arb 代币质押项目挖矿系统开发

l8l259l3365

2023-09-16:用go语言,给你一个整数 n 和一个在范围 [0, n - 1] 以内的整数 p , 它们表示一个长度为 n 且下标从 0 开始的数组 arr , 数组中除了下标为 p 处是 1

福大大架构师每日一题

福大大架构师每日一题

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