文章目录
变量、常量与对象
变量的定义与使用
JS中定义变量使用let关键字，若需要需要在console中输出，可借助console.log()打印对象内容，下方代码演示变量的定义与使用：
js
// 定义变量
let name = "jamming";
let age = 18;
console.log("name: " + name);
console.log("age: " + age);
// 变量重新赋值
name = "nice";
age = 10;
console.log("name: " + name);
console.log("age: " + age);
数组中若需要定义数组，则等号右侧加上[]，若需要定义对象，则使用{}，并在花括号内写上key和value即可，示例代码如下：
js
let arr = [1, 2, 3];
let obj = {
name: "jamming",
age: 18
};
console.log(arr);
console.log(obj);
常量的定义与使用
常量即无法修改的量，使用const关键字定义，下方演示常量定义及修改时发生错误：
js
const PI = 3.14;
console.log(PI);
PI = 999;
console.log(PI);
使用const修饰定义的数组或者对象时，表示的是指向不能修改，而指向的内容是可以修改的；下面代码尝试修改arr和obj指向的数组和对象：
js
const arr = [1, 2, 3];
const obj = {
name: "jamming",
age: 18
};
console.log(arr);
console.log(obj);
// 删除最后一个元素
arr.pop();
// 修改name的value
obj.name = "lihua";
console.log(arr);
console.log(obj);
如果尝试修改数组和对象常量的指向，则会发生错误：
js
const arr = [1, 2, 3];
const obj = {
name: "jamming",
age: 18
};
console.log(arr);
console.log(obj);
const arr2 = [4, 5, 6];
const obj2 = {
class: 126,
cost: 1200
};
arr = arr2;
obj = obj2;
console.log(arr);
console.log(obj);
对象
对象的定义与使用
上方已经提前使用了对象，对象使用{}括起来，并在里面写入key和value；若需要访问或修改某个对象属性，则可以使用obj.key的方式，也可以使用obj[key]的方式，下方为示例代码：
js
let obj = {
name: "jamming",
age: 18
};
// 取值
console.log(obj.name);
console.log(obj.age);
// 修改
obj.name = "baymax";
console.log(obj['name']);
console.log(obj['age']);
使用[]访问或修改对象属性时，若对象属性不存在，则会返回undefined。
js
let obj = {
name: "jamming",
age: 18
};
console.log(obj.shool); // undefined
console.log(obj.address); // undefined
属性值与属性值同名时的简化定义
若定义对象时，若不需要重命名简写对象时，则可以简写成如下形式，key名称将自动填写为简写对象的名称：
js
// 简写对象
let min = 1;
let max = 100;
// 以前的写法（不简写）
let obj1 = {
min: min,
max: max
};
// 简写
let obj2 = {
min,
max
};
console.log(obj1);
console.log(obj2);
结构赋值
数组解构赋值
常规赋值
若有长度为3的数组，需要将每个元素依次赋值给a、b、c，则代码可以这么写：
js
const arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);
解构赋值
我们也可以使用解构赋值实现：
js
const arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);
若只需要将下标为0和2的元素赋值给a和c，可以多写一个,占位实现：
js
const arr = [1, 2, 3];
let [a, ,c] = arr;
console.log(a, c);
若长度为6的数组，将前两个元素赋值给a和b，余下元素赋值给tmp，代码实现如下：
js
const arr = [1, 2, 3, 4, 5, 6];
let [a, b, ...tmp] = arr;
console.log(a, b);
console.log(tmp);
ps：若需要对余下元素进行处理，在待解构列表中的最后一个变量前加上...即可。
对象解构赋值
常规赋值
若需要获取obj中的name，age，address的value，则可以借助.或者[]的方式来实现，下方为实现代码：
js
let obj = {
name: "jamming",
age: 18,
address: "fujian xiamen"
};
let name = obj.name;
let age = obj.age;
let address = obj.address;
console.log(name, age, address);
解构赋值
这里我们也可以使用解构赋值来使用，与数组的[]不同，对象解构需要使用{}来实现：
js
let obj = {
name: "jamming",
age: 18,
address: "fujian xiamen"
};
let {name, age, address} = obj;
console.log(name, age, address);
若只需要获取name和address，则在左侧{}中直接写上name和address即可：
js
let obj = {
name: "jamming",
age: 18,
address: "fujian xiamen"
};
let {name, address} = obj;
console.log(name, address);
若获取name，余下部分解构至rest中，实现代码如下：
js
let obj = {
name: "jamming",
age: 18,
address: "fujian xiamen"
};
let {name, ...rest} = obj;
console.log(name, rest);
若结构时，需要将name结构到uname中，则左侧列表应该写成{name: uname}，即将name提取出来后赋值给uname：
js
let obj = {
name: "jamming",
age: 18,
address: "fujian xiamen"
};
let {name: uname} = obj;
console.log(uname);
若对象中嵌套对象，如何进行解构呢？下方为示例代码：
js
let response = {
status: 200,
statusDesc: "OK",
data: {
username: "jamming",
id: 10086,
grade: "vip3"
}
};
let {data: {username, id, grade}} = response;
console.log(username, id, grade);
模版字符串
在普通字符串中，若需要拼接变量、常量等，则需要借助+来拼接完成；而我们借助反引号，来创建模版字符串，模版字符串自动将${variable}中的variable拼接到字符串中：
js
let name = "jamming";
let age = 9;
let normal_str = 'I am ' + name + ', I am '+ age + ' years old, I am ' + (age >= 18 ? '已成年' : '未成年');
let model_str = `I am ${name}, I am ${age} years old, I am ${age >= 18 ? '已成年' : '未成年'}`;
console.log(normal_str);
console.log(model_str);
另外，模版字符串可以在两个反引号之间任意换行，而普通字符串无法在双引号之间任意换行：
js
let normal_str = '<div class=hot-goods-box><h1>烤牛肉串</h1><p>香喷喷的牛肉串</p></div>';
let model_str = `<div class=hot-goods-box>
<h1>烤牛肉串</h1>
<p>香喷喷的牛肉串</p>
</div>`;
console.log(normal_str);
console.log(model_str);
🥤 每天努力一点点，技术变化看得见