ES6基础语法----解构

目录

解构

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]