目录

• 1、 概念
• 2、 什么是解构赋值
• 3、 数组解构
• • 3.1 数组解构的概念
  • 3.2 基本语法
  • 3.3 典型应用交互2个变量
  • 3.4 解构函数
  • 3.5 变量多 单元值少的情况
  • 3.6 变量少 单元值多的情况
  • 3.7 按需导入，忽略某些返回值
  • 3.8 支持多维数组的解构
• 4、对象解构
• • 4.1 对象解构的概念
  • 4.2 基本语法
  • 4.3 给新的变量名赋值
  • 4.4 数组对象解构
  • 4.5 多级对象解构

1、 概念

ES6 提供了更简洁的赋值模式，从数组和对象中提取值，这被称为解构。

2、 什么是解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值

通俗来说，即解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量。
示例：

	const arr = [1,2,3]const [a,b,c]= arrconsole.log(a,b,c);

将数组里的值获取出来，赋值给 a,b,c

3、 数组解构

3.1 数组解构的概念

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

3.2 基本语法

1. 赋值运算符 = 左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作。

通过例子来理解一下：

1. 第一种方法

 	//普通的数组const arr = [1, 2, 3]//批量声明变量a,b,c//同时将数组单元值1，2，3依次赋值给变量a,b,cconst [a, b, c] = arrconsole.log(a, b, c);//1,2,3

2. 第二种方法

 	//同时将数组单元值1，2，3依次赋值给变量a,b,cconst [a, b, c] = [1, 2, 3]console.log(a, b, c);//1,2,3

3.3 典型应用交互2个变量

1、传统写法

	let a = '张三'let b = '李四'let tem = ''tem = aa = bb = temconsole.log(a,b); //李四，张三

2、数组解构写法

 	let a = '张三'let b = '李四';//这里必须要有分号[b,a] = [a,b]console.log(a,b);

3.4 解构函数

 	function getValue() {return [1, 2]}let [a, b] = getValue()console.log(a, b);//1,2

3.5 变量多 单元值少的情况

    const [a,b,c,d] = ['张三','李四','王五']console.log(a,b,c,d);//张三 李四 王五 undefined

变量的数量大于单元值数量时，多余的变量将被赋值为 undefine

防止有undefined传递单元值的情况，可以设置默认值。

    const [a='张三',b='李四',c='王五',d='赵六'] = ['张三','李四','王五']console.log(a,b,c,d);//张三 李四 王五 赵六

3.6 变量少 单元值多的情况

    const [a,b] = ['张三','李四','王五']console.log(a,b);//张三 李四 

利用剩余参数解决变量少 单元值多的情况：

	const [a,...b] = ['张三','李四','王五']console.log(a,b);//张三 (2) ['李四', '王五']

3.7 按需导入，忽略某些返回值

你可以有选择性的跳过一些不想得到的返回值

    const [a, , b] = ['张三', '李四', '王五']console.log(a, b);//张三 王五

3.8 支持多维数组的解构

 	const [a,b] = ['张三', ['李四', '王五']]console.log(a);//张三console.log(b);//['李四', '王五']    

想要拿到王五怎么办？

 	const [a,[b,c]] = ['张三', ['李四', '王五']]console.log(a);//张三console.log(b);//李四console.log(c);//王五

4、对象解构

4.1 对象解构的概念

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。

4.2 基本语法

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 注意解构的变量名不要和外面的变量名冲突否则报错.
4. 对象中找不到与变量名一致的属性时变量值为 undefine

通过一个小例子理解一下，和数组解构差不多。

	//普通对象const user = {name: '张三',age: 18}// 批量声明变量name,ageconst { name, age } = userconsole.log(name);//张三console.log(age);//18

注：变量名必须和对象的属性名一致。不然返回结果是undefined。

 		//普通对象const user = {name: '张三',age: 18}// 批量声明变量names,agesconst { names, ages } = userconsole.log(names);console.log(ages);

4.3 给新的变量名赋值

如果在解构对象之前有一个对象的同名变量，在后面进行解构赋值的时候将会报错，提示我们标识符“uname”已经声明。

	let uname = 1//同名变量const user = {uname: '张三', age: 18}const { uname, age } = userconsole.log(uname);console.log(age);

这个时候我们就可以通过给新的变量名赋值的方法解决这个问题。

 	let uname = 1const user = {uname: '张三', age: 18}const { uname: username, age } = userconsole.log(username);console.log(age);

4.4 数组对象解构

	const user = [{name: '李四',age: 18}]const [{ name, age }] = userconsole.log(name, age);//李四 18

4.5 多级对象解构

	const dog = {name: '狗剩',family: {mother: '狗娘',father: '狗爹',sister: '狗儿'},age: 6}const { name, family: { mother, father, sister } } = dogconsole.log(name,mother,father,sister);//狗剩 狗娘 狗爹 狗儿

上述代码中family对象嵌套在dog对象里面，在对象嵌套的时候，我们得到family里面的属性，就需要告诉程序属性是在family对象里面，利用family：的形式获取。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！