这篇博客深入探讨了JavaScript的面向对象编程，包括Console对象的多种输出方法，如自定义格式输出、分组输出和对象属性及方法的显示。此外，还讲解了JavaScript内置对象的使用，如Number、Boolean、String、Array、Set、Map、Date、RegExp、Object和Error对象，以及JSON对象的方法。文章通过实例展示了如何创建和操作这些对象，最后提到了ECMAScript 6中定义类的新语法。
JavaScript面向对象编程
目录
Console对象
- console对象不同类型的输出方法
<script type="text/javascript">
console.log("log方法输出");
console.info("info方法输出");
console.debug("debug方法输出");
console.warn("warn方法输出");
console.error("error方法输出");
</script>
输出效果：
- 自定义格式输出
<script type="text/javascript">
// %s字符，%d或%i整数，%f浮点数，%o对象
console.log("%d年%d月%d日", 2021, 7, 21);
console.log("圆周率是%f", 3.1415926);
var car = {
name: "宝马",
color: "白色"
};
console.log("%o", car);
</script>
输出效果：
- 分组输出
<script type="text/javascript">
console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();
</script>
输出效果：
- 输出指定对象的属性和方法
<script type="text/javascript">
var car = {
name: '宝马',
color: '白色'
};
car.show = function(){
console.log("hello");
};
console.dir(car);
</script>
输出效果：
- 显示页面对象的HTML代码
<div id="d1">
<p>hello world</p>
</div>
<script type="text/javascript">
var div1 = document.getElementById('d1');
console.dirxml(div1);
</script>
输出效果：
2. 计时
<script type="text/javascript">
console.log("计时开始");
console.time('time1');
var n;
// 运行代码
for(var i=0; i<100; i++){
for(var j=0; j<100; j++){
n++;
}
}
console.log("运行代码结束，计时结束");
console.timeEnd('time1');
</script>
输出效果：
3. 性能分析
<input onclick="beginTest()" type="button" value="测试">
<script type="text/javascript">
function test(){
for(var i=0; i<10; i++){
a(1000);
}
b(10000);
}
function a(n){
for(var i=0; i<n; i++){
console.log('i');
}
}
function b(n){
for(var i=0; i<n; i++){
}
}
function beginTest(){
// console.profile()可以用来对JavaScript代码进行性能分析
console.profile('profile');
test();
console.profileEnd('profile');
}
</script>
输出效果：
单击按钮后开始执行性能分析函数
执行结束后：
JavaScript内置对象
- 使用Number对象的属性和方法
<script type="text/javascript">
console.log("构造Number对象的实例");
var num1 = new Number();
var num2 = new Number(6);
console.log('before:num1='+ num1 +',num2='+ num2);
num1 = 10;
num2 = 20;
console.log('after:num1='+ num1 +',num2='+ num2);
console.log("可使用的最大的数："+ Number.MAX_VALUE);
console.log("可使用的最小的数："+ Number.MIN_VALUE);
if(isNaN('abc')){
console.log('abc:'+ Number.NaN);
}
var x = (-Number.MAX_VALUE) * 2;
if(x==Number.NEGATIVE_INFINITY){
console.log("Value of x:"+ x);
}
var str = num1.toString();
console.log("num1转换为字符串："+ str);
var num = new Number(15.67);
console.log("将数字15.67舍入为仅有一位小数的数字："+ num.toFixed(1));
</script>
输出效果：
2. 创建Boolean对象的属性和方法
<script type="text/javascript">
var boolA = new Boolean();
var boolB = new Boolean(false);
var boolC = new Boolean('false');
var boolD = Boolean(false);
console.log('boolA='+ boolA +' 类型：'+ typeof(boolA));
console.log('boolB='+ boolB +' 类型：'+ typeof(boolB));
console.log('boolC='+ boolC +' 类型：'+ typeof(boolC));
console.log('boolD='+ boolD +' 类型：'+ typeof(boolD));
</script>
输出效果：
3. JavaScript字符串操作
- 获取目标字符串长度
<script type="text/javascript">
var myString = new String("Welcome to Javascript world!");
var strLength = myString.length;
console.log("原始字符串："+ myString +"长度："+ strLength);
myString = "This is the New String!";
strLength = myString.length;
console.log("改变内容的字符串："+ myString +" 长度："+ strLength);
</script>
输出效果：
- 链接字符串操作
<script type="text/javascript">
var strA = new String("Welcome to ");
var strB = new String("the world!");
// 进行连接操作
var strResult = strA.concat(strB);
console.log("当前目标字符串："+ strA);
console.log("被链接字符串："+ strB);
console.log("连接后的字符串："+ strResult);
</script>
输出效果：
- 返回指定位置字符串
<script type="text/javascript">
var MyString = new String('Congratulations!');
console.log("原始字符串内容："+ MyString +"长度："+ MyString.length);
console.log("slice()方法:");
console.log(" MyString.slice(2, 9)："+ MyString.slice(2, 9));
console.log(" MyString.slice(2, -2)："+ MyString.slice(2, -2));
console.log(" MyString.slice(2, 19)："+ MyString.slice(2, 19));
console.log(" MyString.slice(2)："+ MyString.slice(2));
console.log("substr()方法：");
console.log(" MyString.substr(2, 9)："+ MyString.substr(2, 9));
console.log(" MyString.substr(2, -2)："+ MyString.substr(2, -2));
console.log(" MyString.substr(2, 19)："+ MyString.substr(2, 19));
console.log(" MyString.substr(2)："+ MyString.substr(2));
console.log("substring()方法：");
console.log(" MyString.substring(2, 9)："+ MyString.substring(2, 9));
console.log(" MyString.substring(2, -2)："+ MyString.substring(2, -3));
console.log(" MyString.substring(2, 19)："+ MyString.substring(-2, 9));
console.log(" MyString.substring(2, 19)："+ MyString.substring(2, 19));
console.log(" MyString.substring(2)："+ MyString.substring(2));
</script>
输出效果：
- 创建数组并通过下标访问元素
<script type="text/javascript">
var arrPerson = new Array("TOM", "Allen", "Lily", "Jack");
console.log("数组信息：");
console.log("arrPerson.length="+ arrPerson.length);
for(var i=0; i<arrPerson.length; i++){
console.log("arrPerson["+ i +"]="+ arrPerson[i]);
}
console.log("arrPerson[5]="+ arrPerson[5]);
console.log("\narray.reverse()方法将数组中元素完全颠倒：");
arrPerson.reverse();
for(var i=0; i<arrPerson.length; i++){
console.log("arrPerson["+ i +"]="+ arrPerson[i]);
}
console.log("\narray.sort(function)基于某种顺序重新排列数组元素：");
console.log("默认按英文字母排列")
arrPerson.sort();
for(var i=0; i<arrPerson.length; i++){
console.log("arrPerson["+ i +"]="+ arrPerson[i]);
}
var arrA = [2, 3, 4, 5, 1];
function desc(x, y){
if(x>y)
return -1;
if(x<y)
return 1;
}
function asc(x, y){
if(x>y)
return 1;
if(x<y)
return -1;
}
console.log("\n升序排列：");
console.log(arrA.sort(asc));
console.log("降序排列：");
console.log(arrA.sort(desc));
</script>
输出效果：
- 连接数组
<script type="text/javascript">
function printArray(arrayName){
var strArray = "";
for(var i=0; i<arrayName.length; i++){
strArray += "myArray["+ i +"]="+ arrayName[i] +" ";
}
console.log(strArray);
}
var myArray = new Array("First", "Second", "Third");
var arrayAdd1 = new Array("Forth", "Fifth");
var arrayAdd2 = new Array("Sixth");
console.log("原始数组：");
printArray(myArray);
console.log("连接数组1：");
printArray(arrayAdd1);
console.log("连接数组2：");
printArray(arrayAdd2);
console.log("连接后产生的新数组：");
// 使用concat()方法后目标数组和参数数组的内容不变，cancat()方法并不修改数组本身，而是将操作结果返回给新数组
var myNewArray = myArray.concat(arrayAdd1, arrayAdd2);
printArray(myNewArray);
</script>
输出效果：
- Set和Map对象
<script type="text/javascript">
console.log("Set方法")
// Set类似于数组，但是成员值都是唯一的，没有重复的值
// size：返回成员总数
// add(value)：添加某个值
// delete()：删除某个值，返回一个布尔值，表示删除是否成功
// has(value)：返回一个布尔值，表示该值是否为Set的成员
// clear()：清除所有的成员
var num = new Set();
num.add("1").add("2").add("2");
console.log(num.size);
console.log(num.has("1"));
console.log(num.has("2"));
console.log(num.has("3"));
num.delete("1");
console.log(num.has(1))
console.log("Map方法")
// Map是一个键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键
// size：返回成员总数
// set(key, value)：设置一个键值对
// get(key)：读取一个键值
// has(key)：返回一个布尔值，表示某个键是否在Map数据结构中
// delete(key)：删除某个键
// clear()：清除所有成员
var m = new Map();
m.set("str", 5); //键是字符串
m.set(101, "javascript"); //键是数值
m.set(undefined, "udf"); //键是undefined
console.log(m.has("str"));
console.log(m.has(101));
console.log(m.has(undefined));
m.delete(undefined);
console.log(m.has(undefined));
console.log(m.get(101));
var hi = function () {
console.log("hi")
}
m.set(hi, "hello world!") //键是函数
console.log(m.get(hi));
var obj = {name: "David"};
m.set(obj, "title"); //键是对象
console.log(m.get(obj))
</script>
输出效果：
- Data对象
<script type="text/javascript">
var myDate1 = new Date();
var myDate2 = new Date(myDate1.getTime());
var myDate3 = new Date(myDate1.toString());
var myDate4 = new Date(2021, 2, 1, 18, 30, 20, 100);
console.log("本地日期toString()："+ myDate1.toString())
console.log("本地日期：toLocalString()："+ myDate2.toLocaleString());
console.log("GMT世界时间toGMTString()："+ myDate3.toGMTString());
console.log("UTC世界时间toUTCString()："+ myDate4.toUTCString());
</script>
输出效果：
- RegExp对象
<script type="text/javascript">
var str = "The best things in life are free.";
var ptnSearch1 = new RegExp('f');
console.log("字符串："+ str);
console.log("检索该字符串中是否存在字母'f'："+ ptnSearch1.test(str));
ptnSearch1.compile('d');
console.log("检索该字符串中是否存在字母'd'："+ ptnSearch1.test(str));
var ptnSearch2 = new RegExp('e', 'g');
var result = "";
for(;;){
var temp = ptnSearch2.exec(str);
if(temp==null) break;
result += temp +" ";
}
console.log("检索该字符串中所有字母'e'并输出："+ result);
</script>
输出效果：
- 创建Object对象的实例
<script type="text/javascript">
var person1 = new Object();
person1.name = 'David';
person1.sex = 'male';
person1.age = 18;
console.log("type of person1："+ typeof(person1));
console.log("person1: "+ person1.name +","+ person1.sex +","+ person1.age);
var person2 = {
name: 'Marry',
sex: 'famale',
age: '16'
};
console.log("type of person2: "+ typeof(person2));
console.log("person2: "+ person2.name +","+ person2.sex +","+ person2.age);
</script>
输出效果：
- Error对象
<script type="text/javascript">
try {
x=y;
}
catch (e){
console.log(e.toString());
console.log(e.number&0xffff);
console.log(e.description);
}
</script>
输出效果：
- 字面量对象的创建和使用
<script type="text/javascript">
var pen = {
type: '铅笔',
color: 'black',
price: 1.5,
using: penUse
};
function penUse() {
console.log("It can be used for drawing");
}
console.log("笔的类型："+ pen.type);
console.log("笔的颜色："+ pen.color);
console.log("笔的价格："+ pen.price);
console.log("笔的用途：");
pen.using();
</script>
输出效果：
- JSON.parse()对象
<script type="text/javascript">
// JSON.parse()方法可以将JSON格式的数据转化成JavaScript对象，该方法可以接受一个JSON格式的数据作为输入参数，返回值为JavaScript对象。
var jsonValue = '{"firstName": "Huang", "lastName": "Jie", "email": "18888888888@163.com"}';
try {
var jsonObj = JSON.parse(jsonValue);
console.log(jsonObj);
}catch (e) {
console.log(e);
}
//错误格式
var jsonValue = '{firstName: "Huang", lastName: "Jie", email: "18888888888@163.com"}';
try {
jsonObj = JSON.parse(jsonValue)
console.log(jsonObj);
}catch (e) {
console.log(e)
}
</script>
输出效果：
- JSON.stringify()对象
<script type="text/javascript">
// 值转换成JSON格式
console.log(JSON.stringify("xyz"));
console.log(JSON.stringify(1));
console.log(JSON.stringify(true));
console.log(JSON.stringify([]));
console.log(JSON.stringify({}));
console.log(JSON.stringify([1, "false", false]));
console.log(JSON.stringify({name: "dn"}));
// 函数等特殊对象的转换
var s = JSON.stringify({
func: function () {},
arr: [function () {}, undefined]
});
console.log(s);
// 对象转换成为JSON格式
x = JSON.stringify({
a: 1,
b: 2
});
console.log(x)
</script>
输出效果：
- 自定义对象
- 通过构造函数方式定义对象并使用new操作创建对象实例
<script type="text/javascript">
// 对象的构造函数
function Car(sColor, iDoors) {
this.color = sColor;
this.doors = iDoors;
this.showColor = funcColor;
}
// 定义对象的方法
function funcColor() {
console.log("color: "+ this.color);
}
// 生成对象实例
var oCar = new Car("red", 4);
console.log("Car's infomation: ");
oCar.showColor();
console.log("Doors: "+ oCar.doors);
</script>
输出效果：
- 通过原型方式定义对象
<script type="text/javascript">
function Car() {}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.showColor = function () {
console.log("color: "+ this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
console.log("Car1's color is:"+ oCar1.color);
console.log("Car2's color is:"+ oCar2.color);
oCar1.color = "blue";
oCar2.color = "white";
console.log("After car's color is modified:");
console.log("Car1's color is:"+ oCar1.color);
console.log("Car2's color is:"+ oCar2.color);
</script>
输出效果：
- 自定义对象实现方式选择与实例
<script type="text/javascript">
// 对象的构造函数
function Car(sColor, iDoors) {
this.color = sColor;
this.doors = iDoors;
}
// 使用原型方式定义对象的方法
Car.prototype.drive = function (drive) {
console.log(drive +" is driving the car!");
}
Car.prototype.showInfo = function () {
console.log("The car with "+ this.doors +" doors is "+ this.color +".");
}
var oCar = new Car("red", 4);
oCar.drive("Mike");
oCar.showInfo();
</script>
输出效果：
- 使用ECMAScript 6新语法定义类
<script type="text/javascript">
class Car {
// 定义构造方法
constructor(make, year) {
// 定义类成员
this._make = make;
this._year = year;
}
// 定义成员方法
make() {
return this._make
}
year() {
return this._year
}
toString() {
return this.make() + ', ' + this.year();
}
}
// 创建对象实例
var car = new Car('Toyota Corolla', 2015);
// 使用对象实例
console.log(car.make());
console.log(car.year());
console.log(car.toString());
class Motorcycle extends Car {
// 调用基类的构造方法
constructor(make, year) {
super(make, year);
}
// 调用基类的toString方法
toString() {
return 'Motorcycle' + super.toString();
}
}
// 创建对象实例
var motorcycle = new Motorcycle('Yamaha V-REV', 2015);
// 使用对象实例
console.log(motorcycle.toString())
</script>
输出效果：
结尾：文章并未写完，将持续更新并且完善本文的理解和使用
声明：本文章无商业意义，仅起学习作用
扫一扫
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
