变量的解构赋值

变量的解构赋值(模式匹配)

  ...  拓展运算符  可以将数据类型变为数组

  解构赋值:数组的解构赋值  对象的解构赋值

  1. 前后模式必须匹配

    后面的值是什么格式,前面变量声明的也是什么格式,比如后面的值是二维数组,前面声明的也是二维模式

    案例:

      let [a,[b,c]]=[1,[2,3]]; // a   b   c   是变量

      console.log(b);   //2

  2. 前多后少

    前面声明的变量多,后面赋值的少,解构不成功,就相当于只声明了变量,但没赋值,解构不成功,值都是 undefined

    案例:

      let [a,b]=[1];   // a    b   是变量

      console.log(b)  // undefined

  3. 前少后多

    1. 省略赋值  let[,,c]=[45,12,33]     //  c 是变量

    2. 不定参数的解构赋值,使用 ... 叫拓展运算符 ,注意事项 :拓展运算符必须写后面

      拓展运算符:...as 将后面的值以数组的形式,赋值给 as ,拓展运算符必须写在最后

    案例:

      1. let [,,c]=[45,26,13] // c 是变量

          console.log(c)  // 13

      2. let [...a]=[45,26,13];    // a 是变量

          console.log(a)  // 数组的形式 [45,26,13]

  4. 带有默认值问题

    问题:先给默认值,在解构赋值,还是先解构赋值,如果没有在考虑默认值?

    案例分析

      let [x,y=(function(){console.log("haha");return 10;})()]=[45,23];

      console.log(y)  //23

      最终没有输出 haha ,说明不是先给默认值,二十先解构赋值,如果没有,在考虑默认值

  所以:解构不成功的时候,才会有默认值,没有赋值,没有定义

  判断一个变量有没有定义:

    var a=null;  a=[ ];  a={ };  a=" "   都是定义了

    var a=undefined   未定义

    所以只有解构的时候,后面是 undefined 的时候,才会走默认值,否则后面给什么值就是赋值什么;

  解构不成功:undefined

  对象的解构赋值;

    1. 变量和属性必须同名,才可以解构赋值

    2. 如果解构失败,值是 undefined

      let {name,a}={name:"zhang",age:20};  // name a 是变量

      console.log(name,a) // zhang   undefined

      其中 name a 是变量  对象的 name age 是属性,name变量 找到了对象的属性 name 所以,得到值为 zhang; 

      a 变量,找不到对象的属性,所以得不到值,为 undefined;  

      因为解构赋值,所以我们有了这样一个新的写法

      let {ceil}=Math;  

      console.log(ceil(1.2))  // 2    解析这个代码  let {ceil} = {ceil:function(){}}   //这里面放的 math 对象的方法, ceil 的方法等于 ceil 的变量,所以 ceil 的变量 也拥有了相同的方法

    3. 特殊情况,变量名和属性名不一致怎么办?

      let {foo:b}={foo:"zhang"}  //  = 左边: foo 是属性 b 是变量  = 右边:foo 是属性

        前面 foo 是属性,后面 b 变量,解构的机制,是对应的属性值 赋值给后面的变量

    4. 对象解构的默认值问题

      默认值跟数组解构的默认值是一样的,解构成功就直接赋值,不走默认值,解构不成功,就是没有值,或者值是 undefined 走默认值;

      let {name,age=45}={name:zhang}  console.log(age) // 45 

      let {name,age=45}={name:"zhang",age:undefined}   console.log(age)   //45      

    5. 对象解构的赋值注意点

      {} 前面不能没东西    {a}={a:12}  x  这种写法是错的

      解决:我们必须声明 一个变量才可以:let {a}={a:12}

    6. = 右边在什么情况下,才可以解构

      = 右边的值,只要带有 length 属性,才可以解构,如果非要把不能解构的东西解构,转成字符串即可

  函数参数解构

    函数传对象,要在形参附一个空对象

  带 = 

  function fn([a,b]=[12,23]){

    console.log(a+b)

  }  

  函数参数默认值

  function fn(b,v=12){

    console.log(b)

  }

  fn(12)  前面是形参,后面是默认值,带默认值的参数尽量要写后面

  两句法则:

    有没有办法解构

    解构成不成功

  函数参数等号左边是形参,右边是默认值,函数调用不传参,走函数形参的默认值;函数调用传参,默认值就不走了,走实参

 

  备注:

    函数作用域

    函数在调用会形成私有作用域,在这个作用域下,声明的变量和参数变量都是私有的变量,外界访问不到同时,他在操作相同的变量是,不会操作外部的

  

  形参的没有变量提升,如果传值直接赋值,所以形参有暂时性死区这一说

  暂时性死区,没有赋值,直接操作变量

  函数一个类数组参数 arguments 是实参构成的集合,是一个类数组

  ... 拓展运算符,可将实参变成一个数组;

  5. 箭头函数

    1. 箭头函数 是适用于匿名函数

    用 function 声明的函数,是有名函数

    做回调函数的时候,也是一个匿名函数

    var fn=function(){}    匿名函数    做了回调函数

  匿名函数的定义:只要不是关键字 function 声明的函数叫匿名函数

  var fn=(形参) => { 函数体 }

  每个函数结束的时候一定要 return

  let fn=x=>x   这种语法 : 第一个 x  代表 形参  第二个 x 代表 return 的语句

  当只有一个参数,可以省略小括号;

  当函数体只有一行代码且 return xxx 的时候,可以省略 {} 和 return

  箭头函数的优势:

    1. 箭头函数没有 this 指向

      改变 this 指向的方法

        1. 在函数前 提前对 this 赋值

        2. 在函数结尾处 {}.bind(this)

        3. 在函数结尾处 {}.apply(this) 或 {}.call(this)

        4. 使用箭头函数

    2. 箭头函数获取实参,不能使用arguments 用 ...arg

    3. 箭头函数不能充当类,因为 this 指向 window,而 类 的 this 指向当前实例对象

     箭头函数的 this 指向 window

    函数角色

      函数可以扮演 类,普通函数,function 实例对象

      类:每个类身上有一个 prototype 的属性,这个属性是一个对象,里面有个 constructor 的属性,属性值是类本身

        new 实例的时候,其实就是调用这个 constructor 的函数

      对象,每个对象天生有个 __proto__ 的属性

         __proto__ 也是一个对象,里面有个构造函数指向他的类这个对象,也有一个 constructor 这个属性值是他的类

  对象的属性

    首先看对象中私有的属性中,有没有这个属性,有就直接使用,没有就使用 __proto__  向他的父类的原型上查找;

 

原文地址:https://www.cnblogs.com/panghexin/p/11157026.html