No.25 JavaScript对象

作者: testleaf | 来源:发表于2020-01-06 19:47 被阅读0次

    在 JavaScript 中,对象是一组无序的相关属性和方法的集合,对象是由属性和方法组成的。
    属性:事物的特征,在对象中用属性来表示(常用名词)
    方法:事物的行为,在对象中用方法来表示(常用动词)

    一、创建对象的3种方式

    1. 利用字面量创建对象

    对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
    { } 里面采取键值对的形式表示
    键:相当于属性名
    值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

    var star = {
        name : 'programmer',
        age : 18,
        sex : '男',
        sayHi : function(){
            alert('Hello World!');
        }
    };
    

    对象的调用:
    对象里面的属性调用 : 对象.属性名 ,这个小点 . 就理解为“ 的 ”
    对象里面属性的另一种调用方式 : 对象[‘属性名’],注意方括号里面的属性必须加引号
    对象里面的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号

    console.log(star.name)     // 调用名字属性
    console.log(star['name'])  // 调用名字属性
    star.sayHi();              // 调用 sayHi 方法,注意,一定不要忘记带后面的括号
    

    变量、属性、函数、方法总结:
    变量:单独声明赋值,单独存在;
    属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征;
    函数:单独存在的,通过“函数名()”的方式就可以调用;
    方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

    2. 利用new Object创建对象

    与 new Array() 原理一致

    var andy = new Obect();
    andy.name = 'programmer';
    andy.age = 18;
    andy.sex = '男';
    andy.sayHi = function(){
        alert('Hello World!');
    }
    

    Object() :第一个字母大写
    new Object() :需要 new 关键字
    使用的格式:对象.属性 = 值;

    3. 利用构造函数创建对象

    构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
    在 js 中,使用构造函数要时要注意以下两点:
    构造函数用于创建某一类对象,其首字母要大写
    构造函数要和 new 一起使用才有意义

    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayHi = function() {
        alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);
        }
    }
    var bigbai = new Person('大白', 100, '男');
    var smallbai = new Person('小白', 21, '男');
    console.log(bigbai.name);
    console.log(smallbai.name);
    

    注意:

    1. 构造函数约定首字母大写。
    2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
    3. 构造函数中不需要 return 返回结果。
    4. 当我们创建对象的时候,必须用 new 来调用构造函数。

    二、遍历对象属性

    for...in 语句用于对数组或者对象的属性进行循环操作。
    语法结构:
    for (变量 in 对象名字) {
    // 在此执行代码
    }
    语法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key。

    for (var k in obj) {
        console.log(k);      // 这里的 k 是属性名
        console.log(obj[k]); // 这里的 obj[k] 是属性值
    }
    

    对象就是一组无序的相关属性和方法的集合。
    构造函数泛指某一大类。
    对象实例特指一个事物。
    for...in 语句用于对对象的属性进行循环操作。

    三、内置对象

    1. Math 对象

    Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。

    Math.PI      // 圆周率
    Math.floor()     // 向下取整
    Math.ceil()            // 向上取整
    Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
    Math.abs()       // 绝对值
    Math.max()/Math.min()    // 求最大和最小值 
    

    随机数方法 random()
    random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1
    得到一个两数之间的随机整数,包括两个数在内

    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min; 
    }
    

    2. Date对象

    Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
    Date 实例用来处理日期和时间

    获取当前时间必须实例化:
    var now = new Date();
    console.log(now);

    Date() 构造函数的参数:
    如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')
    如果Date()不写参数,就返回当前时间
    如果Date()里面写参数,就返回括号里面输入的时间

    我们想要 2019-8-8 8:8:8 格式的日期,要怎么办?
    需要获取日期指定的部分,所以我们要手动的得到这种格式。


    日期格式化

    获取日期的总的毫秒形式:
    Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数
    我们经常利用总的毫秒数来计算时间,因为它更精确

    // 实例化Date对象
    var now = new Date();
    // 1. 用于获取对象的原始值
    console.log(date.valueOf()) 
    console.log(date.getTime()) 
    // 2. 简单写可以这么做
    var now = + new Date();         
    // 3. HTML5中提供的方法,有兼容性问题
    var now = Date.now();
    

    3. Array对象

    创建数组对象的两种方式:
    字面量方式
    new Array()

    检测是否为数组:
    instanceof 运算符,可以判断一个对象是否属于某种类型
    Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法

    var arr = [1, 23];
    var obj = {};
    console.log(arr instanceof Array); // true
    console.log(obj instanceof Array); // false
    console.log(Array.isArray(arr));   // true
    console.log(Array.isArray(obj));   // false
    
    添加删除数组元素的方法
    数组排序
    var arr = [1, 64, 9, 6];
    arr.sort(function(a, b) {
        return b - a;      // 降序
        // return a - b;   // 升序
    });
    console.log(arr);
    
    数组索引方法 数组转换为字符串 数组其它方法

    4. String对象

    为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
    基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
    按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但 js 会把基本数据类型包装为复杂数据类型;

    var str = 'andy';
    console.log(str.length);
    

    相当于以下代码:

    // 1. 生成临时变量,把简单类型包装为复杂数据类型
    var temp = new String('andy');
    // 2. 赋值给我们声明的字符变量
    str = temp;
    // 3. 销毁临时变量
    temp = null;
    console.log(str.length);
    



    字符串的不可变,指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

    var str = 'abc';
    str = 'hello';
    // 当重新给 str 赋值的时候,常量'abc'不会被修改,依然在内存中
    // 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
    // 由于字符串的不可变,在大量拼接字符串的时候会有效率问题
    var str = '';
    for (var i = 0; i < 100000; i++) {
        str += i;
    }
    console.log(str); // 这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间
    

    字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。


    根据字符返回位置 根据位置返回字符
    字符串操作方法
    replace() 方法用于在字符串中用一些字符替换另一些字符。
    其使用格式如下:
    replace(被替换的字符串, 要替换为的字符串);

    split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
    例如下面代码:

    var str = 'a,b,c,d';
    console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]
    

    toUpperCase() //转换大写
    toLowerCase() //转换小写

    如果想要保留2位小数 通过 toFixed(2) 方法

    相关文章

      网友评论

        本文标题:No.25 JavaScript对象

        本文链接:https://www.haomeiwen.com/subject/yzzkactx.html