JS 对象

知道为什么需要对象如何创建对象如何使用对象能够遍历对象熟悉常见的内置对象及使用为什么要学习对象呢问题某一网站的用户信息比如电话、姓名、身高、账号等等那么如果保存一个用户的完整信息呢答数组可以保存多个数据比如 var arr[张三,男,180,76];问题180是什么76代表的又是什么答对象可以来帮助我们清晰的表达用户信息比如身高:180。类和对象的概念面向对象的编程Object-oriented programming简称OOP一种编程范式。JavaScript对象Object是一种无序的相关属性和方法组成的一个集合也可以理解为对象是无序的数据集合而数组是一个有序的数据集合。属性指事物的特征比如用户的姓名身高常用名词表示方法指事物的行为比如用户会唱、跳常用动词表示1.对象是什么对象是一种数据类型 无序数据的集合2.对象有什么特点无序的数据的集合 可以详细的描述某个事物创建声明对象在JavaScript中现阶段我们可以采用三种方式创建对象1、利用字面量创建对象最常用的一种方式简单2、利用new Object创建对象 3、利用构造函数创建对象相同的重复性的代码可以使用函数实现代码的重复利用。那可不可以使用函数来创建对象不过创建对象的函数比较特殊称为“构造函数”。属性是成对出现的包括属性名和属性值两者用英文冒号隔开多个属性之间使用英文逗号隔开属性可以理解为依附于对象上的变量但是对象内称为属性对象外称为变量属性名可以使用单引号、双引号或者省略但是当有特殊字符时候要用引号不可省略;多个属性之间无顺序访问对象属性两种方式1. 点语法.推荐属性名合法时用console.log(person.name); // 张三 person.age 21; // 修改属性2. 方括号[]必须加引号适合变量、特殊属性名console.log(person[gender]); // 场景1属性名用变量 const key name; console.log(person[key]); // 场景2属性名带空格、特殊字符 const obj { user name: 老王 }; console.log(obj[user name]);增删改查属性1. 新增属性person.height 180; person[weight] 70;2. 修改属性person.age 22;3. 删除属性deletedelete person.gender;4. 查询属性是否存在inconsole.log(name in person); // true console.log(address in person); // false遍历对象1. for...in遍历所有可枚举属性for (let key in person) { console.log(key, person[key]); }2. Object.keys () 获取属性名数组const keys Object.keys(person); console.log(keys); // [name,age,sayHi,run] keys.forEach(key { console.log(person[key]); });3. Object.values () 获取属性值数组const values Object.values(person);4. Object.entries () 获取键值对二维数组const entries Object.entries(person);常用对象方法1. 对象合并Object.assign()const obj1 { a: 1 }; const obj2 { b: 2 }; const newObj Object.assign({}, obj1, obj2); // 扩展运算符更常用 const newObj2 { ...obj1, ...obj2 };2. 冻结对象不能增删改Object.freeze(person);3. 判断是否是自身属性hasOwnPropertyperson.hasOwnProperty(name); // true属性简写 方法简写const name 小李; const age 25; // 属性简写变量名和键名相同可省略赋值 const user { name, age, // 方法简写省略:function hello() { console.log(this.name); } };this 在对象方法中的指向对象方法里的 this 指向调用该方法的对象const dog { name: 旺财, bark() { console.log(this.name); // this dog } }; dog.bark(); // 旺财解构赋值快速取出对象属性const { name, age } person; // 重命名 const { name: username } person; // 默认值 const { address 未知 } person;九、深拷贝 vs 浅拷贝浅拷贝只拷贝第一层const obj { a: 1, info: { b: 2 } }; const copy { ...obj }; copy.info.b 99; // 原对象也会被修改简单深拷贝const deepCopy JSON.parse(JSON.stringify(obj));JS 构造函数一、什么是构造函数构造函数就是用来批量创建多个结构相同的对象的函数首字母一般大写约定规范通过new关键字调用。普通函数直接调用fn()构造函数必须用new调用new Fn()基本语法// 构造函数首字母大写 function Person(name, age) { // this 指向 new 创建出来的实例对象 this.name name; this.age age; // 实例方法 this.say function () { console.log(this.name, this.age); }; } // 创建实例 const p1 new Person(张三, 18); const p2 new Person(李四, 20); console.log(p1.name); // 张三 p1.say();二、new 做了哪 4 件事在内存中创建一个空的新对象让构造函数内部的this指向这个新对象执行构造函数内代码给新对象添加属性、方法如果函数没有手动返回引用类型对象 / 数组默认自动返回这个新对象function Test() { // 1. 新建空对象 {} // 2. this 这个空对象 this.a 10; // 4. return 这个新对象 } const t new Test();注意如果手动return {xxx}会覆盖默认返回的实例。三、实例成员 静态成员1. 实例成员写在 this 上每个实例都有一份独立的数据每个实例方法都是单独创建浪费内存function Person(name) { // 实例属性 this.name name; // 实例方法每个实例都会新建一个函数 this.say function () { console.log(this.name); }; } const p1 new Person(张三); const p2 new Person(李四); console.log(p1.say p2.say); // false 两个不同函数2. 静态成员直接挂载在构造函数本身属于构造函数不属于实例实例无法访问function Person() {} // 静态属性 Person.count 0; // 静态方法 Person.getCount function () { return Person.count; }; console.log(Person.count);四、原型优化把方法放到 prototype解决内存浪费所有实例共享同一个原型方法只创建一次函数function Person(name, age) { this.name name; this.age age; } // 原型方法所有实例共用 Person.prototype.say function () { console.log(this.name, this.age); }; const p1 new Person(张三, 18); const p2 new Person(李四, 20); console.log(p1.say p2.say); // true五、instanceof 判断实例类型检测某个对象是不是某个构造函数的实例console.log(p1 instanceof Person); // true console.log(p1 instanceof Object); // true 所有对象都是Object实例六、构造函数的返回值规则没有 return自动返回新实例对象return 基本类型数字、字符串、布尔忽略依然返回实例return 对象/数组/函数返回这个引用类型不再返回实例function A() { this.a 1; return 100; // 基本类型无效 } console.log(new A()); // {a:1} function B() { this.b 2; return { x: 1 }; // 返回自定义对象 } console.log(new B()); // {x:1}七、ES6 class 本质就是语法糖的构造函数class Person { constructor(name, age) { this.name name; this.age age; } // 自动挂载到原型上 say() { console.log(this.name); } } const p new Person(小明, 19);八、常用属性实例.constructor指向创建该实例的构造函数console.log(p1.constructor Person); // true构造函数.prototype原型对象实例.__proto__指向原型对象JavaScript 内置对象JS 内置对象就是浏览器 / JS 引擎自带的、不需要自己定义直接就能使用的对象JavaScript内部提供的对象包含各种属性和方法供开发者调用。分为三大类全局内置对象直接用常用内置构造对象需要 new 创建实例ES6 新增内置对象一、三大常用内置构造对象重点1. String 字符串对象原始字符串可以自动包装成 String 对象调用内置方法。let str hello; // 常用方法 str.length; // 字符串长度 str.charAt(2); // 获取下标对应字符 str.indexOf(l); // 查找字符下标找不到返回-1 str.lastIndexOf(l); str.substring(0,3); // 截取字符串 str.slice(0,3); str.replace(h,H); // 替换 str.split(,); // 字符串转数组 str.toUpperCase(); // 大写 str.toLowerCase(); // 小写 str.trim(); // 去除首尾空格2. Array 数组对象let arr [1,2,3]; // 增删改查 arr.push(4); // 尾部添加 arr.pop(); // 尾部删除 arr.unshift(0); // 头部添加 arr.shift(); // 头部删除 // 遍历 arr.forEach(item{}); arr.map(item{}); arr.filter(item{}); // 常用 arr.indexOf(2); arr.includes(3); arr.reverse(); // 反转 arr.sort(); // 排序 arr.join(-); // 数组转字符串 arr.slice(0,2); // 截取 arr.splice(1,1); // 删除/插入/替换3. Date 日期对象必须new Date()创建实例let date new Date(); date.getFullYear(); // 年 date.getMonth(); // 月(0~11) date.getDate(); // 日 date.getDay(); // 星期(0周日~6周六) date.getHours(); // 时 date.getMinutes(); // 分 date.getSeconds(); // 秒 date.getTime(); // 时间戳(毫秒) Date.now(); // 获取当前时间戳4. Math 数学内置对象静态对象不用 new属于全局静态内置对象直接Math.方法()Math.PI; // 圆周率 Math.abs(-5); // 绝对值 Math.ceil(3.2); // 向上取整 4 Math.floor(3.9); // 向下取整 3 Math.round(3.5); // 四舍五入 Math.max(1,5,3); // 最大值 Math.min(1,5,3); // 最小值 Math.random(); // 0~1随机小数二、全局内置对象全局方法直接调用1. Array、String、Number、Boolean既是内置构造函数也可以做类型转换Number(123); String(123); Boolean(0);2. JSON静态内置对象前后端数据交互必备// 对象转JSON字符串 JSON.stringify({name:张三}) // JSON字符串转回对象 JSON.parse({name:张三})3. 全局常用方法属于 window 内置parseInt(12.3); // 转整数 parseFloat(12.3); // 转小数 isNaN(abc); // 判断是不是非数字 eval(12); // 执行字符串表达式三、简单区分包装对象String/Number/Boolean属于基本包装类型 原始值本身没有方法调用方法时会临时包装成内置对象调用完自动销毁。let str abc; // 底层临时new String(abc).toUpperCase() str.toUpperCase();四、内置对象分类总结Math、JSON静态内置对象不用 new直接调用属性方法String、Array、Date、RegExp内置构造对象可new创建实例全局内置window 下的全局方法、全局属性JavaScript Number 对象一、两种使用形式1. 原始数值类型日常最常用let num1 123; let num2 3.14;原始值调用方法时JS 会临时包装为 Number 对象调用结束自动销毁。2. Number 内置构造函数创建数值对象// 构造函数方式创建 Number 实例对象 let numObj new Number(123); console.log(numObj); // [Number: 123] console.log(typeof numObj); // object // 作为普通函数类型转换常用 let n Number(123); console.log(typeof n); // number开发中尽量不要用 new Number ()容易出现类型判断错误直接用原始数字即可。二、Number 静态属性直接 Number.xxx// 1. 最大值 Number.MAX_VALUE; // 1.7976931348623157e308 // 2. 最小值 Number.MIN_VALUE; // 5e-324 // 3. 无穷大、无穷小 Number.POSITIVE_INFINITY; // Infinity Number.NEGATIVE_INFINITY; // -Infinity // 4. 非数字 Number.NaN; // 5. 安全整数范围 Number.MAX_SAFE_INTEGER; // 9007199254740991 Number.MIN_SAFE_INTEGER; // -9007199254740991三、常用静态方法1. Number.isNaN () 判断是否是 NaNNumber.isNaN(NaN); // true Number.isNaN(123); // false区别于全局isNaN只会判断本身是不是 NaN不会做类型隐式转换。2. Number.isFinite () 判断是否是有限数字Number.isFinite(100); // true Number.isFinite(Infinity); // false3. Number.isInteger () 判断是否为整数Number.isInteger(5); // true Number.isInteger(5.0); // true Number.isInteger(5.5); // false4. Number.isSafeInteger () 安全整数判断超出安全整数范围的数字会丢失精度。Number.isSafeInteger(9007199254740991); // true四、Number 实例方法数字。方法 ()1. toFixed (n) 保留 n 位小数四舍五入返回字符串let num 3.1415926; console.log(num.toFixed(2)); // 3.14 console.log(num.toFixed(0)); // 32. toPrecision (n) 保留 n 位有效数字let num 12.34; console.log(num.toPrecision(3)); // 12.33. toString (进制) 转字符串可指定进制let num 10; console.log(num.toString()); // 10 十进制 console.log(num.toString(2)); // 1010 二进制 console.log(num.toString(16)); // a 十六进制4. valueOf () 返回原始数值let obj new Number(66); console.log(obj.valueOf()); // 66五、常见坑浮点数精度问题console.log(0.1 0.2); // 0.30000000000000004解决用toFixed保留指定小数位再转回数字let res (0.1 0.2).toFixed(2); console.log(Number(res)); // 0.3六、常用类型转换// 字符串转数字 Number(123); // 123 Number(123abc); // NaN // 布尔转数字 Number(true); // 1 Number(false); // 0 // 空值 Number(null); // 0 Number(undefined); // NaNJavaScript String 字符串对象一、两种创建方式1. 字面量常用原始字符串let str1 hello; let str2 你好; let str3 模板字符串; typeof str1 // string原始字符串调用方法时JS 会临时包装为 String 对象调用结束自动销毁。2. String 构造函数创建字符串对象let strObj new String(web); console.log(strObj); // [String: web] typeof strObj // object // 当做普通函数类型转换 let str String(123); console.log(str); // 123开发中不推荐new String()尽量用字面量。二、字符串特性字符串只读不可修改不能通过下标修改某个字符只能重新赋值let str abc; str[0] d; // 无效不会报错但不生效可以通过下标取值console.log(str[0]); // alength属性获取字符串长度console.log(str.length); // 3三、常用实例方法返回新字符串原字符串不变1. 获取单个字符let str javascript; // charAt(下标) 返回对应字符 str.charAt(2); // v // charCodeAt(下标) 返回字符ASCII编码 str.charCodeAt(0); // 1062. 查找字符位置let str abcb; // 从前往后找返回下标找不到返回 -1 str.indexOf(b); // 1 // 第二个参数从第几位开始查找 str.indexOf(b, 2); // 3 // 从后往前找 str.lastIndexOf(b); // 3 // ES6是否包含返回布尔值 str.includes(abc); // true // 是否以xxx开头 str.startsWith(ab); // true // 是否以xxx结尾 str.endsWith(cb); // true3. 截取字符串let str abcdef; // slice(起始下标, 结束下标) 左闭右开支持负数 str.slice(1,3); // bc str.slice(-3); // def // substring(起始,结束) 不支持负数负数默认当作0 str.substring(1,3); // bc // substr(起始, 截取长度) 已不推荐 str.substr(1,2); // bc4. 大小写转换let s Hello; s.toUpperCase(); // HELLO 全部大写 s.toLowerCase(); // hello 全部小写5. 去除空格let str abc ; str.trim(); // 去除首尾空格 abc str.trimStart(); // 去除开头空格 str.trimEnd(); // 去除结尾空格6. 替换内容let str a1b1c; // 只能替换第一个匹配内容 str.replace(1, 2); // a2b1c // 全局替换需要正则 str.replace(/1/g, 2); // a2b2c7. 分割字符串转数组let str 苹果,香蕉,橘子; let arr str.split(,); console.log(arr); // [苹果,香蕉,橘子]8. 重复、补全6.padStart(4, 0); // 0006 头部补全 6.padEnd(4, 0); // 6000 尾部补全 abc.repeat(2); // abcabc 重复n次四、字符串遍历let str 前端; // for 循环按下标遍历 for(let i 0; i str.length; i){ console.log(str[i]); } // for...of 遍历字符 for(let char of str){ console.log(char); }五、String 静态方法// 类型转换 String(123); // 123 // fromCharCode 根据ASCII编码转字符 String.fromCharCode(97); // a六、valueOf () /toString ()let strObj new String(test); console.log(strObj.valueOf()); // 返回原始字符串 test console.log(strObj.toString()); // test七、易错点总结字符串是不可变类型所有方法都返回新字符串原字符串不会改变indexOf找不到返回-1includes返回布尔值split字符串转数组join数组转字符串下标只能读取字符不能修改字符。字符串连接、截取、分割、替换 四大常用操作一、字符串连接1.最常用let a Hello; let b World; let res a b; console.log(res); // Hello World2.concat()拼接多个字符串语法str.concat(字符串1, 字符串2,...)返回新字符串原字符串不变let str 前端; let newStr str.concat(JS, ,Vue); console.log(newStr); // 前端JS Vue3. 模板字符串推荐可换行、拼接变量let name 小明; let age 18; let info 姓名${name}年龄${age}; console.log(info);二、字符串截取3 种方法1. slice (开始下标结束下标) ✅ 最推荐左闭右开包含起始不包含结束支持负数倒数取值省略第二个参数截取到末尾let str abcdefg; console.log(str.slice(1, 4)); // bcd 下标1、2、3 console.log(str.slice(2)); // cdefg 从第2位到最后 console.log(str.slice(-3)); // efg 最后3位 console.log(str.slice(-5, -2));// cde2. substring (开始结束)不支持负数负数会当作 0如果起始 结束会自动交换两个参数位置let str abcdefg; console.log(str.substring(1,4)); // bcd console.log(str.substring(4,1)); // bcd 自动交换 console.log(str.substring(-2,3));// abc 负数视为03. substr (起始下标截取长度)ES 废弃不推荐let str abcdefg; console.log(str.substr(1,3)); // bcd 从下标1开始截取3个字符三、字符串分割split ()作用字符串 → 数组语法str.split(分隔符, [保留前n项])let str 苹果,香蕉,橘子; // 按逗号分割 let arr str.split(,); console.log(arr); // [苹果,香蕉,橘子] // 空字符串分割每个字符单独成数组 console.log(hello.split()); // [h,e,l,l,o] // 限制返回数组长度 console.log(str.split(,, 2)); // [苹果,香蕉]反向数组转字符串arr.join(分隔符)四、字符串替换replace ()1. 基础用法只能替换第一个匹配内容let str a1b1c1; let s1 str.replace(1, 2); console.log(s1); // a2b1c1 只替换第一个12. 全局替换必须用正则g全局匹配i忽略大小写let str a1b1c1; let s2 str.replace(/1/g, 2); console.log(s2); // a2b2c2 // 忽略大小写替换 let word Hello hello; console.log(word.replace(/hello/gi, Hi));3. replace 第二个参数可以是回调函数let str 123; let res str.replace(/\d/g, item Number(item) 1); console.log(res); // 234补充高频小方法截取前几位常用slice(0, n)手机号隐藏中间四位let phone 13812345678; let hide phone.slice(0,3) **** phone.slice(7); console.log(hide); // 138****5678方法对比总结表格操作方法作用连接/concat/模板多个字符串拼接截取slice(start,end)支持负数最通用分割split(分隔符)字符串转数组替换replace(匹配值,新值)默认只替换第一个正则可全局