const movies = { list: [ { title: "Heat" }, { title: "Interstellar" }, ], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.list.length) { const value = this.list[index++].title; return { value, done: false }; } return { done: true } } } } } const [firstMovieTitle] = movies; console.log(firstMovieTitle); //=> 'Heat'
movies对象通过定义Symbol.iterator方法实现了一个迭代器。这个迭代器可以迭代所有电影的title属性。
我们在movies对象上遵循了迭代接口实现，从而实现了通过解构movies来获取到标题，比如我们获取第一个电影的标题：const [firstMovieTitle] = movies; 。
解构用法的上限就是没有上限。
5. 解构动态属性
在我的经验中，解构一个对象的属性要远比解构一个数组的情况更多。
解构对象看起来非常的简单：
const movie = { title: "Heat" }; const { title } = movie; title; //=> Heat
const { title } = movie;创建了一个变量title，然后把movie.title的值赋值给了这个变量。
当我第一次了解到对象解构的时候，有一点令我惊讶的是你并不需要预先知道属性的静态名称。你可以通过动态属性名来解构一个对象。
为了了解动态解构的工作原理，我们来写一个打招呼的函数作为例子：
function greet( obj, nameProp ) { const { [nameProp]: } = obj; return `Hello, ${name}!`; } greet({ name: "Batman" }, "name"); //=> Hello, Batman! greet( {}, "name" ); //=> Hello, Unknow!
greet()被调用时需要传递两个参数，一个是对象，一个是属性名称。
在greet()函数内部，解构表达式const { [nameProp]: } = obj;使用中括号[nameProp]读取动态属性的名称。name变量接收动态属性的值。
更好的做法就是你可以指定一个默认的值Unknow以防属性不存在的情况。
6. 总结
解构可以帮助你更方便快捷的访问对象属性和数组元素。
除了基本用法之外，数组解构还可以方便的交换变量，访问数组元素，做一些遵循不可变原则的操作。
JavaScript提供了更多的可能性，因为你可以通过扩展迭代器实现自定义的解构逻辑。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: