廖雪峰的JavaScript教程进修笔记
1. 规范对象
运用typeof推断值的范例,能够看到NaN是number范例,null是obejct范例,undefined 就是undefined范例,别的另有一个function这类基本范例。
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'
JavaScript也有包装范例,如Number,String,Boolean。但没有Integer,由于javascript没有int范例,所以也没有Integer。这些范例也能够用来直接对对象举行转换,就像是parseInt一样。你能够运用Number来对String举行转换,如:
var a = Number('123');
也能够运用
var b = new Number(123);
Caution:廖先生最好不要运用包装对象,不然会有许多题目,尤其是string。
注重点
不要运用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'
。
个中并非每一个范例都支撑直接挪用某个对象的toString,比方number, null, undefined。
对function挪用toString,会返回全部function的定义,以下:
var a = function(x){return 10};
a.toString();
> "function (x){return 10}"
生机的javaScript还给number范例,添加了奇异的体式格局来使能toString()的直接挪用,就像虾米那如许。
123..toString(); // '123', 注重是两个点!
(123).toString(); // '123'
我也是醉了呀。
2. Date
这个看起来没什么好说的额,就是Date的一些API。
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情势示意的时候戳
注重月份局限是0~11,5示意六月
有两种建立日期的体式格局,var d = new Date(2015, 5, 19, 20, 15, 30, 123);
个中123是毫秒。第二种是运用ISO 8601规范体式格局建立var d = Date.parse('2015-06-24T19:49:22.875+08:00');
返回时候戳,然后能够经由过程new Date(d);举行转换。
Date.now()能够直接返回时候戳。
3. RegExp正则表达式
用\d能够婚配一个数字,\w能够婚配一个字母或数字。
.能够婚配恣意字符
用*示意恣意个字符(包括0个),用+示意最少一个字符,用?示意0个或1个字符,用{n}示意n个字符,用{n,m}示意n-m个字符
[]示意局限,即婚配对象在[]局限中。如常见的[0-9a-zA-Z_]
^示意行的开首,^d示意必需以数字开首。
$示意行的完毕,d$示意必需以数字完毕。
JavaScript中,运用/正则表达式/
或许是new RegExp('正则表达式')
。然后运用test(‘str’)要领举行测试推断,返回true/false。
var re = /^\d{3}\-\d{3,8}$/;
var re1 = new RegExp('^\d{3}\-\d{3,8}$}');
re.test('010-2345');
> true
切分字串'a,b;; c d'.split(/[s,;]+/); // ['a', 'b', 'c', 'd']
用()举行提取字串,他会将()里的正则表达式婚配的字串举行分组,运用exec()要领,返回Array数组,第一个为全部字串,然后是婚配的字串,假如提取失利返回null。
var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
特征是:贪欲婚配,婚配尽量多的字串,以下,第一个为全部字串,第二个是婚配\d+, 第三个空串为婚配0*,由于字串已被\d+婚配了,因而后者没得婚配了。所以在写婚配表达式是要尽量下降婚配的长度。
var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']
全局婚配,相似搜刮,须要到场标志位。/regexp/g 或许是new RegExp(‘regexp’, g);
正则表达式还能够指定i标志,示意疏忽大小写,m标志,示意实行多行婚配。如
var s = 'JavaScript, VBScript, Fuckscript,JScript and ECMAScript';
var re = /[a-zA-z]+script/gi;
疏忽大小写婚配带有Script的全字母字串。
末了婚配邮箱var re = /^[a-zA-Z0-9.#-]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+$/;
4. JSON
JSON包括以下几种数据范例,字符集必需是UTF-8,JSON的字符串划定必需用双引号””,Object的键也必需用双引号””。
number:和JavaScript的number完全一致;
boolean:就是JavaScript的true或false;
string:就是JavaScript的string;
null:就是JavaScript的null;
array:就是JavaScript的Array示意体式格局——[];
object:就是JavaScript的{ ... }示意体式格局。
JavaScript内置JSON剖析引擎,可直接将对象序列化为JSON字串序列。
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
JSON.stringify(xiaoming);
// 或许运用带缩进的显现,末了一个参数是四空格的字串,也能够运用-等其他缩进的标记
// JSON.stringify(xiaoming, null, ' ');
// 输出以下
{
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}
定义
JSON.stringify(value[, replacer [, space]])
个中replacer是个可选参数,它可填入以下值:
假如该参数是一个函数,则在序列化过程当中,被序列化的值的每一个属性都邑经由该函数的转换和处置惩罚;
假如该参数是一个数组,则只要包括在这个数组中的属性名才会被序列化到终究的 JSON 字符串中;
假如该参数为null或许未供应,则对象一切的属性都邑被序列化;
所以你也能够填入一个函数或许数组,举行转换或许过滤。
如需准确掌握序列化,能够在对象中自定义一个toJSON函数,那末JSON.stringify(xiaoming)时会自动挪用toJSON要领,没看过源码还不清晰怎样完成的,觉得应该是看这个对象是不是有hasOwnProperty(toJSON)吧,然后再推断返回的是不是是一个函数,如果就挪用该函数。并将效果返回。
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
toJSON: function () {
return { // 只输出name和age,而且改变了key:
'Name': this.name,
'Age': this.age
};
}
};
反序列化,即从JSON字符串中复原出一个对象,运用要领就是JSON.parse();
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45
这个觉得蛮简朴的。
语法:
JSON.parse(text[, reviver])
假如是一个函数,在被返回之前,划定了原始值怎样被剖析革新。
看看MDN的关于这个函数的诠释吧,略长,我把重点加粗一下。
假如指定了 reviver 函数,则剖析出的 JavaScript 值(剖析值)会经由一次转换后才将被终究返回(返回值)。更详细点讲就是:剖析值自身以及它所包括的一切属性,会根据肯定的递次(从最最里层的属性最先,一级级往外,终究抵达顶层,也就是剖析值自身)离别的去挪用 reviver 函数,在挪用过程当中,当前属性所属的对象会作为 this 值,当前属性名和属性值会离别作为第一个和第二个参数传入 reviver 中。假如 reviver 返回 undefined,则当前属性会从所属对象中删除,假如返回了其他值,则返回的值会成为当前属性新的属性值。
当遍历到最顶层的值(剖析值)时,传入 reviver 函数的参数会是空字符串 “”(由于此时已没有真正的属性)和当前的剖析值(有能够已被修正过了),当前的 this 值会是 {“”: 修正过的剖析值},在编写 reviver 函数时,要注重到这个惯例。
根据以上诠释,我们能够尝试返回undefined,然后删除某个属性。
JSON.parse('{"name":"xiaoming","age":14, "height":180}', function(k,v){
if(typeof v === 'string'){
return undefined;
}
return v;
});
// 输出,删除了name属性及其值。
> Object {age: 14, height: 180}
美化一下yahoo 天色返回的JSON。
大概是如许子的:
JSON.stringify(weather, null, ' ');
// 输出
"{
"query": {
"count": 1,
"created": "2016-12-14T12:40:29Z",
"lang": "zh-CN",
"results": {
"channel": {
"units": {
"distance": "mi",
"pressure": "in",
"speed": "mph",
"temperature": "F"
},
"title": "Yahoo! Weather - Beijing, Beijing, CN",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2151330/",
"description": "Yahoo! Weather for Beijing, Beijing, CN",
"language": "en-us",
"lastBuildDate": "Wed, 14 Dec 2016 08:40 PM CST",
"ttl": "60",
"location": {
"city": "Beijing",
"country": "China",
"region": " Beijing"
},
"wind": {
"chill": "28",
"direction": "215",
"speed": "11"
},
"atmosphere": {
"humidity": "33",
"pressure": "1025.0",
"rising": "0",
"visibility": "16.1"
},
"astronomy": {
"sunrise": "7:29 am",
"sunset": "4:50 pm"
},
"image": {
"title": "Yahoo! Weather",
"width": "142",
"height": "18",
"link": "http://weather.yahoo.com",
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"title": "Conditions for Beijing, Beijing, CN at 07:00 PM CST",
"lat": "39.90601",
"long": "116.387909",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2151330/",
"pubDate": "Wed, 14 Dec 2016 07:00 PM CST",
"condition": {
"code": "31",
"date": "Wed, 14 Dec 2016 07:00 PM CST",
"temp": "34",
"text": "Clear"
},
"forecast": [
{
"code": "32",
"date": "14 Dec 2016",
"day": "Wed",
"high": "36",
"low": "21",
"text": "Sunny"
},
{
"code": "32",
"date": "15 Dec 2016",
"day": "Thu",
"high": "42",
"low": "21",
"text": "Sunny"
},
{
"code": "30",
"date": "16 Dec 2016",
"day": "Fri",
"high": "40",
"low": "21",
"text": "Partly Cloudy"
},
{
"code": "30",
"date": "17 Dec 2016",
"day": "Sat",
"high": "44",
"low": "21",
"text": "Partly Cloudy"
},
{
"code": "34",
"date": "18 Dec 2016",
"day": "Sun",
"high": "44",
"low": "24",
"text": "Mostly Sunny"
},
{
"code": "32",
"date": "19 Dec 2016",
"day": "Mon",
"high": "46",
"low": "25",
"text": "Sunny"
},
{
"code": "30",
"date": "20 Dec 2016",
"day": "Tue",
"high": "47",
"low": "29",
"text": "Partly Cloudy"
},
{
"code": "30",
"date": "21 Dec 2016",
"day": "Wed",
"high": "45",
"low": "29",
"text": "Partly Cloudy"
},
{
"code": "30",
"date": "22 Dec 2016",
"day": "Thu",
"high": "41",
"low": "28",
"text": "Partly Cloudy"
},
{
"code": "30",
"date": "23 Dec 2016",
"day": "Fri",
"high": "38",
"low": "24",
"text": "Partly Cloudy"
}
],
"description": "<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/31.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Clear\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Wed - Sunny. High: 36Low: 21\n<BR /> Thu - Sunny. High: 42Low: 21\n<BR /> Fri - Partly Cloudy. High: 40Low: 21\n<BR /> Sat - Partly Cloudy. High: 44Low: 21\n<BR /> Sun - Mostly Sunny. High: 44Low: 24\n<BR />\n<BR />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2151330/\">Full Forecast at Yahoo! Weather</a>\n<BR />\n<BR />\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)\n<BR />\n]]>",
"guid": {
"isPermaLink": "false"
}
}
}
}
}
}"