写点什么

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

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

关注

评论

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

虾皮Shopee API商品详情返回值全面解析

技术冰糖葫芦

API API Explorer API boy pinduoduo API

专家解读 | NIST网络安全框架(1):框架概览

权说安全

网络安全

人工智能ChatGPT带你领略晋级之路

测吧(北京)科技有限公司

测试

低代码优于无代码?

禅道项目管理

软件开发 低代码 知识分享 无代码 开发人员

阿里实习生:面试阿里其实并没有那么难。

王中阳Go

Go golang 面试题 大厂面经

币安链市值机器人

区块链技术

ChatGPT4 Turbo 如何升级体验?官网如何使用最新版GPT-4 Turbo?

蓉蓉

GPT-4 Turbo

OpenTiny Vue 3.15.0 正式发布,推出全新的 Charts 图表组件底座,功能更强、图表更丰富!

OpenTiny社区

Vue Web 前端开发 开源组件库

教你用Perl实现Smgp协议

华为云开发者联盟

Linux 开发 华为云 华为云开发者联盟

重磅!点量云流渲染服务七天试用版发布!

点量实时云渲染

云渲染 实时云渲染 点量云流 七天试用

技术同学的职场成长晋升指南

老张

职场成长 职场晋升

多优先级线程池实践

FunTester

深入了解Appium:Capability 高级配置技巧解析

霍格沃兹测试开发学社

人工智能ChatGPT带你领略晋级之路

测试人

软件测试

淘宝搜索API返回值解析与关键字搜索背后的数据逻辑

技术冰糖葫芦

API Explorer API boy API】 pinduoduo API

“聊”原烈火,从“形”出发——能效电气全国首家2.0形象店盛大开业,引领行业新风尚

极客天地

降本增效,火山引擎ByteHouse助力短剧广告投放效率提升5倍

字节跳动数据平台

大数据 数据仓库 云原生 解决方案 短剧

晋级报告不会写,ChatGPT来帮你!

霍格沃兹测试开发学社

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