JS 对象 创建对象 对象的属性 对象的遍历
对象
JavaScript 中的对象(Object)是一组数据的无序集合。其中,每一条数据都是由键:值组成(例 如:name:'HanMeiMei' )。
其中,值可以是任意数据类型,而键只能是字符串类型。
注:其实,在 JavaScript 中,除了六种基本数据类型之外,就还只有一种引用数据类型 —— 对象。
定义对象、创建对象
定义对象的方式有两种:
字面量方式:
let obj1 = {};
构造函数方式:
let obj2 = new Object();
对象的属性
当对象中某一条数据的键所对应的值是非函数类型,则我们将这条数据叫做对象的属性。
let student = { name: 'HanMeiMei', age: 20 } /*name 和 age 两个键对应的值都不是函数,因此这两条数据我们就叫做 student 对象的属 *性。 */
属性操作
通过点运算符 . 来操作一个对象的属性。
let person = { name: "lisa", job: "SoftWare Engineer" }; person.name = "zhangsan"; // 修改已有的属性 person.age = 30; // 添加没有的属性 console.log( person.job ); // 查看已有的属性
通过方括号 [] 操作一个对象的属性。
let person = { name: "lisa", job: "SoftWare Engineer" }; person["name"] = "zhangsan"; // 修改已有的属性 person["age"] = 30; // 添加没有的属性 console.log( person["job"] ); // 查看已有的属性
通过 delete 关键字来删除一个对象的属性。
let person = { name: "lisa", job: "SoftWare Engineer" }; delete person.job; // 删除 person 对象的属性 job,只能一个一个的删除
对象的方法
当对象中某一条数据的键所对应的值是函数类型,则我们将这条数据叫做对象的方法。
let person = { name: 'HanMeiMei', introduce: function(){ console.log( 'my name is HanMeiMei' ); } } //introduce 对应的值是函数,这条数据我们就叫做 person 对象的方法。
方法操作
对象方法的操作类似于对象属性的操作,同样具有以下三种方式:
通过点运算符 . 来访问一个对象的方法。
let person = { name: 'HanMeiMei', introduce: function(){ console.log( 'my name is HanMeiMei' ); } } person.introduce(); // 调用 person 对象的 introduce 方法
通过方括号 [] 来访问一个对象的方法。
let person = { name: 'HanMeiMei', introduce: function(){ console.log( 'my name is HanMeiMei' ); } } person["introduce"](); // 调用 person 对象的 introduce 方法
通过 delete 关键字来删除一个对象的方法。
let person = { name: 'HanMeiMei', introduce: function(){ console.log( 'my name is HanMeiMei' ); } } delete person.introduce; // 方法名后面没有方括号
注:删除属性,输出该属性为undefined,删除方法,调用方法时会报错。
对象的遍历
for-in
let person = { name: 'HanMeiMei', age: 20, gender: 'male', introduce: function () { console.log('my name is HanMeiMei'); } } let name = Symbol('name'); person[name] = `看不到`; console.log(person); for (let key in person) { console.log(key); }
注:for-in 无法遍历通过 symbol 值定义的属性。
for-of
//获取对象的键名 for(let item of Object.keys(person)){ console.log(item); }
//获取对象的值 for(let item of Object.values(person)){ console.log(item); }
//获取对象的键值对 for(let item of Object.entries(person)){ console.log(item); }
注:同样都看不到symbol 值定义的属性。
console.log(Reflect.ownKeys(person));//输出person对象所有的键 console.log(Reflect.ownValues(person));//想要 输出person对象所有的值 此句报错
注:这个方法可以看到symbol值定义的属性(键),但是没有对应的取值方法。
对象方法中的 this
对象的方法中可以使用 this 关键字。
let foo = { bar: function(){ console.log(this); } } foo.bar(); // { bar: [Function: bar] }
对象方法中的 this 永远指向调用该方法时 . 或 [] 前的那个对象。如上例中 bar 方法的 this 就一定指向 foo 对象。
对象的扩展
对象的解构
var { name: name, age: age } = { name: "zhangsan", age: 20 }; console.log( name ); // zhangsan console.log( age ); // 20
var { name: name, age: age } 中,“:”后面的 name(age) 是 var 将要声明的变量,“:”前面的 name(age) 指定了该变量在赋值符号右边的对象中取哪一个属性的值,
在 ES6 中,如果属性名跟属性值的变量名相同时,可以简写。即:
let a = 1; let b = 2; let obj = { a: a, b: b } // 简写 let obj = { a, b }
所以:
let { name, age } = { name: "zhangsan", age: 20 }; console.log( name ); // zhangsan console.log( age ); // 20
对象解构的默认值
对象的解构赋值允许指定默认值。
// 没有默认值 let { name1 } = {}; console.log( name1 ); // undefined // 有默认值 let { name2 = "张三" } = {}; console.log( name2 ); // 张三 let { name3 = "张三", age } = { name3: "李四", age: 30 }; console.log( name3, age ); // 李四 30
总结
不管是数组、Set、Map,还是对象,它们都表现出了一个共同的特征,可以按某种特定的结构存放大量的数据。
这些数据存放在一起作为一个整体我们可以称它们是一个集合;而集合中数据间存在关系,这就说明数据是有结构的,那么这个集合也可以叫做数据结构。
所谓数据结构,就是计算机存储和组织数据的方式。说得通俗一点,主要就是指将数据以什么样的结构 存储到计算机里面。
所以数组、Set、Map,对象,它们就都是一种数据结构。数组、Set、Map还能归属于对象。
在程序方面,最为常用的数据结构,就是数组,这种结构将多个数据有序的排列在一起,形成了一个集合。