JavaScript學(xué)習(xí)筆記第三天_對象

YPHP 發(fā)布于2019-08-22 10:50 / 1171人閱讀

摘要：廖雪峰的教程學(xué)習(xí)筆記標準對象使用判斷值的類型，可以看到是類型，是類型，就是類型，另外還有一個這種基礎(chǔ)類型。小明只輸出和，并且改變了反序列化，即從字符串中還原出一個對象，使用方法就是小明小明這個感覺蠻簡單的。

廖雪峰的JavaScript教程學(xué)習(xí)筆記 1. 標準對象

使用typeof判斷值的類型，可以看到NaN是number類型，null是obejct類型，undefined 就是undefined類型，另外還有一個function這種基礎(chǔ)類型。

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。這些類型也可以用來直接對對象進行轉(zhuǎn)換，就像是parseInt一樣。你可以使用Number來對String進行轉(zhuǎn)換，如：

var a = Number("123");

也可以使用

var b = new Number(123);

Caution：廖老師最好不要使用包裝對象，不然會有很多問題，尤其是string。

注意點

不要使用new Number()、new Boolean()、new String()創(chuàng)建包裝對象；

用parseInt()或parseFloat()來轉(zhuǎn)換任意類型到number；

用String()來轉(zhuǎn)換任意類型到string，或者直接調(diào)用某個對象的toString()方法；

通常不必把任意類型轉(zhuǎn)換為boolean再判斷，因為可以直接寫if (myVar) {...}；

typeof操作符可以判斷出number、boolean、string、function和undefined；

判斷Array要使用Array.isArray(arr)；

判斷null請使用myVar === null；

判斷某個全局變量是否存在用typeof window.myVar === "undefined"；

函數(shù)內(nèi)部判斷某個變量是否存在用typeof myVar === "undefined"。

其中并不是每個類型都支持直接調(diào)用某個對象的toString，比如number, null, undefined。
對function調(diào)用toString，會返回整個function的定義，如下：

var a = function(x){return 10};
a.toString();
> "function (x){return 10}"

生氣的javaScript還給number類型，添加了神奇的方式來使能toString()的直接調(diào)用,就像蝦米那這樣。

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, 毫秒數(shù)
now.getTime(); // 1435146562875, 以number形式表示的時間戳

注意月份范圍是0~11，5表示六月

有兩種創(chuàng)建日期的方式，var d = new Date(2015, 5, 19, 20, 15, 30, 123);其中123是毫秒。第二種是使用ISO 8601標準方式創(chuàng)建var d = Date.parse("2015-06-24T19:49:22.875+08:00");返回時間戳，然后可以通過new Date(d);進行轉(zhuǎn)換。

Date.now()可以直接返回時間戳。

3. RegExp正則表達式

用d可以匹配一個數(shù)字，w可以匹配一個字母或數(shù)字。
.可以匹配任意字符
用*表示任意個字符（包括0個），用+表示至少一個字符，用?表示0個或1個字符，用{n}表示n個字符，用{n,m}表示n-m個字符
[]表示范圍，即匹配對象在[]范圍中。如常見的[0-9a-zA-Z_]
^表示行的開頭，^d表示必須以數(shù)字開頭。
$表示行的結(jié)束，d$表示必須以數(shù)字結(jié)束。

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數(shù)組，第一個為整個字串，然后是匹配的字串，如果提取失敗返回null。

var re = /^(d{3})-(d{3,8})$/;
re.exec("010-12345"); // ["010-12345", "010", "12345"]

特性是：貪婪匹配，匹配盡可能多的字串，如下，第一個為整個字串，第二個是匹配d+, 第三個空串為匹配0*，因為字串已經(jīng)被d+匹配了，因此后者沒得匹配了。所以在寫匹配表達式是要盡可能降低匹配的長度。

var re = /^(d+)(0*)$/;
re.exec("102300"); // ["102300", "102300", ""]

全局匹配，類似搜索，需要加入標志位。/regexp/g 或者是new RegExp("regexp", g);
正則表達式還可以指定i標志，表示忽略大小寫，m標志，表示執(zhí)行多行匹配。如

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包含以下幾種數(shù)據(jù)類型，字符集必須是UTF-8，JSON的字符串規(guī)定必須用雙引號""，Object的鍵也必須用雙引號""。

number：和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：就是JavaScript的null；
array：就是JavaScript的Array表示方式——[]；
object：就是JavaScript的{ ... }表示方式。

JavaScript內(nèi)置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);
// 或者使用帶縮進的顯示，最后一個參數(shù)是四空格的字串，也可以使用-等其他縮進的符號
// 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是個可選參數(shù)，它可填入以下值：

如果該參數(shù)是一個函數(shù)，則在序列化過程中，被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理；

如果該參數(shù)是一個數(shù)組，則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中；

如果該參數(shù)為null或者未提供，則對象所有的屬性都會被序列化；

所以你也可以填入一個函數(shù)或者數(shù)組，進行轉(zhuǎn)換或者過濾。
如需精確控制序列化，可以在對象中自定義一個toJSON函數(shù)，那么JSON.stringify(xiaoming)時會自動調(diào)用toJSON方法，沒看過源碼還不清楚怎么實現(xiàn)的，感覺應(yīng)該是看這個對象是否有hasOwnProperty(toJSON)吧，然后再判斷返回的是不是一個函數(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字符串中還原出一個對象，使用方法就是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])

如果是一個函數(shù)，在被返回之前，規(guī)定了原始值如何被解析改造。
看看MDN的對于這個函數(shù)的解釋吧，略長，我把重點加粗一下。
如果指定了 reviver 函數(shù)，則解析出的 JavaScript 值（解析值）會經(jīng)過一次轉(zhuǎn)換后才將被最終返回（返回值）。更具體點講就是：解析值本身以及它所包含的所有屬性，會按照一定的順序（從最最里層的屬性開始，一級級往外，最終到達頂層，也就是解析值本身）分別的去調(diào)用 reviver 函數(shù)，在調(diào)用過程中，當前屬性所屬的對象會作為 this 值，當前屬性名和屬性值會分別作為第一個和第二個參數(shù)傳入 reviver 中。如果 reviver 返回 undefined，則當前屬性會從所屬對象中刪除，如果返回了其他值，則返回的值會成為當前屬性新的屬性值。

當遍歷到最頂層的值（解析值）時，傳入 reviver 函數(shù)的參數(shù)會是空字符串 ""（因為此時已經(jīng)沒有真正的屬性）和當前的解析值（有可能已經(jīng)被修改過了），當前的 this 值會是 {"": 修改過的解析值}，在編寫 reviver 函數(shù)時，要注意到這個特例。

按照以上解釋，我們可以嘗試返回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": "
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"
               }
            }
         }
      }
   }
}"