本文介绍对象+类+解构赋值+字符串的操作和方法。
目录
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...offor(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.webreturn `姓名：${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.webreturn `姓名：${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'; // 将这个新的值传回给valueconsole.log(person.web);</script>2.3 继承extends
<script>// 先创建一个人的类Personclass Person {name genderconstructor(name,gender) {this.name = name;this.gender = gender;}// 定义类中的休息方法sleep(){return `${this.name}正在休息...`}}// 继承 某个人继承人这个大类// Zzz 子类 Person 父类class Zzz extends Person {// 自己的属性webconstructor(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 } = personconsole.log("name:", name)// 2.2重命名 // 原名: 重命名let { name: userName, gender, web } = personconsole.log("userName:", userName, "gender:", gender, "web:", web)// 2.3默认值let { address = "安徽" } = personconsole.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.comlet 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") // trueconsole.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) // 注意不包含索引7console.log("截取字符串的前7个字符:", subStr)// str.substr(-X) 代表截取后面的X的字符let subStr2 = web.substr(-3) //comconsole.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 个横线, 即可达到总长度 15let padStart1 = "David".padStart(10); // 不写指定添加的字符时，默认空格console.log("padStart:", padStart1);// 在字符串后面添加指定数量的填充字符// 直到该字符串达到指定的长度// str.padEnd(指定长度,'指定添加的字符')let padEnd = "David".padEnd(10, "-");console.log("padEnd:", padEnd);本文介绍对象+类+解构赋值+字符串的操作和方法。
