JavaScript-对象

概念

现实生活中的对象:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。举例: 一部车,一个手机。

车是一类事物,门口停的那辆车才是对象
特征:红色、四个轮子
行为:驾驶、刹车

JavaScript 中的对象其实就是生活中对象的一个抽象,是无序属性的集合。其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把 JavaScript 中的对象想象成键值对,其中值可以是数据和函数。

对象的行为和特征:
特征---在对象中用属性表示
行为---在对象中用方法表示


对象字面量

创建一个对象最简单的方式是使用对象字面量赋值给变量,类似数组。对象字面量语法:{}。内部可以存放多条数据,数据与数据之间用逗号分隔,最后一个后面不要加逗号。每条数据都是有属性名和属性值组成,键值对写法:k: v
k: 属性名。v:属性值,可以是任意类型的数据,比如简单类型数据、函数、对象。

var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log("你好");
  }
};

属性:对象的描述性特征,一般是名词,相当于定义在对象内部的变量。
方法:对象的行为和功能,一般是动词,定义在对象中的函数。


调用对象

用对象的变量名打点调用某个属性名,得到属性值。object.key
在对象内部用 this 打点调用属性名。this 替代对象。this.key
用对象的变量名后面加 [] 调用,[] 内部是字符串格式的属性名。object["key"]
调用方法时,需要在方法名后加 () 执行。object.key()
更改属性的属性值方法:先调用属性,再等号赋值。
增加新的属性和属性值:使用点语法或者[]方法直接定义新属性,等号赋值。
删除一条属性:使用一个 delete 关键字,空格后面加属性调用。


其他创建对象方式

new Object() 创建对象

Object() 构造函数 ,是一种特殊的函数。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与 new 运算符一起使用在创建对象的语句中。构造函数用于创建一类对象,首字母要大写,并且要和 new 一起使用才有意义。

new在执行时,会在内存中创建一个新的空对象,并且让 this 指向这个新的对象,之后返回这个新对象。执行构造函数是为了给这个新对象加属性和方法。

工厂函数:如果要创建多个类似的对象,可以将 new Object() 过程封装到一个函数中,将来调用函数就能创建一个对象,相当于一个生产对象的函数工厂,用来简化代码。

自定义构造函数

自定义构造函数比工厂方法更加简单。自定义一个创建具体对象的构造函数,函数内部不需要 new 一个构造函数的过程,直接使用 this 代替对象进行属性和方法的书写,也不需要 return 一个返回值。使用时,利用 new 关键字调用自定义的构造函数即可。注意:构造函数的函数名首字母需要大写,区别于其他普通函数名。


对象遍历

for in 循环也是循环的一种,专门用来遍历对象,内部会定义一个 k 变量, k 变量在每次循环时会从第一个开始接收属性名,一直接收到最后一条属性名,执行完后跳出循环。
简单的循环遍历:输出每一项的属性名和属性值。

// 循环遍历输出每一项
for (var k in obj) {
  console.log(k + "项的属性值是" + obj[k]); 
}

简单类型和复杂类型

基本类型又叫做值类型,复杂类型又叫做引用类型

  • 值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。
  • 引用类型:复杂数据类型,在存储时,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。

变量中如果存储的是简单类型的数据,那么变量中存储的是值本身,如果将变量赋值给另一个变量,是将内部的值复制一份给了另一个变量,两个变量之间没有联系,一个变化,另一个不会同时变化。

如果将复杂类型的数据赋值给一个变量,复杂类型的数据会在内存中创建一个原型,而变量中存储的是指向对象的一个地址,如果将变量赋值给另一个变量,相当于将地址复制一份给了新的变量,两个变量的地址相同,指向的是同一个原型,不论通过哪个地址更改了原型,都是在原型上发生的更改,两个变量下次访问时,都会发生变化。基本类型的数据作为函数的参数,符合基本类型的数据特点。


内置对象

JavaScript 的对象包含三种:自定义对象 内置对象 浏览器对象
ECMAscript 的对象:自定义对象 内置对象
使用一个内置对象,只需要知道对象中有哪些成员,有什么功能,便可直接使用。要想知道内置对象相关情况则需要参考一些说明手册,如W3C / MDN
MDN Web Docs (mozilla.org) 【推荐使用】
w3school 在线教程
Mozilla 开发者网络(MDN)提供有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。


Math 对象

Math 对象它具有数学常数和函数的属性和方法,我们可以直接进行使用,并根据数学相关的运算来找 Math 中的成员(求绝对值,取整)

属性方法 说明
Math.PI 圆周率
Math.random() 生成随机数
Math.floor() / Math.ceil() 向下取整/向上取整
Math.round() 取整,四舍五入
Math.abs() 绝对值
Math.max() / Math.min() 求最大和最小值
Math.sin() / Math.cos() 正弦/余弦
Math.power() / Math.sqrt() 求指数次幂/求平方根

Array 数组对象

创建数组对象的两种方式:

  1. 字面量方式 var arr = [];
  2. new Array() 构造函数方法 var arr = new Array();

instanceof 可以检测某个实例是否是某个对象类型。

数组对象常用方法

  1. 首尾数据操作:
方法 说明
push() 在数组末尾添加一个或多个元素,并返回数组操作后的长度
pop() 删除数组最后一项,返回删除项
shift() 删除数组第一项,返回删除项
unshift() 在数组开头添加一个或多个元素,并返回数组的新长度
  1. 合并和拆分
    concat()将两个数组合并成一个新的数组,原数组不受影响。参数位置可以是一个数组字面量、数组变量、零散的值。
    slice(start,end)从当前数组中截取一个新的数组,不影响原来的数组,返回一个新的数组,包含从 start 到 end (不包括该元素)的元素。参数区分正负,正值表示下标位置,负值表示从后面往前数第几个位置,参数可以只传递一个,表示从开始位置截取到字符串结尾。
  2. 删除、插入、替换
    splice(index,howmany,element1,element2,……)用于插入、删除或替换数组的元素
    index:删除元素的开始位置
    howmany:删除元素的个数,可以是0
    element1,element2:要替换的新的数据。
  3. 位置方法
    indexOf() 查找数据在数组中最先出现的下标
    lastIndexOf() 查找数据在数组中最后一次出现的下标
    注意:如果没找到返回-1
  4. 倒序与排序
    倒序:reverse() 将数组完全颠倒,第一项变成最后一项,最后一项变成第一项。
    排序:sort(); 默认根据字符编码顺序,从小到大排序。如果想要根据数值大小进行排序,必须添加sort的比较函数参数。该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,根据a和b的关系作为判断条件,返回值根据条件分为三个分支,正数、负数、0:
    返回值是负数-1:a排在b前面。
    返回值是正数1:a排在b后面。
    返回值是0:a和b的顺序保持不变。
    人为能控制的是判断条件。
// 添加一个比较函数的参数
arr.sort(function(a,b){
  if (a < b) {
    return -1;   //表示 a 要排在 b 前面
  } else if (a > b) {
   return 1;  //表示 a 要排在 b 后面
  } else {
    return 0;  //表示 a 和 b 保持原样,不换位置
  }
});
  1. 转字符串
    join() 通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串。
  2. 清空数组
    方式1 【推荐】arr = [];
    方式2 arr.length = 0;
    方式3 arr.splice(0, arr.length);

基本包装类型

为了方便操作简单数据类型,JavaScript 还提供了特殊的简单类型对象:String。
基本类型是没有方法的,当调用 str.substring() 等方法的时候,先把 str 包装成 String 类型的临时对象,再调用substring 方法,最后销毁临时对象。可以使用 new String() 构造函数方法创建字符串对象。


字符串

字符串是不可变的。由于字符串的不可变,在大量拼接字符串的时候会有效率问题。
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
长度属性:str.length 字符串长度指的是一个字符串中所有的字符总数。

常用方法

  1. charAt() 方法可返回指定位置的字符。
    • char:charator,字符
    • at:在哪儿
    • 参数是 index 字符串的下标。也是从 0 开始。
    • 表示返回指定的下标位置的字符。
  2. indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
    • 找到指定的子字符串在原字符串中第一次出现的位置的下标。如果子字符串在原字符串中没有,返回值是 -1
  3. concat() 方法用于连接两个或多个字符串。
    • 参数比较灵活,可以是字符串、或者字符串变量、多个字符串。
    • 生成的是一个新的字符串,原字符串不发生变化。
  4. split() 方法用于把一个字符串分割成字符串数组。
    • 参数部分是分割符,利用分割符将字符串分割成多个部分,多个部分作为数组的每一项组成数组。
    • 如果分割符是空字符串,相当于将每个字符拆分成数组中的每一项。
  5. toLowerCase() 把字符串转换为小写。toUpperCase() 把字符串转换为大写。
    • 将所有的英文字符转为大写或者小写。
    • 生成的是新的字符串,原字符串不发生变化。
  6. slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
    • 语法:slice(start,end)
    • 从开始位置截取到结束位置(不包括结束位置)的字符串。
    • 参数区分正负,正值表示下标位置,负值表示从后面往前数第几个位置,参数可以只传递一个,表示从开始位置截取到字符串结尾。
  7. substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符
    • 语法:substr(start,howmany)
    • 从开始位置截取到指定长度的字符串。
    • start 参数区分正负。正值表示下标位置,负值表示从后往前数第几个位置。
    • howmany 参数必须为正数,也可以不写,不写表示从 start 截取到最后。
  8. substring() 方法用于提取字符串中介于两个指定下标之间的字符。
    • 语法:substring(start,end)
    • 参数只能为正数。
    • 两个参数都是指代下标,两个数字大小不限制,执行方法之前会比较一下两个参数的大小,会用小当做开始位置,大的当做结束位置,从开始位置截取到结束位置但是不包含结束位置。
    • 如果不写第二个参数,从开始截取到字符串结尾。
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容