写点什么

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

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

关注

评论

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

集齐海外主流云平台,EMQ X Cloud 正式支持 Google Cloud Platform 部署

EMQ映云科技

IoT Google Cloud AIOT 云 原生云 CTO

重磅发布!百度飞桨获2021全球智博会产品金奖

百度大脑

人工智能

Alibaba iOS 工程架构腐化治理实践

阿里巴巴终端技术

ios 研发效能 客户端 架构治理

【IM开源推荐】前微信技术专家打造的开源的即时通讯组件OpenIM

OpenIM

软件测试工程师应该怎样规划自己

程序员阿沐

程序员 职业规划 软件测试 自动化测试 经验分享

北鲲云SaaS平台为生物制药研发进程带来“加速度”

北鲲云

花了3个小时解决了和异地女朋友一起看电影的需求(内附源码)

ZEGO即构

android 音视频 一起看电影

WorkPlus即时通讯软件,满足政企局域网办公需求

BeeWorks

观测云品牌正式亮相,携手中国信通院共推国内可观测性概念与技术发展!

观测云

博睿数据赋能数字化转型,用户体验升级需要有“温度”的技术

博睿数据

计算机操作系统学习笔记 | 进程与程序

Regan Yue

操作系统 9月日更

2021智博会全国区块链大赛暨首届“星火杯”区块链应用大赛正式启动

云计算,

围绕低代码开发存在的三个误解

低代码小观

程序员 低代码 企业管理 低代码开发平台 应用开发

财经违规自媒体集体扑街,必须打击违规自媒体账号

石头IT视角

WeTest21年焕新钜惠活动福利你领到了吗?

WeTest

【Vuex 源码学习】第五篇 - Vuex 中 Mutations 和 Actions 的实现

Brave

源码 vuex 9月日更

Alibaba 80k Star《Java面试突击手册》(全彩版)开源

Java 程序员 架构 面试 计算机

Javacv 音视频小工具 - 下载抖音视频

声网

Java 音视频 ffmpeg javacv

到底什么是区块链?是咋样的运营原理

CECBC

使用分布式锁的正确姿势

张大彪

分布式锁

2021年8月券商App行情刷新及交易体验评测报告

博睿数据

坚持客户第一!

鉴释

产品研发 静态代码分析

ONNX 浅析:如何加速深度学习算法工程化?

拍乐云Pano

人工智能 深度学习 音视频

开源应用中心|这款小而强大的开源博客程序,简直让人爱不释手!

开源

相约重庆,2021 DEMO CHINA创新中国峰会倒计时六天

创业邦

自动化驱动的高可用网络:爱奇艺B2网络流量自动调度系统建设实践

爱奇艺技术产品团队

流量

区块链是如何运作的、是如何防止被篡改的?

CECBC

Android如何用代码执行shell命令

Changing Lin

9月日更

【OpenIM原创】IM服务端docker、源码、集群部署 非常实用

OpenIM

让全链路压测变得更简单!Takin2.0重磅来袭!

TakinTalks稳定性社区

40 个 SpringBoot 常用注解:让生产力爆表

Java 面试 框架 Spring Boot 2

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