JS 对象-酒店常州论坛 - Powered by Discuz!

知道为什么需要对象

如何创建对象

如何使用对象

能够遍历对象

熟悉常见的内置对象及使用

为什么要学习对象呢？问题：某一网站的用户信息，比如电话、姓名、身高、账号等等，那么如果保存一个用户的完整信息呢？答：数组，可以保存多个数据，比如 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. 删除属性`delete`

delete person.gender;

4. 查询属性是否存在`in`

console.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. 判断是否是自身属性`hasOwnProperty`

person.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('1+2'); // 执行字符串表达式

三、简单区分：包装对象

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.7976931348623157e+308 // 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 () 判断是否是 NaN

Number.isNaN(NaN); // true Number.isNaN('123'); // false

区别于全局isNaN：只会判断本身是不是 NaN，不会做类型隐式转换。

2. Number.isFinite () 判断是否是有限数字

Number.isFinite(100); // true Number.isFinite(Infinity); // false

3. Number.isInteger () 判断是否为整数

Number.isInteger(5); // true Number.isInteger(5.0); // true Number.isInteger(5.5); // false

4. 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)); // "3"

2. toPrecision (n) 保留 n 位有效数字

let num = 12.34; console.log(num.toPrecision(3)); // "12.3"

3. 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); // NaN

JavaScript 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]); // a

length属性获取字符串长度

console.log(str.length); // 3

三、常用实例方法（返回新字符串，原字符串不变）

1. 获取单个字符

let str = 'javascript'; // charAt(下标) 返回对应字符 str.charAt(2); // 'v' // charCodeAt(下标) 返回字符ASCII编码 str.charCodeAt(0); // 106

2. 查找字符位置

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'); // true

3. 截取字符串

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); // 'bc'

4. 大小写转换

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'); // 'a2b2c'

7. 分割：字符串转数组

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找不到返回-1，includes返回布尔值；
split字符串转数组，join数组转字符串；
下标只能读取字符，不能修改字符。

字符串：连接、截取、分割、替换四大常用操作

一、字符串连接

1.`+`最常用

let a = 'Hello'; let b = 'World'; let res = a + ' ' + b; console.log(res); // Hello World

2.`concat()`拼接多个字符串

语法：str.concat(字符串1, 字符串2,...)返回新字符串，原字符串不变

let str = '前端'; let newStr = str.concat('JS',' ','Vue'); console.log(newStr); // 前端JS Vue

3. 模板字符串`（推荐，可换行、拼接变量）

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));// cde

2. 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 负数视为0

3. 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 只替换第一个1

2. 全局替换（必须用正则）

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(匹配值,新值)`	默认只替换第一个，正则可全局

企业官网建设流程全解析