写点什么

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

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

关注

评论

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

这款开源软件绝了!1分钟即可打造了一个”黑客范“终端~

编程菌

Java 编程 程序员 项目 计算机

从一线城市回到三四线城市的第四个月

布衣骇客

回忆 个人总结 生活随想

「从零开始学SpringBoot」—如何开始使用?

java小李

maven Sprint Boot

弯道超车!阿里甩出Spring Security宝典我粉了

java小李

java 14 Sprin

区块链技术在产品溯源领域的应用

CECBC

百度AI师资培训兰州站启动 社会科学家的第一节人工智能课来了!

百度大脑

人工智能 启蒙 教室

架构实战营 - 模块 3 - 外包学生管理系统架构文档

蔸蔸

最新流行的6大优秀DevOps工具

java小李

java 14 puppeteer

编辑器看看

strive

编辑器

使用Docker在无网络环境下搭建深度学习环境

白日梦想家

中国信通院发布2021年首批“可信AI成果” 百度摘取5项大奖

百度大脑

人工智能

插件编排在 Apache APISIX 中的应用与实践

API7.ai 技术团队

lua 开源 网关 APISIX

21道最新Java面试题剖析(数据库+JVM+微服务+高并发)

java小李

dubbo Spirng

他是因为什么,能在半年内从菜鸟学生成为大厂收割机?

Java架构师迁哥

“普通本科Java程序员,如何五年存够80万买房?就靠这选择!”

java小李

java 14

降低“美丽成本”,区块链助力化妆品行业数字化转型

旺链科技

区块链 数字化转型 化妆品行业

模块三

泰戈

百度人脸离线识别SDK安卓版升级指南

百度大脑

人工智能 升级迭代

下一个颠覆的领域:区块链如何影响审计行业?(上)

CECBC

iOS底层面试题(下篇)

程序员 面试 ios开发

左晖:凭一己之力改变了一个行业

石云升

思维模型 诚信 7月日更

当面试官问到:《MySQL数据库的锁机制》该如何拿分?

java小李

spring Boot Starter

四面字节跳动,终于拿下1-2级offer :Redis+分布式+微服务+算法+网络

Java 程序员 架构 面试 计算机

详解TCP协议与UDP协议的区别

Linux服务器开发

网络协议 Linux服务器开发 Linux后台开发 TCP协议 UDP协议

ipfs矿机最新消息?星际联盟矿机怎么样?

区块链 fil ipfs矿机 星际联盟

Git提交信息规范化

admin

git flow git cherry-pick Git Commit git 规范

云计算深度挖掘“创新潜力”,北鲲云深耕生命科学领域

北鲲云

MySQL高频面试题的灵魂拷问

java小李

MySQL

降低“美丽成本”,区块链助力化妆品行业数字化转型

CECBC

数字化成潮流,运维为啥也热了?

ToB行业头条

科技互联网

万万没想到,阿里巴巴被挂后,还能获得内推名额,五面口碑一举拿下offer

Java 编程 程序员 架构 面试

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