ES6基础语法----解构

冷不防 2024-04-07 15:56 193阅读 0赞

目录

解构

1.数组解构 等号左边的变量放到中括号内部，匹配右侧数组中的元素。

2.对象解构

3 字符串解构

4数值解构 可以获取到数值包装器构造函数原型中指定的方法。

5布尔值解构

#

#

解构

1.数组解构 等号左边的变量放到中括号内部，匹配右侧数组中的元素。

1.1完全解构:

  1. let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
  2. console.log(a,b,c,d,e)
  4. //1 2 3 4 7
  6. let [a,b,c,d,e]=[1,2,3,4];
  7. console.log(a,b,c,d,e);
  9. //1 2 3 4 undefined
  11. let [a,b,c,d,e]=[1,2,3,[4,5],6];
  12. console.log(a,b,c,d,e);
  14. //1 2 3 [ 4, 5 ] 6

1.2不完全解构

  1. let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
  2. console.log(a,b,c,d,e);
  4. //1 2 3 4 7

1.3默认值解构 默认值生效条件 当右侧匹配严格模式为undefiend

  1. let [a=1,b=2,c=3]=[4,5,6];
  2. console.log(a,b,c);
  4. //4 5 6
  7. let [a=1,b=2,c=3]=[];
  8. console.log(a,b,c);
  10. //1 2 3

默认值也可以是一个函数

  1. let test=()=>{
  2.     console.log('我是箭头函数');
  3.     return 1
  4. }
  5. let [a=test()]=[];
  6. console.log(a);
  8. //我是箭头函数
  9. //1
  13. let test=()=>{
  14.     console.log('我是箭头函数');
  15.     return 1
  16. }
  17. let [a=test()]=[222];
  18. console.log(a);
  21. //222

1.4集合解构 拓展运算符

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

15.拓展运算符

  1. let a=[1,2,3,4,5];
  2. let [...arr]=a;
  3. console.log(arr);
  4. console.log(arr===a);
  7. //[ 1, 2, 3, 4, 5 ]
  8. //false

2.对象解构

2.1属性名必须和变量名一致才能取到正确的值

  1. let {name,age}={name:'lili',age:18};
  2. console.log(name,age);
  4. //lili 18

2.2属性名和变量名不一致 给属性名重命名

  1. let {name:a,age:b}={name:'lili',age:12};
  2. console.log(a,b);
  4. //lili 12

2.3嵌套结构

  1. let obj={p:['hello',{y:"world"}]};// a b取到hello world
  2. let {p:[a,{y:b}]}=obj;
  3. console.log(a,b);
  6. //hello world

2.4对象默认值结构

  1. let {x:y=888}={};
  2. console.log(y);
  4. //888

练习题：

  1. const [a, b, c, ...d] = [1, 2, 3, 11, 999];
  2. const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
  3. console.log(a, b, c, d, e, f1, g, h);
  6. //1 2 3 [ 11, 999 ] undefined undefined 5 { i: 6, j: 7 }

3 字符串解构

可以使用对象解构或者是数组解构，使用数组结构可以获取指定字符；使用对象结构可以获取实例属性方法;

3.1.使用数组进行字符串解构

  1. let [a,b,c,d,e]='hello';
  2. console.log(a,b,c,d,e);
  4. //h e l l o

3.2.使用拓展运算符 解构字符串

  1. let [...arr]='world';
  2. console.log(arr);
  4. //[ 'w', 'o', 'r', 'l', 'd' ]

3.3使用对象解构字符串

  1. //String.prototype.toString/valueOf/length
  2. let {toString,valueOf,length}='hello';
  3. console.log(toString,valueOf,length);
  6. //[ 'w', 'o', 'r', 'l', 'd' ]
  7. //[Function: toString] [Function: valueOf] 5

4数值解构 可以获取到数值包装器构造函数原型中指定的方法。

  1. let {toString,valueOf}=10;
  2. console.log(toString,valueOf)
  4. //[Function: toString] [Function: valueOf]

5布尔值解构

  1. let {toString,valueOf}=true;
  2. console.log(toString,valueOf);
  4. //[Function: toString] [Function: valueOf]

发表评论

表情：
评论列表 （有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ES6语法之：解构赋值

    先要知道，这个用法有一套提取值的**模式**。解构就是“按照一定模式，从数组和对象中提取值”。 其次，了解一些使用场合，比如下面，一次从对象p取得两个值。 c...

    喜欢ヅ旅行喜欢ヅ旅行/ 0 赞/ 182 阅读

    相关 ES6基础语法----解构

    目录 解构 1.数组解构 等号左边的变量放到中括号内部，匹配右侧数组中的元素。 2.对象解构 3 字符串解构 4数值解构 可以获取到数值包装器构造函数原型中指定的方

    冷不防冷不防/ 0 赞/ 194 阅读

    相关 es6 解构

    解构: 从数组或对象中提取值,对变量进行赋值          解构赋值号的两边的格式需要相互对应,对应位置的数值类型也需要一致 let [a,b.[c]] = [

    素颜马尾好姑娘i素颜马尾好姑娘i/ 0 赞/ 130 阅读

    相关 es6 解构赋值

    ES6解构赋值 传统的变量赋值： 变量的解构赋值： 数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

    短命女短命女/ 0 赞/ 518 阅读

    相关 ES6——解构赋值

    原文链接：[小邵教你玩转ES6][ES6] 解构赋值 解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

    迷南。迷南。/ 0 赞/ 650 阅读