上一篇博客中提到了ajax并非是一种新的技术,而是几种原有技术的结合体,XMLHttpRequest对象是AJAX的核心技术,而JavaScript也起到了不小的作用,XMLHttpRequest对象我们已经介绍过了,详情请见点击打开链接,下面我将介绍JavaScript的高级知识部分


一.数组的使用

1.创建数组

(1)一维数组

//使用new Array()

var array1 = newArray();

//使用[]操作符

var array2 = [];

//创建的同时定义数组中的元素,使用new Array()方式

var array3 = newArray(1,2,3);

//使用[]操作符

var array4 = [1,3];

(2)多维数组

//使用new Array()

var array5 = newArray(1,new Array(2,3),4);

//使用[]操作符

var array6 =[1,[2,3],4];


2.元素的获取

(1)一维数组

//利用数组下标进行元素的获取

array3[1]; //获取到array3中的第二个元素

(2)多维数组

array5[1][0];


3.元素的设置

(1)一维数组

array4[2] = 111;//设置array4中的第三个元素的值为111

(2)多维数组

array5[1][0] = 222;

JavaScript中的数组是可以动态改变大小的,因此可以直接给一个不存在的下标设置元素值

array6[99] = 100;

4.数组中的方法

(1)concat

这个方法可以用来做数组的连接或者说合并,原数组内容不会变更,将返回一个新的数组

var array41 =array4.concat(101,102,103);

var array42 =array4.concat([104],[105]);

var array43 =array4.concat(array4);

(2)join

这个方法可以将数组当中的元素,按照制定的分隔符连接成字符串的输出,原数组的内容不会改变

var strarray431 =array43.join("");//返回的结果为1211112111

var strarray432 =array43.join("+");//返回的结果为1+2+111+1+2+111

(3)slice

这个方法可以返回当前数组的子数组,原数组的内容不会改变

var slicearray1 =array43.slice(0,3);//从0下标开始,到3下标之前的元素返回成新的数组,返回结果为1,111

var slicearray2 =array43.slice(4);//从4下标开始,到数组尾部的所有元素返回成新的数组,返回结果为2,111

var slicearray3 =array43.slice(-2,-1);//从当前数组的倒数第二个元素开始,到倒数第1个元素之前的所有内容,返回成新的数组,返回结果为2

(4)push,pop

在数组尾端追加(push)或删除(pop)元素,将会改变原数组的内容

array43.push(200);

array43.push(201,202);

array43.push([203,204]);

array43.push(array41);

var arraypop =array43.pop();

var arraypop =array43.pop();

(5)unshift,shift

在数组的开头进行追加(unshift)或删除(shift)的操作,将会改变数组的内容

array43.unshift(300);

array43.unshift(301,302);

array43.unshift([303,304]);

var arrayshift =array43.shift();

var arrayshift2 =array43.shift();

(6)reverse

这个方法可以翻转数组中的元素,修改原数组的内容

array43.reverse();

(7)sort

这个方法可以对数组中的元素进行排序,修改原数组的内容

array43.sort();//没有参数,是按照字母序对数组中的元素进行升序的排序

array43.sort(function(a,b){ return a - b;});//就是按照数值大小进行的一个升序的排序,如果返回的是负值,则a会出现的b前面

array43.sort(function(a,b){return b - a; });//就是按照数值大小进行了一个降序的排序

(8)splice

可以删除数组中的一部分元素,并且把删除的内容进行返回;也可以在制定的位置添加元素,原数组的内容发生改变var splicearray1 = array43.splice(4,2);//从下标为4的元素开始删除,删除2个元素

var splicearray2 =array43.splice(4);//从下标为4的元素开始删除,直到数组末尾的元素都被删除array43.splice(1,400,401);//在下标为1之前,插入400,401

array43.splice(1,[400,401]);//在下标为1之前,插入数组[400,401]

二.对象的创建与属性的操作

1.创建对象

//方式1

var obj1 = new Object();

//方式2

var obj2 = {};

2.增加属性,使用.操作符

obj1.num = 1;

obj1.str = "String";

obj1.hello = function(){alert("hello!"); }

obj2.obj = obj1;

3.属性的访问

//方法1,使用.操作符

alert("obj2.obj.num");alert("obj2.obj.str"); obj1.hello();

//方法2,使用[]操作

alert(obj2["obj"]["num"]);

alert(obj2["obj"]["str"]);

obj1["hello"]();

4.对象直接量定义方法,利用{}

var obj3 = { num:1,str:"String",hello:function(){ alert("hello"); }}


三.类

1.类的定义

function 模拟

function ClassName(){

}*/

提示:建议采用下面的形式来定义一个js中的类,可以和普通的function进行区分;建议类名首字母大写,以便更好的和普通的function进行区分

var ClassName=function(){

}

举例:

           //定义一个Book类,这个function还承担了模拟构造函数的工作
           //在使用new操作符创建Book类的对象时,这个function中的代码会被执行
           //this代表当前对象,下面执行book1的时候this指book1,执行book2的时候this指book2     
            var Book =function(name){
               //定义公有有的属性
                this.name= name;
               //定义公有的方法
               this.getName = function(){
                    returnthis.name;
                };
               this.setName = function(nname){
                   this.name = nname;
                };
            };     
            functionootest(){
               var book1 = new Book("AJAX");//这个new操作符相当于先创建了一个简单对象,调用了类的构造函数
                var book2= new Book("AJAX2");
               alert(book1.getName());
               alert(book2.getName());
               book1.setName("Java");
               alert(book1.getName());        
            }
 

改进之后的,使用上了原型,prototype

              var Book =function(name){
               //共有属性在构造方法里面定义,通过this关键字
                this.name= name;
                if(typeofBook._init ==="undefined"){
                   //共有方法在构造方法外定义,通过原型定义
                    Book.prototype.setName = function(nname){
                    this.name= nname;
                     };
                    Book.prototype.getName = function(){
                    return this.name;
                     };
                }
                Book._init= true;
            };
   
            functionootest(){  
               var book1 = new Book("AJAX");//这个new操作符相当于先创建了一个简单对象,调用了类的构造函数
               var book2= new Book("AJAX2");
               alert(book1.getName());
               alert(book2.getName());
               book1.setName("Java");
               alert(book1.getName());
          }
 

2.类的属性和方法的定义

(1)私有的属性和方法的定义及调用

                 //普通的方法
                var priObj = new function(){
                    var priname ="wang";
                    this.getName = function(){
                        return priname;
                    };
                    this.setName=function(nname){
                        priname = nname;
                    };
                };
       
               //利用匿名方法直接调用的方式,来实现一个对象拥有私有的信息
                var priObj = (function(name){
                    var priname = name;
                    return{
                        getName:function(){
                            return priname;
                        },setName:function(nname){
                            priname = nname;
                        }
                    };
                })("wang");


(2)定义公有的静态属性

            Book.staticValue = 10;
            //定义公有的静态方法
            Book.changeValue = function(){
                Book.staticValue++;
            };
 

改进之后的,使用上了原型,prototype

  var Book =function(name){
               //共有属性在构造方法里面定义,通过this关键字
                this.name= name;
                if(typeofBook._init ==="undefined"){
                   //共有方法在构造方法外定义,通过原型定义
                    Book.prototype.setName = function(nname){
                    this.name= nname;
                     };
                    Book.prototype.getName = function(){
                    return this.name;
                     };
                    Book.prototype.getCount = function(){
                    addCount();
                    return count;
                     };
                }
                Book._init= true;

(3)利用局部变量来模拟私有属性和方法

	var count= 0;
                varaddCount = function(){
                   count++;
                };
            };
    
            functionootest(){
                //根据类名反射生成对象,只知道Book,只要要传的参数"wang"
                var book =reflect("Book",["wang"]);
               alert(book.getName());
                //判断一个对象是否拥有某个属性
               //hasOwnProperty这个方法只能判断在对象上直接定义的属性,对于继承来的属性不能直接判断
                var bool =book.hasOwnProperty("name");
               alert(bool);
                //需要有一个替代方法,让getName这种继承的属性也能被判断
                var bool2 =book.hasProperty("getName");
               alert(bool2);
               
               //遍历book对象上的所有属性
                for(varproName in book){
                   alert(book[proName]);
                }
               
               //如果我们需要获得一个对象上,所有属性值不是function的属性
                varproArray = [];
                for(varproName in book){
                    vartemp = book[proName];
                   if(typeof temp !== "function"){
                       proArray.push(proName);
                    }
                }
               alert(proArray);

四.创建命名空间

1.方法:createNameSpace("SpaceName");

我想再创建一个Book类,为了避免与刚刚创建的Book冲突,因此需要一个命名空间,使新建的Book在此命名空间中,它就相当于一个包,也可以理解为 这两个Book类的路径不一样了.

  //我需要一个叫做com.wang的命名空间,然后这个Book类属于这个命名空间
    createNameSpace("com.wang");
  //定义com.wang这个命名空间上的 Book类
   com.wang.Book = function(){
                    
     }
   varcomwangBook = new com.wang.Book ();
               
   };    

2.创建命名空间上的辅助方法

functioncreateNameSpace(nameSpace){
                 //com.wang,如果需要建立命名空间,实际上就是要保证有一个com的对象,并且com中有一个wang的属性值,这个属性值也是一个对象
                  varattrs = nameSpace.split(".");

(1)判断根节点对象是否存在,不存在才进行创建

                 var obj;
                  try{
                      obj= eval(attrs[0]);
                 }catch(e){
                     window[attrs[0]] = [];
                      obj= window[attrs[0]];
                  }

(2)对根节点对象(命名空间)下面的子孙对象进行逐一的遍历判断,如果不存在,就进行创建

   for (vari = 1;i<attrs.length ; i++){
                    if(obj[attrs[i]] === undefined){
                        obj[attrs[i]] = {};
                     }
                    
                    //修改当前对象,继续进行遍历
                     obj =obj[attrs[i]];
                 }
              }

(3)扩展Object类的方法,判断当前对象是否有某个属性

  Object.prototype.hasProperty=function(){
                   return(this && this[proName])!== undefined;
                }

(4)反射创建对象方法

    //第一个参数是类名
          //第二个参数是创建对象需要的所有参数组成的数组
           functionreflect(className,args){
               try{
                  //如何把字符串类型的className转换成对应的一个函数
                   varrClass = eval(className);
                  //为了创建对象需要的所有参数在一个数组里面["1","2"];
                  //最终我们调用new创建的时候,参数表的写法应该("1","2");
                   varoargs = args.join(",");
                   var obj= new rClass(oargs);
                   returnobj;
               }catch(e){
                   returnnull;
               }         
           }
 

以上为JavaScript中的一些知识,其实都是最基础的,与之前的学习进行对比,好多地方也是相似的,上面提到的类的创建的,还有他的一些属性,方法,不管是私有的还是公有的,都是模拟的,貌似它的很多东西都是模仿来的,以后的学习还需要不断的总结分析,不能与之前的脱了干系,JavaScript也是面向对象,与C#的面向对象编程学习也有很多不同之处,需要对比学习,这些东西还需要不断的学习.

AJAX与JavaScript脚本语言的更多相关文章

  1. html5使用canvas实现弹幕功能示例

    这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下

  2. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. ios – parse.com用于键,预期字符串的无效类型,但是得到了数组

    我尝试将我的数据保存到parse.com.我已经预先在parse.com上创建了一个名为’SomeClass’的类.它有一个名为’mySpecialColumn’的列,其数据类型为String.这是我尝试使用以下代码保存数据的代码:如果我运行这个我得到:错误:密钥mySpecialColumn的无效类型,预期字符串,但得到数组这就是我在parse.com上的核心外观:有谁知道我为什么会收到这个错误?

  5. ios – NSArray indexOfObject返回nil

    任何想法为什么我不能得到一个我确定在数组中存在的对象的索引?相反,我没有……

  6. ios – 上下文类型’NSFastEnumeration’不能与数组文字一起使用

    斯威夫特3,你会这样做吗?解决方法正如您所发现的,您不能使用as-casting将数组文字的类型指定为NSFastEnumeration.您需要找到一个符合NSFastEnumeration的正确类,在您的情况下它是NSArray.通常写这样的东西:

  7. ios – 搜索数组swift中的对象

    我正在尝试使用UISearchController创建搜索功能.但是,我似乎无法使其与我的团队对象一起工作.我首先创建了一个包含id,name和shortname的TeamObject.然后我从一个url中检索teamData,并将TeamObjects添加到一个填充到tableView中的数组中.这个tableView包含一个searchController,它假设过滤数据,但没有任何反应.阵列

  8. ios – 获取资产目录文件夹中所有图像的数组

    在iOS中,是否可以获取资产目录文件夹中的图像数组?我不确定为什么会对此进行投票.我真的不知道从哪里开始.我的另一种方法是创建文件夹中所有文件的plist,但它似乎是多余的.我无法添加任何代码,因为我会添加什么?

  9. ios – 来自调试器的消息:由于内存问题而终止

    我的应用程序使用Geojson文件.我使用MapBoxSDK将MGLpolyline添加到地图中.但问题是我的文件太大,以至于应用程序崩溃并收到错误:来自调试器的消息:由于内存问题而终止.我在第一次循环时面对66234个对象.我试图将数组块化为新数组,但没有成功.请帮我解决问题.这是我在地图上绘制的代码,这里是我的testprojectongithubuseXcode8.1如果有任何不同的第三方可

  10. ios – Swift – 使用字典数组从字典访问数据时出错

    我有一个非常简单的例子,说明我想做什么基本上,我有一个字典,其值包含[String:String]字典数组.我把数据填入其中,但当我去访问数据时,我收到此错误:Cannotsubscriptavalueoftype‘[([String:String])]?’withanindexoftype‘Int’请让我知道我做错了什么.解决方法您的常量数组是可选的.订阅字典总是返回一个可选项.你必须打开它.更

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部