zoukankan      html  css  js  c++  java
  • 变量的解构赋值

    ---恢复内容开始---

    从按照一定的模式从象或数组中提取值,然后对变量进行赋值就是解构

    1.数组的解构赋值

    数组的解构赋值本质上是模式匹配

    左边多,多出来即为undefined

    let [a,b,c]=[1,2];
    console.log(a, b, c);//1,2,undefine

    右边多,则省略即可

    let [a,b]=[1,2,3];
    console.log(a, b);//1,2

    数组的解构赋值可以嵌套,也可以有默认值,解构时,变量的取值由它们所在的位置决定

    实际上只要数组右边的模式有Iterator接口就可赋值

    2.对象的解构赋值

    对象解构时,因为对象的属性没有次序,所以值跟变量的次序不对应也行,但是变量必须与属性同名才能取到值

    实际上属性只是作为匹配模式,真正被赋值的是属性的值

    左右两边数量不等的情形同数组一样,(但是左边可以是个空对象,虽然这样毫无意义,但是是合法的)

    可以嵌套,可以有默认值

    3.字符串的解构赋值

    字符串被转换成了一个类似数组的对象,类似数组的对象都有一个length属性,可以进行进行解构赋值

     let [a,b,c,d,e,f,g]="hello";
    console.log(a, b, c, d,e);//h e l l o

    左右两边数量不等时如上所述

    4.数值和布尔值的解构赋值

    解构赋值时,如果右边为数值或者布尔值,则先将其转换为对象Number和Boolean

    解构赋值的规则是,只要右边的值不是数组或对象,就先将其转换为对象,由于undefined和null无法转换为对象,所以对它们进行解构赋值会报错

    5.函数参数的解构赋值

    function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
    
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]
    function move({x, y} = { x: 0, y: 0 }) {
      return [x, y];
    }
    
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, undefined]
    move({}); // [undefined, undefined]
    move(); // [0, 0]

     好好感受上面这两个,差点被绕晕了,实际上跟前面对象的解构赋值一样,再来一个例子看看

      function move({x=1,y=2}={x:3,y:4}){
            console.log(x,y)
        }
        a()//1,2

    6.圆括号问题

    6.1不能使用圆括号的情况

    变量声明语句

    函数参数

    赋值语句的模式

    6.2可以使用圆括号的情况

    赋值语句的非模式部分

    7.用途

    交换变量的值

    从函数返回多个值

    函数参数的定义

    提取JSON 的数据

    函数参数的默认值

    遍历Map结构

    输入模块的指定方法

    ps:我感觉最大的用处就在于提取东西

  • 相关阅读:
    .net解决跨域问题
    win7系统安装不了Visual Studio及sql server相关问题整理
    Visual Studio注释代码段快捷键
    实现文件下载,将后台返回的字节流转成下载链接
    表单中输入内容,搜索时,下面table中该列中包含关键字的高亮显示
    实现select联动效果,数据从后台获取
    vue的v-model指令
    SSM框架中,controller的action返回参数给vue.js
    vue路由实现多视图的单页应用
    关于vue的增删改查操作
  • 原文地址:https://www.cnblogs.com/donutkiki/p/11515423.html
Copyright © 2011-2022 走看看