ES6 JavaScript 解构赋值常见用法总结

作者:青柠时间:2026-10-24 22:36:31浏览:532

本文总结ES6中JavaScript解构赋值的多种应用场景。从对象和数组的结构匹配原理出发,详细演示对象声明与赋值、变量交换、数组解构以及函数对象实参解构的具体用法,帮助开发者写出更简洁优雅的代码。

ES6解构赋值产生的背景:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let a = obj.a
    let b = obj.b

传统对象取值方式的核心痛点:

每次获取属性需明确指定属性名并重新定义变量,占用额外代码行且存在重复声明(如变量a),导致代码冗余。ES6解构语法基于模式匹配思想,允许通过左侧变量名直接匹配右侧属性名以获取对应值,从而简化代码。

上述问题的解构解决方案:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

结果显示,无需在右侧显式声明取值属性名,完全依据右侧数据结构进行对应取值,实现方式十分优雅。

ES6解构赋值的主要应用场景:

1.对象声明解构

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

2.对象赋值解构

    let a, b
    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    ({a, b} = obj)
    // 更常见的场景是变量c d被声明到全局,这种情况在vue很常见,数据被提前声明到data选项,数据访问一般都是this.xxxdata,此时就很有用了
    ({a:c, b:d} = obj)

3.变量交换

    [x,y] = [y,x]

4.数组解构

   let  [first,] = arr//获取 
   let [first, ...rest] = arr//获取第一个,以及剩余参数

5.函数对象实参解构

    function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
    {...}

更多关于ES6下的Javascript使用小技巧请查看下面的相关链接

作者最新文章