es6的解构赋值

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6的解构赋值脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
解构赋值意思:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

数组解构赋值

 大多数变量赋值都是单独进行的
 let a  = 10
 let b = 10
 
 上面这样写法就单独进行简单的赋值,那么数组解构赋值如何去写,请看下面的例子
 let [a] = 10 
 上面这样写会报错,左边[a]为匹配项,右边10为赋值项,如果右边不是数组,或不是可遍历的结构就会报错
 
 ------------------
 下面这样就不会报错,匹配项可以匹配到,而且这也算是单独赋值
 let [a] = [10]
 console.LOG(a) // 将会得到10
 
 结构赋值的优点就是多个赋值,结构化赋值,下面的b会得到undefined,因为匹配项匹配到的赋值为undefined未定义
 let [a,b] = [10]
 console.log(a) // 10
 console.log(b) // undefined
 
 那我们来看看结构化多一点的赋值
 let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[[8]]]
 console.log(a,b,c,d,e,f,g,h) // 1,2,3,4,5,6,7,8
 
 如果去掉[[8]]的二维数组,变为一维数组会怎样
 let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[8]]
 console.log(a,b,c,d,e,f,g,h) // 报错
 
 那我们来看看数组解构赋值的默认值是如何定义的呢?
 let [arr = 3] = []
 console.log(arr) // 3
 
 来看看下面这一组
 let [arr1 = 1,arr2 = 2,arr3=3] = []
 console.log(arr1,arr2,arr3) // 1,2,3
 
 记住数组解构赋值不管你有没有默认值,右边只要匹配到并且有值都会覆盖左边的默认值
 let [arr1 = 1,arr2 = 2,arr3=3] = [321]
 console.log(arr1,arr2,arr3) // 3,2,1
 
 但是有一种类型除外不会右边的不会覆盖左边的默认值,undefined(只有它)
 let [a = 3] = [undefined]
 console.log(a) // 3

对象的解构赋值

  对象的结构赋值和数组的不太一样,对象是对属性进行匹配的,而数组是按顺序匹配的
  
  下面我们来看看对象解构赋值如何来写
  let {re, ty} = {re: 1, ty: 2}
  console.log(re,ty) // 1,2
  
  下面这个例子obj会报错是因为obj是匹配项用来匹配右边对象的属性key,而左边的baz才是变量
  let {obj: baz} = {obj: 'baz'}
  console.log(baz) // baz
  console.log(obj) // 报错
  
  我们来试着写对象解构化的解构赋值
  let obj = {
      a: {
          b: [1],
          c: {
              c1: 'c1',
              c2: 'c2',
              c3: true
          }
      }
  }
  let {a, a: {b,c: {c1,c2,c3}}} = obj
  console.log(a) // 解构出的结果
  {
      b: [1],
      c: {
          c1: 'c1',
          c2: 'c2',
          c3: true
      }
  }
  
  会得到[1],这就是对象解构赋值的原因,打印里面的属性都会得到值而且不会报错
  console.log(b)
  
  我们再来看看对象解构赋值默认值
  
  右边的值永远覆盖左边的默认值,除却undefind
  let {inIT = 4} = {init: 5}
  console.log(init) //5
  

字符串,数值布尔,函数解构赋值

 字符串
 
 我理解的啊就是字符串会被分割成数组,然后一一对应,感觉和数组解构赋值差不多
 let [a,b,c,d,e,f] = 'qwert'
 console.log(a,b,c,d,e,f) // q,w,e,r,t,undefined

我们还可以获取字符串的长度,但是匹配属性必须为length,否则会报错
let {length : len} = '哈哈哈哈哈哈';
len // 6

数值布尔
我看官方是给了两个例子,数值和布尔解构都会将之转化为对象,软老师的解释就是数值和布尔值的包装对象都有toString属性,那我们来打印一下Number.PRototyPEBoolean.prototype果然两个里面都有toString的方法,而且还有一个valueOf方法,我们来试试
let {toString: s} = 123;
console.log(s) // 这会是一个toString方法

let {valueOf: s3} = true
s3 === Boolean.prototype.valueOf // true

函数

我们这里会得到12,其实这和上边的数组解构赋值和对象解构赋值一样,只要你能匹配到就可以解构
function add({a,b}) {
    return a+b
}
console.log(add({a:10,b:2})) 

function add({hh:[x, y],c}){
  return x + y+c;
}
console.log(add({hh:[1,2],c: 1})) //4

括号

 变量声明语句中,不能带有圆括号。
 let [(x)] = [3]
 let ({a}) = {a: 3}
 函数参数中,模式不能带有圆括号(函数属于声明变量)
 
 赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中。
 整个模式我理解的意思就是呢就是把左边的匹配模式包起来了
 ([b]) = [123]
 这种情况就是包裹一部分而且把模式包裹起来了
 [({ p: a }), { x: c }] = [{}, {}];
 那么正确的使用呢,就是例如下面这样,有对象的话一定要包裹变量,或是全部包裹起来
 [{ p: (a) }, { x: c }] = [{}, {}];
 [{ p: (a) }, { x: (c) }] = [{}, {}];
 [({ p: a }, { x: c })] = [({}, {})];
 ([{ p: a }, { x: c }] = [{}, {}]);

脚本宝典总结

以上是脚本宝典为你收集整理的es6的解构赋值全部内容,希望文章能够帮你解决es6的解构赋值所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。