【ES6】04-对象 + 类 + 模板字符串 + 解构 + 字符串
本文介绍对象+类+解构赋值+字符串的操作和方法。
目录
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); // Object1.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); // 31.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 创建对象和模板字符串
2.2 私有属性值
仅在类的内部可以访问和操作的属性，外部无法直接访问和修改
2.3 继承extends
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);本文介绍对象+类+解构赋值+字符串的操作和方法。