let 和 const 是 JavaScript 中变量声明的两个相对较新的概念。 正如我们之前提到的,let 在某些方面类似于 var,但允许用户避免用户在 JavaScript 中遇到的一些常见“陷阱”。
const 是 let 的增强,因为它可以防止重新分配给变量。
变量解构 - Array destructuring
let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 console.log(second); // outputs 2
这将创建两个名为 first 和 second 的新变量。 这相当于使用索引,但更方便:
first = input[0]; second = input[1];
同样适用于函数参数列表:
function f([first, second]: [number, number]) { console.log(first); console.log(second); } f([1, 2]);
可以配合 … 语法使用:
let [first, ...rest] = [1, 2, 3, 4]; console.log(first); // outputs 1 console.log(rest); // outputs [ 2, 3, 4 ]
let [, second, , fourth] = [1, 2, 3, 4]; console.log(second); // outputs 2 console.log(fourth); // outputs 4
Object destructuring
这在 SAP Spartacus 的源代码里比较多见。
let o = { a: "foo", b: 12, c: "bar", }; let { a, b } = o;
这会从 o.a 和 o.b 创建新变量 a 和 b。 请注意,如果不需要,可以跳过 c。
请注意,我们必须用括号将这个语句括起来。 JavaScript 通常将 大括号 解析为块的开始。
您可以使用以下语法为对象中的其余项目创建变量…:
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
1
2
给属性设置别名
let { a: newName1, b: newName2 } = o;
1
这里的语法开始变得混乱。 您可以将 a:newName1 读作“a as newName1”。 方向是从左到右,和下列代码等价:
let newName1 = o.a;
let newName2 = o.b;
1
2
这里的冒号,及其容易同类型定义语法混淆起来。
Spread Operator
展开运算符与解构相反。 它允许您将一个数组扩展到另一个数组中,或者将一个对象扩展到另一个对象中。 例如:
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
1
2
3
这给 bothPlus 值 [0, 1, 2, 3, 4, 5]。 传播创建第一个和第二个的浅拷贝。 它们不会因 spread Operator 而改变。
spread 操作符也能应用在对象上:
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
1
2
spread 后对象的值为:
{ food: "rich", price: "$$", ambiance: "noisy" }
1
和数组展开一样,它是从左到右进行的,但结果仍然是一个对象。 这意味着在扩展对象中较晚出现的属性会覆盖较早出现的属性。
Object 的 spread 操作符有一些局限性:
首先,它只包含对象自己的可枚举属性。 基本上,这意味着在传播对象实例时会丢失方法:
class C { p = 12; m() {} } let c = new C(); let clone = { ...c }; clone.p; // ok clone.m(); // error!