1-4-1-js-核心语法-引用数据类型:对象(js中的对象和构造函数的区别)(js中的对象和json对象区别)

对象有三种:

对象的分类:
1.内建对象
由ES标准中定义的对象,在任何的ES的实现中都可以使用比: Math String Number Boolean Function Object.
2.宿主对象
由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
比如 BOM,DOM
console.log()
document.write()
这个console,还有document,就是宿主对象,是已经建立好的,

3。自定义对象
由开发人员自己创建的对象

先学习自定义的对象:

自定义对象-创建对象

js对象:Object 类型

JavaScript 中的对象(Object)类型是一组由键、值组成的无序集合,定义对象类型需要使用花括号{ },语法格式如下:
在 JavaScript 中,对象类型的键都是字符串类型的,值则可以是任意数据类型。要获取对象中的某个值,可以使用对象名.键的形式,

创建自定义对象

第一种方法,使用花括号创建对象

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
console.log(person.name);       // 输出 Bob
console.log(person.age);        // 输出 20

//在js对象中,属性名默认不需要加引号,你加了js也会给你去掉的,值可以是单引号和双引号,单引号会转换成双引号
// 这里面的每一个键值对,都是对象属性,

  <script>
        var p1 = {
            name: "nana",
            age: 14,
            addr: "xxx号",
        }
        var p3 = {}; //在堆中创建一个新的内存地址存放对象
        for (var a in p1) { //遍历p1中的属性
            p3[a] = p1[a]; //把p1中的属性赋值给p3中的属性
        }
        console.log(p1 === p3); //false --> p3和p1的内存地址不一样
        p3.name = "nananan"; //修改了p3中的name值
        console.log(p3); //输出的name值为nananan
        console.log(p1); //输出的name值为nana 因为内存地址不一样 
   </script>

第二种方法,使用new关键字创建对象,

这种不常用,开发中还是使用第一种花括号的方法

var obj = new object();
person.firstName = "Bill";

第三种方法,利用构造函数创建对象

function Star(name , age, sex){
    this.name = name ;
    this.age = age;
    this.sex = sex;
    this.sing = function() {
        console.log()
    }
}

let ldh = new Star("刘德华" ,18,"男" ); // 调用函数返回的是一个对象
// console.log(typeof Idh);
console.log(ldh.name);
console.log(ldh['sex']);
let zxy = new Star('张学友',19,'男');
console.log(zxy.name);
console.log(zxy.age);

构造函数和对象的区别

1.对象是一个具体的事物
因为前面两种创建对象的方式一次只能创建一个对象,一次创建一个对象,里面有很多的属性和方法是大量相同的,

2.构造函数是泛指的某一大类
构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面。
因此可以利用函数的方法,重复这些相同代码,我们将这个函数称为 ——构造函数 ,这个函数里面封装的不是普通的代码,而是对象。

3.我们利用构造函数创建对象的过程我们也称为对象的实例化
构造函数,如Stars(),抽象了对象的公共部分,封装到了函裁里面,它泛指某一大类( class )
创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化

对象属性

访问属性

var obj = {name:"andy"}

obj.name; // 返回andy

obj["age"] //  也可以使用中括号的方式读取属性,

遍历属性

for (var i in obj){
 console.log(i);
 console.log(obj[i])
 }

// 这个i是属性的名字,obj[i],这样就可以取出属性的值,

添加属性

obj.age = 19; 

obj; //  {name: "andy", age: 19}

// 也可以使用中括号的方式添加属性,

obj["name"] = "andy"

修改对象的属性,

obj.name = "andy123123"

//也可以使用中括号的方式修改属性,

obj["name"] = "andy23123"

删除对象的属性,

delete obj.name

//也可以使用中括号的方式删除属性,

delete obj["name"]

对象方法

创建对象的时候创建方法

var person = {
firstName: "Bill",
lastName : "Gates",
id : 648,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

给对象加了一个函数方法,

person.sayName = function(){
console.log("hello")
}
// 给对象加了一个函数方法,

obj.sayName();函数调用,

JS内置对象-json对象

var s = '{"name":"andy","age":12}'; //这是一个字符串,怎么使用js转换成为json格式的,
var ret = JSON.parse(s);
console.log(ret);
console.log(typeof ret); //类型是一个对象

// 怎么把js中的对象,转换成字符串呢?
var s2 = JSON.stringify(ret);
console.log(s2);
console.log(typeof s2); //类型是一个字符串

// 这两个一定要学会,后面使用ajax传递数据的时候,会使用到

json对象和javacript对象长得很像,但有本质不同

一个json 对象可以长这样

{
"name":"张三"
"age":18 
    }

一个json 对象可以长这样

{
 name: "张三"
 age:18
    }

1、本质区别:
(a)、json对象本质上是字符串,他是客户端和服务器之间传递数据的一种格式,他的属性只是样子货,不能执行。
(b)、而js对象可以有属性和方法。

2、语法不同:
(a)、json对象中只能有null,true,false,数字,字符串(只有双引号)、对象、数组
(b)、json对象中不能除了以上元素的其他JS对象的特性和方法。
(c)、json中的属性必须要用双引号

3、json对象和js对象的转化:

JSON.parse(json字符串) //返回js对象
JSON. stringify(js对象)//返回json字符串

//例子1:
let json = `{"name":"张三","age":18}`;
let obj = JSON.parse(json);
console.log(obj.name); //输出“张三”

//例子2,用了一个json中不支持的undefined
let json = `{"name":"张三","age":undefined}`;
let obj = JSON.parse(json); //转化的时候报错了:uncaught SyntaxError

//例子3,用了一个json中不支持的null
let json = `{"name":"张三","age":null}`;
let obj = JSON.parse(json); //转化的时候不会报错
posted @ 2023-03-29 04:21  技术改变命运Andy  阅读(12)  评论(0编辑  收藏  举报