报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

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

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

关注

评论

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

全链路压测:影子库与影子表之争

阿里巴巴中间件

阿里云 云原生 全链路压测 影子

windows下设置TortoiseGit客户端连接git不用每次输入用户名和密码

乌龟哥哥

7月月更

Java 9 中的字符串(String)压缩的改进

HoneyMoose

electron添加SQLite数据库

空城机

sqlite Electron 7月月更

iOS基础--属性(setter方法 、getter方法、点语法、@property)

NewBoy

前端 移动端 iOS 知识体系 7月月更

【愚公系列】2022年7月 Go教学课程 005-变量

愚公搬代码

7月月更

Salesforce 容器化 ISV 场景下的软件供应链安全落地实践

阿里巴巴中间件

阿里云 容器 云原生 安全

Nginx 主机配置文件中如何配置能够支持 IPv4 和 IPv6

HoneyMoose

Qt 实现容器的DELETE的方式

小肉球

qt 7月月更

算法入门很简单:算法题的破解之道上篇

宇宙之一粟

算法 7月月更

LinkedBlockingQueue源码分析-初始化

zarmnosaj

7月月更

想要在Linux中只显示隐藏文件,用对ls就可以实现

wljslmz

Linux 运维 7月月更

自律,提升自制力原来也有方法

沃德

程序员 7月月更

简单介绍一下闭包及它的一些应用场景

是乃德也是Ned

7月月更

AI人脸编辑让Lena微笑

逝缘~

华为云 AI Gallery 7月月更

如何在博客中添加Aplayer音乐播放器

echeverra

前端

Android 面试知识点

沃德

android 程序员 7月月更

Qt|多个窗口共有一个提示框类

中国好公民st

qt 7月月更

一个酷酷的“幽灵”控制台工具

为自己带盐

C# 控制台 7月月更

鸿蒙智联汽车【1.0】

坚果

HarmonyOS OpenHarmony 7月月更

一个开发者自述:我是如何设计针对冷热读写场景的 RocketMQ 存储系统

阿里巴巴中间件

阿里云 RocketMQ 云原生编程挑战赛

《HarmonyOS实战—入门到开发,浅析原子化服务》

攻城狮杰森

操作系统 HarmonyOS 7月月更

Android自定义TextView实现高度和宽度,解决字体适配问题

芝麻粒儿

Android Studio TextView 7月月更

Ubuntu22.04 源码安装Python3.10

IT蜗壳-Tango

7月月更

async / await

Jason199

Async await 7月月更

【LeetCode】 解密消息Java题解

Albert

LeetCode 7月月更

科普达人丨一文弄懂什么是云计算?

阿里云弹性计算

云计算 阿里云 虚拟化 神龙架构 IT资源利用

OpenSergo 即将发布 v1alpha1,丰富全链路异构架构的服务治理能力

阿里巴巴中间件

阿里云 微服务 云原生 云原生开源 OpenSergo

当我们谈论不可变基础设施时,我们在谈论什么

阿里巴巴中间件

阿里云 容器 云原生 托管

基于华为云IOT设计智能称重系统(STM32)

DS小龙哥

7月月更

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