ECMAScript6之变量解构赋值

数组解构


入门例子:

<template>
  <div class="hello">
    <el-row style="margin-top:10px;">
      <el-col :span="12">
        <el-button type="primary" @click="destructMethod">解构</el-button>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
  export default {
    name: 'HelloWorld1',
    data () {
      return {
        pubUserInfo: {},
      }
    },
    watch: {},
    mounted() {},
    created() {},
    methods: {
      destructMethod() {
        let [a, b, c] = [0, 1, 2];
        console.log("a = " + a + " , b = " + b + " , c = " + c);
      }
    }
  }
</script>
<style scoped></style>
  • 实验1
let [a, [[b], c]] = [1, [[2], 3]];
  • 实验2
let [ , , c] = ["foo", "bar", "baz"];
console.log("c = " + c);
  • 实验3
let [a , , c] = ["foo", "bar", "baz"];
console.log("a = " + a);
console.log("c = " + c);
  • 实验4
let [a, ...c] = [1, 2, 3, 4];
console.log(a);
console.log(c);
  • 实验5
let [a, b, ...c] = [1];
console.log(a);
console.log(b);
console.log(c);

对象解构


let { x, y } = { x: 'aaa', y: 'bbb' };
alert("x = " + x + " , y = " + y);
let { z } = { x: 'aaa', y: 'bbb' };
alert(" z = " + z);

字符串解构


const [a, b, c, d, e] = 'hello';
alert(" a = " + a + ", b = " + b + ", c = " + c + ", d = " + d + ", e = " + e);

函数形参解构


export function doMethod([x, y]) {
    return x + y;
}

let result = doMethod([1, 2]);
alert("result = " + result);
  • 默认值解构
export function doMethod({x = 0, y = 0} = {}) {
    return [x, y];
}

let result1= doMethod({x: 3, y: 8});
console.log(result1);
let result2= doMethod({x: 3});
console.log(result2);
let result3= doMethod({});
console.log(result3);
let result4= doMethod();
console.log(result4);

使用场景


使用场景1 - 变量交换

let a = 1;
let b = 2;
[a, b] = [b, a];
alert("a = " + a + " , b = " + b);

使用场景2 - 函数返回多个值的情况

  • 返回数组的情况
export function doMethod() {
    return [1, 2, 3];
}

let [a, b, c] = doMethod();
alert("a = " + a + " , b = " + b + " , c = " + c);
  • 返回对象的情况
export function doMethod() {
    return {
        a: 1,
        b: 2
    }
}

let {a, b} = doMethod();
alert("a = " + a + " , b = " + b);

使用场景3 - 提取json数据

let jsonData = {
    "name" : "sunpy",
    "age" : 31,
    "hobby" : ["basketball", "football"], 
};

let { name, hobby } = jsonData;
console.log(name);
console.log(hobby);

使用场景4 - 引用模块的指定方法

  • require方式
export function doMethod() {
    console.log("execute doMethod");
}

var { doMethod }  = require('@/utils/test.js');
doMethod();
  • import方式
export function doMethod() {
    console.log("execute doMethod");
}

import { doMethod } from '@/utils/test.js'

doMethod();

参考


https://es6.ruanyifeng.com/#docs/destructuring#%E7%94%A8%E9%80%94

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容