资讯专栏INFORMATION COLUMN

JavaScript对象常用操作方法

IT那活儿 / 751人阅读
JavaScript对象常用操作方法

点击上方“IT那活儿”,关注后了解更多内容,不管IT什么活儿,干就完了!!!



什么是对象


在JavaScript中对象是一组元素的相关属性和方法的集合,所有的事物都是对象,例如:日期,字符串,数字,数组,布尔,函数等。

对象是由属性和方法组成的:

  • 属性:事物的特征,在对象中用属性来表示(常用名词)

  • 方法:事物的行为,在对象中用方法来表示(常用动词)



创建对象的三种方式


方式一:利用对象字面量创建对象{}

var person = {

  username: "纪云禾",

  age: 600,

  sex: "女",

};

alert(person.username);

方式二:利用new object创建对象

var csm = new Object(); //创建了一个空的对象

csm.userName = "纪云禾";

csm.age = 600;

csm.sex = "女";

// (1) 我们是利用等号=赋值的方法添加对象的属性和方法

// (2) 每个属性和方法之间用分号结束

console.log(csm.userName);

console.log(csm["sex"]);

方式三:利用构造函数创建对象

构造函数: 是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。

我们可以把对象中一些公共的属性和方法抽取出来 ,然后封装到这个函数里面。

//我们需要创建四大天王的对象相同的属性: 名字 年龄性别相同的方法: 唱歌

//构造函数的语法格式

function 构造函数名() {

this.属性=值;

this.方法= function() {}

}

new 构造函数名();


function Test(username, age, sex) {

  this.name = username;

  this.age = age;

  this.sex = sex;

  this.sing = function (sang) {

    console.log(sang);

  };

}

var jyh = new Test("纪云禾", 600, "女"); //调用函数返回的是一个对象

console.log(jyh.name);

console.log(jyh["sex"]);

ldh.sing("与君初相识");

var cy = new Test("长意", 700, "男");

console.log(cy.name);

console.log(cy.age);

ldh.sing("与君初相识");
  • 构造函数名字首字母要大写;

  • 我们构造函数不需要return就可以返回结果;

  • 我们调用构造函数必须使用new;

  • 我们只要new Star() 调用函数就创建一个对象ldh {};

  • 我们的属性和方法前面必须添加this。



定义对象的两种方式



(1) var obj =new Object();

(2) per = {}




自定义构造函数



function Test(userName, age, job) {

    this.name = userName;

    this.age = age;

    this.job = job;

    sayName = function () {

      alert(this.name);

     };

  }

  var jyh = new Person(jyh, 600, "actor");

  var cy = new Person(cy, 500, "actor");

new关键词

new在执行时会做四件事情:

  • 在内存中创建一个新的空对象;

  • 让this指向这个新的对象;

  • 执行构造函数里面的代码,给这个新对象添加属性和方法;

  • 返回这个新对象所以构造函数里面不需要return。



遍历对象



//遍历对象

var jyh = {

  userName: "纪云禾",

  age: 600,

  sex: "女",

  fn: function () {},

};

// for in遍历对象

//for(变量in对象){

// }

for (var k in jyh) {

  console.log(k); // k变量输出得到的是属性名

  console.log(jyh[k]); //jyh[k]得到是属性值

}

//我们使用for in里面的变量我们喜欢写k或者key



 


END



 

 



本文作者:池思敏

本文来源:IT那活儿(上海新炬王翦团队)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/129526.html

相关文章

  • JavaScript:对Object对象的一些常用操作总结

    摘要:一可以用作对象的复制可以用作对象的合并注意目标对象自身也会改变。对象四返回一个数组,包括对象自身的不含继承的所有可枚举属性不含属性的键名。该方法返回被冻结的对象。方法判断一个对象是否被冻结。 JavaScript对Object对象的一些常用操作总结。 一、Object.assign() 1.可以用作对象的复制 var obj = { a: 1 }; var copy = Object....

    马龙驹 评论0 收藏0
  • 常用JavaScript操作CSS方法总结

    摘要:返回值一个对象集合,包含六个属性上下左右宽高注意只用于行内元素只能获取样式只读获取元素位置获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。返回一个类数组对象,其包含样式表中所有规则。 [TOC] 获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意...

    enali 评论0 收藏0
  • javascript常用对象操作方法

    摘要:返回组成的数组返回对象的组成的数组返回一个由组成的数组,其元素是在对象上找到的可枚举属性值。深拷贝对象返回深拷贝的对象,修改不会影响该对象返回对象的和组成的数组方法返回一个对象和键值对组成的数组方法判断对象中属性是否存在 Object.keys(obj) 返回对象的key组成的数组 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性,不会返回原...

    antz 评论0 收藏0
  • 个人常用JavaScript及React常用优化总结

    摘要:插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合,它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时,数值和变量的性能差不多,并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化...

    yuanxin 评论0 收藏0
  • 常用JavaScript小技巧及原理详解

    摘要:使用一元加模拟函数原理对非数值类型的数据使用一元加,会起到与函数相同的效果。中,若判断不为则不再进行下一步操作。使用逻辑或设置默认值逻辑或也属于短路操作,即当第一个操作数可以决定结果时,不再对第二个操作数进行求值。 善于利用JS中的小知识的利用,可以很简洁的编写代码 1. 使用!!模拟Boolean()函数 原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!...

    chnmagnus 评论0 收藏0
  • [ ES6 ] 快速掌握常用 ES6 (二)

    摘要:本系列文章适合快速掌握入门语法,想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充,可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数 本系列文章适合快速掌握 ES6 入门语法,想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 本篇文章是对之前文章...

    hidogs 评论0 收藏0

发表评论

0条评论

IT那活儿

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<