【ES6】04-对象 + 类 + 模板字符串 + 解构 + 字符串

老婆出轨 · 2025-3-19 19:18:10

本文先容对象+类+解构赋值+字符串的操作和方法。
目次
1. 对象
1.1 创建对象
1.2 添加属性
1.3 删除
1.4 判定是否存在
1.5 属性名数量
1.6 for...in遍历
1.7 forEach遍历
1.8 清空对象
2. 类
2.1 创建对象和模板字符串
2.2 私有属性值
2.3 继承extends
3. 解构
3.1 数组解构
3.2 对象解构
4. 字符串
4.1 长度 & 转巨细写
4.2 索引字符 & 转数组 & 转int
4.3 替换 & 去除两侧 & 判定
4.4 返回位置 & 前缀后缀
4.5 分割 & 截取
4.6 重复 & 前后添加

1. 对象

1.1 创建对象

// 1.创建对象
let teacher = {
name : 'zzz',
gender : '男',
web : 'baidu.com'
}
console.log(teacher); // Object

复制代码

1.2 添加属性

// 2.添加属性
teacher.height = 185;
console.log(teacher);
// 修改
teacher.name = 'aaa';
console.log(teacher);

复制代码

1.3 删除

// 3.delete删除
delete teacher.gender;
console.log(teacher);

复制代码

1.4 判定是否存在

// 4.判断是否存在
let has = 'gender' in teacher; // 'XX' in Object 并将结果返回给一个变量
console.log(has);
let has1 = 'name' in teacher;
console.log(has1);

复制代码

1.5 属性名数量

// 5.获取对象属性名的数量
// 首先获取对象属性名的数组 Object.keys(对象名)
let arr = Object.keys(teacher);
console.log(arr); // 返回的是数组
console.log(arr.length); // 3

复制代码

1.6 for...in遍历

// 6.for...in遍历对象
// 对象不是可迭代的所以不能用for...of
for(let key in teacher){
console.log(key,':',teacher[key]); //可以用数组的方式获取属性值
}

复制代码

1.7 forEach遍历

// 7.forEach循环遍历
// Object.entries(对象名)用于获取对象的键值对数组
let arr1 = Object.entries(teacher);
console.log(arr1); // 打印的是键值对的二维数组
// 利用解构的形式
// 是对arr1遍历所以参数是数组形式
arr1.forEach(([key,value]) => {
console.log(key,value);
})

复制代码

1.8 清空对象

// 8.清空对象
teacher = {}; // 直接赋值一个空对象形式
console.log(teacher);

复制代码

2. 类

2.1 创建对象和模板字符串

<script>
class Person {
// 若在类中没有显式声明属性
// 但在构造函数或方法中引用了未声明的属性，会自动将其视为实例对象
name // 声明姓名
web // 声明网站
// 类中的构造函数对属性进行初始化
constructor(name,web){
this.name = name;
this.web = web;
// this 指向正在创建的这个实例对象，给这个对象赋值属性值
}
// 类中的方法，用于返回这些信息
info(){
// return '姓名：' + this.name + '网站：' + this.web
return `姓名：${this.name}，网站：${this.web}`; // 模板字符串
}
}
// 面向对象的编程中，实例是根据类创建的具体对象
// 使用new关键字可以创建一个具体对象
// 上面已经创建了一个person类实例中传入姓名和网站参数
let person = new Person('zzz','baidu.com');
console.log(person);
console.log(person.web);
console.log(person.info()); // 调用刚刚创建的实例对象的方法
</script>

复制代码

2.2 私有属性值

仅在类的内部可以访问和操作的属性，外部无法直接访问和修改

<script>
class Person {
name // 声明姓名
#web // #私有属性网站
constructor(name,web){
this.name = name;
this.#web = web; // 私有属性
}
// 存取器 getter 获取私有属性
// get 私有属性名(){}
get web(){
return this.#web;
}
// 存取器 setter 设置私有属性
// set 私有属性名(新值){ this.#私有属性名 = 新值}
set web(value){
this.#web = value;
}
// 类中的方法，用于返回这些信息
info(){
// return '姓名：' + this.name + '网站：' + this.web
return `姓名：${this.name}，网站：${this.web}`; // 模板字符串
}
}
let person = new Person('zzz','baidu.com');
console.log(person.web); // 没有web() 时 undefined 外部无法获取
// 有get web()后可以获取私有属性
// 修改私有属性
// 类中有了set方法后可以修改
person.web = 'www.baidu.com'; // 将这个新的值传回给value
console.log(person.web);
</script>

复制代码

2.3 继承extends

<script>
// 先创建一个人的类Person
class Person {
name
gender
constructor(name,gender) {
this.name = name;
this.gender = gender;
}
// 定义类中的休息方法
sleep(){
return `${this.name}正在休息...`
}
}
// 继承某个人继承人这个大类
// Zzz 子类 Person 父类
class Zzz extends Person {
// 自己的属性
web
constructor(name,gender,web){
// super关键字调用父类的构造函数
super(name,gender); // 将父类中已经有的参数传递给它
// 自己初始化自己的属性
this.web = web;
}
// 自己的方法
eat(){
return `${this.name}在吃东西`; // 继承的父类的属性name
}
}
let zzz = new Zzz('Zzz','男','baidu.com');
console.log(zzz.web); // 子类的属性
console.log(zzz.eat()); // 子类的方法
console.log(zzz.gender); // 父类的属性
console.log(zzz.sleep()); // 父类的方法
</script>

复制代码

3. 解构

解构可以从数组或对象中提取值并赋给变量
3.1 数组解构

// 1.1数组解构
let [x, y] = [1, 2];
console.log("x:", x, "y:", y);
// 不写变量就不赋值用逗号隔开
let [, , c] = [10, 20, 30];
console.log("c:", c);
// 1.2扩展运算符
let [A, ...B] = [1, 2, 3, 4, 5, 6];
console.log("A:", A, "B:", B);
let [x2, y2 = 200] = [100]; //默认值
console.log("x2:", x2, "y2:", y2);
// 1.3解构进行两数交换
let x3 = 10;
let y3 = 20; // 这里的分号必须加
//注意：!!不加分号会报错
[x3, y3] = [y3, x3];
console.log("x3:", x3, "y3:", y3);

复制代码

3.2 对象解构

// 2.1对象解构
let person = {
name: 'zzz',
gender: '男',
web: 'baidu.com'
}
// {}内部表示对象的解构
let { name } = person
console.log("name:", name)
// 2.2重命名
// 原名: 重命名
let { name: userName, gender, web } = person
console.log("userName:", userName, "gender:", gender, "web:", web)
// 2.3默认值
let { address = "安徽" } = person
console.log("address:", address)

复制代码

4. 字符串

4.1 长度 & 转巨细写

let web = "baidu.com";
// 字符串长度将其返回给一个变量
let len = web.length;
console.log("字符串长度:", len);
// str.toLowerCase()转小写
let str1 = "DAVID".toLowerCase();
console.log("转小写:", str1);
// str.toUpperCase()转大写
let str2 = "luna".toUpperCase();
console.log("转大写:", str2);

复制代码

4.2 索引字符 & 转数组 & 转int

// 返回字符串在索引处的字符
// srt[num] 从0开始并将其返回给一个新的字符串
let str3 = web[2];
console.log("返回字符串在索引处的字符:", str3);
console.log(typeof str3)
// 字符串转为字符数组
// 利用拓展运算符...将字符串内容一个个存入数组
// [...str]转为数组返回的是一个数组
let arr1 = [...web];
console.log("字符串转为字符数组:", arr1);
console.log(typeof arr1); // Object 数组也是对象
// 字符串转 int
// parseInt(str) 字符串转int型
let number = parseInt("168");
console.log("字符串转int:", number);
console.log(typeof number);

复制代码

4.3 替换 & 去除两侧 & 判定

// 字符串替换
// str.replaceAll('原字符','新字符')
let str6 = web.replaceAll("ba", "c");
console.log("替换全部字符串:", str6); // cidu.com
let str7 = web.replace("a", "y");
console.log("替换1个字符串:", str7); // byidu.com
// 去除字符串两侧指定的字符
// str.trim()去除字符串两侧的空白字符如空格制表符
let str8 = " baidu.com ".trim();
console.log("去除字符串两侧指定的字符:", str8);
// 判断是否包含某个字符串
// str.includes('指定字符串') 返回布尔值
let result = web.includes("baidu") // true
console.log("是否包含某个字符串:", result);

复制代码

4.4 返回位置 & 前缀后缀

// 返回字符串中第一次出现某个字符串的位置,若不存在则返回-1
// str.indexOf('指定字符串') 返回这个字符串的开头的索引
let result2 = web.indexOf("baidu");
console.log("返回字符串中第一次出现某个字符串的位置:", result2);
let result3 = "www.baidu.com".indexOf("baidu");
console.log("返回字符串中第一次出现某个字符串的位置:", result3);
// 判断一个字符串是否以指定的前缀开头
// str.startsWith('某字符串') 返回一个布尔值
let result4 = "www.baidu.com".startsWith("www");
console.log("判断一个字符串是否以指定的前缀开头:", result4);
// 判断一个字符串是否以指定的后缀结尾
// str.endsWith('某字符串') 返回一个布尔值
let result5 = "www.baidu.com".endsWith("net");
console.log("判断一个字符串是否以指定的后缀结尾:", result5);

复制代码

4.5 分割 & 截取

// 将字符串按照指定字符分割成数组
// str.split(',') 按照,分隔
// 如果字符串是以|分隔则split('|')
let arr = "a|b|c|d".split("|")
// 分割后返回的是一个数组
console.log("将字符串按照指定字符分割成数组:", arr)
// 字符串截取 substr(开始位置,截取长度)
// str.substr(起始索引,终止索引)
// 返回的是 [0,7)
let subStr = web.substr(0, 7) // 注意不包含索引7
console.log("截取字符串的前7个字符:", subStr)
// str.substr(-X) 代表截取后面的X的字符
let subStr2 = web.substr(-3) //com
console.log("截取字符串的最后3个字符:", subStr2)
// str.substr(X) 代表截取从0开始的X个字符
let subStr3 = web.substr(4) //ruicode.com [字符串下标是从 0 开始]
console.log("从字符串的第5个位置开始截取直至字符串末尾:", subStr3)

复制代码

4.6 重复 & 前后添加

//重复字符串
// str.repeat(X) 代表将这个字符串重复X次并返回给一个新的数组
let repeatstr = "David".repeat(3);
console.log("重复3次字符串", repeatstr);
// 在字符串前面添加指定数量的填充字符
// 直到，该字符串达到指定的长度
// str.padStart(指定长度,'前面指定添加的字符')
let padStart = "David".padStart(15, "-");
//由于 David 占 5 个字符, 因此只需要再添加 10 个横线, 即可达到总长度 15
let padStart1 = "David".padStart(10);
// 不写指定添加的字符时，默认空格
console.log("padStart:", padStart1);
// 在字符串后面添加指定数量的填充字符
// 直到该字符串达到指定的长度
// str.padEnd(指定长度,'指定添加的字符')
let padEnd = "David".padEnd(10, "-");
console.log("padEnd:", padEnd);

复制代码

本文先容对象+类+解构赋值+字符串的操作和方法。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【ES6】04-对象 + 类 + 模板字符串 + 解构 + 字符串

0 个回复

快速回复

楼主热帖

标签云