搜索
首页web前端js教程javascript学习笔记(二)数组和对象部分_基础知识

javascript对象部分

一:基础部分

1.JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined。

2.Jscript 支持四种类型的对象:内部对象、生成的对象、宿主给出的对象(所有BOM和DOM对象都是宿主对象。)以及 ActiveX 对象(外部组件)。

3.Microsoft Jscript 提供了 11 个内部(或“内置”)对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及 String 对象。

4.对象只是一种特殊的数据。对象拥有属性和方法。 JavaScript 是面向对象的语言,但 JavaScript 不使用类。 JavaScript 基于 prototype,而不是基于类的。

5.属性:是隶属于某个特定对象的变量。方法:是只有某个特定对象才能调用的函数。

6.Jscript 对象是属性和方法的集合。一个方法就是一个函数,是对象的成员。属性是一个值或一组值(以数组或对象的形式),是对象的成员。

7.javascript对象是基于构造器函数的,使用构造器函数创建一个新对象时,就可以说是实例化了一个新对象。属性是构造器函数内部的变量。

使用构造器函数实例化的对象:

cat = new Animal();
8.Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

复制代码 代码如下:


复制代码 代码如下:

 //通过点号(.)或“[]”来访问对象的属性
    browser.name         //"Firefox"
    browser["kernel"]   //"Gecko"

对象(objct)是属性(property)的集合,每个属性都由“名/值对”构成,js同样定义了一个特殊的对象——数组,它是带有编号的值的有序集合。js还定义了一个特殊的对象——函数,函数是具有与他相关联的可执行代码的对象,通过调用函数来执行代码,并返回运算结果。

理清概念:
JS中"基于对象=面向对象"4.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象"

二:类(原型对象)和对象(实例)的区别与联系###  

1.类(原型对象)是抽象,是概念的,代表一类事物。
 2.对象是具体的,实际的,代表一个具体的事物。
   3.类(原型对象)是对象实例的模板,对象实例是类的一个个体。
一个常见的误解是数字的字面值(literal)不是对象。这是因为 JavaScript 解析器的一个错误,它试图将点操作符解析为浮点数字面值的一部分。

有很多变通方法可以让数字的字面值看起来像对象。

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算
删除属性

删除属性的唯一方法是使用 delete 操作符;设置属性为 undefined 或者 null 并不能真正的删除属性,而仅仅是移除了属性和值的关联。

JavaScript面向对象三大特征

封装:不考虑内部实现,只考虑功能使用
继承:从已有对象上,继承出新的对象
多态:所谓多态,就是指一个引用在不同情况下的多种状态,
1.封装

封装就是要把属于同一类事物的共性(包括属性与行为)归到一个类中,以方便使用.比如人这个东东,可用下面的方式封装:

人{
年龄(属性一)
身高(属性二)
性别(属性三)

做事(行为之一)
走路(行为之二)
说话(行为之三)
}

封装的好处:

封装保护了内部数据的完整性;
封装使对象的重构更轻松;
弱化模块间的耦合,提高对象的可重用性;
有助于避免命名空间冲突;
看下面一个例子:

复制代码 代码如下:

 

这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。

构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

比如boy和girl的原型对象现在就可以这样写:

复制代码 代码如下:


我们现在就可以生成实例对象了。

复制代码 代码如下:


这时Boy和girl会自动含有一个constructor属性,指向它们的构造函数。
 

复制代码 代码如下:

alert(boy.constructor == Person); //true

 alert(girl.constructor == Person); //true


Prototype模式 Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

复制代码 代码如下:


然后,生成实例:

复制代码 代码如下:


这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

alert(boy.eat == girl.eat); //true
原型属性是一个内置属性,它指定了对象所扩展的构造器函数。
下面的代码为Animal构造器函数添加一个新的属性size,这个新属性是cat对象的原型属性。通过使用原型属性,所有扩展Animal构造器函数的对象就可以访问size属性

cat = new Animal("feline","meow", "walk/run");
cat.prototype.size = "fat";
在这种情况下,所有的Animal对象的size属性都是“fat”。原型默认为Object的新实例, 由于仍是对象, 故可以给该对象添加新的属性。就好像style是javascript的一个对象一样,也可以往style后继续添加属性。

复制代码 代码如下:

 

对象在查找某个属性的时候,会首先遍历自身的属性,如果没有则会继续查找[[Prototype]]引用的对象,如果再没有则继续查找[[Prototype]].[[Prototype]]引用的对象,依次类推,直到[[Prototype]].….[[Prototype]]为undefined(Object的[[Prototype]]就是undefined)

简单说就是通过对象的[[Prototype]]保存对另一个对象的引用,通过这个引用往上进行属性的查找,这就是原型链。

全局的window对象

JavaScript中的任何一个全局函数或变量都是window的属性。
self对象与window对象完全相同,self通常用于确认就是在当前的窗体内。

 window的主对象主要有如下几个:

JavaScript document 对象
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象
几个常用方法

valueof()方法:返回指定对象的原始值
split() 方法将字符串分割为字符串数组,并返回此数组。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。  
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。 
join()方法用于把数组中的所有元素放入一个字符串。
arrayObject.join(分隔符)
reverse() 方法用于颠倒数组中元素的顺序。  
slice() 方法可从已有的数组中返回选定的元素。
对象字面量

对象字面量是用于创建包含大量属性的过程,

复制代码 代码如下:


这里需要注意的是属性和属性值以冒号(:)隔开;多个属性用逗号(,)隔开。对象字面量亦可以定义方法,只需在这个对象的属性上写上function就行,这是一个匿名函数,调用它只需要写上他的方法名()即可。

复制代码 代码如下:


javascript数组部分

1.Array 对象

Array 对象:提供对创建任何数据类型的数组的支持。

复制代码 代码如下:

arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

定义:var arr = [2,3,45,6];     var arr = new Array(2,4,5,7)
两者是定义没有任何差别,[]的性能高,因为代码短。

使用数组和对象字面量:var aTest = [];创建数组时,使用数组字面量是个好选择;类似的,对象字面量也可用于节省空间。以下两行是相等的,但是使用对象字面量的更加简短:

 var oTest = new Object;  //尽量不用
 var oTest = { };    //最好的选择,或者var 0Test = [ ];
遍历为了达到遍历数组的最佳性能,推荐使用经典的 for 循环。

复制代码 代码如下:

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i     console.log(list[i]);
}

上面代码有一个处理,就是通过 l = list.length 来缓存数组的长度。

Array 构造函数

由于 Array 的构造函数在如何处理参数时有点模棱两可,因此总是推荐使用数组的字面语法 - [] - 来创建数组。

因此下面的代码将会使人很迷惑:

new Array(3, 4, 5); // 结果: [3, 4, 5]
new Array(3) // 结果: [],此数组长度为 3
应该尽量避免使用数组构造函数创建新数组。推荐使用数组的字面语法。它们更加短小和简洁,因此增加了代码的可读性。

Array数组的属性

Array数组的3个属性:length属性、prototype属性、constructor属性

1.length属性

Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。

2.prototype属性

返回对象类型原型的引用。prototype属性是object共有的。

对于Array数组对象,以以下例子说明prototype属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入Array.prototype,并使用它。

复制代码 代码如下:

function array_max() 

var i,max=this[0]; 
for(i=1;i
if(max max=this[i]; 

return max; 

Array.prototype.max=array_max; 
var x=new Array(1,2,3,4,5,6); 
var y=x.max(); 

该代码执行后,y保存数组x中的最大值,或说6。

3.constructor属性

表示创建对象的函数。说明:constructor属性是所有具有prototype的对象的成员。它们包括除Global和Math对象以外的所有JScript固有对象。constructor属性保存了对构造特定对象实例的函数的引用。

例如:

复制代码 代码如下:

x = new String("Hi"); 
if(x.constructor==String) //进行处理(条件为真)。 
//或 
function MyFunc{ 
//函数体。 

y=new MyFunc; 
if(y.constructor==MyFunc)//进行处理(条件为真)。


对于数组来说:

y = new Array();

数组方法:

附上一张数组的思维导图:

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境