【ES6】变量解构赋值常用的方法——笔记1

59 阅读2分钟

一、两个(两个以上)变量交换

    let x=1;
    let y=2;
    let z=3;
    [x,y,z]=[z,y,x];
    console.log(x,y,z);// 3 2 1

二、函数返回多个值

1、数组形式

     function handle(){
        return [1,2,3]
    }
    let [x,y,z]=handle()
    console.log(x);//1
    console.log(y);//2
    console.log(z);//3

2、对象形式

常规:当key值与函数返回的key值一致;

 function getObject(){
        return{
            x:1,
            y:2,
            z:3
        }
    }
    let {x,y,z}=getObject()
    console.log(x);//1
    console.log(y);//2
    console.log(z);//3

特殊:当key值与函数返回的key值一致;

 function getList(){
    return{
        a:"a",
        b:"b",
        c:"c"
    }
   }
   let {a:x,b:y,c:z}=getList()
   console.log(x);//a
   console.log(y);//b
   console.log(z);//c

三、把传入函数的参数变量一一对应

function getList([x,y,z]){
    console.log(x);//x
    console.log(y);//y
    console.log(z);//z
  }
  getList(["x","y","z"])
  
 function getList({a,b,c}){
    console.log(a);//a
    console.log(b);//b
    console.log(c);
  }
  getList({
    c:"c",
    a:"a",
    b:"b"
  })

四、提取JSON数据(常用)

let obj ={
        sno:"111",
        sna:"yt",
        sport:['run','swim']
    }
    let {sno,sna,sport} = obj
    console.log(sno);//111
    console.log(sna);//yt
    console.log(sport);//['run'.'swim']

``

let obj ={
        sno:"111",
        sna:"yt",
        sport:['run','swim']
    }
    let {sna:name} = obj
   console.log(name);//yt

五、设置函数参数默认值

function fun(x,y="default"){
        return [x,y]
    }
    let [x,y]=fun("x","y")
    console.log(x,y);//x y
    let [x1,y1]=fun()
    console.log(x1,y1);

六、Map(Iterator 接口的对象)配合快速获取键名或键值的

1、获取键——值

const map = new Map()
    map.set("sno", 111)
    map.set("sna", "yt")
    map.set("sex", "未知")
    map.set("like", ["run", "swim"])
    for (let [key, value] of map) {
        console.log("key:", key);
        console.log("value:", value);
    }

运行结果如下

image.png

2、只获取键

 for (let [key] of map) {
        console.log("key:", key);
    }

3、只获取值

 for (let [,value] of map) {
        console.log("value:", value);
    }

4、注意

如果不是Iterator 接口的对象运行以下代码会产生“Uncaught TypeError: obj is not iterable”报错

obj={
    sno:"111",
    sna:"yt",
    sex:"未知",
    like:["run","swim"]
   }
   for(let [key,value] of obj){
    console.log("key:",key);
    console.log("value:",value);
   }

image.png

七、模块的加载(常用)

注册界面导入api文件下的login.js文件的方法

import { getCodeImg, register } from "@/api/login";
import request from '@/utils/request'
// 注册方法
export function register(data) {
  return request({
    url: '/register',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}
// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captchaImage',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })
}

八、