前言
-
定义:
简而言之,对象 就是 属性值 和 方法 的集合.
属性: 与对象相关的值。
方法: 能够在对象上执行的动作。
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等
其实, 在我们生活中一切也可以理解成 对象.
对象包括两个基本内容: 属性 和 方法
实例:
以我们国宝熊猫为例:
看到上面这张图,我们就知道他是国宝大熊猫
黑眼圈, 背带, 黑白相间,软萌的视觉认知传输到大脑, 大脑再找出相应的称呼---国宝大熊猫
那我们以这只大熊猫为例: 熊猫界顶级流量: 奇一
属性: 黑眼圈, 背带, 黑白相间. 头顶wifi
功能方法: 抱大腿. 兔子跳.
抱大腿视频:https://haokan.baidu.com/v?vid=7119934610201377581&pd=bjh&fr=bjhauthor&type=video
回到我们JS 对象 可以把他描述成:
var pandaQiyi = {
name: "奇一",
age: 3,
sex: 'female',
feature: ["头上wifi", "兔子跳"],
skill: function(){console.log("抱大腿")}
}
同样, JS中,每个对象都可以封装一个事物或者工具的 属性 和 方法,
这样在操作中,我们可调用 对象封装的 属性值 和 方法.
-
对象的创建
在JS对象里, 不管是 属性值 或 方法 都是要一个名称.
这个 名称和内容 共同组成了 对象里 的一个 属性或方法
这就形成了 一个 "键值对" ==> key-value
格式: 注意: 属性与属性之间,用 英文逗号 隔开. 最后一个 成员末尾 最好不加逗号","
object = {
x1: xx,
y2: yy,
z3: zz
}
- 创建方法:
① 对象字面量方式 (推荐使用.简单直接)
字面量一
var person = {
name: '小白',
job: '前端',
getName: function () {
// this ==> 在这里指向obj实例对象本身
console.log( this.name );
}
}
字面量二
var obj = {};//创造一个对象
// 让后添加属性和方法
obj.name = '小黑';
obj.age = 20;
obj.say = function () {
console.log(this.name+'的年纪是:'+this.age);
}
② 通过Object对象new创建 (工厂模式)
var obj = new Object();
// 对象是有方法和属性的 动态添加
obj.name = '小蓝';
obj.sex = 'male';
obj.age = 18;
obj.say = function () {
// this ==> 在这里指向obj实例对象本身
console.log( this.name + '的性别是'+ this.sex + '她年纪是:'+ this.age);
}
拓展;
JS标识符的命名规则，即变量的命名规则：
标识符只能由字母、数字、下划线和‘$’组成
数字不可以作为标识符的首字符
同样,在JS 对象里 键名key 也要遵循 标识符命名规则
对象的 键名key 一般是没有双引号的. 键值value 除了 数字 都要加 引号.
其实. 浏览器默认对 键名key ,也是加上双引号的.
所以得出: 键名key 可加 也 可以 不加 双引号.
问题来了: 什么时候 非得要加 双引号呢?
那就是在 键名key中出现 不符合标识符命名规范的时候
例如;
//出现下列情况, 必须 给键名加上引号
var obj {
'4f': "F F F F ", // 不能以数组开头
'f 4': "f f f f", // 出现空格
'f+4': "f4 f4 f4 f4" // 出现特殊符号
}
第二部分
我们将对象分为四个部分: 读, 增, 删, 转, 遍历
读
读: 意为读取
JS里有两种方式可以读取一个对象里面的属性和方法:
| 方法 | 演示 |
|---|---|
. 符号 |
object.key |
方括号[] +引号 ''
|
object['key'] |
- 一: 使用点运算符:
var obj = {
name: "wang",
sex: "male",
age: "28",
say: function(){
console.log("我是小王")
}
}
console.log( obj.name) // "wang"
console.log( obj.sex) // "male"
console.log( obj.age) // "male"
console.log( obj.say() ) // "我是小王"
// 注意: 对象的方法 一般用()运行输出. 否则会输出 方法的结构
console.log( obj.say ) // function(){
// window.runnerWindow.proxyConsole.log("我是小王")
// }
- 二: 使用 方括号运运算符 和 引号:
var obj = {
name: "wang",
sex: "male",
age: "28",
say: function(){
console.log("我是小王")
}
}
console.log( obj['name']) // "wang"
console.log( obj['sex']) // "male"
console.log( obj['age']) // "28"
console.log( obj['say']() ) // "我是小王" , 注意: 使用这种方法 运行()放在中括号后.
增
在JS里, 对象是一个 动态变量. 所以 可以自由往里面添加属性.
JS 对象 动态增添属性和方法有两种方法:
一: 常用方式
var newobj = {}
newobj.name = "老王"
newobj.age = 46
newobj.say = function (){ console.log( "我是"+this.name+",今年"+this.age+"了")}
console.log( newobj.name , newobj.age ) // "老王" 46
console.log( newobj.say() ) // "我是老王,今年46了"
二 : 不常用方式
var person = {};
var key = "name"
var value = "小李"
person[key] = value
console.log( person.name ) // "小李"
// 添加 方法
var key1 = "say"
var value1 = function(){ console.log("我是小李")}
person[key1] = value1
console.log( person.say() ) // "我是小李"
删
删除对象属性很简单.. -- 使用 delete 命名.
var person = {
name: '小李',
age: '20',
sex: 'male',
job: 'code'
}
delete person.job
// job属性被 清除内存.
console.log( person ) // {age: "20",name: "小李",sex: "male"}
// 注意是清除内存.不会出错.出错会返回 报错.
console.log( person.job) // undefined
改
其实相当于重新给 对象属性 赋值..
var person = {
name: '小李',
age: '20',
sex: 'male',
job: 'code'
}
person.name = "小王"
console.log( person.name ) // "小王"
复制
调用 Object.assgin()
var person = {
name: '小李',
age: '20',
sex: 'male',
job: 'code'
}
var person1 = Object.assign( {height: 170, color: "red"},person )
console.log( person1 ) // {age: "20",color: "red",height: 170,job: "code",name: "小李",sex: "male"}
console.log( person ) // { age: "20", job: "code", name: "小李", sex: "male"}
遍历
遍历有三种方法:
①
for (...in...)
②Object.keys（obj）+ Object.values（obj）
③Object.getOwnPropertyNames(obj)
- for ( ..in..)
var person = {
id: 08,
name: "李",
age: 26,
say: function(){ console.log("我是小李") }
}
for (var key in person) {
console.log( key + "--" + person[key] )
//"id--8" "name--李" "age--26" "say--function(){ window.runnerWindow.proxyConsole.log(\"我是小李\") }"
}
- Object.keys (obj) + Object.value( obj)
