資訊專(zhuān)欄INFORMATION COLUMN
摘要：廖雪峰的教程學(xué)習(xí)筆記標(biāo)準(zhǔn)對(duì)象使用判斷值的類(lèi)型，可以看到是類(lèi)型，是類(lèi)型，就是類(lèi)型，另外還有一個(gè)這種基礎(chǔ)類(lèi)型。小明只輸出和，并且改變了反序列化，即從字符串中還原出一個(gè)對(duì)象，使用方法就是小明小明這個(gè)感覺(jué)蠻簡(jiǎn)單的。
廖雪峰的JavaScript教程學(xué)習(xí)筆記 1. 標(biāo)準(zhǔn)對(duì)象
使用typeof判斷值的類(lèi)型，可以看到NaN是number類(lèi)型，null是obejct類(lèi)型，undefined 就是undefined類(lèi)型，另外還有一個(gè)function這種基礎(chǔ)類(lèi)型。
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也有包裝類(lèi)型，如Number，String，Boolean。但沒(méi)有Integer，因?yàn)閖avascript沒(méi)有int類(lèi)型，所以也沒(méi)有Integer。這些類(lèi)型也可以用來(lái)直接對(duì)對(duì)象進(jìn)行轉(zhuǎn)換，就像是parseInt一樣。你可以使用Number來(lái)對(duì)String進(jìn)行轉(zhuǎn)換，如：
var a = Number("123");
也可以使用
var b = new Number(123);
Caution：廖老師最好不要使用包裝對(duì)象，不然會(huì)有很多問(wèn)題，尤其是string。
注意點(diǎn)
不要使用new Number()、new Boolean()、new String()創(chuàng)建包裝對(duì)象；
用parseInt()或parseFloat()來(lái)轉(zhuǎn)換任意類(lèi)型到number；
用String()來(lái)轉(zhuǎn)換任意類(lèi)型到string，或者直接調(diào)用某個(gè)對(duì)象的toString()方法；
通常不必把任意類(lèi)型轉(zhuǎn)換為boolean再判斷，因?yàn)榭梢灾苯訉?xiě)if (myVar) {...}；
typeof操作符可以判斷出number、boolean、string、function和undefined；
判斷Array要使用Array.isArray(arr)；
判斷null請(qǐng)使用myVar === null；
判斷某個(gè)全局變量是否存在用typeof window.myVar === "undefined"；
函數(shù)內(nèi)部判斷某個(gè)變量是否存在用typeof myVar === "undefined"。
其中并不是每個(gè)類(lèi)型都支持直接調(diào)用某個(gè)對(duì)象的toString，比如number, null, undefined。
對(duì)function調(diào)用toString，會(huì)返回整個(gè)function的定義，如下：
var a = function(x){return 10};
a.toString();
> "function (x){return 10}"
生氣的javaScript還給number類(lèi)型，添加了神奇的方式來(lái)使能toString()的直接調(diào)用,就像蝦米那這樣。
123..toString(); // "123", 注意是兩個(gè)點(diǎn)！ (123).toString(); // "123"
我也是醉了呀。
2. Date這個(gè)看起來(lái)沒(méi)什么好說(shuō)的額，就是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號(hào) now.getDay(); // 3, 表示星期三 now.getHours(); // 19, 24小時(shí)制 now.getMinutes(); // 49, 分鐘 now.getSeconds(); // 22, 秒 now.getMilliseconds(); // 875, 毫秒數(shù) now.getTime(); // 1435146562875, 以number形式表示的時(shí)間戳
注意月份范圍是0~11，5表示六月
有兩種創(chuàng)建日期的方式，var d = new Date(2015, 5, 19, 20, 15, 30, 123);其中123是毫秒。第二種是使用ISO 8601標(biāo)準(zhǔn)方式創(chuàng)建var d = Date.parse("2015-06-24T19:49:22.875+08:00");返回時(shí)間戳，然后可以通過(guò)new Date(d);進(jìn)行轉(zhuǎn)換。
Date.now()可以直接返回時(shí)間戳。
3. RegExp正則表達(dá)式用d可以匹配一個(gè)數(shù)字，w可以匹配一個(gè)字母或數(shù)字。
.可以匹配任意字符
用*表示任意個(gè)字符（包括0個(gè)），用+表示至少一個(gè)字符，用?表示0個(gè)或1個(gè)字符，用{n}表示n個(gè)字符，用{n,m}表示n-m個(gè)字符
[]表示范圍，即匹配對(duì)象在[]范圍中。如常見(jiàn)的[0-9a-zA-Z_]
^表示行的開(kāi)頭，^d表示必須以數(shù)字開(kāi)頭。
$表示行的結(jié)束，d$表示必須以數(shù)字結(jié)束。
JavaScript中，使用/正則表達(dá)式/或者是new RegExp("正則表達(dá)式")。然后使用test("str")方法進(jìn)行測(cè)試判斷，返回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"]
用()進(jìn)行提取字串，他會(huì)將()里的正則表達(dá)式匹配的字串進(jìn)行分組，使用exec()方法，返回Array數(shù)組，第一個(gè)為整個(gè)字串，然后是匹配的字串，如果提取失敗返回null。
var re = /^(d{3})-(d{3,8})$/;
re.exec("010-12345"); // ["010-12345", "010", "12345"]
特性是：貪婪匹配，匹配盡可能多的字串，如下，第一個(gè)為整個(gè)字串，第二個(gè)是匹配d+, 第三個(gè)空串為匹配0*，因?yàn)樽执呀?jīng)被d+匹配了，因此后者沒(méi)得匹配了。所以在寫(xiě)匹配表達(dá)式是要盡可能降低匹配的長(zhǎng)度。
var re = /^(d+)(0*)$/;
re.exec("102300"); // ["102300", "102300", ""]
全局匹配，類(lèi)似搜索，需要加入標(biāo)志位。/regexp/g 或者是new RegExp("regexp", g);
正則表達(dá)式還可以指定i標(biāo)志，表示忽略大小寫(xiě)，m標(biāo)志，表示執(zhí)行多行匹配。如
var s = "JavaScript, VBScript, Fuckscript,JScript and ECMAScript"; var re = /[a-zA-z]+script/gi;
忽略大小寫(xiě)匹配帶有Script的全字母字串。
最后匹配郵箱var re = /^[a-zA-Z0-9.#-]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+$/;
4. JSONJSON包含以下幾種數(shù)據(jù)類(lèi)型，字符集必須是UTF-8，JSON的字符串規(guī)定必須用雙引號(hào)""，Object的鍵也必須用雙引號(hào)""。
number：和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：就是JavaScript的null；
array：就是JavaScript的Array表示方式——[]；
object：就是JavaScript的{ ... }表示方式。
JavaScript內(nèi)置JSON解析引擎，可直接將對(duì)象序列化為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);
// 或者使用帶縮進(jìn)的顯示，最后一個(gè)參數(shù)是四空格的字串，也可以使用-等其他縮進(jìn)的符號(hào)
// 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是個(gè)可選參數(shù)，它可填入以下值：
如果該參數(shù)是一個(gè)函數(shù)，則在序列化過(guò)程中，被序列化的值的每個(gè)屬性都會(huì)經(jīng)過(guò)該函數(shù)的轉(zhuǎn)換和處理；
如果該參數(shù)是一個(gè)數(shù)組，則只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化到最終的 JSON 字符串中；
如果該參數(shù)為null或者未提供，則對(duì)象所有的屬性都會(huì)被序列化；
所以你也可以填入一個(gè)函數(shù)或者數(shù)組，進(jìn)行轉(zhuǎn)換或者過(guò)濾。
如需精確控制序列化，可以在對(duì)象中自定義一個(gè)toJSON函數(shù)，那么JSON.stringify(xiaoming)時(shí)會(huì)自動(dòng)調(diào)用toJSON方法，沒(méi)看過(guò)源碼還不清楚怎么實(shí)現(xiàn)的，感覺(jué)應(yīng)該是看這個(gè)對(duì)象是否有hasOwnProperty(toJSON)吧，然后再判斷返回的是不是一個(gè)函數(shù)，若是就調(diào)用該函數(shù)。并將結(jié)果返回。
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字符串中還原出一個(gè)對(duì)象，使用方法就是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
這個(gè)感覺(jué)蠻簡(jiǎn)單的。
語(yǔ)法：
JSON.parse(text[, reviver])
如果是一個(gè)函數(shù)，在被返回之前，規(guī)定了原始值如何被解析改造。
看看MDN的對(duì)于這個(gè)函數(shù)的解釋吧，略長(zhǎng)，我把重點(diǎn)加粗一下。
如果指定了 reviver 函數(shù)，則解析出的 JavaScript 值（解析值）會(huì)經(jīng)過(guò)一次轉(zhuǎn)換后才將被最終返回（返回值）。更具體點(diǎn)講就是：解析值本身以及它所包含的所有屬性，會(huì)按照一定的順序（從最最里層的屬性開(kāi)始，一級(jí)級(jí)往外，最終到達(dá)頂層，也就是解析值本身）分別的去調(diào)用 reviver 函數(shù)，在調(diào)用過(guò)程中，當(dāng)前屬性所屬的對(duì)象會(huì)作為 this 值，當(dāng)前屬性名和屬性值會(huì)分別作為第一個(gè)和第二個(gè)參數(shù)傳入 reviver 中。如果 reviver 返回 undefined，則當(dāng)前屬性會(huì)從所屬對(duì)象中刪除，如果返回了其他值，則返回的值會(huì)成為當(dāng)前屬性新的屬性值。
當(dāng)遍歷到最頂層的值（解析值）時(shí)，傳入 reviver 函數(shù)的參數(shù)會(huì)是空字符串 ""（因?yàn)榇藭r(shí)已經(jīng)沒(méi)有真正的屬性）和當(dāng)前的解析值（有可能已經(jīng)被修改過(guò)了），當(dāng)前的 this 值會(huì)是 {"": 修改過(guò)的解析值}，在編寫(xiě) reviver 函數(shù)時(shí)，要注意到這個(gè)特例。
按照以上解釋?zhuān)覀兛梢試L試返回undefined，然后刪除某個(gè)屬性。
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": "
Current Conditions:
Clear
Forecast:
Wed - Sunny. High: 36Low: 21
Thu - Sunny. High: 42Low: 21
Fri - Partly Cloudy. High: 40Low: 21
Sat - Partly Cloudy. High: 44Low: 21
Sun - Mostly Sunny. High: 44Low: 24
Full Forecast at Yahoo! Weather
(provided by The Weather Channel)
]]>",
"guid": {
"isPermaLink": "false"
}
}
}
}
}
}"
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91346.html
摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識(shí)點(diǎn)羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個(gè)前端框架。也可以關(guān)注微信公眾號(hào)曉舟報(bào)告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤(pán)地址在最下方，獲取教程和案例的資料。 前言 好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進(jìn)方向。這篇文章不僅要寫(xiě)學(xué)習(xí)路徑，還要寫(xiě)學(xué)習(xí)方法，還要發(fā)資料，干貨滿(mǎn)滿(mǎn)，準(zhǔn)備接招。 網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知...
摘要：循環(huán)語(yǔ)句循環(huán)語(yǔ)句是什么循環(huán)語(yǔ)句是一系列反復(fù)執(zhí)行到符合特定條件的語(yǔ)句。示例代碼如下跳轉(zhuǎn)語(yǔ)句什么是跳轉(zhuǎn)語(yǔ)句跳轉(zhuǎn)語(yǔ)句就是使得代碼的執(zhí)行可以從一個(gè)位置到另一個(gè)位置，跳轉(zhuǎn)語(yǔ)句包括和兩種。 語(yǔ)句 語(yǔ)句 語(yǔ)句的概述 1.描述：在JavaScript中，語(yǔ)句使用分號(hào)（;）進(jìn)行分隔。可以在每行編寫(xiě)一條語(yǔ)句，也可以在每行編寫(xiě)多 條語(yǔ)句（建議每行只編寫(xiě)一條語(yǔ)句）。JavaScript解釋器按照語(yǔ)句...
摘要：前端日?qǐng)?bào)精選淺談前端和移動(dòng)端的事件機(jī)制字符串轉(zhuǎn)數(shù)字陷阱前端魔法堂調(diào)用棧，異常實(shí)例中的寶藏一份完美的前端清單專(zhuān)為現(xiàn)代網(wǎng)站和極致的開(kāi)發(fā)者打造居中辦法學(xué)習(xí)筆記中文開(kāi)發(fā)如何在里面優(yōu)雅的解決跨域，路由沖突問(wèn)題超詳細(xì)前端學(xué)習(xí)譯響應(yīng)式腦電波如何使 2017-10-26 前端日?qǐng)?bào) 精選 淺談前端和移動(dòng)端的事件機(jī)制JavaScript 字符串轉(zhuǎn)數(shù)字：陷阱前端魔法堂——調(diào)用棧，異常實(shí)例中的寶藏一份完美的前...
摘要：今天遇到了什么問(wèn)題在想填代碼的時(shí)候挺尷尬的，需求會(huì)翻譯但是代碼本身沒(méi)辦法翻譯的，有點(diǎn)難對(duì)應(yīng)上。今天學(xué)了什么相關(guān)知識(shí)，又是看為主的一天。因?yàn)樵谏锨眠^(guò)一點(diǎn)，所以看得比較快，權(quán)當(dāng)復(fù)習(xí)。引一個(gè)筆記第三天 2019.3.8 用時(shí)：兩小時(shí)。 今天遇到了什么問(wèn)題？ 在MDN想填代碼的時(shí)候挺尷尬的，需求會(huì)翻譯但是代碼本身沒(méi)辦法翻譯的，有點(diǎn)難對(duì)應(yīng)上。 今天學(xué)了什么？ CSS相關(guān)知識(shí)，又是看為主的一天。因...
摘要：今天遇到了什么問(wèn)題在想填代碼的時(shí)候挺尷尬的，需求會(huì)翻譯但是代碼本身沒(méi)辦法翻譯的，有點(diǎn)難對(duì)應(yīng)上。今天學(xué)了什么相關(guān)知識(shí)，又是看為主的一天。因?yàn)樵谏锨眠^(guò)一點(diǎn)，所以看得比較快，權(quán)當(dāng)復(fù)習(xí)。引一個(gè)筆記第三天 2019.3.8 用時(shí)：兩小時(shí)。 今天遇到了什么問(wèn)題？ 在MDN想填代碼的時(shí)候挺尷尬的，需求會(huì)翻譯但是代碼本身沒(méi)辦法翻譯的，有點(diǎn)難對(duì)應(yīng)上。 今天學(xué)了什么？ CSS相關(guān)知識(shí)，又是看為主的一天。因...
閱讀 2770·2021-11-23 09:51
閱讀 3529·2021-10-08 10:17
閱讀 1262·2021-10-08 10:05
閱讀 1310·2021-09-28 09:36
閱讀 1833·2021-09-13 10:30
閱讀 2174·2021-08-17 10:12
閱讀 1670·2019-08-30 15:54
閱讀 2004·2019-08-30 15:53
