JavaScript对象

  • 在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
  • 对象是一个具体的事物,看得见摸得着的实物。
  • 对象是由属性和方法组成的。
  1. 属性:事物的特征,在对象中用属性来表示(常用名词)
  2. 方法:事物的行为,在对象中用方法来表示(常用动词)

创建对象三种方式:

  1. 利用字面量创建对象
  2. 利用 new Object 创建对象
  3. 利用构造函数创建对象

1. 对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。

  • { } 里面采取键值对的形式表示
  • 键:相当于属性名
  • 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
var star = {name : 'pink',age : 18,sex : '男',sayHi : function(){alert('大家好啊~');}
};
// 1.利用对象字面量创建对象 {}// var obj = {};  // 创建了一个空的对象 var obj = {uname: '张三疯',age: 18,sex: '男',sayHi: function() {console.log('hi~');}}// (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 : 值  属性值 // (2) 多个属性或者方法中间用逗号隔开的// (3) 方法冒号后面跟的是一个匿名函数// 2. 使用对象// (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的console.log(obj.uname);// (2). 调用属性还有一种方法 对象名['属性名']console.log(obj['age']);// (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号obj.sayHi();

变量、属性、函数、方法总结

  • 变量:单独声明赋值,单独存在
  • 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
  • 函数:单独存在的,通过“函数名()”的方式就可以调用
  • 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的
    行为和功能。
// 变量、属性、函数、方法的区别// 1.变量和属性的相同点 他们都是用来存储数据的 var num = 10;var obj = {age: 18,fn: function() {}}function fn() {}console.log(obj.age);// console.log(age);// 变量 单独声明并赋值  使用的时候直接写变量名 单独存在// 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性// 2. 函数和方法的相同点 都是实现某种功能  做某件事// 函数是单独声明 并且调用的 函数名() 单独存在的// 方法 在对象里面 调用的时候 对象.方法()

2.利用new Object创建对象

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
 // 利用 new Object 创建对象var obj = new Object(); // 创建了一个空的对象obj.uname = '张三疯';obj.age = 18;obj.sex = '男';obj.sayHi = function() {console.log('hi~');}// (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法// (2) 每个属性和方法之间用 分号结束console.log(obj.uname);console.log(obj['sex']);obj.sayHi();

3.利用构造函数创建对象

  • 为什么需要构造函数
 // 我们为什么需要使用构造函数// 就是因我们前面两种创建对象的方式一次只能创建一个对象var ldh = {uname: '刘德华',age: 55,sing: function() {console.log('冰雨');}}var zxy = {uname: '张学友',age: 58,sing: function() {console.log('李香兰');}}// 因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制 // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数// 又因为这个函数不一样,里面封装的不是普通代码,而是 对象  // 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
  • 构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
  1. 构造函数用于创建某一类对象,其首字母要大写
  2. 构造函数要和 new 一起使用才有意义
// 利用构造函数创建对象// 我们需要创建四大天王的对象  相同的属性: 名字 年龄 性别  相同的方法: 唱歌// 构造函数的语法格式// function 构造函数名() {//     this.属性 = 值;//     this.方法 = function() {}// }// new 构造函数名();function Star(uname, age, sex) {this.name = uname;this.age = age;this.sex = sex;this.sing = function(sang) {console.log(sang);}}var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象// console.log(typeof ldh);console.log(ldh.name);console.log(ldh['sex']);ldh.sing('冰雨');var zxy = new Star('张学友', 19, '男');console.log(zxy.name);console.log(zxy.age);zxy.sing('李香兰')// 1. 构造函数名字首字母要大写// 2. 我们构造函数不需要return 就可以返回结果// 3. 我们调用构造函数 必须使用 new// 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}// 5. 我们的属性和方法前面必须添加 this
  • 注意
  1. 构造函数约定首字母大写。 2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
  2. 构造函数中不需要 return 返回结果。
  3. 当我们创建对象的时候,必须用 new 来调用构造函数。

new 关键字

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

  1. 在内存中创建一个新的空对象。
  2. 让 this 指向这个新的对象。
  3. 执行构造函数里面的代码,给这个新对象添加属性和方法。
  4. 返回这个新对象(所以构造函数里面不需要return)。
   // new关键字执行过程// 1. new 构造函数可以在内存中创建了一个空的对象 // 2. this 就会指向刚才创建的空对象// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法// 4. 返回这个对象function Star(uname, age, sex) {this.name = uname;this.age = age;this.sex = sex;this.sing = function(sang) {console.log(sang);}}var ldh = new Star('刘德华', 18, '男');

遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {// 在此执行代码
}
//语法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key
for (var k in obj) {console.log(k); // 这里的 k 是属性名console.log(obj[k]); // 这里的 obj[k] 是属性值
}
 // 遍历对象 var obj = {name: 'pink老师',age: 18,sex: '男',fn: function() {}}// console.log(obj.name);// console.log(obj.age);// console.log(obj.sex);// for in 遍历我们的对象// for (变量 in 对象) {// }for (var k in obj) {console.log(k); // k 变量 输出  得到的是 属性名console.log(obj[k]); // obj[k] 得到是 属性值}// 我们使用 for in 里面的变量 我们喜欢写 k  或者  key
//遍历下面对象
var dog = {dName:"coco",type:"阿拉斯加犬",age:"5岁",color:"棕红色"
};for (k in dog)  {console.log(k);console.log(dog[k]);
}

小结

  1. 对象可以让代码结构更清晰
  2. 对象复杂数据类型object。
  3. 本质:对象就是一组无序的相关属性和方法的集合。
  4. 构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
  5. 对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。
  6. for…in 语句用于对对象的属性进行循环操作。
  7. 请使用arguments完成函数getResult,实现得到输入的所有的数值中的最小值、最大值、平均数、总和等功能

​ 作业描述:
​ 函数名:getResult
​ 函数调用方式:getResult(数值1,数值2,数值3,数值4…)
​ 函数功能:返回值是一个对象,这个对象有sum, max, min, averages等属性,分别表示实参的总和、最大值、最小值、平均数等

function getResult(){var max = arguments[0];var min = arguments[0];var sum = 0;var averages = 0;for(var i =0; i<arguments.length; i++){sum = sum + arguments[i];if(max<arguments[i]){max = arguments[i];}if(min>arguments[i]){min = arguments[i];}}averages = sum/arguments.length;return [sum, max, min, averages];}console.log(getResult(1,2,3,4));
//以下有两个数组,一个数组arr是班级里所有的学员的名称,一个数组currentArr是提交了每日反馈的学员名单,请创建一种算法,把未提交每日反馈的学员筛选出来
var arr = ["张瑞淑", "徐海涛", "谢岗岗", "薛鹏", "魏明杨", "党婷", "熊飞", "郑翠翠", "李航卫", "屈涛", "汪孝双", "代攀飞", "武志钰", "王亚龙", "周芙榕", "李涛", "郝颖", "文冲洋", "王旭拯", "胡佳豪", "寇晓丽", "马晓晗","王思聪", "张绿", "李德", "郑萍", "张凯", "张嘉成", "葛云侠", "杨磊", "任变", "景德", "高卷林", "刘益凡", "赵娜", "陈章鸣", "张荣召", "赵凯旋", "程倩倩", "脱朝平", "刘吉利", "郭苗苗", "马建峰", "潘瑞", "闫翔", "马晨", "李轩轩", "黄红梅", "刘书彬", "罗强", "刘东","王可可", "李嘉琪", "段佳琦", "黄燕", "邱淑鸿", "宋翔宇", "王波", "樊琳", "王兆国", "许成", "李兴", '杨'];
var currentArr = ["张瑞淑", "徐海涛", "谢岗岗", "薛鹏", "魏明杨", "党婷", "熊飞", "郑翠翠", "李航卫", "屈涛", "汪孝双", "代攀飞", "武志钰", "王亚龙", "周芙榕", "李涛", "郝颖", "文冲洋", "王旭拯", "胡佳豪", "寇晓丽", "马晓晗", "张绿", "李德","郑萍", "张凯", "张嘉成", "葛云侠", "杨磊", "任变", "景德", "高卷林", "刘益凡", "赵娜", "陈章鸣", "张荣召", "赵凯旋", "程倩倩", "脱朝平", "刘吉利", "郭苗苗", "马建峰", "潘瑞", "闫翔", "马晨", "李轩轩", "黄红梅", "刘书彬", "罗强", "刘东", "陈泽文", "李嘉琪", "段佳琦", "黄燕", "邱淑鸿", "宋翔宇", "王波", "樊琳", "王兆国", "许成", "李兴"];
function searchArr(arr, currentArr) {var newArr = [];for(var i =0; i<arr.length; i++){if(currentArr.indexOf(arr[i])== -1){newArr.push(arr[i]); }}
return newArr;
}var res = searchArr(arr, currentArr);
console.log(res);

JS 复习(6)JavaScript对象相关推荐

  1. 老徐WEB:js入门学习 - javascript对象之String对象

    简单说明一下字符串. 字符串是由单引号或者双引号括起来的任意文本.如果文本里含有单引号,外面就用双引号括起来,如果文本里含有双引号,那么外面就用单引号括起来.如果文本里面的引号和外面的一致,那么文本里 ...

  2. js复习:输出语句,js要不要写标点符号,let ,const(常量),JavaScript 数组,JavaScript 对象

    js复习 1.输出语句 console.log() ,console.dir(),window.alert() 2.js要不要写标点符号? 3.let ,const(常量) 4.JavaScript ...

  3. JavaScript -- 时光流逝(三):js中的 String 对象的方法

    JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

  4. JS基本语法-JavaScript中的常用对象3-window对象,即窗口对象

    1. 简介: window对象,即窗口对象.在JavaScript中,通常指的是浏览器窗口对象.所有全局 JavaScript 对象,函数和变量都是window对象的成员. 2. window对象的主 ...

  5. JavaScript 学习(2) - JS的内建对象

    JS中的对象 JS对象介绍 String 对象 与C#中的string相比, JS中的这个对象为HTML增加了一些特别的功能,比如Anchor方法等.但是, 怎么才能把Anchor返回的字符串转换成D ...

  6. JavaScript对象复习

    JavaScript对象 Array对象 function $(tg) {return document.writeln("<br/>"+tg); } var arr= ...

  7. javaScript 对象添加属性和创建js对象的方式(以及理解:“无法给构造函数添加新的属性“)

    1.javaScript 对象想要添加属性,非常简单 (1)直接添加,使用语法:objectName.propertyName 添加属性. 举例: var person = new Object(); ...

  8. 我对javascript对象的理解

    前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...

  9. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

最新文章

  1. 只用半小时,只用半小时,只用半小时,给自己一个机会,看完保你web开发一期末不挂科,老师看了都说好
  2. Android踩坑日记:使用Fesco图片加载库在GridView上的卡顿优化
  3. apache apollo php,php windows環境 安裝 Apache-apollo + phpMQTT 實現發送 MQTT
  4. Liunx 系统调优
  5. 知识图谱常用指标:MRR、Hits@1、Hits@10、MR
  6. 如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
  7. PHP程序显示时出现乱码
  8. python 经典函数
  9. win7 docker centos安装mysql_CentOS 7 使用docker安装mysql
  10. 在 Windows 中实现 Java 本地方法-Java native 关键词
  11. VB查询ACCESS数据库内容
  12. 星环大数据助银行数据仓库全面升级
  13. [zz] 高端HIFI发烧音频DAC解码芯片排名
  14. Selection dont contain a main type
  15. python爬虫笔记五:汽车之家贴吧信息(字体反爬-动态映射)
  16. 4个设计师必备的设计网站,马住了
  17. TensorFlow对象检测-1.0和2.0:训练,导出,优化(TensorRT),推断(Jetson Nano)
  18. mysql占用内存过高_mysql数据库占用内存过高解决办法
  19. 用HTML编写一首诗
  20. 程序员应该保持危机感

热门文章

  1. Microsoft Teams管理(一)
  2. h5文件格式数据集制作
  3. JavaScript常见面试题
  4. SDL2中文API(整理)
  5. 利用Windows内置工具winsat测试硬盘速度(SSD机械盘对比)
  6. 某猫电影 css 加密解决方案
  7. 机器学习诗词创作_通过机器学习创作音乐
  8. Vue项目引入animated
  9. Vue.js 组件 - 组件间的循环引用
  10. css元素类型哪几种