JavaScript基础笔记:对象和数组

对象是一种类型,即引用类型。而对象的值就是引用类型的实例。在ECMAScirpt中引用类型是一种数据类型,用于将数据和功能组织在一起。常被称为类。但ECMAScript并没有这种东西。ECMAScirpt是一种面向对象的语言,却不具备传统面向对象语言所支持的类和接口等基本结构。

一、Object类型

创建Object类型有两种方式。一种是使用new运算符,一种是字面量表示法。

1.使用new运算符创建Object

1 var box = new Object();    // new 方式
2 box.name = ‘xxyh‘;        // 创建属性字段
3 box.age = 19;                // 创建属性字段

2.new 关键字可以省略

var box = Object();        // 省略了new关键字

3.使用字面量方式创建Ojbect

var box = {
    name:‘xxyh‘,
    age:19
};

4.属性字段也可以使用字符串形式

var box = {
    ‘name‘:‘xxyh‘,
    ‘age‘:19
};

5.使用字面量及传统复制方式

var box = {};
box.name = ‘xxyh‘;
box.age = 28;

6.两种属性输出方式

alert(box.age); // 点表示法输出
alert(box[‘age‘]);  // 中括号表示法输出,注意引号

7.给对象创建方法

var box = {
    run:function() {        // 对象中的方法
        return ‘run方法运行……‘;
    }
}
alert(box.run());   // 调用对象中的方法

8.使用delete删除对象属性

delete box.name;    // 删除属性

在实际开发过程中,一般我们更加喜欢字面量的声明方式。因为它清晰,语法代码少,而且还给人一种封装的感觉。字面量也是向函数传递大量可选参数的首选方式。

function box(obj) {     // 参数是一个对象
    if (obj.name != undefined)
        alert(obj.name);
    if (obj.age != undefined)
        alert(obj.age);
}
box({           // 调用函数传递一个对象
    name:‘xxyh‘;
    age:19
});

二、Array类型

ECMAScript中的 Array 类型与其他语言中的数组类型有很大的区别。虽然数组都是有序排列,但ECMAScript中的数组每个元素可以保存任何类型。ECMAScript中数组的大小也是可以调整的。 
  创建Array类型的方式:第一种是new运算符,第二种是字面量。

1.使用 new 关键字创建数组(new关键字可以省略)

var box = new Array();        // 创建一个数组
var box = new Array(10);    // 创建一个包含10个元素的数组
var box = new Array(‘xxyh‘, 5, ‘菜鸟程序员‘, ‘魔都‘);    // 创建一个数组并分配好了元素

2.使用字面量方式创建数组

var box = [];
var box = [‘xxyh‘, 5, ‘菜鸟程序员‘, ‘魔都‘];
var box = [1,2,];   // 禁止,IE会识别出3个元素
var box = [,,,,,];  // IE会有识别的问题

PS:和Object一样,字面量的写法不会调用 Array()构造函数

3.使用索引下标来读取数组的值

alert(box[2]);        // 获取第三个元素,元素下标从0开始
box[2] = ‘很菜的程序员‘;    // 修改第三个元素
box[4] = ‘半路出家的菜鸟‘;    // 增加第五个元素

4.使用length属性获取数组元素量

alert(box.length);    // 获取元素个数
box.length = 10;    // 强制元素个数
box[box.length] = ‘正在学习JS‘;    // 通过length给数组增加一个元素

5.创建多维数组

var box = [
        {
            name:‘xxyh‘,
            age:25,
            run:function() {
                return ‘我要return了啊‘;
            }
        },
        [‘阿里巴巴‘,‘度娘‘, new Object()],    // 第二个元素是数组
        ‘江苏‘,       // 第三个元素是字符串
        1+1,        // 第四个元素是数值
        new Array(1,2,3)    // 第五个是数组
];
alert(box);

三、对象中的方法

转换方法

对象或数组都具有toLocaleString()、toString()和valueOf()方法。其中toString()和valueOf()无论重写了谁,都会返回相同的值。数组会讲每个值进行字符串形式的拼接,以逗号隔开。

var box = [‘xxyh‘, 25, ‘菜鸟‘];       // 字面量数组
alert(box);                     // 饮食调用了toString()
alert(box.toString());          // 和 valueOf()返回一致
alert(box.toLocaleStrign());    // 返回值和上面两种一致

默认情况下,数组字符串都会以逗号隔开。如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。

var box = [‘xxyh‘, 25, ‘半路出家的菜鸟‘];
alert(box.join[‘|‘]);   // xxyh|25|半路出家的菜鸟
栈方法

    

ECMAScript数组提供了一种可以让数组像栈一样限制插入和删除项的数据结构。栈是一种数据结构(先进后出)。ECMAScript为数组专门提供了push()pop()方法。

push()方法可以接收任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一个元素,减少数组的长度,然后返回移除的元素。

var box = [‘xxyh‘, 25, ‘菜鸟码农‘];     // 字面量声明
alert(box.push(‘魔都‘));              // 数组末尾添加一个元素,并返回长度
alert(box);                             // 查看数组
box.pop();                              // 移除数组末尾元素,并返回移除的元素
alert(box);                             // 查看元素
队列方法


队列方法是先进先出。对列在数组的末端添加元素,在数组的前端移除元素。通过push()向数组末端添加一个元素,通过shift()方法从前端移除数组元素

var box = [‘xxyh‘, 24, ‘菜鸟‘];       // 字面量声明
alert(box.push(‘上海‘));              // 数组末尾添加一个元素,并返回长度
alert(box);                         // 查看数组
alert(box.shift());                 // 移除数组开头元素,并返回移除的元素
alet(box);                          // 查看数组

ECMAScript还提供了一个unshift()方法,它和shift()的功能完全相反,unshift()方法为数组的前端添加一个元素。

var box = [‘xxyh‘, 24, ‘菜鸟‘];       // 字面量声明
alert(box.unshift(‘上海‘,‘中国‘));  // 数组开头添加两个元素
alert(box);                         // 查看数组
alert(box.pop());                   // 移除数组末尾元素,并返回移除的元素
alert(box);                         // 查看数组
重排序方法

数组中已经存在两个可以直接用来排序的方法:reverse()和sort()。

reserve() 逆向排序

var box = [1,2,3,4,5];          // 数组
alert(box.reverse());           // 逆向排序,返回排序后的数组
alert(box);                     // 原数组也被逆向排序了,说明是引用
sort() 从小到大排序
var box = [4,3,5,8,6];
alert(box.sort());          // 从小到大排序,返回排序后的数组
alert(box);                 // 原数组也被从小到大排序了
sort方法在默认排序的数字排序上有些问题,因为数字排序和数字字符排序的算法是一样的。我们必须修改这一特征,修改的方式,就是给sort(参数)方法传递一个函数参数。
function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
var box = [0, 1, 5, 10, 15];
alert(box.sort(compare));
操作方法

concat()方法可以基于当前数组创建一个新数组。slice()方法可以基于当前数组获取指定区域的元素并创建一个新数组,splice()主要用于向数组的中部插入元素。

var box = [‘xxyh‘, 24, ‘上海‘];       // 当前数组
var box2 = box.concat(‘在路上‘);   // 创建新数组,并添加新元素
alert(box2);                        // 输出新数组
alert(box);                         // 当前数组无变化

var box = [‘xxyh‘, 18, ‘上海‘];       // 当前数组
var box2 = box.slice(1);            // box.slice(1,3), 2-4之间的元素
alert(box2);                        // 18,上海
alert(box);                         // 当前数组

splice中的删除功能:

var box = [‘xxyh‘, 18, ‘上海‘];
var box2 = box.splice(0,2);         // 截取前两个元素
alert(box2);                        // 返回截取的元素
alert(box);                         // 当前数组被截取的元素被删除
splice中的插入功能:
var box = [‘xxyh‘, 18, ‘上海‘];
var box2 = box.splice(1, 0, ‘程序猿‘, ‘上海‘);   // 没有截取,但插入两条
alert(box2);                                    // 在第2个位置插入两条
alert(box);                                     // 输出
splice中的替换功能:
var box = [‘xxyh‘, 18, ‘上海‘];
var box2 = box.splice(1,1,100);             // 截取第二条,替换成100
alert(box2);                                // 输出截取的28
alert(box);                                 // 输出数组
时间: 2024-12-22 15:34:26

JavaScript基础笔记:对象和数组的相关文章

js 基础知识 对象与数组

对象是一种无序属性的集合,每个属性都有自己的名字和值. 对象的创建有很多种,我在第一章已经说过了. 如何遍历一个对象: var x;var txt="";var person={fname:"Bill",lname:"Gates",age:56}; for (x in person)       //x其实是一个变量,代表的是person对象的属性{txt=txt + person[x];              //person[属性]  等

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

Javascript 基础常用对象介绍

数组 类型( 栈  &&  队列 ) 1)var arr = new Array():括号中的长度可以不指定,原因就是js中的数组长度是可以动态改变的 2)类似于java中的list容器,长度可变(arr.length=num),元素类型任意. 3)arr.push( obj , obj , ..... ) ; 通过 push 可以往数组中添加任意多个元素: 类似栈中添加元素 4)arr.pop( ) ; 通过pop可以删除数组中最顶端的元素.类似栈中的删除元素 5)arr.unshift

JavaScript 基础回顾——对象

JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中,对象被定义为无序属性的集合,属性可以是任何类型的值,包括其他对象或函数.函数作为属性值时称为“方法”,即对象的行为. (1)对象常用的内部属性 对象的内部属性是由JavaScript 规范定义的,由运行代码的系统来访问.对象常用的内部属性: prototype        对象        获

JavaScript学习笔记——对象知识点

javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 2.javascript属性遍历 for in 二.内存分布 三.对象的特性之封装 把对象所有的组成部分组合起来,尽可能的隐藏对象的部分细节,使其受到保护. 只保留有限的接口和外部发生联系. 一.工厂函数 二.构造函数 三.prototype方法 四.混合方法

JavaScript学习笔记——对象基础

javascript对象基础 一.名词解释: 1.基于对象 一切皆对象,以对象的概念来编程. 2.面向对象编程(oop Object oriented programming) A.对象 就是人们要研究的任何事物,不仅能表示具体事物,还能表示抽象的规则,计划或事件. 属性的无序集合,每个属性可以存一个值(原始值,对象,函数) B.对象的属性和行为 属性:用数据值来描述他的状态 行为:用来改变对象行为的方法 C.类 具有相同或相似的性质的对象的抽象就是类.对象的抽象,就是类,类的具体化(实例化)

学习笔记:javascript内置对象:数组对象

1.数组对象的创建 1.设置一个长度为0的数组 var myarr=new array(); 2.设置一个长度为n的数组 var myarr=new arr(n); 3.声明一个赋值的指定长度的数组 var myarr=new myarr(1,2,3,4,5,6); 4.为数组元素赋值 arr[i]=值 变量名=数组变量[i]; 5.删除数组元素 delete myarr[1]; 2.常用函数 方法 描述 concat() 连接两个或更多的数组,并返回结果. join() 把数组的所有元素放入一

JavaScript学习笔记3之 数组 &amp; arguments(参数对象)&amp; 数字和字符串转换 &amp; innerText/innerHTML &amp; 鼠标事件

一.Array数组 1.数组初始化(Array属于对象类型) 1 /*关于数组的初始化*/ 2 //1.创建 Array 对象--方法1: 3 var arr1=[]; 4 arr1[0]='aa';//给数组元素赋值 5 arr1[1]='bb'; 6 arr1[2]='cc'; 7 arr1[3]='dd'; 8 console.log(arr1);//["aa","bb","cc","dd"] 9 //1.创建 Arra