[置顶] javascript中的数组对象以及json学习笔记

1.Javascript中的数组
数组的创建
数组下标操作
数组的方法

concat join slice 不修改原数组

push pop unshift shift reverse sort splice 修改原数组

2.Javascript中简单对象的创建与属性操作
简单对象的创建
简单对象属性的添加
简单对象属性的访问
通过对象直接量的方式定义包含属性的对象

3.JSON数据格式
JSON(Javascript Object Notation)是一种轻量级的数据交换格式。
纯文本，Javascript原生支持
与XML相比：
优势实在Javascript当中解析快，操作方便，不需要使用DOM。
缺点是在服务器端，生成正确的JSON格式数据与生成XML格式数据相比，服务器端语言的辅助包成熟度较低。

4.面向对象的Javascript
类的定义
公用属性和方法的定义
原型对象

===================================================

1.Javascript中的数组

数组的创建

Java代码

<script type="text/javascript">
function arrayTest(){
//使用new Array()
var array1 = new Array();
//使用[]操作符
var array2 = [];
//创建的同时定义数组中的元素
//使用new Array()方式
var array3 = new Array(1,2,3);
//使用[]操作符
var array4 = [1,2,3];
//创建多维数组
//使用new Array()方式
var array5 = new Array(1,new Array(2,3),4);
//使用[]操作符
var array6 = [1,[2,3],4];
//数组的下标操作
//获取数组中的某元素的值
alert(array3[1]);
//设置数组中某个下标对应的元素值
array4[2] = 111;
//访问对维数组中的元素
alert(array5[1][0]);
//javascript中的数组时可以动态改变大小的，因此可以直接给一个不存在的下标设置元素值
array[99] = 100;
//数组中的方法
//concat,这个方法可以用来做数组的连接或者说合并,原数组内容不会变更,将返回一个新的数组
var array41 = array.concat(101,102,103);
var array42 = array.concat([104,105]);
var array43 = array.concat(array4);
//join,这个方法可以将数组当中的元素，按照指定的分隔符连接成字符串输出，原数组的内容不会变
var strarray431 = array43.join("");//1211112111
var strarray432 = array43.join("+");//1+2+111+1+2+111
//slice,这个放好可以返回当前数组的子数组，原始数组的内容不会改变
var slicearray1 = array43.slice(0,3);//从0下标开始,到3下标之前的元素返回新的数组[1,2,111]
var slicearray2 = array43.slice(4);//从4下标开始,到数组尾部的所有元素都返回成新的数组[2,111]
//从当前数组的倒数第二个元素开始,当前数组倒数第一个元素之前的所有内容返回一个新的数组[2]
var slicearray3 = array43.slice(-2,-1);
//push,pop,在数组尾端追加(push)或弹出(pop)元素,将会修改原数组的内容
array43.push(200);
array43.push(201,202);
array43.push([201,202]);
array43.push(array41);
var arraypop = array43.pop();
var arraypop = array43.pop();
//unshift,shift,在数组的开头进行追加(unshift)和弹出(shift)的操作,将会修改原数组的内容
array43.unshift(300);
array43.unshift(301,302);
array43.unshift([303,304]);
var arrayshift = array43.shift();
var arrayshift2 = array43.shift();
//reverse,这个方法可以翻转数组中的元素，修改原数组的内容
array43.reverse();
//sort,这个方法可以对数组中的元素进行排序，修改原数组的内容
array43.sort();//无参,是按照字母顺序对数组中的元素进行了升序的排列
array43.sort(function(a,b){
return a-b;
});//就是按照数值大小，进行一个升序的排列。如果返回的是负值，则a会出现在b的前面
array43.sort(function(a,b){
return b-a;
});//就是按照数值大小，进行一个降序的排列。
//splice,可以删除数值中的一部分元素，并且把删除的内容进行返回，原数组的内容会发生变更，还可以在制定位置添加元素
//第一个参数,删除元素开始的下标位置
//删除元素的个数
array43.splice(index,howMany,element1,elementN);
//用局部变量来接收删除的返回值，会把删除部分的内容进行返回
var splicearray1 = array43.splice(4,2);//从下标为4的元素开始,删除两个元素
var splicearray2 = array43.splice(4); //从下标为4的元素开始,直到数组末尾的所有元素都被删除
array43.splice(1,0,400,401);//从下标为1的元素之前,0表示不删除，插入400,401
array43.splice(1,0,[500,501]);//从下标为1的元素之前插入500,501
}
</script>

===================================================================

2.Javascript中简单对象的创建与属性操作

Java代码

<script type="text/javascript">
function objectTest(){
//方式1,通过new Object()
var obj1 = new Object();
//方式1,通过{}操作符
var obj2 = {};
//增加属性，使用.操作符
//使用new Array()方式
obj1.num = 1;
obj1.str = "String";
obj1.hell = function(){
alert("hello!");
}
obj2.obj = obj1;
//属性的访问，方法1，使用.操作符
alert(obj2.obj.num);
alert(obj2.obj.str);
obj1.hello();
//属性的访问，方法2，使用[]操作符
alert(obj2["obj"]["num"]);
alert(obj2["obj"]["str"]);
obj1["hello"]();
alert("");
//对象直接量定义方法，利用{}
var obj3 = {
num:1,
str:"String",
hello；function(){
alert("hello!");
}
};
}
</script>

======================================================================
3.JSON数据格式

Java代码

<script type="text/javascript">
function jsonTest(){
//JSON数据格式定义
var json1 = "[1,2,{" +
"a:123,b:'String',c:[100,101]'" +
"}]";
//javascript的一个内置方法eval(),返回回json这段数据格式所对应的javascript的数组或者对象
var jsonArray = eval(json1);
var json2 = "{" +
"a:'hello', b:[1,2,3], c:function(){ alert(\"Hi!!!\") }" +
"}";
//错误写法
//var jsonObject = eval(json2);
//正确的写法
var jsonobj = eval( "(" + json2 + ")" );
如果从服务器端返回回来的json数据格式他最终代表的是一个数组，可以直接用eval的方式对他进行执行，
返回javascript里面的一个数组。
如果从服务器端返回的json格式对应的是一个对象，我们必须要在他的外层加上括号(),
才会返回正确的对象，否则会报错。
}
</script>

======================================================================
4.面向对象的Javascript

Java代码

<script type="text/javascript">
//javascript中类的定义，需要靠function来模拟
/*
function Teacher(){
}*/
//建议采用下面的形式来定义一个js中的类，可以和普通的function进行区分
//建议类名首字母大写，以便更好的和普通的function进行区分
var Teacher = function(){
}
//定义一个Book的类,这个function还承担了模拟构造函数的工作
//在使用new操作符创建Book类的对象时，这个function中的代码会被执行
//这里面的this代表当前对象
/*
var Book = function(name){
//定义共有的属性
this.name = name;
//定义共有的方法
this.getName = function(){
return this.name;
};
this.setName = function(name){
this.name = name;
}
}*/
/*********************************************
//一种更为合适的公有属性和方法定义
var Book = function(name){
//Book.prototype.name=name;
//公有属性，在构造方法里面来定义，通过this关键字
this.name = name;
}
//Book.prototype.name="";//优先访问对象上的属性，即这里的this.name,没有才会访问(找)原型对象上的name;
//公有的方法，在原型对象上定义
Book.prototype.setName = function(name){
this.name = name;
};
Book.prototype.getName = function(){
return this.name;
};**************************************/
//一种更为合适的公有属性和方法定义
var Book = function(name){
//Book.prototype.name=name;
//公有属性，在构造方法里面来定义，通过this关键字
this.name = name;
if(typeof Book._init = "undefined"){
//公有的方法，在原型对象上定义
Book.prototype.setName = function(name){
this.name = name;
};
Book.prototype.getName = function(){
return this.name;
};
}
Book._init = true;
};
function ooTest(){
var teacher = new Teacher();
alert(teacher instanceof Teacher);
var book1 = new Book("AJAX");//这个new操作相当于创建了一个简单对象，调用了类的构造方法
var book2 = new Book("AJAX1");
alert(book1.getName());
alert(book2.getName());
book1.setName("JAVA");
alert(book1.getName());
alert(book2.getName());
//function上面都有一个原型对象
var proto = Book.prototype;
proto.str = "String";
proto.hello = function(){
alert("Hello");
};
//原型对象上定义了属性之后，拥有这个原型对象的function，
//它所模拟的类创建出的对象，就可以拥有原型对象上定义的属性
alert();
}
</script>

-----------------------------------------------------------------

Java代码

<script type="text/javascript">
//展示原型对象上定义公有属性的另一个问题
var Teacher = function(){
}
Teacher.prototype.student=[];
Teacher.prototype.addStudent = function(sname){
this.student.push(sname);
};
Teacher.prototype.showStudent = function(){
alert(this.student);
};
function oo4Test(){
var teacher1 = new Teacher();
var teacher2 = new Teacher();
teacher1.addStudent("wang");
teacher2.addStudent("lee");
teacher1.showStudent();
teacher2.showStudent();
alert();
}
</script>

转载于:https://blog.51cto.com/3001448/1205926

[置顶] javascript中的数组对象以及json学习笔记相关推荐

广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
如何检查变量是否是JavaScript中的数组？ [重复]
本文翻译自:How do you check if a variable is an array in JavaScript? [duplicate] This question already ha ...
遍历JavaScript中的数组
在Java中,可以使用for循环遍历数组中的对象,如下所示: String[] myStringArray = {"Hello", "World"}; for ...
javascript字典中添加数组_如何在JavaScript中使用数组方法：Mutator方法
JavaScript中的数组由元素列表组成.JavaScript有许多有用的内置方法来处理数组.修改原始数组的方法称为mutator方法,返回新值或表示的方法称为accessor方法.在本教程中,我们 ...
JavaScript中字符串数组赋值失败，不是每个字符串，却是字符。
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
如何在JavaScript中比较数组？
本文翻译自:How to compare arrays in JavaScript? I'd like to compare two arrays... ideally, efficiently. 我 ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
JavaScript中的数组和字符串
知识内容: 1.JavaScript中的数组 2.JavaScript中的字符串一.JavaScript中的数组 1.JavaScript中的数组是什么数组指的是数据的有序列表,每种语言基本上都有 ...
JavaScript中的数组创建
JavaScript中的数组创建本文转载自:众成翻译译者:loveky 链接:http://www.zcfy.cc/article/713 原文:http://rainsoft.io/power- ...
JavaScript中的arguments对象
JavaScript中的arguments对象 arguments 是一个类似数组的对象, 对应于传递给函数的参数. 语法 arguments 描述 arguments对象是所有函数中可用的局部变量. ...

[置顶] javascript中的数组对象以及json学习笔记

[置顶] javascript中的数组对象以及json学习笔记相关推荐

最新文章

热门文章