【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
文章目录
- 变量、常量与对象
- 变量的定义与使用
- 常量的定义与使用
- 对象
- 对象的定义与使用
- 属性值与属性值同名时的简化定义
- 结构赋值
- 数组解构赋值
- 常规赋值
- 解构赋值
- 对象解构赋值
- 常规赋值
- 解构赋值
- 模版字符串
变量、常量与对象
变量的定义与使用
JS中定义变量使用let
关键字,若需要需要在console中输出,可借助console.log()
打印对象内容,下方代码演示变量的定义与使用:
// 定义变量
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即可,示例代码如下:
let arr = [1, 2, 3];
let obj = {name: "jamming",age: 18
};console.log(arr);
console.log(obj);
常量的定义与使用
常量即无法修改的量,使用const
关键字定义,下方演示常量定义及修改时发生错误:
const PI = 3.14;
console.log(PI);
PI = 999;
console.log(PI);
使用const修饰定义的数组或者对象时,表示的是指向不能修改,而指向的内容是可以修改的;下面代码尝试修改arr和obj指向的数组和对象:
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);
如果尝试修改数组和对象常量的指向,则会发生错误:
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]
的方式,下方为示例代码:
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。
let obj = {name: "jamming",age: 18
};console.log(obj.shool); // undefined
console.log(obj.address); // undefined
属性值与属性值同名时的简化定义
若定义对象时,若不需要重命名简写对象时,则可以简写成如下形式,key名称将自动填写为简写对象的名称:
// 简写对象
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,则代码可以这么写:
const arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);
解构赋值
我们也可以使用解构赋值实现:
const arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);
若只需要将下标为0和2的元素赋值给a和c,可以多写一个,
占位实现:
const arr = [1, 2, 3];
let [a, ,c] = arr;
console.log(a, c);
若长度为6的数组,将前两个元素赋值给a和b,余下元素赋值给tmp,代码实现如下:
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,则可以借助.
或者[]
的方式来实现,下方为实现代码:
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);
解构赋值
这里我们也可以使用解构赋值来使用,与数组的[]
不同,对象解构需要使用{}
来实现:
let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name, age, address} = obj;
console.log(name, age, address);
若只需要获取name和address,则在左侧{}
中直接写上name和address即可:
let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name, address} = obj;
console.log(name, address);
若获取name,余下部分解构至rest中,实现代码如下:
let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name, ...rest} = obj;
console.log(name, rest);
若结构时,需要将name结构到uname中,则左侧列表应该写成{name: uname}
,即将name提取出来后赋值给uname:
let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name: uname} = obj;
console.log(uname);
若对象中嵌套对象,如何进行解构呢?下方为示例代码:
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拼接到字符串中:
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);
另外,模版字符串可以在两个反引号之间任意换行,而普通字符串无法在双引号之间任意换行:
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);
🥤 每天努力一点点,技术变化看得见