JavaScript面向对象基础

最新推荐文章于 2024-09-29 11:29:55 发布

「已注销」

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量209

点赞数 1

文章标签： javascript

BuGu

本文链接：https://blog.csdn.net/weixin_51800059/article/details/120391505

版权

这篇博客详细介绍了JavaScript中的面向对象基础，包括自定义对象的概念、创建与操作，通过自定义构造函数创建对象，以及Math、Date、数组和字符串对象的常见属性和方法。还探讨了基本包装类型、简单数据类型与复杂数据类型及其存储方式，以及传参时的不同行为。

摘要由CSDN通过智能技术生成

如果想看基础语法的内容，请移步JavaScript基础语法

一、自定义对象

01. 对象的概念

在JavaScript中，对象是一组无序的相关属性和方法的集合
所有的事物都是对象，例如字符串、数值、数组、函数等
对象是由属性和方法组成的
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中常用方法来表示（常用动词）

02. 创建对象

JS创建对象的几种方法

03. 操作对象

(1) 增加对象的属性、方法

直接名.属性名、名.方法名，然后给他们赋值即可

obj.aa = 10;
obj.bb = 20;
obj.sayHi = function() {
	alert('大家好');
}

(2) 修改对象的属性、方法

直接名.属性名、名.方法名，然后给他们重新

obj.aa = 30;
obj.bb = 40;
obj.sayHi = function() {
    alert('啊啊啊');
}

(3) 使用属性、方法

// 属性
console.log(obj.aa);
console.log(obj['bb']);

// 方法
obj.SayHi();
obj['sayHi']();

(4) 遍历对象的属性、方法

for…in 语句用于对象、数组的遍历操作

var obj = {
    a: 1,
    b: 2,
    c: 3
}

for (var k in obj) {
    console.log(k + " " + obj[k]);      // 这里的 k 是属性名、方法名，obj[k] 是属性值、方法体
}

(6) 特别注意的一点

如果某对象没有某一属性，而我们又使用了该属性，则该属性的值为undefined，对应的布尔值为false

04. 通过自定义构造函数来创建对象

类似于Java中的类
构造函数是一种特殊的函数，主要用来初始化对象
注意事项
- 约定构造函数的首字母大写，如：function Stars() {}
- 属性和方法前面需要添加this，表示当前对象的属性和方法
- 用 new 来调用构造函数，new关键字的作用如下
  - 在构造函数的代码执行之前，创建一个空对象
  - 修改this的指向，将this指向创建出来的空对象
  - 执行构造函数内的代码，给这个新对象添加属性和方法
  - 在函数执行完成之后，自动返回创建出来的新对象（所以构造函数里面不需要 return语句）

// 声明构造函数
function 构造函数名(形参1，形参2，形参3...) {
    this.属性名1 = 参数1;
    this.属性名2 = 参数2;
    this.属性名3 = 参数3;
    this.方法名 = 函数体;
}

// 调用构造函数，以此来创建对象
var obj = new 构造函数名(实参1，实参2，实参3);

05. 设计模式————工厂模式，利用工厂函数创建对象

function createPerson(name, age, job) {
    var person = new Object();
    person.name = name;
    person.age = age;
    person.job = job;
    person.sayHi = function() {
        console.log('Hello,everyBody');
    }
    return person;
}

var p1 = createPerson('张三', 22, 'actor');
var p2 = createPerson('张三', 28, 'runner');

二、Math对象

01. 常用属性、方法

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入就近取整注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()	求最小值
Math.min()	求最大值
Math.random()	获取范围在 [0,1) 内的随机值

02. 简单应用：获取指定范围的随机整数

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

for (var i = 0; i < 10; i++) {
    console.log(getRandom(5, 10));
}

三、Date对象

01. 实例化对象

(1) 返回当前时间对应的日期对象

var now = new Date();

(2) 返回指定时间的日期对象

时间参数常用写法：“YYYY-MM-dd hh:mm:ss”

var future = new Date('2020/10/1'); 
var date1 = new Date(2019,10,1);

02. 日期格式化

var date = new Date();    

console.log(date.getFullYear());    // 年
console.log(date.getMonth() + 1);   // 月，返回的月份小1个月，记得月份加1
console.log(date.getDate());        // 日
console.log(date.getDay);           // 周，周一一返回的是1 周六返回的是6 周日返回的是0
console.log(date.getHours());       // 时
console.log(date.getMinutes());     // 分
console.log(date.getSeconds());     // 秒

03. 获取时间戳

基于1970年1月1日起的毫秒数

// 1. 调用方法：valueOf()
var now = new Date();
console.log(now.valueOf())

// 2. 调用方法：getTime()
var now = new Date();
console.log(now.getTime())

// 3. 
var now = + new Date();

// 4. HTML5中提供的方法，有兼容性问题
var now = Date.now();

04. 应用

(1) 封装一个函数返回当前的日期和时间

格式 YY-MM-dd hh:mm:sss

function getTimer() {
    var time = new Date();
    var year = time.getFullYear();
    var month = time.getMonth() < 10 ? "0" + time.getMonth() : time.getMonth();
    var date = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
    var hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
    var minute = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
    var second = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
    return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

console.log(getTimer());

(2) 倒计时案例

function countDown(time) {
    var nowTime = new Date().getTime(); // 返回的是当前时间的时间戳
    var inputTime = time.getTime(); // 返回的是用户输入时间总的时间戳
    var times = (inputTime - nowTime) / 1000; // 剩余总秒数
    var date = parseInt(times / 60 / 60 / 24); // 天
    date = (date < 10) ? "0" + date : date;
    var hour = parseInt((times / 60 / 60) % 24); //时 
    hour = (hour < 10) ? "0" + hour : hour;
    var minute = parseInt((times / 60) % 60); // 分 
    minute = (minute < 10) ? "0" + minute : minute;
    var second = parseInt(times % 60); // 秒 
    second = second < 10 ? "0" + second : second;
    
    return date + "天" + hour + "时" + minute + "分" + second + "秒";
}

// 传入截至时间的Date对象
console.log(countDown(new Date("2021-10-1 00:00:00")));

四、数组对象

01. 创建数组的两种方式

(1) 字面量方式

var 数组变量名 = [数组变量名];

(2) 实例化数组对象

var 数组变量名 = new Array(数组变量名);

注意：可以在创建数组时传入参数
	如果只传入一个数字作为参数   则该参数规定了数组的长度
	如果传入多个参数            这些参数被作为数组的元素

02. 检测是否为数组

(1) instanceof 关键字

判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};

console.log(arr instanceof Array);  // true
console.log(obj instanceof Array);  // false
console.log(obj instanceof Object); // true

(2) Array.isArray()

用于判断一个对象是否为数组对象
isArray() 是 HTML5 中提供的方法，有兼容性问题

var arr = [1, 23];
var obj = {};

console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

(3) typeof 关键字

查看变量的数据类型
- 简单数据类型：Number、String、Boolean、Undefined、Null
- 复杂数据类型：object

var arr = [1, 23];
var obj = {};
var num = 56;
var str = "abcd";

console.log(typeof arr); // object
console.log(typeof obj); // object
console.log(typeof num); // number
console.log(typeof str); // string

03. 添加、删除数组元素的常用方法

var arr = ["a", "b", "c", "d"];

// 1. unshift() 向开头添加元素（一至多个），并返回数组修改后的长度
arr.unshift("aa");
arr.unshift(0, 1, 2);

// 2. push() 向末尾添加元素（一至多个），并返回数组修改后的长度
arr.push("aa");
arr.push(0, 1, 2);

// 3. shift() 删除开头的一个元素，并返回该元素
arr.shift();

// 4. pop() 删除最后一个元素，并返回该元素
arr.pop();

04. 改变数组排列顺序的方法

(1) 两个方法

方法名	说明	是否修改原数组	返回值
reverse()	翻转数组，无参数	改变原数组	返回改变后的新数组
sort()	数组排序，有参数	改变原数组	返回改变后的新数组

(2) sort()方法详解

移步JavaScript中的sort()方法

05. 查找对应元素的索引

(1) indexOf()

从前往后查找对应元素的索引，找不到就返回-1

(2) lastIndexOf()

从后往前查找对应元素的索引，找不到就返回-1

(3) 使用演示

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 2];
            
console.log(arr.indexOf(2)); // 2
console.log(arr.lastIndexOf(2)); // 9
console.log(arr.lastIndexOf(2)); // -1

06. 将数组转换为字符串

(1) toString()

用 ‘,’ 分割每一项

var arr = [1, 2, 3, 4];

var str = arr.toString();

console.log(str); // "1,2,3,4"

(2) join()

按照指定的字符将数组转换为字符串
join方法如果不传入参数，则按照 “ , ” 拼接元素

var arr = [1, 2, 3, 4];
var str = arr.join("+");
console.log(str); // "1+2+3+4"

var arr = [1, 2, 3, 4];
var str = arr.join("--");
console.log(str); // "1--2--3--4"

07. 合并数组

concat()：将参数数组的元素连接到指定数组的后面，改变原数组，并返回被改变的数组

var arr1 = [1, 2, 3, 4], arr2 = [5, 6, 7, 8];

arr3 = arr1.concat(arr2);
console.log(arr3); // [1,2,3,4,5,6,7,8]



var num1 = [1, 2, 3], num2 = [4, 5, 6], num3 = [7, 8, 9];

var num4 = num1.concat(num2, num3);
console.log(num4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

08. for…in遍历数组

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 2];

for (var k in arr) {
    console.log(k); // 此时的k对应为索引
    console.log(arr[k]); // 对应索引k的元素
}

五、基本包装类型

为了方便操作基本数据类型，JavaScript 提供了三个特殊的引用类型String、Number和 Boolean
实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据
这些就是基本包装类型，把简单数据类型包装成为复杂数据类型，使得基本数据类型有了属性和方法

下面代码有什么问题

var str = 'andy';
console.log(str.length); // 4

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行
这是因为 js 会把基本数据类型包装为复杂数据类型

其执行过程如下：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');

// 2. 赋值给我们声明的字符变量
str = temp;

// 3. 销毁临时变量
temp = null;

六、字符串对象

01. 字符串的不可变性

指的是字符串的值不可变，但是地址可以改变，地址改变时，会在内存中新开辟一个内存空间。
由于字符串的不可变，在「大量拼接字符串」的时候会有效率问题

02. 将字符串转换成数字型

(1) parseInt(String)

var s = "123";

var num = parseInt(s);

console.log(typeof num); // number

(2) parseFloat(String)

var s = "123.456";

var num = parseFloat(s);

console.log(typeof num); // number

(3) Number(String)

var s1 = "123";
var s2 = "123.456";

var num1 = Number(s1);
var num2 = Number(s2);

console.log(typeof num1); // number
console.log(typeof num2); // number

(4) 隐式转换

仅针对（减、乘、除）

console.log("40" + 5); // "405"
console.log("40" - 5); // 35
console.log("40" * 5); // 200
console.log("40" / 5); // 8

03. 字符串的常用方法

(1) indexOf()方法

查找指定字符的索引，索引从 0 开始
从前往后查找

var str = "abcdabcd";

// 1. 从第一个索引开始查找
console.log(str.indexOf("a")); // 0
console.log(str.indexOf("e")); // -1，找不到返回-1

// 2. 从指定索引开始查找
console.log(str.indexOf("a", 0));  // 0
console.log(str.indexOf("a", 1));  // 4

(2) lastIndexOf()方法

从后往前查找，使用方法与indexOf()类似

(3) 根据索引查找对应的字符

var str = 'andy';

// 1. charAt(index) 根据索引，返回对应的字符
console.log(str.charAt(3)); // 'y'

// 2. str[index] H5 【新增的】
console.log(str[0]); // a

// 3. charCodeAt() 根据索引，返回字符的ASCII值【目的： 判断用户按下了那个键】
console.log(str.charCodeAt(0)); // 97

(4) 遍历字符串

var str = "abcdefg";

for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

for (var k in str) {
    console.log(str[k]);
}

(5) replace()

用一些字符(字符串)替换另一些字符(字符串)，并返回新字符串，只会替换第一个出现的字符(字符串)

var str = "andyandy";
var strs = str.replace("and", "b");
console.log(strs); // byandy

(6) concat()方法

拼接字符串，不改变原字符串，并返回新字符串

var str = "andy";
var newStr1 = str.concat("red");
var newStr2 = newStr1.concat(1, null, 3);

console.log(newStr1);    // "andyred"
console.log(newStr2);    // "andyred1null3"
console.log(str);        // "andy"，不改变原字符串

(7) split()方法

将字符串切分为数组，并返回一个新数组

var str1 = "red, pink, blue";
var arr1 = str1.split(",");
console.log(arr1); // [red,pink,blue]

var str2 = "red&pink&blue";
var arr2 = str2.split("&");
console.log(arr2); // [red,pink,blue]

(8) substr(startIndex, len)方法

截取字符串，并返回被截取的部分

var str1 = '改革春风吹满地';
var newStr1 = str1.substr(2, 3);
console.log(newStr1); // "春风吹"

var str2 = '0123456789';
var newStr2 = str2.substr(4, 4);
console.log(newStr2); // "4567"