web前端

1.10 object对象数据类型

2020-08-04  本文已影响0人  NULL_2022
/**
 * 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

上一篇下一篇

猜你喜欢

热点阅读