JavaScript学习笔记（标准对象）

最新推荐文章于 2020-05-27 19:32:49 发布

闪电蛙

最新推荐文章于 2020-05-27 19:32:49 发布

阅读量231

点赞数

分类专栏： # javaScript 文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/weixin_42893085/article/details/106266325

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

JavaScript学习笔记（标准对象）

- 基础知识

基础知识

在JavaScript的世界里，一切都是对象。
但是某些对象还是和其他对象不一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串：

typeof 123;//'number'
typeof NaN;//'number'
typeof 'str';//'string'
typeof true;/'boolean'
typeof undefined;//'undefined'
typeof Math.abs;//'function'
typeof null;//'object'
typeof [];//'object'
typeof {};//'object'

可见，number、string、boolean、function和undefined有别于其他类型。特别注意null的类型是object，Array的类型也是object，如果我们用typeof将无法区分出null、Array和通常意义上的object——{}。
包装对象
除了这些类型外，JavaScript还提供了包装对象

var n = new Number(123);//123,生成了新的包装类型
var b = new Boolean(true);//true,生成了新的包装类型
var s = new String('str');//’str',生成了新的包装类型

包装类主要是将类型转为Object类型，改变了原来的数据类型

var n = Number('123');
console.log(typeof n);//number

var b = Boolean('true');
console.log(typeof b);//boolean

var b2 = Boolean('true');
var b3 = Boolean('');
console.log('b2,b3'+b2===b3);//false
console.log(typeof b2);//boolean

var s = String(123.45);
console.log(typeof s);//string
var s1 = new String(123.45);
console.log(s===s1);//0

var s2 = String(123.45);
//获取s1的数据类型并返回
console.log(typeof s1);//object

总结：

不要使用 new Number()、new Boolean()、new String() 创建包装对象；
用parseInt()或者parseFloat()来转换任意类型到number;
用String()来转换任意类型到string,或者直接调用某个对象的toString()方法
通常不必把任意类型转换为boolean再判断，因为可以直接写if(myVar){…};
typeof操作符可以判断出number、boolean、string、function、undefined;
判断Array要使用Array.isArray(arr);
判断null请使用myVar === null;
判断某个全局变量是否存在使用typeof window.myVar === ‘undefined’;
函数内部判断某个变量是否存在使用typeof myVar === ‘undefined’.
注意：null和undefined没有toString()方法
直接使用123.toString()打印会报错误

正确的做法是给123加括号再打印就搞定了！

console.log(s2.toString()+','+b2.toString()+','+n.toString());
console.log((123).toString());

Date

JavaScript中，Date对象用来表示日期和时间。

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

用户想要创建一个指定日期和时间的Date对象，可以用：

//注意在JavaScript中的月份是从0开始的即0-11为1-12月
var d = new Date(2020,0,21,21,26,10,123);
console.log(d);//2020-01-21T13:26:10.123Z
//解析一个符合ISO 8601格式的字符串
var d = Date.parse('2020-05-21T19:49:22.875+08:00');
console.log('转换到的时间戳为：'+d);
//将时间戳转换为Date，然后获取Date中的所有信息
var ds = new Date(1590061762875);
console.log(ds+','+'月份：'+ds.getMonth()+','+'年份：'+ds.getFullYear());

注意：
时间戳指的是：

一个能表示一份数据在某个特定时间之前已经存在的、完整的、可验证的数据,通常是一个字符序列，唯一地标识某一刻的时间。时间戳是一个自增的整数，它表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。假设浏览器所在电脑的时间是准确的，那么世界上无论哪个时区的电脑，它们此刻产生的时间戳数字都是一样的，所以，时间戳可以精确地表示一个时刻，并且与时区无关。
所以，我们只需要传递时间戳，或者把时间戳从数据库里读出来，再让JavaScript自动转换为当地时间就可以了。
使用Date.parse()传入的字符串使用实际的月份01-12,转换为Date对象后getMoth()获取的月份值为0-11.

把时间戳理解为黄金，地方时=当地货币。获得一个商品用黄金计价的价值，再用汇率转成货币。
获得当前时间戳：

//获得当前时间戳
if(Date.now){
    console.log(Date.now()); 老版本IE没有now()方法
}else{
    console.log(new Date().getTime);//1590069944683
}

时区

Date对象表示的时间问题按浏览器所在时区显示，不过我们即可以显示本地时间，也可以显示调整的UTC时间：

var ds = new Date(1590061762875);
console.log(ds.toLocaleDateString());//2020-5-21
console.log(ds.toUTCString());//Thu, 21 May 2020 11:49:22 GMT

RegExp

字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎远处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但是这样做不但麻烦，而且代码难以复用。
正则表达式是一种用来匹配字符串的强有力的武器。它的设置思想是用一种描述性的语言来给字符串定义一个规则，凡是符合元则的字符串，我们就认为它”匹配“了，否则，该字符串就是不合法的。
所以我们判断一个字符串是否是合法的Email的方法是：

1.创建一个匹配Email的正则表达式；
2.用该正则表达式去匹配用户的输入来判断是否合法。

因为正则表达式也是用字符串表示的，所以，我们要首先了解如何用字符来描述字符。
在正则表达式中，如果直接给出字符，就是精确匹配。
用\d可以匹配一个数字，
用\w可以匹配一个字母或者数字

‘00\d’可以匹配’007’,但无法匹配’00A’;
‘\d\d\d’可以匹配’010’;
‘\w\w’可以匹配‘js’;
.可以匹配任意【字符，所以：
‘js.‘可以匹配’jsp’、‘jss’、‘js!‘等等。
要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用==+==表示至少一个字符，用？表示0个或者1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符：
例子：\d{3}\s+\d{3,8}.
我们来从左到右解读一下：
1.\d{3}表示匹配3个数字，例如：‘010’；
2.\s可以匹配一个空格(也包括Tab等空白符)，所以\s+表示至少有一个空格，例如匹配’ ‘,’\t\t’等；
3.\d{3.8}表示3-8个数字，例如’1234567’.
综合起来，上面的正则表达式可以匹配任意个空格隔开的带区号的电话号码。
如果要匹配’010-12345’这样的号码呢？由于’-‘是特殊字符，在正则表达式中，要用’‘转义，所以，正则表达式：\d{3}-\d{3,8}。
但是，仍然无法匹配’010 - 12345’，因为带有空格。所以我们需要更复杂的匹配方式。
进阶
要做到更精确的匹配，可以用[]表示范围，比如：

* [0-9a-zA-Z_]：可以匹配一个数字、字母或者线;
* [0-9a-zA-Z_]+：可以匹配至少一个数字、字母或者下划线组成的字符串，如'a100','0_z','js2020'等等；
* [a-zA-Z\_\$][0-9a-zA-Z\_\$]* 可以匹配由字母或下划线、$开头，后掊任意个由一个数字、字母或者下划线、$组成的字符串，也就是Javascript允许的变量名；
* [a-zA-Z\_\$][0-9a-zA-Z\_\$]{0,19}更精确地限制 了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。
A|B可以匹配A或者B，所以(J|j)ava(S|s)cript可以匹配'JavaScript'、'Javascript'、'javaScript'或者'javascript'。
^表示行的开头，^\d表示必须以数字开头。
表示行的结束，\d$表示必须以数字结束。
你可能注意到了，js也可以匹配'jsp',但是加上^js$就变成了整行匹配，就只能匹配'js'了。

RegExp

下面来学习正则表达式
JavaScript有两种方式创建一个正则表达式：
第一种方式：直接通过/正则表达式/写出来
第二种方式：通过new RegExp(‘正则表达式’)创建一个RegExp对象。

var re1 = /ABC\-001/;
//如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\
var re2 = new RegExp('ABC\\-001');

console.log(re1);///ABC\-001/
console.log(re2);///ABC\-001/

正则表达式的定义与测试匹配

//判断正则表达式是否匹配
var re3 = /^\d{3}\-\d{3,8}$/;

console.log(re3.test('010-12345'));//true
console.log(re3.test('010-1234x'));//false
console.log(re3.test('010 2345'));//false

RegExp对象的test()方法用于测试给定的字符串是否符合条件。

切分字符串

用正则表达式切分字符串比用固定的字符更灵活，

'a b   c'.split(' '); // ['a', 'b', '', '', 'c']

嗯，无法识别连续的空格，用正则表达式试试：

'a b   c'.split(/\s+/); // ['a', 'b', 'c']

无论多少个空格都可以正常分割。加入,试试：

'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

再加入;试试：

'a,b;; c  d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']

如果用户输入了一组标签，下次记得用正则表达式来把不规范的输入转化成正确的数组。

分组

除了简单地判断是否匹配之外，正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组(Group)，比如：

^(\d{3})-(\d{3,8})$分别定义了两个组，可以直接从匹配的字符串中提取出区号和本地号码：

var re = /^(\d{3})-(\d{3,8}$)/;
console.log(re.exec('010-12345'));//['010-12345','010','12345']
console.log(re.exec('010 12345'));//null

如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出来子串来。
exec()方法在匹配成功后，会返回一个Array,第一个元素是正则表达式匹配到整个字符串，后面的字符串表示匹配成功的。
exec()方法在匹配失败时返回null。
提取子串非常有用。来看一个例子：

var re2 = /^(0[0-9]|1[0-9]|2[0-3]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])$/;
// ['19:05:30', '19', '05', '30']
console.log(re2.exec('19:05:30'))

使用正则表达式无法完全识别日期

贪婪匹配

需要特别指出的是，正则匹配默认的是贪婪匹配，也就是匹配尽可能多的字符。例如，匹配出数字后面的0；

var re =/^(\d+)(0*)$/;//贪婪匹配
var re2 = /^(\d+?)(0*)$/;//加上?就是非贪婪匹配也就是尽可能少匹配

console.log(re.exec('102300'));
console.log(re2.exec('102300'));

在这里插入图片描述

全局搜索

JavaScript的正则表达式还有几个特殊的标志，最常用的是g,表示全局匹配：

var r1 = /test/g;
var r2 = new RegExp('test','g');

console.log(r1);// /test/g
console.log(r2);// /test/g

全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec(）,正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引：

 var s = 'JavaScript,VBScript,JScript and ECMAScript';
 var re = /[a-zA-z]+Script/g;

 //使用全局匹配
 console.log(re.exec(s));//JavaScript
 console.log(re.lastIndex);//10

 console.log(re.exec(s));//VBScript
 console.log(re.lastIndex);//19

 console.log(re.exec(s));//JScript
 console.log(re.lastIndex);//27

 console.log(re.exec(s));//ECMAScript
 console.log(re.lastIndex);//42

 console.log(re.exec(s));//null,直到结束仍没有匹配到值

全局匹配类似搜索，因此不能使用/^…$/,那样只会最多匹配一次。
正则表达式还可以指定i标志，表示忽略大小写，m标志，表示执行多选匹配。

JSON

JSON是JavaScript Object Natation的缩写，它是一种数据交换格式。
在JSON出现之前，大家用的都是以XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范后，任何正常的软件开发人员碰到XML都会感觉头大！
最后道格拉斯·克罗克福特发明了JSON这种轻量级的数据交换格式。
JSON中的几种数据类型：

number：和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：就是JavaScript的null；
array：就是JavaScript的Array表示方式——[]；
object：就是JavaScript的{ … }表示方式。
并且，JSON定死了字符集必须是UTF-8，表示多语言就没有问题了，为了统一解析，JOSN的字符串规定必须用双引号" “,Object的键也必须用双括号” "。
注意：JavaScript内置了JSON的解析。
发送方：把任何JavaScript对象变成JSON，就把这个对象序列化成一个JOSN格式的字符串，这样才能通过网络传递给其他计算机。
接收方：收到一个JSON格式的字符串-----》反序列化JavaScript对象，就可以在JavaScript中直接使用这个对象了。

序列化

让我们先把hk这个对象序列化成JSON格式的字符串：

var hk = {
    name:'hkk',
    age:18,
    gender:true,
    height:1.50,
    grade:null,
    skills:['java','js','python']
};
console.log(hk);
//将对象序列化JSON格式的字符串
var s = JSON.stringify(hk,null,'  ');
//用于控制如何筛选对象的键值
var s1 = JSON.stringify(hk,['name','skills'],'  ');

console.log(s);
console.log(s1);

还可以传入一个函数，这样对象的每个键值对都会被函数先处理：

function convert(key,value) {
    if(typeof value === 'string'){
        return value.toUpperCase();
    }
    return value;
}
var hk = {
    name:'hkk',
    age:18,
    gender:true,
    height:1.50,
    grade:null,
    skills:['java','js','python']
};
//将String类型的value转换为大写字母
var s2 = JSON.stringify(hk,convert,' ');

console.log(s2);

如果我们还想要精确控制如何序列化，可以给hk定义一个toJSON的方法，直接返回JSON序列化的数据：

var hkk = {
    name:'xhk',
    age:18,
    gender:true,
    height:150,
    grader:null,
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON:function () {
        return {
            'Name':this.name,
            'Age':this.age
        };
    }
};
console.log(JSON.stringify(hkk,null,' '));

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：

console.log(JSON.parse('[1,2,3,true]'));//[ 1, 2, 3, true ]
console.log(JSON.parse('{"name":"kk","age":14}'));//{ name: 'kk', age: 14 }
console.log(JSON.parse('true'));//true
console.log(JSON.parse('123.45'));//123.45

另外，JSON.parse()还可以接收一个函数，用来转换解析出的属性：

var obj = JSON.parse('{"name":"hk","age":18}',function (key,value) {
    if(key === 'name'){
        return  value +'同学';
    }
    return value;
});
console.log(JSON.stringify(obj));// {name: '小明同学', age: 14}

闪电蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（标准对象）

JavaScript学习笔记（标准对象）基础知识Date时区RegExpRegExp正则表达式的定义与测试匹配基础知识在JavaScript的世界里，一切都是对象。但是某些对象还是和其他对象不一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串：typeof 123;//'number'typeof NaN;//'number'typeof 'str';//'string'typeof true;/'boolean'typeof undefined;//'u
复制链接

扫一扫