ES6 对象解构的用法与用途

现在我们来看一个最基础的例子。

let { age, name, data } = { name: “jobsofferings”, age: 21 };

console.log(name); // jobsofferings

console.log(age); // 21

console.log(data); // undefined

可以很明显的观察到，在对象解构中，外部定义的变量由大括号包裹、变量必须与属性同名、对应的变量和属性没有次序、变量无同名对应属性的相当于未定义(undefined)。

那么对象解构有什么好处呢？在我看来，对象解构能够很便捷的将现有对象的内置方法提取出来，还能灵活的获取特定的值，比如

let { log, sin, cos } = Math;

将一个库中的属性通过解构的方式取出来，只取当前需要的属性，可以节省很多的空间。

function getStyle(w, defaultStyle) {

let width = w || ‘300px’;

// someCode

return { width, …defaultStyle };

}

const defaultStyle = { height: ‘100px’, display: ‘block’ }

const style = getStyle(‘200px’, defaultStyle);

const { width } = getStyle(‘200px’, defaultStyle);

console.log(style); // { width: ‘200px’, height: ‘100px’, display: ‘block’ }

console.log(width); // 200px

这是一个很有意思的用法，我的函数接受一个 width 和 defaultStyle (这里甚至可以用 arguments 会更好，不过为了简便演示，这个函数也不需要具体的意义，所以就没写出来)，使用了对象解构的方式去返回一个对象，我可以直接使用 style 去获取，也可以通过对象解构的方式只取其中的一个。

这样做的好处是更加的灵活，这个函数可能是一个公共函数用于生产某特定种类的数据，但是事实上你的各个组件(或者是模块)是需要这么多数据，只需要部分特定数据的，这样你就可以使用对象解构专门的去取出来，既灵活操作，又节省内存空间。

值得注意的是第四行…defaultStyle，这种写法叫做扩展运算符，会将一个数组或者对象转为用逗号分隔的参数序列。

/**

• 对象扩展

**/

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题