对象的扩展（属性名简写、对象简写、字面量对计算属性的改进、两个数组里面的元素一一对应，赋值到一个对象中去）
程序员文章站
2022-05-18 17:21:04
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对象字面量的扩展</title>
</head>
<body>
<script>
const name = 'XYZ';
const age = 20;
const birthday = '2019-07';
//属性名简写
/*
ES5：
过去我们把值（name，age，birthday）存入到对象（Laravist）里面
是这样操作的
*/
const Laravist = {
name: name,
age: age,
birthday: birthday
}
console.log(Laravist);//{name: "XYZ", age: 20, birthday: "2019-07"}
/*
ES6
现在我们把值（name，age，birthday）存入到对象（Laravist）里面
是这样操作的
*/
const Laravist1 = {
name,
age,
birthday
}
console.log(Laravist1);//{name: "XYZ", age: 20, birthday: "2019-07"}
//对象简写
/*
ES5
*/
const Laravist2 = {
greet: function () {
console.log(`Hello ${name}`)
}
}
console.log(Laravist2.greet());
/*
ES6
*/
const Laravist3 = {
greet() {
console.log(`Hello ${name}`)
}
}
console.log(Laravist3.greet());
/*
字面量对计算属性的改进
现在我想让userIds对象里面user-1:1逐渐递增：
user-1:1
user-2:2
user-3:3
*/
let id = 0;
// ES6
const userIds = {
[`user-${++id}`]: id,
[`user-${++id}`]: id,
[`user-${++id}`]: id,
}
console.log(userIds)//{user-1: 1, user-2: 2, user-3: 3}
/*
注意你现在想把keys数组和values数组里面的元素一一对应，
放入到Laravist4对象里面
shift() 方法从数组中删除第一个元素，并返回该元素的值。
此方法更改数组的长度。
*/
const keys = ['name', 'age', 'birthday'];
const values = ['XYZ', 20, '20019-07']
let Laravist4
Laravist4 = {
[keys[0]]: values[0],
[keys[1]]: values[1],
[keys[2]]: values[2],
}
console.log(Laravist4);//{name: "XYZ", age: 20, birthday: "20019-07"}
Laravist4 = {
[keys.shift()]: values.shift(),
[keys.shift()]: values.shift(),
[keys.shift()]: values.shift()
}
console.log(Laravist4);//{name: "XYZ", age: 20, birthday: "20019-07"}
</script>
</body>
</html>