方便的JavaScript技巧对象和数组技巧可节省您的时间

立即通过http://jauyeung.net/subscribe/订阅我的电子邮件列表

在Twitter上关注我，网址为https://twitter.com/AuMayeung

https://medium.com/@hohanga上的更多文章

更多文章，请访问http://thewebdev.info/

JavaScript与其他任何编程语言一样，具有许多方便的技巧，使我们可以更轻松地编写程序。在本文中，我们将研究如何将对象属性和数组元素分解为单个变量，将多个对象合并为一个，并使用 URL 宾语。

分解对象属性和数组元素

使用ES6，我们可以使用快捷方式将对象的值分配给它自己的变量，也可以将各个数组条目分配给他们自己的变量。多亏了解构赋值语法，我们可以执行此操作而无需显式检索对象键值对或通过其索引显式检索数组项。

在对象上使用它的最简单方法是编写如下内容：

const {  
  a,  
  b  
} = {  
  a: 1,  
  b: 2  
};

使用上面的代码，JavaScript解释器将使右侧的键名与右侧的变量名匹配。这样，它可以将1分配给 a 和2 b。我们还可以将右侧的值分配给左侧具有不同名称的变量。为此，我们可以编写以下代码：

const {  
  a: foo,  
  b: bar  
} = {  
  a: 1,  
  b: 2  
};

上面的代码将首先将右侧的键名与左侧的键名匹配，然后将与这些键匹配的值中心化到左侧冒号右侧的变量。

这意味着 a 右侧的键将与 a 键在左侧。这意味着 a 在右边的1处，将分配给变量名，即 a 关键是 foo 。

同样， b 右侧的键将与 b 左侧的键和 b 右侧的键将分配给与 b 键在左侧。所以最后，我们得到的是变量 foo 是1，变量 bar 是2。

我们可以将默认值分配给左侧的变量，这样我们就不必担心它们是 undefined 解构分配操作后。

为此，我们编写以下代码以在左侧变量上设置默认值， = 操作员喜欢典型的分配操作。例如，我们可以将默认值设置为左侧的变量，如以下代码所示：

const {  
  a = 0,  
  b = 0  
} = {  
  a: 1  
};  
console.log(a, b);

如果我们记录下的值 a 和 b 像上面一样，我们应该得到1 a 和0代表 b 因为我们没有为 b 在左侧，因此我们指定的默认值0将自动分配给 b 就像我们指定的一样。

同样，我们可以对数组使用解构赋值语法。我们可以按以下代码使用它：

const [a, b] = [1, 2];

对于数组，JavaScript解释器将变量的位置与变量名所在的位置的数组项匹配。因此，右边的第一个数组项将在左边被分配第一个变量名，第二个数组被分配右边的条目将分配给左边的第二个变量名，依此类推。我们还可以使用它来交易所变量值，如以下代码所示：

let a = 1,
  b = 2;
[a, b] = [b, a];

如果我们跑 console.log 上 a 和 b 完成销毁任务后，我们得到 a 是2并且 b 是1。这非常方便，因为我们不必将变量分配给临时变量即可交易所变量的值。

当我们在解构语法中使用默认值时，我们也可以为数组中的变量分配默认值，这样我们就不必担心变量被 undefined 在为它们分配具有解构语法的值之后。例如，我们可以这样写：

let a,b;
([a=1,b=2] = [0])

这是有效的语法。在上面的代码中，我们得到了 a 是0，因为我们为其分配了0。 b 是2，因为我们没有为其分配任何内容。

将多个对象合并为一个

使用散布运算符，我们可以使用它将多个对象合并为一个。在使用散布运算符之前，我们必须遍历每个对象的键，然后使用我们自己的代码将每个对象的键-值对手动放入新对象中，并且必须对所有对象进行此操作想要合并在一起。

这真是痛苦。但是现在，使用散布运算符语法，我们可以将散布运算符应用于新对象中的每个对象，然后获得具有新对象的所有键的新对象。例如，如果我们有以下对象：

const obj1 = {  
  a: 1,  
  b: 2  
};  
const obj2 = {  
  c: 3,  
  d: 4  
};  
const obj3 = {  
  e: 5,  
  f: 6  
};  
const obj4 = {  
  g: 7,  
  h: 8  
};  
const obj5 = {  
  i: 9,  
  j: 10  
};

然后，我们可以使用价差运算符将它们合并在一起，如以下代码所示：

const obj1 = {  
  a: 1,  
  b: 2  
};  
const obj2 = {  
  c: 3,  
  d: 4  
};  
const obj3 = {  
  e: 5,  
  f: 6  
};  
const obj4 = {  
  g: 7,  
  h: 8  
};  
const obj5 = {  
  i: 9,  
  j: 10  
};  
const mergedObj = {  
  ...obj1,  
  ...obj2,  
  ...obj3,  
  ...obj4,  
  ...obj5  
};

然后，当我们记录 mergedObj，我们得到：

{  
  "a": 1,  
  "b": 2,  
  "c": 3,  
  "d": 4,  
  "e": 5,  
  "f": 6,  
  "g": 7,  
  "h": 8,  
  "i": 9,  
  "j": 10  
}

如果我们的对象中的某些或所有键彼此相同，则稍后合并的重叠键的值将覆盖先前合并的键。例如，如果我们有：

const obj1 = {  
  a: 1,  
  b: 2  
};  
const obj2 = {  
  a: 3,  
  d: 4  
};  
const obj3 = {  
  a: 5,  
  f: 6  
};  
const obj4 = {  
  g: 7,  
  h: 8  
};  
const obj5 = {  
  i: 9,  
  j: 10  
};  
const mergedObj = {  
  ...obj1,  
  ...obj2,  
  ...obj3,  
  ...obj4,  
  ...obj5  
};

然后，当我们记录 mergedObj，我们得到：

{  
  "a": 5,  
  "b": 2,  
  "d": 4,  
  "f": 6,  
  "g": 7,  
  "h": 8,  
  "i": 9,  
  "j": 10  
}

我们可以看到，财产的价值 a 是5。这是因为我们首先合并 obj1 的价值 a 为1，然后我们合并到 obj2 ，其价值为 a 是3，覆盖了原始值1，然后在合并后 obj3 ，其价值为 a 为5，这将覆盖之前合并的3的值。因此，对于 a。

操纵URL

使用URL对象，我们可以传入URL字符串，提取并设置URL的各个部分，然后获得新的URL。我们可以使用构造函数创建一个URL对象。

构造函数最多包含2个参数。我们可以使用一个参数作为完整的URL字符串，也可以传入相对URL字符串，它是完整URL的一部分，作为第一个参数，而完整URL字符串的第一部分，或主机名，作为第二个参数。例如，我们可以写：

new URL('http://medium.com');

要么

new URL('/@hohanga', 'http://medium.com');

使用URL对象，我们可以获取并设置各种属性以获取URL的一部分，还可以设置URL的一部分以创建新的URL。随着 hash 属性，我们可以设置网址的哈希部分，即，井号（# ）。例如，我们可以编写类似以下代码的内容：

const url = new URL('http://example.com/#hash');
console.log(url.hash);
url.hash = 'newHash';
console.log(url.toString());

如果我们运行代码，我们可以看到第一个 console.log 报表日志 '#hash'。然后我们分配值 'newHash' 到 url 的 hash 属性。然后，当我们运行 toString() 上的方法 url 对象并运行 console.log 返回值的方法 toString() ，我们得到 '[http://example.com/#newHash](http://example.com/#newHash)' 这是带有新哈希的URL的新值。

同样，我们可以通过设置主机名来更改主机名，该主机名是URL的第一部分。 host 属性。如 hash 财产 host 属性还具有getter函数，用于获取URL的主机名。例如，我们可以编写类似以下代码的内容：

const url = new URL('http://example.com/#hash');
console.log(url.host);
url.host = 'newExample.com';
console.log(url.toString());

如果我们运行代码，我们可以看到第一个 console.log 报表日志 '#hash'。然后我们分配值 'example.com' 到 url 的 hash 属性。然后，当我们运行 toString() 上的方法 url 对象并运行 console.log 返回值的方法 toString() ，我们得到 ‘[http://newexample.com/#hash](http://newexample.com/#hash)’ 这是带有新哈希的URL的新值。

URL对象中有更多属性。请继续关注下一部分，我们将探索URL对象的更多部分。

JavaScript与其他任何编程语言一样，具有许多方便的技巧，使我们可以更轻松地编写程序。在本文中，我们研究了如何将对象属性和数组元素分解为单个变量，如何将多个对象合并为一个，以及如何使用 URL 宾语。通过这些技巧，我们减少了编写代码的工作，使我们的生活更轻松。