美文网首页web前端
1.10 object对象数据类型

1.10 object对象数据类型

作者: NULL_2022 | 来源:发表于2020-08-04 15:06 被阅读0次
    /**
     * object 对象数据类型
     * 所有的对象都应该具备以下几个特点:
     * + 1.用键值对(key:value)俗称属性名和属性值,来描述一个对象的特征(每一个对象都是综合体,存在零到多组键值对)
     * + 2. {key:value,……}每一组键值对是key:value的格式,多组键值对之间用逗号分隔
     * + 3. key不能是引用数据类型的,value可以是任何的数据类型
     */
    let obj = {
        name:'小李',
        age:18,
        sex:'女'
    };
    console.log(obj);//=> { name: '小李', age: 18, sex: '女' }
    let obj_1 = {
        name:'小李',
        age:18,
        sex:'男',
        hobby:['play','game','read'],
        like:function(){
            this.hobby.map(item=>console.log(item));
        }
    }
    console.log(obj_1);
    obj_1.like();
    console.log('----------华丽分割线------------------');
    /**
     * 关于对象中键值对的增删改查
     * + 1. 对象的属性名(键key)是不允许重复的,之前没有这个属性则新增,之前有这个属性,则是修改对应的属性值
     * + 2. 操作属性的两种方式:
     *      1). 对象.属性名 = 属性值 .在这里可以理解为“的” xxx的属性名 = 属性值
     *      2). 对象[属性名] = 属性值
     * 示例:
     */
    let obj_2 = {};
    // obj_2中 没有name,则新增该属性
    obj_2.name="小小里";
    console.log(obj_2); //=> { name: '小小里' }
    // obj_2中 有name,则修改该属性
    obj_2['name'] = '小小李';
    console.log(obj_2); //=> { name: '小小李' }
    
    /**
     * 获取对象的属性名和属性值
     * + 1. 获取指定属性名的属性值
     * + 2. 如果指定的属性不存在,则获取到的属性值是undefined(不会报错)
     * + 3. 获取当前对象中所有的属性名 Object.keys(对象名) => 返回结果是包含所有属性名的数组
     * 示例:
     */
    console.log(obj_2.name); //=> 小小李
    console.log(obj_2['name']); //=> 小小李
    //指定的属性不存在,则返回undefined
    console.log(obj_2.sex); //=> undefined
    console.log(obj_2['sex']); //=> undefined
    //获取当前对象中所有的属性名 Object.keys(对象名)
    console.log(Object.keys(obj_2)); //=> [ 'name' ]
    
    /**
     * 删除对象中指定的属性
     * + 1. 假删除:当前属性还存在,只不过属性值赋值为空 obj_2.xxx = null;
     * + 2. 真删除:彻底把属性从对象中移除掉 delete obj_2.xxx
     * 示例:
     */
    //先打印出obj_2里面的内容
    console.log(obj_2); //=> { name: '小小李' }
    //假删除
    obj_2.name = null;
    console.log(obj_2); //=> { name: null }
    //真删除
    delete obj_2.name;
    console.log(obj_2); //=> {}
    console.log('----------华丽分割线------------------');
    /**
     * 对象的属性名不能是引用数据类型值
     * + 1. 基于对象[属性名]的操作,需要保证属性名是一个值(字符串、数字、布尔等都可以),如果不是一个值而是一个变量,它会把变量存储的值作为对象的属性名进行操作
     * + 2. 基于 对象.属性名 的方式操作,属性名就是点后面的
     */
    let n = 100;
    obj_2.n = 200;
    console.log(obj_2); //=> { n: 200 } 
    obj_2['n'] = 200;
    console.log(obj_2); //=> { n: 200 } 
    
    //此时的n是一个变量,它代表的是所存储的值100是一个数字格式
    obj_2[n] = 200; //=> 相当于 obj[100] = 200;
    console.log(obj_2); //=> { '100': 200, n: 200 }
    
    obj_2[100] = 10; //=> 修改 obj_2[n]的值
    console.log(obj_2); //=> { '100': 10, n: 200 }
    obj_2[undefined] = 20;
    obj_2[true] = 30;
    obj_2[false] = 'woshiFALSE';
    console.log(obj_2); //=> { '100': 10, n: 200, undefined: 20, true: 30, false: 'woshiFALSE' }
    
    console.log('----------华丽分割线------------------');
    
    /**
     * 对象.属性名 方式访问的问题
     * 
     */
    console.log(obj_2); //=> { '100': 10, n: 200, undefined: 20, true: 30, false: 'woshiFALSE' }
    obj_2['1'] = 50; //给对象添加一个键值对 key=> 1 value=>50
    console.log(obj_2['1']);// => 打印 50
    //console.log(obj_2.1); //报错 SyntaxError: missing ) after argument list
    console.log(obj_2);
    
    let x = {
        y : 111 
    };
    obj_2[x] = '66'; //=> 我本意是想这样obj_2[{x:'66'}],但是对象不能作为属性名,需要把其转化为字符串=>{'[object Object]' ':66'}
    //打印obj_2
    console.log(obj_2);//=> {'1': 50, '100': 10, n: 200, undefined: 20,true: 30,false: 'woshiFALSE','[object Object]': '66'}
    //打印obj_2中的key
    console.log(Object.keys(obj_2)); //=> [ '1', '100', 'n', 'undefined', 'true', 'false', '[object Object]' ]
    
    console.log('----------华丽分割线------------------');
    
    /**
     * 数组是特殊的对象:
     * + 1. 它的属性名是数字,数字从零开始,逐级递增,每个数字代表着当前项在该数组中的位置=> 把这种数字属性名叫做“索引”
     * + 2. 默认有一个length属性,存储数组的长度
     * 示例:
     */
    let arr = [1,2,3,4,5,6];
    console.log(arr);//=>打印数组 [ 1, 2, 3, 4, 5, 6 ]
    //访问数组 索引为3的那一项
    console.log(arr[3]);//=> 4
    //数组的长度
    console.log(arr.length);//=> 6
    
    console.log('----------华丽分割线------------------');
    //=> 没事自己研究研究
    //=> object: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer
    //=> Object相关的方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
    //=> 数组: https://developer.mozilla.org/zh-CN/docs/Glossary/array
    //=> Array相关的方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
    
    

    相关文章

      网友评论

        本文标题:1.10 object对象数据类型

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