ES6中的“解构赋值”
- 主要针对对象和数组,左侧定义和右侧值类似的结构,这样声明几个变量,快速获取到每一部分的信息.
数组解构赋值
let arr = [10, 20, 30, 40];
let [x, y] = arr; //只写了两个变量，就获得前两项
console.log(x, y); //10 20
结果为:
// “...”剩余运算符:把除了x以外，剩下数组中的每一项都拿到，存放到y中(y是一个新的数组)
let arr = [10, 20, 30, 40];
let [x, ...y] = arr;
console.log(x, y); //10 [20,30,40]
结果为：
let arr = [10, 20, 30, 40];
let [, , x, y] = arr; //只获得后面两项30，40
console.log(x, y); //30 40
结果为：
let arr = [10, 20, 30, 40];
let [, , , x, y = 0] = arr;
console.log(x, y); //40 0 “y=0”如果不存在y这一项,我们给其赋值默认值,否则它就是undefined的
结果为：
需求:变量交换值，a和b交换值 第一种方法：
let a = 10;
let b = 20;
let c = a;
a = b;
b = c;
console.log(a, b); //20 10
结果为：
第二种方法为:
let a = 10;
let b = 20;
a = a + b; //30
b = a - b; //10 a-b此时是原始a的值 相当于把原始a的值放入到b中了
a = a - b; //20 a-b此时是原始b的值 相当于把原始b的值放入到a中了
console.log(a, b);
结果为：
let a = 10;
let b = 20;
[b, a] = [a, b]; //右侧自己构建一个数组 [10,20]
console.log(a, b);
结果为：
对象的解构赋值
let obj = {
name: '云朵',
age: 11,
teacher: '云朵',
0: 100
};
//默认情况下声明的“变量”需要和“属性名”保持一致，这样对象才可以获取到指定成员的值
let {
name,
age
} = obj; //声明变量name,age拿obj中name,age的值.
console.log(name, age); //=>obj.name,obj.age “云朵” ,11
结果为:
想声明一个变量x来拿obj中name的值
let obj = {
name: '云朵',
age: 11,
teacher: '云朵',
0: 100
};
//let {x} = obj;
//console.log(x); //obj.x undefined
//如果对象中某个成员(name)的名字所对应的变量已经声明过了,为了防止报错，要赋给一个新的变量x来拿obj中name的值.
let name = 'xx';
let {
name: x //冒号的意思是声明一个变量x,拿obj中name这个成员的值
} = obj;
console.log(x); //“云朵”,声明一个x的变量，让其等于obj.name,
“解构过程中的重新命名:随意声明一个变量,获取对象中指定成员的值”
结果为：
如何把obj中数字0这个属性名解构出来，数字不能直接作为变量名，
- 对于数字属性名，我们则重新命名一个新的变量接收值即可
let obj = {
name: '云朵',
age: 11,
teacher: '云朵',
0: 100
};
let {
0: x
} = obj;
console.log(x); //=>100
结果为：
需求:获取当前数据中的 班级、姓名、数学成绩 三项的值，拼成字符串 "xx班的xx同学的数学成绩:xx"
- 第一种方法：一点点获取
let data = [
1001,
'精英A班',
{
name: '云朵',
age: 25,
score: [98, 100, 89] //语文 数学 英语
}
];
let className = data[1]; //拿到班级
let baseInfo = data[2]; // 获得data第三项
let name = baseInfo.name; // 获得baseInfo中的name
let score = baseInfo.score; // 获得baseInfo中的score
let math = score[1]; // 获得score中的第二项数学成绩
console.log(`${className} 的 ${name} 同学的数学成绩: ${math} 分`);
结果为：
- 第二种方法：用解构赋值
let data = [1001,'精英A班',
{
name: '云朵',
age: 25,
score: [98, 100, 89] //语文 数学 英语
}
];
let [, className,
{
name,
score: [, math] //定义变量math来拿score数组的第二项值
}] = data;
console.log(`${className} 的 ${name} 同学的数学成绩: ${math} 分`);
结果为：
