用于销毁对象属性和分配对象属性的ES6功能

Question

我是一名软件开发人员，现在正在学习新的ES6风格的JavaScript。我发现ES6特性很棒，但我仍然不知道ES6提供的所有最流行的特性，我发现在实践中很难明智地使用它。

我有下面的代码行--如果可能的话--我想让它变得更简单。我不得不承认，在这个例子中，为了重构和更好地学习ES6如何帮助我在将来创建有表现力的简单代码(或者至少要理解某人是否使用了某种疯狂的一行代码)，我也会进行重构。

// HTML: <canvas></canvas>
const canvas = document.querySelector('canvas');
// I'm wondering if there is another way to do this:
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

我可以像这样创建width和height：

const { innerWidth: width, innerHeight: height } = window;
// equivalent to:
const width = window.innerWidth;
const height = window.innerHeight;

我正在寻找一种解决方案，它不是创建新变量，而是使用一些属性名称将值赋值给对象。有一种惯用的方法吗？

就像这样：

const canvas = document.querySelector('canvas');
// NONE OF THESE WORKED
const { innerWidth: canvas.width, innerHeight: canvas.height } = window;
const { canvas.width, canvas.height } = { window.innerWidth, window.innerHeight }

Answer 1

就像这样： //所有这些都不适用于const { innerWidth: canvas.width，innerHeight: canvas.height }= window；

这是正确的方法。但是，您不希望声明新变量，而是将canvas属性作为目标，因此const在这里是错误的。你只需要任务。和you need to wrap in parenthesis

({ innerWidth: canvas.width, innerHeight: canvas.height } = window);

Answer 2

在一行中这样做的一种可能方法是使用Array destructuring。下面的示例认为，在源对象和目标对象上，属性名是不同的。

[canvas.width, canvas.height] = [window.innerWidth, window.innerHeight]

在我看来，这是非常直观的代码，但我不认为它经常使用。这可能会在经验较少的JavaScript开发人员中造成一些混乱，因此您需要自己决定它是否真正提高了代码的可读性。