这篇具有很好参考价值的文章主要介绍了JavaScript对象详解(六)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。
JavaScript对象是存储 键值对 的集合,表示属性和值的映射关系,这与Java中的HashMap很相似。JavaScript中所有对象都是由 Object 类派生的。
1、对象的使用
1.1、使用对象字面量法
let obj2 = {};
let obj3 = {
name: "Carrot",
_for: "Max",
details: {
color: "orange",
size: 12
}
}
obj3.details.color;
obj3["details"]["size"];
obj3 = null;
let obj4 = {};
obj4.name = "李太白";
obj4.age = 18;
obj4.sex = function(){
};
obj4.sex;
delete obj4.name;
delete obj4.sex;
let nb = 3;
delete nb;
for(let key in 对象名){
}
1.2、使用构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
let You = new Person('You', 24);
You.name = 'Simon';
let name = You.name;
You['name'] = 'Simon';
let name = You['name'];
obj.for = 'Simon';
obj["for"] = 'Simon';
let user = prompt('what is your key?');
obj[user] = prompt('what is its value?');
1.3、使用 Object.create()
var Animal = {
type: "Invertebrates",
displayType : function() {
console.log(this.type);
},
myOtherMethod(params) {
}
}
var animal1 = Object.create(Animal);
animal1.displayType();
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType();
2、继承与原型链
所有的 JavaScript 对象至少继承于一个对象,被继承的对象称作原型,并且继承的属性可通过 prototype
对象找到。
JavaScript 中每个实例对象(object)都有一个私有属性(称之为 __proto__
)指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__
),层层向上直到一个对象的原型对象为 null
。根据定义,null
没有原型,并作为这个 原型链 中的最后一个环节。
几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object
的实例。
2.1、基于原型链的继承
2.1.1、继承属性
let f = function () {
this.a = 1;
this.b = 2;
}
let o = new f();
f.prototype.b = 3;
f.prototype.c = 4;
console.log(o.a);
console.log(o.b);
console.log(o.c);
console.log(o.d);
2.1.2、继承方法
var o = {
a: 2,
m: function(){
return this.a + 1;
}
};
console.log(o.m());
var p = Object.create(o);
p.a = 4;
console.log(p.m());
2.2、不同方式所生成的原型链
2.2.1、使用语法结构
var o = {a: 1};
var a = ["yo", "whadup", "?"];
function f(){
return 2;
}
2.2.2、使用构造器
function Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
};
var g = new Graph();
2.2.3、使用Object.create()
var a = {a: 1};
var b = Object.create(a);
console.log(b.a);
var c = Object.create(b);
var d = Object.create(null);
console.log(d.hasOwnProperty);
2.2.4、使用 class 关键字
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
get area() {
return this.height * this.width;
}
set sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
var square = new Square(2);
2.3、实现继承的6种方式
2.3.1、原型链继承
function Parent1() {
this.name = 'parent1';
this.play = [1, 2, 3];
}
function Child1() {
this.type = 'child1';
}
Child1.prototype = new Parent1();
let child1 = new Child1();
2.3.2、构造函数继承
function Parent1() {
this.name = 'parent1';
}
Parent1.prototype.getName = function () {
return this.name;
}
function Child1() {
Parent1.call(this);
this.type = 'child1';
}
let child = new Child1();
console.log(child);
console.log(child.getName());
2.3.3、组合继承(原型链+构造函数)
function Parent3() {
this.name = 'parent3';
this.play = [1, 2, 3];
}
Parent3.prototype.getName = function () {
return this.name;
}
function Child3() {
Parent3.call(this);
this.type = 'child3';
}
Child3.prototype = new Parent3();
Child3.prototype.constructor = Child3;
let c1 = new Child3();
let c2 = new Child3();
c1.play.push(4);
console.log(c1.play, c2.play);
console.log(c1.getName());
console.log(c2.getName());
2.3.4、原型式继承
let parent4 = {
name: 'parent4',
friends: ['p1', 'p2', 'p3'],
getName: function () {
return this.name
},
}
let person = Object.create(parent4);
person.name = 'Tom';
person.friends.push('jerry');
let person2 = Object.create(parent4);
person2.friends.push('lucy');
console.log(person.name);
console.log(person.name === person.getName());
console.log(person2.name);
console.log(person.friends);
console.log(person2.friends);
2.3.5、寄生式继承
let parent5 = {
name: 'parent5',
friends: ['p1', 'p2', 'p3'],
getName: function () {
return this.name
},
}
function clone(original) {
let clone = Object.create(original);
clone.getFriends = function () {
return this.friends;
}
return clone;
}
let person = clone(parent5);
console.log(person.getName());
console.log(person.getFriends());
2.3.6、寄生组合式继承
function Parent6() {
this.name = 'parent6';
this.play = [1, 2, 3];
}
Parent6.prototype.getName = function () {
return this.name;
}
function Child6() {
Parent6.call(this);
this.friends = 'child5';
}
function clone(parent, child) {
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
}
clone(Parent6, Child6);
Child6.prototype.getFriends = function () {
return this.friends;
}
let person = new Child6();
console.log(person);
console.log(person.getName() + " " + person.getFriends());
let p2 = new Child6();
p2.play.push(4);
console.log(person.play);
console.log(p2.play);
2.3.7、总结
构造函数继承:只能继承父类的实例属性和方法,不能继承父类的原型属性或者方法;
原型链继承:子类可以访问父类的属性,但是对于多个子类来说,父类的属性与方法是共享的;
组合继承:这种方式会导致多调用一次构造函数,性能开销会变大;
原型式继承:这种方式,多个实例的引用类型属性指向相同的内存,所以存在篡改的可能;
寄生式继承:相比原型式继承,在父类基础上添加了更多方法;
寄生组合式继承:结合前几种方式的优缺点,解决了普通对象的继承问题,和原型式的篡改问题。
3、包装类
名称 |
描述 |
Number() |
数字的包装类 |
String() |
字符串的包装类 |
Boolean() |
布尔值的包装类 |
… |
… |
4、Math 对象的常用方法
方法名称 |
描述 |
Math.round() |
可以将一个数字四舍五入为整数 |
Math.max() |
取一组数中的最大值 |
Math.min() |
取一组数中的最小值 |
Math.random() |
0-1 之间的随机数(包含 0,不包含 1) |
5、Date 对象的常用方法
方法名称 |
描述 |
new Date() |
当前时间的日期对象 |
getDate() |
返回一个月中的某一天 (1 ~ 31) |
getDay() |
返回一周中的某一天 (0 ~ 6) |
getMonth() |
返回月份 (0 ~ 11) |
getFullYear() |
返回年份 |
getHours() |
返回小时 (0 ~ 23) |
getMinutes() |
返回分钟数(0-59) |
getSeconds() |
返回秒数(0-59) |
getTime() |
将日期对象变为时间戳(返回 1970 年 1 月 1 日至今的毫秒数) |
parse() |
将日期对象变为时间戳(返回 1970 年 1 月 1 日至今的毫秒数),最后三位是 000 |
6、正则表达式
正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExp
的 exec
和 test
方法,以及 String
的 match
、matchAll
、replace
、search
和 split
方法。
官方教程:Regular_Expressions
6.1、创建正则表达式
var patt=/pattern/attributes;
var patt=new RegExp(pattern,attributes);
var re = new RegExp("\\w+");
var re = /\w+/;
6.2、常用方法
方法 |
描述 |
exec |
一个在字符串中执行查找匹配的 RegExp 方法,它返回一个数组(未匹配到则返回 null)。 |
test |
一个在字符串中测试是否匹配的 RegExp 方法,它返回 true 或 false。 |
match |
一个在字符串中执行查找匹配的 String 方法,它返回一个数组,在未匹配到时会返回 null。 |
matchAll |
一个在字符串中执行查找所有匹配的 String 方法,它返回一个迭代器(iterator)。 |
search |
一个在字符串中测试匹配的 String 方法,它返回匹配到的位置索引,或者在失败时返回 -1。 |
replace |
一个在字符串中执行查找匹配的 String 方法,并且使用替换字符串替换掉匹配到的子字符串。 |
split |
一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。 |
6.3、使用案例
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");
var myRe2 = /d(b+)d/g;
var myArray2 = myRe.exec("cdbbdbsbz");
console.log(myRe2.lastIndex);
console.log(/d(b+)d/g.lastIndex);
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);
var names = "Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
var output = ["---------- 原始字符串\n", names + "\n"];
var pattern = /\s*;\s*/;
var nameList = names.split(pattern);
pattern = /(\w+)\s+(\w+)/;
var bySurnameList = [];
output.push("---------- 按正则表达式拆分后");
var i, len;
for (i = 0, len = nameList.length; i < len; i++) {
output.push(nameList[i]);
bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}
output.push("---------- 反转名称");
for (i = 0, len = bySurnameList.length; i < len; i++){
output.push(bySurnameList[i]);
}
bySurnameList.sort();
output.push("---------- 排序");
for (i = 0, len = bySurnameList.length; i < len; i++){
output.push(bySurnameList[i]);
}
output.push("---------- 结束了");
console.log(output.join("\n"));
6.4、修饰符
修饰符 |
描述 |
i |
执行对大小写不敏感的匹配。 |
g |
执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m |
执行多行匹配。 |
6.5、方括号表示法
方括号用于查找某个范围内的字符文章来源:https://www.toymoban.com/news/detail-470315.html
表达式 |
描述 |
[abc] |
查找方括号之间的任何字符。 |
[^abc] |
查找任何不在方括号之间的字符。 |
[0-9] |
查找任何从 0 至 9 的数字。 |
[a-z] |
查找任何从小写 a 到小写 z 的字符。 |
[A-Z] |
查找任何从大写 A 到大写 Z 的字符。 |
[A-z] |
查找任何从大写 A 到小写 z 的字符。 |
[adgk] |
查找给定集合内的任何字符。 |
[^adgk] |
查找给定集合外的任何字符。 |
(red|blue|green) |
查找任何指定的选项。 |
6.6、元字符
元字符(Metacharacter)是拥有特殊含义的字符文章来源地址https://www.toymoban.com/news/detail-470315.html
元字符 |
描述 |
d |
匹配一个数字字符 |
D |
匹配一个非数字字符 |
w |
匹配字母、数字或者下划线,类似于[A-Za-z0-9_]
|
W |
匹配除字母、数字或者下划线以外的字符。等价于[^A-Za-z0-9_]
|
s |
匹配一个空白字符(空格、制表符和换行符) |
. |
匹配任意一个字符 |
^ |
匹配开头 |
$ |
匹配结尾 |
6.7、量词
量词 |
描述 |
* |
匹配前面的子表达式零次或多次,等价于: {0,} |
+ |
匹配前面的子表达式一次或多次,等价于: {1,} |
? |
匹配前面的子表达式零次或一次,等价于: {0,1} |
{n} |
n 是一个正整数,表示匹配 n 次 |
{n,} |
n 是一个正整数,表示至少匹配 n 次 |
{n,m} |
n 和 m 是一个正整数,最少匹配 n 次且最多匹配 m 次 |
上一篇文章 |
下一篇文章 |
JavaScript数组(五) |
JavaScript语句(七) |
到了这里,关于JavaScript对象详解(六)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!