不容错过的 13 个 JavaScript 实用技巧

不容错过的 13 个 JavaScript 实用技巧
2021年08月19日18:11:39 0 376

不容错过的 13 个 JavaScript 实用技巧

 

对于初学者,JavaScript 有哪些不为人知却非常有用的技巧呢?在本文中,我们将一同为大家解密与分享。

不容错过的 13 个 JavaScript 实用技巧

作者 | Duomly

译者 | 弯月,责编 | 屠敏

出品 | CSDN(ID:CSDNnews)

以下为译文:

数组是Javascript中最常见的概念,我们有很多办法来处理数组中的数据。考虑到数组是Javascript中最基本的概念之一,是初学者刚刚接触编程时就学习的概念,我想通过本文介绍一些不为人知却非常有用的技巧。我们开始吧!

不容错过的 13 个 JavaScript 实用技巧

从数组中删除重复

在有关Javascript数组的面试问题中,有一个问题很常见:怎样从Javascript数组中提取不重复的值。我有一个快捷简便的方法:只需使用new Set即可。实现的方法有两种:一种使用.from,另一种使用扩展运算符(...):

var fruits = [banana, apple, orange, watermelon, apple, orange, grape, apple];

很容易,是不是?

不容错过的 13 个 JavaScript 实用技巧

替换数组中指定的值

在编程时,有时候需要替换某个特定的值,有个非常简单的方法来实现这一点。只需使用.split(start, 要删除的值,要添加的值),然后设置好三个参数,指明希望从哪里修改、要修改几个值,以及新的值是什么。

var fruits = [banana, apple, orange, watermelon, apple, orange, grape, apple];
fruits.splice(0, 2, potato, tomato);
console.log(fruits); // returns [potato, tomato, orange, watermelon, apple, orange, grape, apple]
不容错过的 13 个 JavaScript 实用技巧

不使用.map实现映射

大概所有人都知道数组的.map方法,但还有另一个方法,可以用同样简洁的方式实现类似的效果。这种方法就是.from:

var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]


var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [John, Peter, Mark, Maria, Monica, Martha]
不容错过的 13 个 JavaScript 实用技巧

清空数组

如果想把一个数组清空,但不想一个个删除其中的元素,该怎么办?其实只需一行代码即可:将length设置为0。

var fruits = [banana, apple, orange, watermelon, apple, orange, grape, apple];


fruits.length = 0;
console.log(fruits); // returns 
不容错过的 13 个 JavaScript 实用技巧

将数组转化为对象

如果有一个数组,我们希望将其数据放到一个对象中,那么最快的方式就是使用扩展运算符(...):

var fruits = [banana, apple, orange, watermelon];
var fruitsObj = { fruits };
console.log(fruitsObj); // returns {0: banana, 1: apple, 2: orange, 3: watermelon, 4: apple, 5: orange, 6: grape, 7: apple}
不容错过的 13 个 JavaScript 实用技巧

用数据填充数组

有时候需要创建一个数组并用数据填充,或者需要一个所有值都相同的数组,此时可以使用.fill方法简洁明快地实现:

var newArray = new Array(10).fill(1);
console.log(newArray); // returns [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
不容错过的 13 个 JavaScript 实用技巧

合并数组

你知道怎样可以不使用.concat来合并数组吗?最简单的方法只需要一行代码。你也许猜到了,那就是扩展运算符(...),它非常适合处理数组:

var fruits = [apple, banana, orange];
var meat = [poultry, beef, fish];
var vegetables = [potato, tomato, cucumber];
var food = [fruits, meat, vegetables];
console.log(food); // [apple, banana, orange, poultry, beef, fish, potato, tomato, cucumber]
不容错过的 13 个 JavaScript 实用技巧

求两个数组的交集

这也是Javascript面试中最常遇到的问题,因为它能展示出你是否会使用数组方法,以及逻辑如何。要找出两个数组的交集,只需要使用之前使用的技巧,首先保证数组中的值不重复,然后利用.filter和.includes方法即可。这样就能找出同时出现在两个数组中的元素。代码如下:

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = [new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]
不容错过的 13 个 JavaScript 实用技巧

从数组中删除假值

首先我们来定义假值。在Javascript中,假值包括false、0、''、、NaN、undefined。现在可以考虑怎样从数组中删除假值了。只需使用.filter方法即可实现:

var mixedArr = [0, blue, , NaN, 9, true, undefined, white, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [blue, 9, true, white]
不容错过的 13 个 JavaScript 实用技巧

从数组中获取随机值

有时候需要从数组中随机选择一个值。简单、快捷、简短且干净的方式就是在数组长度的范围内生成一个随机的索引。代码如下:

var colors = [blue, white, green, navy, pink, purple, orange, yellow, black, brown];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
不容错过的 13 个 JavaScript 实用技巧

反转数组

需要反转数组时,我们不需要使用复杂的循环和函数来重新创建数组,因为有一个简单的数组方法可以为我们做这件事,只需一行代码,就能反转数组。代码如下:

var colors = [blue, white, green, navy, pink, purple, orange, yellow, black, brown];
var reversedColors = colors.reverse;
console.log(reversedColors); // returns [brown, black, yellow, orange, purple, pink, navy, green, white, blue]
不容错过的 13 个 JavaScript 实用技巧

.lastIndexOf方法

Javascript中有一个有趣的方法,可以让我们找出指定元素最后出现的位置。例如,如果数组中有重复元素,那么可以找出该元素最后出现的位置。代码如下:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9
不容错过的 13 个 JavaScript 实用技巧

对数组中的所有值求和

另一个Javascript工程师面试中常见的问题就是对数组中的所有元素求和。这个完全不需要害怕,只需使用.reduce方法,一行代码就可以实现。代码如下:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14
不容错过的 13 个 JavaScript 实用技巧

总结

本文向你展示了13个编程技巧,可以保持代码简短整洁。同时别忘了,Javascript中还有许多不同的技巧值得探索,不仅是有关数组的技巧,也包括许多其他的数据类型。希望你喜欢本文的技巧,并能利用这些技巧改善开发流程。

 

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
历史上的今天
05月
21
挪威,的,Opera,浏览器,挪威,的,Opera,浏览器, 菜鸟教程

挪威的 Opera 浏览器

挪威的 Opera 浏览器 关于 Opera Opera 是作为挪威电信公司 Telenor 的一个研究项目于 1994 年启动的,并于 1995 发展为一个独立的开发公司,Ope...
HTML,事件,属性,HTML,事件,属性,全局,增,加了,使, 菜鸟教程

HTML 事件属性

HTML 事件属性 全局事件属性 HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript。 如需学习更多有关事件编程的知识,请访问我们的...
类与,对象,traits 菜鸟教程

类与对象:Traits

类与对象:Traits自 PHP 5.4.0 起,PHP 实现了代码复用的一个方法,称为 traits。 Traits 是一种为类似 PHP 的单继承语言而准备的代码复用...
gi ,命令行,设置 菜鸟教程

CGI 和命令行设置

CGI 和命令行设置默认为将 PHP 编译为 CLI 和 CGI 程序。这将建立一个命令行解释器,可用于 CGI 处理或非 web 相关的 PHP 脚本。如果用户运行着一个 PHP...
类与,对象,自动,加载 菜鸟教程

类与对象:自动加载对象

类与对象:自动加载对象很多开发者写面向对象的应用程序时对每个类的定义建立一个 PHP 源文件。一个很大的烦恼是不得不在每个脚本开头写一个长长的包含文件列表(每个类一个文件)。&nb...
2019,年,React,学习,路线图,2019,年,React,学习, 菜鸟教程

2019 年 React 学习路线图

2019 年 React 学习路线图 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了...

Comment list 共有 0 条评论

暂无评论