常工作中，我确实经常去帮大家review代码，长期以来，我发现有些个功能函数，JS其实可以稍微调整一下，或者换个方式来处理，代码就会看起来更清晰，更简洁，甚至效率更高，主要是还更好理解。

下面我列举5个案例，我们一起来看一下

一、建议考虑使用FlatMap方法

先来看一段同时使用filter和map方法遍历数组的代码。我相信这种场景大家一定碰到过。为了说明问题，这里我用简单的数字内容来举个例子。

上面代码这样写，没什么问题，而且方法的连用也是比较推荐的处理方式， 但是，还是请多想想，其实我们有更好的方式来处理这一类问题。

现在我们看使用FlatMap如何实现的

使用FlatMap的好处是

只要遍历一遍，而且不产生中间多余数组

二、建议调整数组方法调用的顺序

日常工作中写的比较多的数组方法有filter()，find()，map()，reduce()，在必要的场景下，我们也建议将这些个方法连起来一起调用。但是，一定要注意调用顺序，否则也会影响效率问题。

比如下面这样：

仔细看上面这段代码，你就会发现

如果我们首先使用过滤器，然后排序，这样执行就能提高效率

三、建议这里使用reduce方法

你写的代码一定要让大家看的懂，代码要简洁，然而，有些方法它就出于这个目的创造的，如果你又不用，那就太可惜了，比如reduce方法。

举个例子，我们先从接口中拉出一段数据，然后对数据内容进行分类处理，像下面代码这样

我看到大多数前端开发人员都会使用forEach方法或者错误的使用map方法去处理，相比之下，实际上这里特别适合使用reduce方法

看起来会更清晰而且更容易理解

四、建议使用原生JavaScript类

上面这张很清晰明了的拆解了URL的每一部分

关于页面的URL我们可以组装也可以拆卸，这里说一下URL各部分的组装问题，你现在或者曾经肯定处理过URL拼接的问题，代码可能是这么写的

这样写虽然能够实现，但是代码看起来很混乱，很可能会被破坏，并且每次都需要你在最后添加一些规则，添加一些其他参数。

比如，你可能忘记添加/或者&符号就会导致错误，下面看看原生类怎么实现的，可以对比一下两者区别

这样看来，在处理URL组装问题上是不是可以考虑使用原生类了？

五、建议使用生成器

提到生成器，大家可能只是听过，或者知道怎么使用，而实际项目中很少去用。实际上它有很多使用场景。

使用生成器能够节省很多代码，代码也非常清晰。如，进行异步操作或者按需循环或者按需加载时。

看这段代码：

上面代码中main函数，可以根据用户交互或者其它技巧来调用。因为这里不希望无限加载。

总结

好了，就说这几点，日常工作中，希望大家都写出高质量的代码。

avaScript基础概念

JS的组成：

1.ECMAScript：Js语法

2.DOM：文档对象模型 ， 文档：html文档 ，操作html文档 （操作html文档的工具）

3.BOM：浏览器对象模型 ， 操作浏览器的工具

JS的三种书写方式

行内式，内嵌式，外部链接

JavaScript输入·输出语句

alert(msg) 浏览器弹出警告框

consle.log(msg) 浏览器控制台打印输出信息

prompt(info) 浏览器弹出输入框 用户可以输入信息

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

变量的概念

通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

变量理解：变化的量，变化的内容，变化的数据

变量存储数据理解：程序运行过程中的数据存储在内存中，但是内存比较大，为了方便管理，所以将内存分成一个一个的盒子（变量）来存储

变量的使用

1.声明变量 var 变量名；var age；（声明一个 名称为age 的变量）

2.变量的赋值 var 变量名 = 值; var age = 18; 声明变量age同时赋值为 18

变量案例

var myname = '旗木卡卡西'; // 字符串
var address = '火影村';
var age = 30; // 数字
var email = 'kakaxi@itcast.cn';
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(‘gz’); // gz
console.log(gz); // 2000

注意：

• 变量赋值时，值如果是字符串需要添加’’,“”
• 每行代码结束，都需要添加;
• 变量在使用时，不能添加引号 （定义，声明变量的时候，没有引号，使用的时候自然也不能添加引号）
  案例2：

// 1. 用户输入姓名 存储到一个 myname的变量里面
var myname = prompt('请输入您的名字');
// prompt 做的事情：
// (1). 弹出输入框 , 用户输入内容:zs
// (2). 将用户输入内容返回 ，相当于 ：var myname = 'zs';
// 2. 输出这个用户名
alert(myname); // zs

变量命名规范

规则

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name ***

严格区分大小写。var app; 和 var App; 是两个变量

不能 以数字开头。 18age 是错误的

不能 是关键字、保留字。例如：var、for、while

变量名必须有意义。 MMD BBD nl → age

遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

推荐翻译网站： 有道 爱词霸

变量案例-交换两个变量

// js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做 
// 1. 我们需要一个临时变量帮我们
// 2. 把apple1 给我们的临时变量 temp 
// 3. 把apple2 里面的苹果给 apple1 
// 4. 把临时变量里面的值 给 apple2 
var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);

简单数据类型
JavaScript 中的简单数据类型及其说明如下：

数字型范围：JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 （10的正308次方）

alert(Number.MIN_VALUE); // 5e-324 5e-324 （10的负324次方）

数字型三个特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN ***
//课堂代码：
// 5. 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大 
// 6. 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
// 7. 非数字
console.log('pink老师' - 100); // NaN：字符串是无法与数字进行运算的，所以结果是一个非数字

isNaN
用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字

字符串型 String
字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

字符串引号嵌套
JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""

var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''

// 常见错误

var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

字符串长度

• 字符串是由若干字符组成的，这些字符的数量就是字符串的长度
• 通过字符串的 length 属性可以获取整个字符串的长度

var strMsg = "我是帅气多金的程序猿！";

 alert(strMsg.length); // 显示 11

字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112 
//以上的字符串拼接都没有意义，一般我们字符串会与变量进行拼接

原文链接：https://blog.csdn.net/H_eartbeat/article/details/103102782

文讲述了 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】