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(类)。

代码如下:

<script type="text/javascript">
    //对象是名/值对的集合
        var browser = {     //对象是由花括号括起来的
            name:"Firefox",
            kernel:"Gecko"
        };
</script>

代码如下:

//通过点号(.)或“[]”来访问对象的属性
    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.封装

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

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

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

封装的好处:

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

代码如下:

<script type="text/javascript"> 
            var boy = {}; //创建一个空对象
                    boy.name = "小明";//按照原型对象的属性赋值
                    boy.age = 12;

var girl = {};
                    girl.name = "小红";
                    girl.age = 10;
    </script>

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

构造函数模式

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

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

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

代码如下:

<script type="text/javascript"> 
        function Person(name,age){
                this.name = name;
                this.age = age;
        }
</script>

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

代码如下:

<script type="text/javascript"> 
        var boy = new Person("小明","12");
        var girl = new Person("小红","10");

alert(boy.name);  //小明
        alert(boy.age);   //12
</script>

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

代码如下:

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

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

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

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

代码如下:

<script type="text/javascript">
function Person(name,age){
        this.name = name;
        this.age = age;
}

Person.protype.type = "人类";

Person.protype.eat = function(){
        alert("吃米饭");
}
</script>

然后,生成实例:

代码如下:

<script type="text/javascript">
var boy = new Person("小明","12");
var girl = new Person("小红","10");

alert(boy.type);//人类
boy.eat();//吃饭
</script>

这时所有实例的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后继续添加属性。

代码如下:

<script type="text/javascript">
        /*定义一个Person类*/
        function Person(_name,_age,_salary){
            //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“
            this.Name=_name;
            //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“
            var Age=_age;
            var Salary=_salary;

//定义Person类的公开方法(特权方法),类的公开方法的定义方式
是:”this.functionName=function(){.....}“
            this.Show=function(){
   alert("Age="+Age+"\t"+"Salary="+Salary);//在公开方法里面访问类的私有属性是允许的
            }
</script>

对象在查找某个属性的时候,会首先遍历自身的属性,如果没有则会继续查找[[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() 方法可从已有的数组中返回选定的元素。
对象字面量

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

代码如下:

<script type="text/javascript">
    var company = {
        name : "Microsoft",
        ages : 39,
        employees : 99000,
        CEO : "Nadella"
    };    
</script>

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

代码如下:

<script type="text/javascript">
var dog = {
   name:"husky",
   age:2,
   run:function(){
              return "123";
}
}
alert(dog.run());//如果输入dog.run,那么会弹出它后面的function部分的代码
</script>

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 < l; 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<this.length;i++) 

if(max<this[i]) 
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();

数组方法:

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

(0)

相关推荐

  • 深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)

    继承是OO语言中的一个最为人津津乐道的概念. 许多OO语言都支持两种继承方式:接口继承和实现继承. 接口继承只继承方法签名,而实现继承则继承实际的方法. 如其所述,由于函数没有签名,在ECMAScript中无法实现接口继承. ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 1.使用对象字面量定义对象 var person={}; 使用这种方式创建对象时,实际上不会调用Object构造函数. 开发人员更喜欢对象字面量的语法. 2.有时候需要传递大量可选参数的情形时,一

  • JavaScript数组Array对象增加和删除元素方法总结

    本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shift 方法 移除数组中的第一个元素并返回该元素. arrayObj.shift( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 shift 方法可移除数组中的第一

  • JQuery $.each遍历JavaScript数组对象实例

    查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q

  • js 数组实现一个类似ruby的迭代器

    分为如下几节: ·基本实现 ·在迭代中引用原来的对象,或者直接改变数组的值而不是返回一个新数组 ·向迭代传入无限多的参数 ·基本实现 今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少,主要是要写的代码太多了,也许是js有特殊的处理数组的方式,真是我不知道而已,但是我真的想自己给js实现一个类似ruby的迭代器的东东,而且实现起来也不难,那就开始动手吧. 真的应该庆幸js是动态语言啊,如果是静态语言,实现起来很不方便(别说要我重新定义一个继承自arr

  • js使用Array.prototype.sort()对数组对象排序的方法

    本文实例讲述了js使用Array.prototype.sort()对数组对象排序的方法.分享给大家供大家参考.具体分析如下: 在讲对数组对象进行排序时,我们先来简单的了解一下Array.prototype.sort().sort方法接受一个参数--Function,function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行比较,如果是Number类型则比较值的大小.如果比较的函数中返回1则两个元素交换位置,0和-1不交换位置.先看一个例

  • javascript中Array数组的迭代方法实例分析

    本文实例讲述了javascript迭代的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: //filter() 利用指定的函数确定是否返回数组中包涵的某一项 var num = [1,2,3,4,5,6,12]; num.filter(function(item, index, array){ return (item > 2); //[3, 4, 5, 6, 12] }); //map() 返回一个数组,数组中每一项都是在原始数组中的对应项上运行传入参数的结果 var nu

  • JavaScript数组迭代器实例分析

    本文实例讲述了JavaScript数组迭代器用法.分享给大家供大家参考.具体如下: 这里注意:如果数组中有0.false."".null.NaN迭代器将会停止 function createIterator(x) { var i = 0; return function(){ return x[i++]; }; } var iterator=createIterator(['a','b','c','d','e','f','g']); var current; while(current

  • JS的数组迭代方法

    本文实例讲述了JS的数组迭代方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head lang="zh"> <meta charset="utf-8"> <title>js数组迭代</title> <meta name="renderer" content="webkit"> <script

  • js语法学习之判断一个对象是否为数组

    1,真正的数组的判断方法 javascript中最简单的声明数组方法为: var a = []; 判断是否为数组的最直接的方法为: 复制代码 代码如下: a instanceof Array //true a .constructor == Array //true 这里涉及到一个instanceof语法,instanceof是一个云算符,与"+-*/"一样,它的语法如下: result = obj intanceof class 是用来判断一个对象是否是某个class的一个实例,运算

  • JavaScript学习笔记之数组去重

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法. 下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处. 双重循环去重 这个方法使用了两个for循环做遍历.整个思路是: 构建一个空数组用来存放去重后

  • JavaScript学习笔记之数组的增、删、改、查

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 数组是JavaScript中常见的一个对象,它有一些经典的操作,比如数组的增.删.改.查.在这篇文章中主要整理这方面的相关操作方法. 增

  • JavaScript学习笔记之数组基本操作示例

    本文实例讲述了JavaScript学习笔记之数组基本操作.分享给大家供大家参考,具体如下: 一.数组定义 1.定义 vara=[1,2,3] vara=newArray(1,2,3); 2.长度 返回长度 <script> vara=[1,2,3,4,5,6]; alert(a.length); </script> 设置长度 <script> vara=[1,2,3,4,5,6]; a.length=2; alert(a); </script> 二.数组连接

  • JavaScript学习笔记之数组随机排序

    推荐阅读:JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组的增.删.改.查 JavaScript中提供了sort()和reverse()方法对数组项重新排序.但很多时候这两个方法无法满足我们实际业务的需求,比如说扑克牌游戏中的随机洗牌. 在这篇文章一起来学习如何完成上面这个示例的效果,以及一些有关于数组随机排序的相关知识. 在网上查了一下有关于数组随机排序的相关资料,都看到了Math.random()的身影.打开浏览器控制器,输入: Math.random() 从图

  • JavaScript学习笔记之数组求和方法

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 通过最近学习,越来越感觉JavaScript的强大与魅力之处,仅数组一个知识点就让我这样的初学者折腾了很久.折腾是折腾,但还是很有效果的,这几天的学习到的一些基本知识,就在自己的业务就用到了.顿感自信心爆棚,我也有一天能学会JavaScript. 别的不多说了,咱们今天一起来玩数组的求和,看看有哪些方法可以实现数组的求和. 数组方法 JavaScript中数组有很多种方法,下图能更好的向你阐述JavaScript有多少种方法,作用是啥

  • JavaScript 学习笔记二 字符串拼接

    var str="hello"; str+="world"; 实际上,这段代码在幕后执行的步骤如下: (1) 创建存储"hello"的字符串. (2) 创建存储"world"的字符串. (3) 创建存储连接结果的字符串. (4) 把str的当前内容复制到结果中. (5) 把"world"复制到结果中. (6) 更新str,使它指向结果. 每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源.如果重

  • Javascript学习笔记二 之 变量

    一.关于Javascript变量声明 在Javascript中,声明一个变量 var a=1; 也可以直接 a=1; 这两种表达是有区别的, 一个是当前作用域的局部变量,另一个则是当前作用域的全局变量: Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. 复制代码 代码如下: var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. 复制代码 代码如下: function f1(

  • Javascript学习笔记之数组的遍历和 length 属性

    尽管数组在 Javascript 中是对象,但是不建议使用 for in 循环来遍历数组,实际上,有很多理由来阻止我们对数组使用 for in 循环. 因为 for in 循环将会枚举原型链上的所有属性,并且唯一阻止的方法是使用 hasOwnProperty 来判断,这将比普通的 for 循环要慢不少. 遍历 为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 for 循环. 复制代码 代码如下: var list = [1, 2, 3, 4, 5, ...... 100000000];

  • Javascript学习笔记5 类和对象

    面向对象语言三大特点:继承,多态,封装,这三点虽然Javascript没有提供天然的语法实现,但是我们都可以通过prototype等技巧来实现,因此这种说法似乎不过分. 在Javascript中,构造对象有三种方式: 1. 首先,我们要明确一个概念,Javascript是一种弱类型的语言,一方面体现在Javascript的变量,返回类型都是没有强类型约束的,另一方面,Javascript可以为对象任意添加属性和方法.根据这个,我们可以写出这样的代码: 复制代码 代码如下: <script typ

  • JavaScript学习笔记之JS事件对象

    事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Firefox中是event: 而事件的对象,在

随机推荐