美文网首页Web 前端开发 前端开发那些事Web前端之路
ES6中使用解构赋值能带给我们什么?

ES6中使用解构赋值能带给我们什么?

作者: 贵在随心 | 来源:发表于2017-12-24 10:24 被阅读29次

    什么是解构?

    正统解释:按照一定模式,从数组和对象中提取值,然后对变量进行赋值。

    直白理解:模式匹配,映射关系,只要等式放的两边模式一样,一一对应,左边的变量就会被赋予对应的值。

    数组解构

    变量声明并赋值时的解构

    变量声明并赋值时的解构

    变量先声明后赋值时解构

    变量先声明后赋值时解构

    默认值

    为了防止从数组中取出一个值为undefined 的对象,可以为这个数组设置一个默认值。

    为数组解构设置 默认值

    交换变量

    在没有解构赋值的情况下,交换两个变量需要一个临时变量。

    交换变量

    解析一个从函数中返回的数组

    解析一个从函数中返回的数组

    忽略某些返回值

    忽略某些返回值

    将剩余数组赋值给一个变量

    当解构一个数组是,可以使用剩余模式,将数组剩余部分赋值给一个变量。

    将剩余数组赋值给一个变量

    注意:剩余元素必须是数组的最后一个元素,否则会抛出 SyntaxError 错误。

    剩余元素必须是数组的最后一个元素

    用正则表达式匹配提取值

    用正则表达式方法exec() 匹配字符串会返回一个数组,该数组第一个值是完全匹配正则表达式的字符串,然后的值是匹配正则表达式括号内内容部分。结构赋值允许你轻易的提取出需要的部分,忽略完全匹配的字符串。

    用正则表达式匹配提取值

    对象解构

    基本赋值

    基本赋值

    无声明赋值

    无声明赋值

    注意:赋值语句周围的括号,是使用对象字面解构赋值时不需要声明的语法。{a,b} = {a:2, b:3} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。然而,({a,b} = {a:2, b:3}) 是有效的,正如 var {a,b} = {a:2, b:3}。需要注意的是:这里的括号表达式需要一个分号在它前面,否则它会被当成一行中的函数执行。

    给新的变量名赋值

    给新的变量名赋值

    默认值

    默认值

    给新的变量名并提供默认值

    给新的变量名并提供默认值

    函数参数解构

    ES5函数参数形式 ES6函数参数形式

    如上代码,解构的左边被分配给右手边的空对象字面值,也可以在没有右侧分配的编写情况下编写函数。但是,这样在函数调用时,至少要提供一个参数,而在ES中,你可以直接调用函数,不用提供任何参数。

    解构嵌套对象和数组

    解构嵌套对象和数组

    for of 迭代和解构

    for of 迭代和解构

    从作为实参的函数参数的对象中提取数据

    从作为实参的函数参数的对象中提取数据

    相关文章

      网友评论

        本文标题:ES6中使用解构赋值能带给我们什么?

        本文链接:https://www.haomeiwen.com/subject/rdgqgxtx.html