ES6--(5)解构:更方便的数据访问

解构为何有用?

    解构使得在 JS 中操作对象与数组变得更容易。使用熟悉的对象字面量与数组字面量语法,可以将数据结构分离并只获取你感兴趣的信息。对象解构模式允许你从对象中进行提取,而数组模式则能用于数组。

对象解构

    对象解构语法在赋值语句的左侧使用了对象字面量。

ES6--(5)解构:更方便的数据访问_第1张图片

解构赋值

    解构赋值表达式的值为表达式右侧(在 = 之后)的值。也就是说在任何期望有个值的位置都可以使用解构赋值表达式。

    注意必须用圆括号包裹解构赋值语句,这是因为暴露的花括号会被解析为代码块语句,而块语句不允许在赋值操作符(即等号)左侧出现。

ES6--(5)解构:更方便的数据访问_第2张图片

默认值

    当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为 undefined 。可以为其指定一个默认值。

ES6--(5)解构:更方便的数据访问_第3张图片

赋值给不同的本地变量名

ES6--(5)解构:更方便的数据访问_第4张图片

嵌套的对象解构

ES6--(5)解构:更方便的数据访问_第5张图片

数组解构

ES6--(5)解构:更方便的数据访问_第6张图片

解构赋值

ES6--(5)解构:更方便的数据访问_第7张图片

互换值

ES6--(5)解构:更方便的数据访问_第8张图片

默认值

ES6--(5)解构:更方便的数据访问_第9张图片

嵌套的解构

ES6--(5)解构:更方便的数据访问_第10张图片

剩余项

ES6--(5)解构:更方便的数据访问_第11张图片

混合解构

ES6--(5)解构:更方便的数据访问_第12张图片

参数解构

解构的参数是必需的

ES6--(5)解构:更方便的数据访问_第13张图片

参数解构的默认值

ES6--(5)解构:更方便的数据访问_第14张图片

你可能感兴趣的:(ES6--(5)解构:更方便的数据访问)