JavaScript 基础 3-4

3.标准对象

    3.1.概念

        typeof操作符获取对象的类型

            typeof 123; // 'number'
            typeof NaN; // 'number'
            typeof 'str'; // 'string'

        不要使用new Number()、new Boolean()、new String()

        用parseInt()或parseFloat()来转换任意类型到number;

        用String()来转换任意类型到string,或者直接调用某个对象的toString()方法;

        判断Array要使用Array.isArray(arr);

        判断null请使用myVar === null;

        判断某个全局变量是否存在用typeof window.myVar === 'undefined';

        函数内部判断某个变量是否存在用typeof myVar === 'undefined'。

        number对象调用toString()报SyntaxError:

            123.toString(); // SyntaxError
            123..toString(); // '123', 注意是两个点!
            (123).toString(); // '123'

    3.2.Date

        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,     
                    Date.now()    //获取时间戳
                以number形式表示的时间戳

            创建一个指定日期和时间的Date对象

                var d = new Date(2015, 5, 19, 20, 15, 30, 123);

                    JavaScript的月份范围用整数表示是0~11,0表示一月,1表示二月

                var d = Date.parse('2015-06-24T19:49:22.875+08:00');

                    返回的不是Date对象,而是一个时间戳

                时间戳转换为一个Date

                    var d = new Date(1435146562875);
                    d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)

    3.3.RegExp

        创建一个正则表达式

            var re1 = /ABC\-001/;    // 直接通过/正则表达式/写出来
            var re2 = new RegExp('ABC\\-001');

        匹配字符串

            re1.test('010-1234x'); // false

        切分字符串

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

        分组

            ()表示的就是要提取的分组(Group)

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

        贪婪匹配

            正则匹配默认是贪婪匹配

            必须让\d+采用非贪婪匹配(也就是尽可能少匹配),才能把后面的0匹配出来,

            加个?就可以让\d+采用非贪婪匹配:

        全局搜索

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

                var r1 = /test/g;
                // 等价于:
                var r2 = new RegExp('test', 'g');

            全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后,每次运行exec(),正则表达式本身会var s = 'JavaScript, VBScript, JScript and ECMAScript';

                var re=/[a-zA-Z]+Script/g;
                // 使用全局匹配:
                re.exec(s); // ['JavaScript']
                re.lastIndex; // 10
                re.exec(s); // ['VBScript']
                re.lastIndex; // 20
                re.exec(s); // ['JScript']
                re.lastIndex; // 29
                re.exec(s); // ['ECMAScript']
                re.lastIndex; // 44
                re.exec(s); // null,直到结束仍没有匹配到

            i标志,表示忽略大小写,

            m标志,表示执行多行匹配。

    3.4.JSON

        概念

            JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。

            数据类型

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

            JSON还定死了字符集必须是UTF-8

            JSON的字符串规定必须用双引号""

            Object的键也必须用双引号""

        序列化

            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); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'


            要输出得好看一些,可以加上参数,按缩进输出:

                JSON.stringify(xiaoming, null, '  ');

            第二个参数用于控制如何筛选对象的键值

            如果我们只想输出指定的属性,可以传入Array:

                JSON.stringify(xiaoming, ['name', 'skills'], '  ');

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

            精确控制如何序列化

                定义一个toJSON()的方法,直接返回JSON应该序列化的数据:

                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.stringify(xiaoming); // '{"Name":"小明","Age":14}'

        反序列化

            JSON.parse()

                JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]

            可以接收一个函数,用来转换解析出的属性:

            JSON.parse('{"name":"小明","age":14}', function (key, value) {
                // 把number * 2:
                if (key === 'name') {
                    return value + '同学';
                }
                return value;
            }); // Object {name: '小明同学', age: 14}


4.面向对象编程

    4.1.概念

        面向对象的两个基本概念:

            类:类是对象的类型模板,

            实例:实例是根据类创建的对象

        Object.create()方法可以传入一个原型对象,并创建一个基于该原型的新对象,

            // 原型对象:
            var Student = {
                name: 'Robot',
                height: 1.2,
                run: function () {
                    console.log(this.name + ' is running...');
                }
            };
            function createStudent(name) {
                // 基于Student原型创建一个新对象:
                var s = Object.create(Student);
                // 初始化新对象:
                s.name = name;
                return s;
            }
            var xiaoming = createStudent('小明');
            xiaoming.run(); // 小明 is running...
            xiaoming.__proto__ === Student; // true

    4.2.创建对象

        概念

            JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。

            当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。

            ex

                创建一个Array对象:

                    var arr = [1, 2, 3];

                其原型链是:

                    arr ----> Array.prototype ----> Object.prototype ----> null

                Array.prototype定义了indexOf()、shift()等方法,因此你可以在所有的Array对象上直接调用这些方法。

                函数也是一个对象,它的原型链是:

                    foo ----> Function.prototype ----> Object.prototype ----> null

        构造函数

            定义一个构造函数

                function Student(name) {
                    this.name = name;
                    this.hello = function () {
                        alert('Hello, ' + this.name + '!');
                    }
                }

            用关键字new来调用这个函数,并返回一个对象

                var xiaoming = new Student('小明');
                xiaoming.name; // '小明'
                xiaoming.hello(); // Hello, 小明!

            注意:如果不写new,这就是一个普通函数,它返回undefined。但是,如果写了new,它就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;。

            原型链是:

                xiaoming ↘
                xiaohong -→ Student.prototype ----> Object.prototype ----> null
                xiaojun  ↗

            注意:为了区分普通函数和构造函数,按照约定,构造函数首字母应当大写,而普通函数首字母应当小写,这样,一些语法检查工具如jslint将可以帮你检测到漏写的new。

            可以编写一个createStudent()函数,在内部封装所有的new操作。

                //构造函数

                function Student(props) {
                    this.name = props.name || '匿名'; // 默认值为'匿名'
                    this.grade = props.grade || 1; // 默认值为1
                }

                //共享方法

                Student.prototype.hello = function () {
                    alert('Hello, ' + this.name + '!');
                };

                //封装 new操作

                function createStudent(props) {
                    return new Student(props || {})
                }

    4.3.原型继承

        在大部分情况下,可以使用

            Child.prototype = new Parent();

    4.4.class继承

        ES6开始引入calss

        ex:

            class Student {
                //构造函数
                constructor(name) {
                    this.name = name;
                }
                //方法
                hello() {
                    alert('Hello, ' + this.name + '!');
                }
            }
            var xiaoming = new Student('小明');
            xiaoming.hello();
        class继承
            class PrimaryStudent extends Student {
                constructor(name, grade) {
                    super(name); // 记得用super调用父类的构造方法!
                    this.grade = grade;
                }
                myGrade() {
                    alert('I am at grade ' + this.grade);
                }
            }


转载于:https://my.oschina.net/sii/blog/654596

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值