将 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: 2
x = (2, 3);
console.log(x);
// expected output: 3
使用 length 调整数组大小
你可以调整大小或清空数组。
var array = [11, 12, 13, 14, 15];
console.log(array.length); // 5
array.length = 3;
console.log(array.length); // 3
console.log(array); // [11,12,13]
array.length = 0;
console.log(array.length); // 0
console.log(array); // []
使用数组解构来交换值
解构赋值语法是一种 JavaScript 表达式,可以将数组中的值或对象中的属性解包为不同的变量。
let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // -> 2
console.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
更多内容推荐
20 个常用的 JavaScript 简写技巧
任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的目标。让我们一个个来看看JavaScript的简写技巧吧。
ECMAScript 2020 的新功能
JavaScript 是很受欢迎的前端开发语言之一,而 ECMAScript 在推进 JavaScript 发展上有着不可磨灭的贡献。
9 个极其强大的 JavaScript 技巧
所谓 hacker 方法,就是一种不断改进和迭代的构建方法。有着 hacker 精神的程序员相信事物总有改进的余地,没有什么是完美的存在。每一段代码都有进一步优化的空间,每一个操作都有更便捷的技巧。
TypeScript 4.5 发布,带来 Promise 功能改进
断言等。 在此前的版本中,要获取 Promise 的返回类型,必须使用 infer 功能,如下所示:
4 个强大 JavaScript 运算符
今天我们学习新的 JS 运算符!
11|通过 JS 引擎的堆栈了解闭包原理
如果说一个函数“出生”的地方是作用域,从出生到被回收的“一生”是它的生命周期,那么闭包则可以突破这种空间和时间上的限制,那它是怎么做到这种突破的呢?
2022-10-13
14 个 JavaScript 代码优化技巧
这篇文章列举了一些技巧,可帮助你写出更好的 JavaScript 代码,从而提高性能。
LeetCode 题解:88. 合并两个有序数组,splice 合并数组 +sort 排序,JavaScript,详细注释
原题链接:https://leetcode-cn.com/problems/merge-sorted-array/
2020-08-14
09|面向对象:通过词法作用域和调用点理解 this 绑定
学习this的绑定,一个和函数式中的closure有着同等重要性的概念。
2022-10-08
TypeScript 4.1 发布,新增模板字面量类型
TypeScript团队发布了TypeScript 4.1,其中包括功能强大的模板字面量类型、映射类型的键重映射以及递归条件类型。
函数式 vs. 面向对象:响应未知和不确定
我会先带你从“思维大厦”的顶层开始,来了解JavaScript语言的核心思想,然后再带你看看如何因地制宜地使用这两种编程模式。这样你在日后面对已知和未知问题,做复杂系统开发的时候,也能找到一套行之有效的方法了。
2022-09-19
JavaScript 中的 7 个“杀手级”单行代码
JavaScript可谓是 Web 开发中最为重要的支柱。
JavaScript ES2021 最值得期待的新特性解析
ES2021又将会发布哪些令人兴奋的新特性呢?
39|语法扩展:通过 JSX 来做语法扩展
这节课我们就来看看JSX是如何用在Web UI开发中的。即使你不使用React,这样的模版模式也有很大的借鉴意义。
2022-12-17
ES2020 特性集尘埃落定
ES2020候选提案是今年六月提交ECMA大会的审批汇总,其中的大部分新特性已在浏览器中得到实现。
如何编写健壮的 TypeScript 库?
当你用TypeScript编写库时,你通常不知道这个库最终将如何被使用。即使你警告潜在用户,你编写这个库只是针对TypeScript用户,你还是可能会在某个时刻拥有JavaScript用户——或者是因为他们不顾你的警告而使用这个库,或者是他们因为传递性依赖而使用这个库。这有一个非常重要的后果:你必须将这个库设计成任何语言的开发者都可以使用!
TypeScript 4.1 RC 版本发布:带来了令人兴奋的新特性
近日,微软正式发布了 TypeScript 4.1 的发布候选(RC)版本。
10|JS 有哪 8 种数据类型,你需要注意什么?
通过不同类型在实际应用时会出现的各种问题,进一步了解它们的原理和使用方法
2022-10-11
30|JavaScript 引擎:双向通讯底层原理是什么?
双向通讯底层原理是什么?
2022-11-01
你应该了解的 25 个 JS 技巧
写代码的时候总有一些东西是会重复出现的,次数多了你就会想找找捷径了。
让所有人认同的文字称不上表达
推荐阅读
05|机器与语言:JVM 中的字节码
2023-08-30
【深度剖析】JavaScript 中块级作用域与函数作用域
2023-05-26
三年回顾:JavaScript 与 TypeScript 最新特性汇总
43|元编程:通过 Proxies 和 Reflect 赋能元编程
2022-12-27
深度剖析之由浅入深揭秘 JavaScript 类型转换 (最全总结篇)
2023-07-07
40|Polyfill:通过 Polyfill 让浏览器提供原生支持
2022-12-20
上手 JavaScript 基准测试
2022-10-13
电子书
大厂实战PPT下载
换一换 胡奕涵 | 湖南快乐阳光 芒果 TV 创新产品总监
李新建 | 百度 爱番番业务部 团队技术负责人
林润⻰ | 字节跳动 STE 团队系统⼯程师
评论