es6的解构赋值

tomener 发布于2019-08-23 14:31 / 1357人阅读

摘要：函数参数中，模式不能带有圆括号函数属于声明变量赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

解构赋值的意思：允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

数组的解构赋值

 大多数变量赋值都是多带带进行的
 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] = [3，2，1]
 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.prototype和Boolean.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 }] = [{}, {}]);

GPU云服务器云服务器解构赋值对象解构解构函数 php的变量赋值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100725.html

ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
es6 - 解构赋值

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。解构赋值解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。在es6之前，赋值操作需要=...

DirtyMind 2019-08-26 11:45 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
《ES6学习2》变量的解构赋值

摘要：解构赋值的分类数组解构赋值对象解构赋值字符串解构赋值数值解构赋值布尔值解构赋值函数参数解构赋值。嵌套情况默认值解构赋值允许设置默认值，当数组成员严格等于，默认值将生效。报错报错函数参数的解构赋值函数的参数也可以使用解构赋值和指定默认值 ES6可以从数组和对象中提取值，然后对变量进行赋值。解构赋值的分类：数组解构赋值、对象解构赋值、字符串解构赋值、数值解构赋值、布尔值解构赋值、函数参...

mist14 2019-08-26 13:52 评论0 收藏0