ES6笔记（解构）

90 阅读 0 评论 60 点赞

我是靠谱客的博主忧郁大树，最近开发中收集的这篇文章主要介绍ES6笔记（解构），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、解构

解构通俗点说，就是通过一种特定格式，快捷的读取对象/数组中的数据的方法

基本用法：（如果右边是对象，左边也要用对象的格式，解构出来就是变量了，再也不是属性了）

//解构对象
var oUser={
	'name':'aaa',
	'age':20
}
//es5读数据的方法
console.log(oUser['name'],oUser['age']);//aaa 20
//let{name,age}=oUser; 
let{name,age,sex="man"}=oUser;//还能给默认值
console.log(name,age,sex);//aaa 20 man

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

//解构数组
let arr=[10,20,30];
//let [a,b,c]=arr; 
//console.log(a,b,c); //[10, 20, 30]
//如果只想解构一个
let [,b,]=arr;
console.log(b);//20

基本应用：

//解构二维数组
let arr=[10,[100,200],300];
//let [a,b,c]=arr; //b解构的是二维数组
//把二维数组解构出来
let [a,[b,d],c]=arr;
console.log(a,b,d,c); //10 100 200 300

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


//交换两个变量的值
//es5
let a=10,b=20,tmp=null;
tmp = a;
a=b;
b=tmp;
console.log(a,b)


//es6解构
let a=10,b=20;
[b,a]=[a,b];//这里不用let,解构出来是变量，前面已经定义了
console.log(a,b);//20 10


//用解构修改局部变量的值
let oUser={ //里面的name,age是属性，外面的是局部变量
	'name':'aaa',
	'age':20
},
name='bbb',
age=40;
({name,age}=oUser);//用小括号括起来，就被认为是结构表达式
console.log(name,age)

//其他解构
let name='aaa',age=20;
({name:name2,age:age2}={
	name,  //简写，没赋值就去作用域中找变量
	age
})
console.log(name2,age2,name,age) //bbb 40 bbb 40

解构表达式作为参数、解构三级对象：

//解构表达式作为参数（引用还是复制？）
let oUser={
	'name':'aaa',
	'age':20
}
function show(obj){
	console.log(obj === oUser); //true
	console.log(obj.name,obj.age);//aaa 20
	console.log(name,age);//aaa 20
}
show({name,age}=oUser); //作为参数传给函数
console.log(name,age); //aaa 20 已经解构出来了，在外面就相当于变量了

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

//解构三级对象:一级级往下解构，遇到同名要改名字
let oUser={
	'name':'aaa',
	'age':20,
	'myClass':{
		'group1':{
			'one':'aaa1',
			'two':'aaa2'
		},
		'group2':{
			'one':'bbb1',
			'two':'bbb2'
		}
	}
}
let{name,age,myClass}=oUser;
let{group1,group2}=myClass;
let {one,two}=group1;
let {one:a,two:b}=group1;
console.log(group1,group2);

解构不定参数及嵌套解构：

//把b,c解构到不定参数
let arr=[10,20,30];
let [a,...other]=arr;  
console.log(a,other[0],other[1]);//10 20 30

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

//es5复制数组
var arr=[10,20,30];
var arr2=[];
//arr2=arr ;这样不叫复制数组，叫引用，指向同一个内存地址，一方修改另一方会跟着修改
for(var i=0;i<arr.length;i++){
	arr2.push(arr[i]);
}
arr.push(400);
console.log(arr2);//[10, 20, 30]

//另一种方法：
var arr=[10,20,30];
var newArr=arr.concat();
arr.push(400);
console.log(newArr); //[10, 20, 30]

//用解构
var arr=[10,20,30];
let [...newArr]=arr;
arr.push(400);
console.log(newArr);//[10, 20, 30]

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

//解构嵌套层
//作用：便于拿数据，不用用for循环拿到第三组
let oUser={
	'name':'aaa',
	'age':20,
	'myClass':{
		'group1':{
			'one':'aaa1',
			'two':'aaa2'
		},
		'group2':{
			'one':'bbb1',
			'two':'bbb2'
		}
	},
	arr:[10,20,30]
}
let {name,age,myClass:{group1:{one,two},group1:{one:one1,two:two2}},arr:[a,b,c]}=oUser; //冒号：是改名，改名的同时解构出来
console.log(one,two,one1,two2,a,b,c);//10 20 30