15个提升JavaScript开发者能力的技巧

1. 空值和未定义值的判断

一个非常常见的测试就是检查变量是否为null或undefined，甚至是“空”，例如下面的示例：

if (typeof variable === "undefined" || variable === null || variable === "") {
  // do something
}

一个更简单的方式是：

if (!variable) {
  // do something
}

2. 数组定义

创建一个Array对象：

var myArray = new Array();
myArray[0] = "value1";
myArray[1] = "value2";
myArray[2] = "value3";

我们可以用一行代码完成相同的操作

var myArray = ["value1", "value2", "value3"];

3. 三元运算符

“if/else”是我们经常会用到的：

if (x > y) {
  result = "x is greater than y";
} else {
  result = "x is less than or equal to y";
}

使用三元运算符：

result = x > y ? "x is greater than y" : "x is less than or equal to y";

甚至更简单：

result = x > y && "x is greater than y" || "x is less than or equal to y";

但是，它对于函数调用是否有效呢？如果我有两个不同的函数，并且我想在if为true时调用一个函数，在if为false时调用另一个函数：

if (x > y) {
  myFunction1();
} else {
  myFunction2();
}

你可以使用三元运算符完成相同的函数调用：

(x > y ? myFunction1 : myFunction2)();

还值得一提的是，对于测试变量是否为true的if语句，有些小伙伴会这样做：

if (variable === true) {
  // do something
}

也可以这样做：

if (variable) {
  // do something
}

4. 变量声明

var x = 0;
var y = 0;
var z = 0;

也可以这样写：

var x = y = z = 0;

5. 使用正则表达式

正则表达式是一种在文本分析和验证方面创建优雅和强大代码的好工具，并且在某些类型的网络爬虫的数据提取方面也非常有用。

你可以在以下链接中了解更多关于如何使用正则表达式的信息：

6. charAt()的快捷方式

那么你想从一个字符串中选择一个特定位置的字符，就像下面这样：

var myString = "Hello World";
var myChar = myString.charAt(0);

但是请注意，你可以通过记住字符串是一个字符数组来获得相同的结果：

var myString = "Hello World";
var myChar = myString[0];

7. 10进制幂

一个数字10000在JS中可以很容易地被1e4替换，即1后跟4个零，如下所示：

var myNumber = 1e4;

8. 模板文字

这个语义化特性是ECMAScript版本6或更高版本独有的，并且极大地简化了变量集中的字符串连接。例如，下面的：

var name = "John";
var age = 30;
var message = "My name is " + name + " and I am " + age + " years old.";

从ES6开始，我们可以使用模板文字来完成这个连接：

var name = "John";
var age = 30;
var message = `My name is ${name} and I am ${age} years old.`;

9. 箭头函数

箭头函数是声明函数的简短方式。例如，下面是一个求和函数：

function sum(x, y) {
  return x + y;
}

我们也可以这样声明函数：

var sum = function(x, y) {
  return x + y;
}

但是使用箭头函数就很简单：

var sum = (x, y) => x + y;

10. 参数解构

这个技巧适用于那些充满参数的函数，你决定用一个对象替换所有参数。或者对于那些确实需要一个配置对象作为参数的函数。

问题在于必须继续访问通过参数传递的对象，然后是我们想要读取的每个属性。像这样：

function myFunction(options) {
  var x = options.x;
  var y = options.y;
  var z = options.z;
}

参数解构特性恰好用于简化这个问题，同时通过替换前一个语句来帮助代码可读性：

function myFunction({x, y, z}) {
  // do something with x, y, z
}

最后，我们还可以在参数对象的属性中添加默认值：

function myFunction({x, y, z = 20}) {
  var s = x + y + z;
}

这样，s的值将为1，但t的值将默认为此属性，即20。

11. 键值命名

假设你有一个人的对象，它有一个将要通过一个名字变量赋值的名字属性。像这样：

const name = "Joseph"
const person = { name: name }// { name: "Joseph" }

而你也可以这样做：

const name = "Joseph"
const person = { name }// { name: "Joseph" }

也就是说，如果你的变量与属性同名，你就不需要调用它，只需传递变量即可。对于多个属性也是如此：

const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }

12. Map

考虑以下对象数组：

const animals = [
    {
        "name": "cat",
        "size": "small",
        "weight": 5
    },
    {
        "name": "dog",
        "size": "small",
        "weight": 10
    },
    {
        "name": "lion",
        "size": "medium",
        "weight": 150
    },
    {
        "name": "elefante",
        "size": "large",
        "weight": 5000
    }
]

我们想要仅将动物的名称添加到另一个数组中。通常我们会这样做：

let animalNames = [];

for (let i = 0; i < animals.length; i++) {
    animalNames.push(animals[i].name);
}

但是使用 Map，我们可以这样做：

let animalNames = animais.map((animal) => {
    return animal.nome;
})

请注意，map预期通过参数传递一个带有最多三个参数的函数：

第一个是当前对象（与 foreach 中的相同）
第二个是当前迭代的索引
第三个是整个数组

显然，此函数将针对 animal 数组中的每个对象调用一次。

13. Filter

如果我们想要遍历与上一个提示中相同的动物对象数组，但这次仅返回那些大小为“small”的对象，我们该如何做呢？

我们如何使用普通的JS实现呢？

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
       smallAnimals.push(animals[i])
    }
}

然而，使用 filter 操作符，我们可以以更简洁和更清晰的方式实现这一点：

let smallAnimals = animais.filter((animal) => {
    return animal.size === "small"
})

Filter通过参数传递一个带有当前迭代对象参数的函数（与 foreach 中的相同），它应该返回一个布尔值，指示此对象是否将成为返回数组的一部分（true表示它通过了测试并将成为其中一部分）。

14. Reduce

Javascript 的另一个重要功能是 reduce。它允许我们以非常简单和强大的方式对集合进行分组和计算。例如，如果我们想要将我们的动物对象数组中所有动物的重量相加，我们该怎么做呢？

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight;
}

但是，使用 reduce，我们可以这样做：

let totalWeight = animals.reduce((total, animal) => {
    return total += animal.weight;
}, 0)

Reduce通过参数传递一个带有以下参数的函数：

第一个是累加器变量的当前值（在所有迭代结束时，它将包含最终值）
第二个参数是当前迭代对象
第三个参数是当前迭代的索引
第四个参数是将被迭代的所有对象的数组

此函数将在数组中的每个对象上执行一次，在执行结束时返回聚合值。

以上就是今日分享的关于JavaScript的文章，虽然看起来很简单，但是对于刚入门的小伙伴来说是非常有用的哟！