文讲述了 9 条非常强大的 JavaScript 技巧。

作者 | Klaus

译者 | 弯月，责编 | 屠敏

以下为译文：

全部替换

我们知道string.replace函数只会替换第一次出现的位置。在正则表达式末尾添加 /g 即可替换所有出现。

var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"

提取唯一值

使用Set对象和spread操作符可以创建一个新的数组，仅包含唯一的值。

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

数字转为字符串

只需要将其与空字符串连接。

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string

字符串转为数字

只需要使用 + 运算符。

注意这个技巧只能在“字符串形式的数字”上使用。

the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN

打乱数组的元素顺序

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function {
return Math.random - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

多维数组扁平化

只需使用spread运算符。

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = .concat(...entries);
// [1, 2, 5, 6, 7, 9]

短路条件

比如下面的例子：

if (available) {
addToCart;
}

只需将变量和函数写到一起即可：

available && addToCart

动态属性名

原来我以为必须先定义一个对象才能指定动态属性名，其实不需要：

const dynamic = 'flavour';
var item = {
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }

使用length属性来改变数组大小或清空数组

只需要重写数组的length即可。

要想改变数组大小：

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]

要想清空数组：

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
// 

原文：https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p

本文为 CSDN 翻译，转载请注明来源出处。

【End】

语说的好，长江后浪推前浪。作为一名程序员，我一直很偏爱JavaScript，不为什么，就是因为强大。但是，TypeScript的出现，与之形成对比，让我不得不开始考虑TypeScript，下面我就为大家解析一下我为什么要开始用TypeScript。

作者 | Jamie Morris

译者 | 苏本如，责编 | 毛中政

出品 | CSDN（ID：CSDNnews）

以下为译文

JavaScript可能是一种事实上的现代Web开发语言，它也是我一直是我选择用来编写脚本的语言。用Python编写代码很有趣，但是如果我有一些东西要自动化，我会使用Node。

在过去，我选择的服务器端语言是C#，但现在我感觉它很笨拙，尽管它很强大。我曾经天真地认为Node是服务器端语言的“神来之笔”，它满足了我编写代码的一切需求。我甚至可以有很多种不同的方式使用JavaScript来编写安卓（Android）和iOS应用程序。

我并不是说JavaScript对于编写任何程序来说，是一个完美的工具，但是多年来它确实对我非常有用。

我一直坚定地承认JavaScript在Web前台的繁重的开发工作上的一些缺陷，这包括了Gary Bernhardt在他的戏谑性的 “Wat?” 闪电演讲中令人一想起来就会发笑的例子。如果你从来没有看过这个视频，现在就停下你的阅读，赶紧去找这个视频看看。看完后你会感谢我的。

Gary Bernhardt的这个闪电演讲现在已经成为我的推荐阅读列表的一部分，和Jonathan Creamer所写的“面向23世纪的JavaScript体系结构”这篇文章一起呈现给未来的前端开发人员。

虽然自从ES6出现以后，这篇文章中的一些内容看起来是多余的，但是它对于解释JavaScript需要从“普通编程语言”转变思维的事情（如果有这样的事情的话）有很大的帮助。这篇文章本身是我5年前开始自己的JavaScript之旅的一个重要原因。

但是为什么我现在威胁说要再也不用回JavaScript呢？答案很简单，因为TypeScript。

TypeScript是什么？

我猜你们已经听说过TypeScript，如果没有的话，让我试着总结一下：TypeScript是强类型的JavaScript语言。

它添加了你们对强类型语言所期望的一些特性，并且需要一个编译步骤（技术上这个步骤叫“Transpilation”）来将TypeScript转换为JavaScript的代码。这是因为浏览器不理解TypeScript。

从技术上讲，TypeScript不添加任何新的运行时特性，它只是为开发人员添加一些特性。

我听说有人把TypeScript说成是一种“不是爱它就是恨它”的开发语言，但是我还没有见过一个用过TypeScript的人说恨它。但是我和很多不想尝试它的人交流过。那是大约2016年中的事，其实我也是其中之一。

我听到的同行们对TypeScript的最坏批评是，它是一套需要额外学习的工具。不仅包括语言本身，还包括了构建过程。然而，大多数现代Web应用程序在其构建链中至少有一个链接以Babel的形式保留给JavaScript，而Babel是一个允许较新JavaScript在较旧的浏览器上运行的工具。

将TypeScript添加到这个链中不应该是件高难度的事，特别是因为Babel从v7版本开始就支持TypeScript编译。

尽管TypeScript不应该是一种高深的科学，但有时它会让人产生这种感觉。这就是为什么刚开始使用TypeScript的人有时会挣扎着回到JavaScript上的原因之一，因为JavaScript就在浏览器中运行。

TypeScript带来的好处

正如我上面所说，我从未听过有人使用TypeScript，这是件很遗憾的事。TypeScript带来的好处远远大于它的困难，特别是在Angular CLI（Angular命令行接口）或Create- React-App（注：是一个官方支持的创建React单页应用程序的方法）大行其道的那个时代，这两个工具都允许你在几分钟内开始一个新的支持TypeScript的项目。

我想你已经知道这些好处是什么，但如果你不知道的话，请允许我总结一下：

TypeScript的编译步骤可以让你及早发现问题，而不是等待运行时失败。

你的IDE现在甚至可以在编译步骤之前提示你一些错误。想象一下，如果你的IDE能够告诉你正在引用一个不存在的变量，或者正在使用错误的参数来调用一个函数，那真是革命性的进步！（当然，这里我是开玩笑的，因为“真正的”编程语言很多年前就有了这些功能）

当ECMAScript（驱动JavaScript语言的标准）中提出新的特性时，TypeScript能够很早地采用它们，让你一直保持在技术最前沿。

但实际上，TypeScript的主要好处是，它可以让你的代码以JavaScript无法描述的方式进行自我描述。

你可能认为，当你是一个项目的唯一开发人员时，JavaScript并没有那么糟糕，因为所有的东西都在你的脑子里，而且你有完美的记忆力，是这样吗？不，你错了。即使作为一个项目的唯一开发人员，我在编写代码时也容易出现一阵阵健忘症。

现在，当我编写普通的JavaScript时，我讨厌阅读一个函数的定义来搞清楚如何使用它。我不知道它会返回什么（如果有返回值的话）或者它接受什么样的参数。我可能知道参数名称和个数，但这并不总是足够的（如下面代码所示）：

1 Function doTheThing {
2 let error = false;
3
4 // About a million lines of code that might cause an error
5
6 return error;
7 }
8
9 function consumeTheThing {
10 let error = doTheThing;
11 if (error) {
12 // What do I do with the error now?
13 }
14 }

这就是我想要表达的。这里的“error”是一个布尔型的值吗？当我看到第2行时，它看起来确实是这样的，但是从那里到结束的“doTheThing”行之间的一百万行代码中间的“error”呢？它可能是一个字符串，或者一个对象，或者天知道是什么。

你可能会认为这种灵活性是一种资产。它可以是，但更多的时候，它是一个陷阱，引诱你进入一种容易出错的方式，在你和你的同事之间制造很多小挫折。有没有在进入别人的代码中，感到自己像在迷宫里的感觉？

这就是你的代码在别人看来的样子。你可以用JavaScript编写“好”的代码，但是很少有关于该语言的内容鼓励你这样做。

而这正是TypeScript的美妙所在。它不会强迫你成为一个好的开发人员。但它给了让你成为好的开发人员的工具。

TypeScript缺点

TypeScript有缺点吗？当然有。

更多的打字（指定类型），无论是从两个方面的那一个来看都是这样。你的键盘会磨损得更快（这可能是你们中使用蝴蝶键盘的人所担心的），这没什么大不了的。

但是一些JavaScript开发人员讨厌在每个新函数或变量中键入类型。你不必非这么做不可，但是如果你不使用类型，为什么要使用TypeScript呢？

因为代码必须编译，因此每次更新和测试运行需要稍长一点时间。其实需要的只是多几秒钟而已，而使用TypeScript节省的时间远远超过编译它所花费的时间。

构建一个项目的复杂性有时是非常痛苦的。这是真的。如果你不熟悉你的构建工具，构建一个新项目可能是一个令人沮丧的体验。

短期内我的建议是找一个启动项目让你开始。至于长期的建议，我建议你花时间学习工具-tsc，Babel，WebPack和所有的有用的工具。

我觉得我的论点有点倾向性。我并没有把重点放在TypeScript的缺点上，而是放在更多地强调优点上。我猜这也是我不会花太多时间论证每顿饭都吃麦当劳的好处的原因，因为这样做的好处是有限的（不用再做饭了……我想只是这样）。

关于TypeScript的统计

像往常一样，StackOverflow提供的数据会判断我的看法是对还是错。表面上的数据来看，我好像错得太离谱了。

根据StackOverflow 2019开发者调查报告，JavaScript已经连续第七年成为StackOverflow上谈论最多的语言，67.8%的受访者都在使用它，而TypeScript在这个排名中名列第十，它正在被21.2%的受访者使用。

但是在2018年，TypeScript的这个统计数字只为17.4%，而再前一年仅为9.5%。2016年的时候，甚至只有0.47%的受访者使用TypeScript。

在这个角度来看，TypeScript这些年来有了惊人的增长，这主要归功于Angular框架，它在早些时候放弃了对JavaScript的支持。

当你看到“最受欢迎”的语言排名时，TypeScript的表现更加抢眼了，它以73.1%的比分排名了第三位（位列Rust和Python之后）。而JavaScript以66.8%排在第11位。

前景

我不认为TypeScript会很快取代JavaScript，理解后者对于前者的工作至关重要。而且我们也不会看到TypeScript在任何浏览器中以本机方式运行。

TypeScript是一个预处理器，就像之前的CoffeeScript一样。TypeScript和CoffeeScript的区别在于后者是对构建它的语言的根本性改变，而TypeScript是一种自然演变。这不仅仅使得学习它更容易，而且使得从JavaScript项目转换为TypeScript的过程更为渐进。首先简单地将所有以.js结尾的文件重命名为以.ts为结尾的文件，你就有了一个TypeScript项目！

然后，你就可以一步一步地开始采用TypeScript的语言特性。我不能保证这个过程会很容易，但是它会告诉你一些JavaScript永远无法做到的事情。当你开始下一个项目时，TypeScript编译器将会在那里等待你。

所以,使用了TypeScript,我知道我再也不会用回JavaScript了。

原文：https://medium.com/JavaScript-in-plain-english/ill-never-go-back-to-JavaScript-16370dc264a0

本文为 CSDN 翻译，转载请注明来源出处。

【End】

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

作者 | Duomly

译者 | 弯月，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

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

从数组中删除重复

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

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

很容易，是不是？

替换数组中指定的值

在编程时，有时候需要替换某个特定的值，有个非常简单的方法来实现这一点。只需使用.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”]

不使用.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”]

清空数组

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

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


fruits.length = 0;
console.log(fruits); // returns 

将数组转化为对象

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

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”}

用数据填充数组

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

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

合并数组

你知道怎样可以不使用.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”]

求两个数组的交集

这也是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]

从数组中删除假值

首先我们来定义假值。在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”]

从数组中获取随机值

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

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

反转数组

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

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”]

.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

对数组中的所有值求和

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

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

总结

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

原文：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

本文为 CSDN 翻译，转载请注明来源出处。

【END】