超适合0基础js对象笔记(10)

简介: 超适合0基础js对象笔记(10)


什么是对象?

对象(object):javascript是一种数据类型

也是一种无序数据集合

可以这样理解对象,比如你描述一个人她的特征,年龄,性别,身高都是她的信息

var person = {
    name: "John",
    age: 30,
    gender: "male"
};

对象的使用

1.对象声明语法

let 对象名 =new Object()

2.对象由属性方法组成

3.属性:数据描述性的信息被称为属性

语法:

let obj = {
        uname:'ljx',
        age:18,
        gender:女
       }

✨注意:

1.属性之间都是成对出现,包括属性名和值,他们之间用英文 : 分隔

2.多个属性之间使用英文逗号 , 隔开

3.属性就是依附在对象上的变量

对象操作语法

⏺️ 语法:对象名.属性

⏺️获取对象中的成员属性值

⏺️语法:对象名.属性=新 值

⏺️修改对象中成员的新值

⏺️语法:对象名.属性 =值

⏺️对象中添加成员值

⏺️语法:delete 对象名.属性

⏺️删除对象中的成员值

创建对象
        var o = {}
        //1.点语法创建对象
        //1.1添加一个成员
        //想对象里面添加一个叫做name的成员,值为‘jack’
        o.name = 'jack';
        o.age = 18;
        //1.2删除一个成员
        delete o.name 
        //1-3修改一个成员
          o.age=20
          //1-4查找一个成员
          console.log(o.age)
        console.log(o)

数组关联语法

  • 增:对象名[‘成员名’] = 值
  • 删: delete 对象名[ '成员名 ’ ]
  • 改: 对象名[‘成员名’] = 值
  • 查: 对象名[‘成员名’]
//数组关联语法
        var o = new Object()
        //1.操作对象
        o['name']='jack'
        //2.删除成员
        delete o['name']
        //3.修改成员
        o['age']=20
        //4.增加成员
        o['gender'] = '男'
        console.log(o)

对象的方法

方法调用语法:对象名.方法名

遍历对象

for … in

1.使用for in 语法来遍历对象

//遍历对象
    let obj ={
        uname:'pink',
        age:18,
        gender : '男'
    }
    for(let k in obj){
    console.log(k)//属性名 
    console.log(obj[k])//打印属性值
    }

注意:k= 获得对象的属性名,对象名[k ] =属性值

访问属性

1.使用点语法:

作用:快速读取对象属性,点语法左侧是引用对象的变量,右侧的变量名

var obj={ //定义对象
              x:1,
             }
             console.log(obj.x);  //1
             obj.x=2;
             console.log(obj.x); //2

2.Object.keys()

Object.keys() 是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,它会自动过滤掉原型链上的属性,然后可以通过数组的 forEach() 方法来遍历

3.使用 Object.getOwnPropertyNames

Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,包括不可枚举的属性,也可以通过数组的 forEach 方法来遍历

4.Object.getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组,不包括字符串属性

5. Reflect.ownKeys

Reflect.ownKeys() 方法是 ES2015 (ES6) 新增的静态方法,该方法返回对象自身所有属性名组成的数组,包括不可枚举的属性和 Symbol 属性

6.Obejct.create():

Obejct.create():返回一个新的对象,并指定原型对象和属性

7.Object.getPrototypeOf

Object.getPrototypeOf():获取对象的prototype对象

属性描述符

  • value:属性值,默认值:undefined
  • writable:设置属性值可写, 默认值为true
  • enumerable:设置属性是否 可枚举默认为true
  • configurable:设置是否属性特性,默认值为TRUE,如果为false则无法删除属性,不能修改属性值,也不能修改属性描述符
...
//通过defineProperty将writable改为true
Object.defineProperty(obj,'foo', {
  writable: true
});
obj.foo = 2;
obj.foo; //2, foo的值成功被修改
  • get :取值器 默认值undefined
  • set:存值器 默认值undefined

注意:取值方法get()不能接收参数,存值方法set()只能接收一个参数,用于设置属性值

操作属性描述符

属性描述符是一个内部对象,无法直接读写,可以通过下面几个函数进行操作。

  • Object.getOwnPropertyDescriptor( ):可以读出指定对象私有属性的属性描述符。
  • Object.defineProperty( ):通过定义属性描述符来定义或修改一个属性,然后返回修改后的描述符。
  • Object.defineProperties( ):可以同时定义多个属性描述符。
  • Object.getOwnPropertyNames( ):获取对象的所有私有属性。
  • Object.keys( ):以数组的形式返回参数对象包含的可枚举的私有属性名
  • propertyIsEnumerable():对象实例方法,直接调用,判断指定的属性是否可枚举。

控制对象状态

JavaScript 提供了 3 种方法,用来精确控制一个对象的读写状态,防止对象被改变。

  • Object.preventExtensions:阻止为对象添加新的属性。
  • Object.seal:阻止为对象添加新的属性,同时也无法删除旧属性。等价于属性描述符的 configurable 属性设为false。注意,该方法不影响修改某个属性的值。
  • Object.freeze:阻止为一个对象添加新属性、删除旧属性、修改属性值。
    同时提供了 3 个对应的辅助检查函数,简单说明如下:
    Object.isExtensible:检查一个对象是否允许添加新的属性。
    Object.isSealed:检查一个对象是否使用了 Object.seal 方法。
    Object.isFrozen:检查一个对象是否使用了 Object.freeze 方法。

Object原型方法

Object内置原生方法:Object静态函数和Object原型方法

1.使用toString

作用:返回一个对象的字符串

function fn(x,y){//构造函数
            this.x=x;
            this.y=y;
        }
        var f=new fn(1,3)
        console.log(fn.toString())//返回该函数的源代码
        console.log(f.toString())//[object Object]

2.使用valueOf()方法

作用:valueOf()方法能够返回对象的值

//Date对象的valueOf()返回值是当前日期对象的毫秒数
        var o=new Date();
        console.log(o.toString);
        console.log(o.valueOf)
        console.log(Object.prototype.valueOf.apply(o))//"2023-04-18T00:07:07.261Z"

Object 静态函数

1.对象包装函数

Object()是一个类型函数,可以将值转换为对象,如果参数为空,或者为undedined和null将创建一个空对象

如果参数为数组、对象、函数、则会返回原对象,不进行转换

//3.类型检测函数
        function isObject(value){
            return value === Object(value);
        }
        console.log(isObject([]));//true
        console.log(isObject(true))//false
2.对象构造函数

Obect() 不仅可以包装对象,还可以当做构造函数使用,可以使用new

调用Object()函数

语法:var obj = =new Object();

总结

JavaScript中的对象是一种非常强大的数据类型,可以用于表示现实世界中的实体。对象由多个属性组成,每个属性由一个键和一个值组成。属性的值可以是任何数据类型,包括字符串、数字、布尔值、函数、甚至是其他对象。对象可以通过字面量和构造函数来创建,并可以使用点表示法和方括号表示法来访问属性。对象还可以拥有方法,方法可以通过对象来调用。在JavaScript中,可以通过原型链实现继承,从而扩展对象的属性和方法。

目录
相关文章
|
1天前
|
JavaScript 前端开发
javascript的对象
javascript的对象
|
1天前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1天前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1天前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1天前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1天前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
1天前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
1天前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型
|
1天前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 072 JavaScript BigInt数据类型
编程笔记 html5&css&js 072 JavaScript BigInt数据类型
|
1天前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型

相关产品

  • 云迁移中心