对象
*
* 属于 引用数据类型(复杂数据类型)
*
*
* 他只是一个存储 基本数据类型的集合
*
*
* 对象的花括号中书写的不是代码, 而是键值对格式的数据
*
* 键值对 --- key/value --- 属性名:属性值
*
*
* 冒号左边的统称为: 键/key/属性名
* 右边统称为: 值/value/属性值
*
*
* 对象这个数据结构 将来开发中经常会使用
* 用户详情
* 商品详情
* 文章详情
// 属性:值
// 属性名不能重复,重复就会覆盖
// 属性名是唯一的,属性名又叫做键名 key 关键词
// 值 value
// 键值对 有键名有值成对出现就叫做键值对 值的类型可以是任意类型,键的类型只能是字符型或者 唯一型(暂时不管)
// 对象是一种键值对的数据存储格式,是一种松散结构
// 松散结构,表示一个键值对和其他键值对是没有关联关系的。
var obj = {
num: 1,
sum: 10086,
name: '张三',
age: 18,
bo1: true,
bo2: false
}
console.log(obj)
1. 对象的创建
// js是一个点语法的语言 使用.就是指对象下的属性或者方法
// var obj1 = {} // 字面量的方式创建
// console.log(obj1)
// var obj2 = new Object() // 内置的构造函数的方式创建
// console.log(obj2)
1.2对象的属性与方法定义
var 王钢={
眼睛:2,
腿:2,
嘴:1,
编程:function(){
console.log("aaaa")
},
做饭:function(){
}
}
console.log(王钢.眼睛)
王钢.编程();
在对象中有两种,一种叫做属性,一种叫做方法
关键词后面是一个函数的就叫做方法,关键词后面不是函数是一个值的叫做属性
2. 对象的操作 (增删改查)
点语法
var obj = {
name: '张三',
id: 'QF001',
"1dfsf": 123
}
console.log('原本的对象: ', obj)
console.log(obj.name)
中括号语法 (数组语法)
// 点语法获取和设置时,只能获取设置普通直接设置命名属性名,不能获取设置使用""或者[]定义的属性名
// 使用[]获取属性名时 不使用.语法,直接将[]写在对象后面,[]中可以使用字符串,也可以放置变量
var obj = {
name: '张三',
id: 'QF001'
"a-b":2,
[o]:3
}
console.log('原对象: ', obj)
// 增 对象名['要新增的属性名'] = 对应的属性值
// obj['age'] = 18
// 删 delete 对象名['要删除的属性名']
// delete obj['id']
// 改 对象名['要修改的属性名'] = 新的属性值
// obj['name'] = '李四'
// console.log('操作后的对象: ', obj)
// 查 对象名['要查询的属性名'] 会得到对应的属性值
console.log(obj['name'])
// console.log(obj["a-b"])
// console.log(obj[o])
中括号语法2
var n="abc"
var bool=true
var obj={a:1}
var o={
["a"]:1,
["1"]:2,
["1a"]:4,
["a-b"]:5,
[n]:6,//[]中使用字符没有""就是变量,相当于将变量的值作为对象的属性名
[bool]:7, //所有非字符类型作为属性名时都会自动隐式转换为字符串
[obj]:8
}
对象点语法和中括号语法的区别
*
* 只要正常情况, 对象的属性名符合变量的命名规则与规范的情况下, 使用点语法或者中括号语法 没有任何区别
*
* 但是在遇到一些特殊的属性名的时候 就要更换了, 比如 说属性名为数字
*
* 还有一种情况, 属性名想要使用变量的时候, 也需要使用中括号语法
var obj = {
0: '数字0',
1: '数字1',
2: '数字2',
name: '张三'
}
var myName = 'name'
console.log(obj.myName)
console.log(obj['myName'])
console.log(obj[myName])
console.log(obj['name'])

* 遍历对象
* 拿到对象内部的所有数据
var obj = {
a: 1,
b: 2,
c: 3,
};
将对象中每一个属性名赋值给变量key
遍历对象 将对象中的每个属性循环查看,叫做遍历
for(var key in obj){
// console.log(key);//a b c
// console.log(obj[key])
console.log(key,obj[key])
}
2. // 按照对象属性的添加顺序遍历
var obj={
a:1,
1:2,
10:3,
3:4,
b:5,
d:6,
1.2:7
}
将属性名转换为数值,
如果不是非数值(含有小数点和负数的按照字母字符遍历),
则按照这个数值属性的从小到大的顺序先变量,
然后再将转换数值后是非数值的字母属性按照添加的先后顺序遍历
for(var key in obj){
console.log(key);
}
Object.assign 方法
var obj={a:1,b:2}
var o={}
//将obj上的属性复制到o上
Object.assign(o,obj)
console.log(o)
JSON格式
var obj={a:1,b:2,c:3,d:{ab:10}};
1. 将对象转换为JSON格式的字符串
var str=JSON.stringify(obj);
JSON格式的字符串 '{"a":1}' JSON格式的字符串
使用{}作为字符串的前后首尾字符,每个属性使用""引起每个属性名,值正常写入
JSON字符串的值中不会存在HTML标签或者函数、undefined,
只能字符型、数值型、布尔型、null和对象的值,
console.log(str);
var str='{"a":1,"b":{"c":3}}';
2. 将JSON字符串转换为对象
var o=JSON.parse(str);
console.log(o);
对象浅复制
* 通过浅复制一个引用数据类型到另外一个变量中
* 其中这个数据内的基本数据类型修改的时候不会互相影响
* 但是其中的 引用数据类型再修改的时候会互相影响
var o1={a:1,b:2,c:3}
var o2={}
// 通过循环将o1中每个属性赋值给o2
for(var key in o1){
// 将o1的key设置在o2上,并且将o1的key对应的值存储在o2上
o2[key]=o1[key]
}
// console.log(o2)
o2.a=100
console.log(o2,o1)
c属性是一个对象的引用地址,在赋值的时候将c属性的引用地址也赋值给了o2的c属性
o2的c属性的值和o1的c属性的值都是同一个引用地址
要解决这个问题不能使用浅复制,必须使用深复制,暂时无法完成
var o1={a:1,b:2,c:{d:3}}
var o2={}
for(var key in o1){
o2[key]=o1[key]
}
o2.a=100
o2.c.d=100
console.log(o2,o1)
最简单的深复制可以使用JSON处理
* 不管多少层数据结构, 都百分之百复制一份过来
* 语法:`JSON.parse(JSON.stringify(数据)) `
var o1 = { a: 1, b: 2, c: { d: 3 } }
var str=JSON.stringify(o1)
var o2=JSON.parse(str)
var o2=JSON.parse(JSON.stringify(o1))
o2.c.d=100
console.log(o1,o2)