ES6基础语法----解构

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

**目录**

解构

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

2.对象解构

3 字符串解构

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

5布尔值解构

--------------------

##  ##

## 解构 ##

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

1.1完全解构:

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

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

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

1.2不完全解构

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

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

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

默认值也可以是一个函数

let test=()=>{
    	console.log('我是箭头函数');
    	return 1
    }
    let [a=test()]=[];
    console.log(a);
    
    //我是箭头函数
    //1
    
    
    
    let test=()=>{
    	console.log('我是箭头函数');
    	return 1
    }
    let [a=test()]=[222];
    console.log(a);
    
    
    //222

1.4集合解构 拓展运算符

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

15.拓展运算符

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

## 2.对象解构 ##

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

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

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

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

2.3嵌套结构

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

2.4对象默认值结构

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

练习题：

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

## 3 字符串解构 ##

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

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

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

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

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

3.3使用对象解构字符串

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

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

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

## 5布尔值解构 ##

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