实用的 JavaScript 技巧：对象和数组技巧，助您节省时间
分解对象属性和数组元素
将多个对象合并为一个对象
操纵网址
立即访问http://jauyeung.net/subscribe/订阅我的邮件列表
请在Twitter上关注我：https://twitter.com/AuMayeung
更多文章请访问https://medium.com/@hohanga
更多文章请访问http://thewebdev.info/
与其他编程语言一样，JavaScript 也提供了许多便捷的技巧，帮助我们更轻松地编写程序。本文将介绍如何将对象属性和数组元素分解为单独的变量、如何将多个对象合并为一个对象以及如何使用对象操作 URL URL。
分解对象属性和数组元素
在 ES6 中，我们可以使用快捷方式将对象的值赋给它自己的变量，也可以将数组中的各个元素赋给它们各自的变量。得益于解构赋值语法，我们无需显式地通过索引获取对象键值对或数组元素，即可完成这些操作。
在对象上使用它的最简单方法是编写类似这样的代码：
const {
a,
b
} = {
a: 1,
b: 2
};
通过上面的代码，JavaScript 解释器会将右侧的键名与右侧的变量名进行匹配。这样，它就可以将 1 赋值给 `a` a，将 2 赋值给 `b` b。我们还可以将右侧的值赋给左侧名称不同的变量。为此，我们可以编写以下代码：
const {
a: foo,
b: bar
} = {
a: 1,
b: 2
};
上面的代码首先会将右侧的键名与左侧的键名进行匹配，然后将匹配这些键的值传递给左侧冒号右侧的变量。
这意味着a右侧的键将与左侧的键匹配。这意味着右侧的a值（即 1）将被赋值给与该键对应的变量名。aafoo
同样地，b右边的键会与b左边的键匹配，b右边键的值会被赋给与b左边键对应的变量名。所以最终，我们得到的变量foo是1，变量bar是2。
我们可以给左侧的变量分配默认值，这样我们就不必担心它们undefined在解构赋值操作之后的值了。
为此，我们可以使用类似典型赋值操作的运算符，为左侧变量设置默认值=。例如，我们可以像以下代码一样为左侧变量设置默认值：
const {
a = 0,
b = 0
} = {
a: 1
};
console.log(a, b);
a如果我们像上面那样记录和的值b，我们应该得到 1a和 0，b因为我们没有b在左侧为 赋任何值，所以我们指定的默认值 0 会自动赋给 的值b。
同样，我们也可以使用解构赋值语法来处理数组。我们可以像下面的代码一样使用它：
const [a, b] = [1, 2];
对于数组，JavaScript 解释器会将变量的位置与数组中对应位置的元素进行匹配。因此，最右边的第一个数组元素会被赋值为最左边的第一个变量名，最右边的第二个数组元素会被赋值为最左边的第二个变量名，依此类推。我们也可以像下面的代码一样，用它来交换变量的值：
let a = 1,
b = 2;
[a, b] = [b, a];
如果在解构赋值之后运行，我们会得到2console.log为1，而为 2。这非常方便，因为我们不必将变量赋值给临时变量来交换变量的值。abab
我们还可以在解构语法中使用数组中的变量时为其分配默认值，这样就不用担心undefined使用解构语法赋值后变量的值会发生变化。例如，我们可以这样写：
let a,b;
([a=1,b=2] = [0])
这是有效的语法。在上面的代码中，` ais 0` 是因为我们给它赋值为 0。`is b2` 是因为我们没有给它赋值。
将多个对象合并为一个对象
借助扩展运算符，我们可以将多个对象合并为一个对象。在扩展运算符出现之前，我们需要遍历每个对象的键，然后手动编写代码将每个对象的键值对放入一个新对象中，并且必须对所有要合并的对象执行此操作。
这真是太麻烦了。但现在，有了扩展运算符语法，我们可以对每个对象应用扩展运算符，从而得到一个包含所有键的新对象。例如，如果我们有以下对象：
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
}
我们可以看到，属性的值为a5。这是因为我们首先合并了obj1值为a1 的元素，然后合并了obj2值为3 的元素a，覆盖了原来的值 1，之后合并了obj3值为a5 的元素，覆盖了之前合并的值为 3 的元素。因此，我们最终得到的值为 5 a。
操纵网址
通过 URL 对象，我们可以传入一个 URL 字符串，提取并设置 URL 的各个部分，从而获得一个新的 URL。我们可以使用构造函数来创建 URL 对象。
构造函数最多接受两个参数。我们可以将完整的 URL 字符串作为第一个参数，也可以将完整 URL 的一部分（即相对 URL 字符串）作为第二个参数，将完整 URL 字符串的第一部分（或主机名）作为第二个参数。例如，我们可以这样写：
new URL('http://medium.com');
或者
new URL('/@hohanga', 'http://medium.com');
通过 URL 对象，我们可以获取和设置各种属性，从而获取 URL 的一部分，也可以设置 URL 的一部分来创建新的 URL。例如hash，我们可以设置 URL 的哈希部分，也就是井号 ( ##) 后面的部分。例如，我们可以编写类似以下代码：
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运行方法时，我们得到了带有新哈希值的 URL 新值。console.logtoString()'http://example.com/#newHash'
同样，我们可以通过设置属性来更改主机名（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语句记录了结果'example.com'。然后我们将值赋给了'newExample.com'对象url的host属性。接着，当我们toString()对对象运行方法，并对返回值url运行方法时，我们得到了包含新主机名的 URL 的新值。console.logtoString()http://newexample.com/#hash’
URL 对象中还有更多属性。敬请期待下一部分，我们将进一步探讨 URL 对象的更多组成部分。
与其他编程语言一样，JavaScript 也提供了许多便捷的技巧，让我们能够更轻松地编写程序。本文探讨了如何将对象属性和数组元素分解为单独的变量、如何将多个对象合并为一个对象以及如何使用对象操作 URL URL。这些技巧可以减少我们编写代码所需的工作量，从而简化我们的开发工作。