前端开发之JavaScript的ES6:变量的解构赋值

前言:

解构赋值的概念

解构赋值：ES6 允许我们，按照一一对应的方式，从数组或者对象中提取值，再将提取出来的值赋值给变量。

解构：分解数据结构；赋值：给变量赋值。

解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。

# 数组的解构赋值

数组的结构赋值：将数组中的值按照位置提取出来，然后赋值给变量

---

1.数组的解构赋值

传统:

var arr=[1,2,3]

var a=arr[0];  //a=1
var b=arr[1];  //b=2
var c=arr[2];  //c=3

ES6:

let [a,b,c]=[1,2,3];

---

 2.对象的解构赋值

对象的结构赋值：将对象中的值按照属性匹配的方式提取出来，然后赋值给变量

ES6前:

var name = json.name;

var age = json.age;

var sex = json.sex;

ES6:

属性名要一致

const people={name:'addd',age:20,sex:'男'}

let {name,age,sex}=people;  ///属性名要一致

console.log(name); // 打印结果：qianguyihao
console.log(age); // 打印结果：28
console.log(sex); // 打印结果：男

属性名不用致(自定义属性名)

const person = { name: 'qianguyihao', age: 28 };
let { name: myName, age: myAge } = person; // 对象的结构赋值

console.log(myName); // 打印结果：qianguyihao
console.log(myAge); // 打印结果：28

console.log(name); // 打印报错：Uncaught ReferenceError: name is not defined
console.log(age); // 打印报错：Uncaught ReferenceError: age is not defined

此时myName,myAge才是外部属性名,左边name,age意思还是是右边的属性名；

---

3.圆括号的使用

如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错：

	let foo = 'haha';
	{ foo } = { foo: 'smyhvae' };
	console.log(foo);

要解决报错，只要在解构的语句外边，加一个圆括号即可：

let foo = 'haha';
({ foo } = { foo: 'smyhvae' });
console.log(foo); //输出结果：smyhvae

---

4.字符串解构

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下：

const [a, b, c, d] = 'hello';
console.log(a);
console.log(b);
console.log(c);

console.log(typeof a); //输出结果：string

打印结果：

h
e
l
string