您的位置: 首页  >  文章  >  JavaScript（二）之JS对象

JavaScript（二）之JS对象

分类: 文章 • 2024-06-21 11:59:58

内置对象和方法

在JavaScript当中所有的事物都是对象：字符串、数值、数组、函数...

对象只是带有属性和方法的特殊的数据类型，在JavaScript当中还可以自定义对象

注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object

JavaScript（二）之JS对象

访问对象的属性：

属性是与对象相关的值。访问对象属性的语法是：

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度：

var message="Hello World!";
var x=message.length;

x的值为12

访问对象的方法

方法是能够在对象上执行的动作。可以通过以下语法来调用方法：

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

x的值为 “HELLO WORLD！”

自定义对象

JavaScript的对象（object）在本质上是键值对的集合（hash结构），在JS中会默认将做为键的元素变为字符串

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历出对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象：

创建新对象有两种不同的方法：

1、定义并创建对象的实例

2、使用函数来定义对象，然后创建新的对象实例

直接创建实例

var person = new object () ;  // 创建一个person对象
person.name = "bill";   // person对象的name属性
person.age = 66 ;   // person对象的age属性

通过函数构造对象

function person(name,age,eyecolor)
{
this.name=name;
this.age=age;
this.eyecolor=eyecolor;
}

注意：

ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。

JavaScript（二）之JS对象JavaScript（二）之JS对象
var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false
map

 

JavaScript（二）之JS对象JavaScript（二）之JS对象
// 父类构造函数
var Car = function (loc) {
  this.loc = loc;
};

// 父类方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子类构造函数
var Van = function (loc) {
  Car.call(this, loc);
};

// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = Van;
// 扩展方法
Van.prototype.grab = function () {
  /* ... */
JS面向对象之继承

Data对象

创建Data对象

//方法1：不指定参数
var d1 = new Date();  
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2018/5/31 15:12");
console.log(d2.toLocaleString());
var d3 = new Date("18/05/31 15:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2018,5,31,15,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Data对象的方法：

var d = new Date(); // Date 对象自动使用当前的日期和时间作为其初始值。
//getDate() 获取日 
//getDay () 获取星期 
//getMonth () 获取月（0-11）  **表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
//getFullYear () 获取完整年份 
//getYear () 获取年 
//getHours () 获取小时 
//getMinutes () 获取分钟 
//getSeconds () 获取秒 
//getMilliseconds () 获取毫秒 
//getTime () 返回累计毫秒数(从1970/1/1午夜)

//如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

练习：
将当前日期按照“2018-5-31 15:27 星期四”的格式输出

JavaScript（二）之JS对象JavaScript（二）之JS对象
const WEEKMAP = {
    0: "星期日",
    1: "星期一",
    2: "星期二",
    3: "星期三",
    4: "星期四",
    5: "星期五",
    6: "星期六",
};

function showtime() {
    var d1 = new Date() ;
    var year = d1.getFullYear();
    var month = d1.getMonth()+1;
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10 ? "0" + d1.getMinutes() : d1.getMinutes();
    var week = WEEKMAP[d1.getDay()];
    var dateStr = `${year}-${month}-${day} ${hour}:${minute} ${week}`;
    console.log(dateStr)
}

showtime();
View Code

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象（正则表达式）

RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

JavaScript（二）之JS对象JavaScript（二）之JS对象
//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式（逗号后面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式：g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


// 注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
RegExp

Math对象（算数）

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

JavaScript（二）之JS对象JavaScript（二）之JS对象
abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。
Math

 

相关推荐