JavaScript学习笔记第三天_对象

时间 2019-12-05

标签 javascript 学习笔记第三天对象栏目 JavaScript 繁體版

原文原文链接

廖雪峰的JavaScript教程学习笔记

1. 标准对象

使用typeof判断值的类型，能够看到NaN是number类型，null是obejct类型，undefined 就是undefined类型，另外还有一个function这种基础类型。javascript

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进行转换，如：java

var a = Number('123');

也可使用正则表达式

var b = new Number(123);

Caution：廖老师最好不要使用包装对象，否则会有不少问题，尤为是string。api

注意点数组

不要使用new Number()、new Boolean()、new String()建立包装对象；ide
用parseInt()或parseFloat()来转换任意类型到number；函数
用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；学习
一般没必要把任意类型转换为boolean再判断，由于能够直接写if (myVar) {...}；测试
typeof操做符能够判断出number、boolean、string、function和undefined；ui
判断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"
               }
            }
         }
      }
   }
}"