第8章 对象和数组


第8888章对象和数组 学 习要 点: 1.Object 类型 2.Array 类型 3.对 象中 的方 法 主讲教师:李炎恢 合作 网站: http://http://http://http://www.ibeifeng.comwww.ibeifeng.comwww.ibeifeng.comwww.ibeifeng.com 讲师博客: http://hi.baidu.com/http://hi.baidu.com/http://hi.baidu.com/http://hi.baidu.com/李炎恢 什 么是 对象 ,其 实就 是一 种类 型, 即引 用类 型。 而对 象的 值就 是引 用类 型的 实例 。 在 ECMAScript 中 引用 类型 是一 种数 据结 构, 用于 将数 据和 功能 组织 在一 起。 它也 常被 称做 为 类,但ECMAScript 中 却没 有这 种东 西 。虽然ECMAScript 是 一门 面向 对象 的语 言 ,却 不具 备 传统 面向 对象 语言 所支 持的 类和 接口 等基 本结 构。 一.Object Object Object Object 类型 到 目前 为止 ,我 们使 用的 引用 类型 最多 的可 能就 是 Object 类 型了 。虽 然 Object 的 实例 不 具备 多少 功能 ,但 对于 在应 用程 序中 的存 储和 传输 数据 而言 ,它 确实 是非 常理 想的 选择 。 创建Object 类 型有 两种 。一 种是 使用 new 运 算符 ,一 种是 字面 量表 示法 。 1.使用new 运 算符 创建 Object var box = new Object(); //new 方式 box.name = '李 炎恢 ';//创 建属 性字 段 box.age = 28; //创 建属 性字 段 2.new 关 键字 可以 省略 var box = Object(); //省 略了 new 关 键字 3.使 用字 面量 方式 创建 Object var box = {//字 面量 方式 name :'李 炎恢 ',//创 建属 性字 段 age : 28 }; 4.属 性字 段也 可以 使用 字符 串星 矢 var box = { 'name' :'李 炎恢 ',//也 可以 用字 符串 形式 'age' : 28 }; 5.使 用字 面量 及传 统复 制方 式 var box = {};//字 面量 方式 声明 空的 对象 box.name = '李 炎恢 ';//点 符号 给属 性复 制 box.age = 28; 6.两 种属 性输 出方 式 alert(box.age); //点 表示 法输 出 alert(box['age']); //中 括号 表示 法输 出, 注意 引号 PS: 在使 用字 面量 声明 Object 对 象时 ,不 会调 用 Object()构 造函 数 (Firefox 除外)。 7.给 对象 创建 方法 var box = { run : function (){//对 象中 的方 法 return '运行'; } } 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 :'李 炎恢 ', age : 28 }); 二.Array Array Array Array 类型 除了Object 类 型之 外, Array 类 型是 ECMAScript 最 常用 的类 型。 而且 ECMAScript 中 的Array 类 型和 其他 语言 中的 数组 有着 很大 的区 别 。虽 然数 组都 是有 序排 列 ,但ECMAScript 中 的数 组每 个元 素可 以保 存任 何类 型。 ECMAScript 中 数组 的大 小也 是可 以调 整的 。 创建Array 类 型有 两种 方式 :第 一种 是 new 运 算符 ,第 二种 是字 面量 。 1.使用new 关 键字 创建 数组 var box = new Array(); //创 建了 一个 数组 var box = new Array(10); //创 建一 个包 含 10个 元素 的数 组 var box = new Array('李 炎恢 ',28,'教师','盐城');//创 建一 个数 组并 分配 好了 元素 2.以 上三 种方 法, 可以 省略 new 关 键字 。 var box = Array(); //省 略了 new 关 键字 3使 用字 面量 方式 创建 数组 var box = [];//创 建一 个空 的数 组 var box = ['李 炎恢 ',28,'教师','盐城'];//创 建包 含元 素的 数组 var box = [1,2,]; //禁 止这 么做 , IE会 识别 3个 元素 var box = [,,,,,];//同 样, IE 的 会有 识别 问题 PS:和Object 一 样, 字面 量的 写法 不会 调用 Array()构 造函 数。 (Firefox 除外)。 4.使 用索 引下 标来 读取 数组 的值 alert(box[2]); //获 取第 三个 元素 box[2] = '学生';//修 改第 三个 元素 box[4] = '计 算机 编程 ';//增 加第 五个 元素 5.使用length 属 性获 取数 组元 素量 alert(box.length)//获 取元 素个 数 box.length = 10; //强 制元 素个 数 box[box.length] = 'JS 技术';//通过length 给 数组 增加 一个 元素 6.创 建一 个稍 微复 杂一 点的 数组 var box = [ {//第 一个 元素 是一 个对 象 name :'李 炎恢 ', age : 28, run : function (){ return 'run 了'; } }, ['马云','李 彦宏 ',new Object()],//第 二个 元素 是数 组 '江苏',//第 三个 元素 是字 符串 25+25, //第 四个 元素 是数 值 new Array(1,2,3) //第 五个 元素 是数 组 ]; alert(box); PS: 数组 最多 可包 含 4294967295 个 元素 ,超 出即 会发 生异 常。 三.对 象中 的方 法 转 换方 法 对 象或 数组 都具 有toLocaleString()、toString()和valueOf()方法。其中toString()和valueOf() 无 论重 写了 谁, 都会 返回 相同 的值 。数 组会 讲每 个值 进行 字符 串形 式的 拼接 ,以 逗号 隔开 。 var box = ['李 炎恢 ',28,'计 算机 编程 '];//字 面量 数组 alert(box); //隐 式调 用了 toString() alert(box.toString()); //和valueOf()返 回一 致 alert(box.toLocaleString()); //返 回值 和上 面两 种一 致 默 认情 况下 ,数 组字 符串 都会 以逗 号隔 开。 如果 使用 join()方 法, 则可 以使 用不 同的 分 隔 符来 构建 这个 字符 串。 var box = ['李 炎恢 ', 28, '计 算机 编程 ']; alert(box.join('|')); //李 炎恢 |28|计 算机 编程 栈 方法 ECMAScript 数 组提 供了 一种 让数 组的 行为 类似 于其 他数 据结 构的 方法 。也 就是 说, 可 以 让数 组像 栈一 样, 可以 限制 插入 和删 除项 的数 据结 构。 栈是 一种 数据 结构 (后 进先 出 ),也 就 是说 最新 添加 的元 素最 早被 移除 。而 栈中 元素 的插 入 (或 叫推 入 )和 移除 (或 叫弹 出 ), 只发 生 在一 个位 置 ——栈 的顶 部。 ECMAScript 为 数组 专门 提供 了 push()和pop()方 法。 push()方 法可 以接 收任 意数 量的 参数 ,把 它们 逐个 添加 到数 组的 末尾 ,并 返回 修改 后数 组 的长 度。 而 pop()方 法则 从数 组末 尾移 除最 后一 个元 素, 减少 数组 的 length 值 ,然 后返 回 移 除的 元素 。 var box = ['李 炎恢 ', 28, '计 算机 编程 '];//字 面量 声明 alert(box.push('盐城'));//数 组末 尾添 加一 个元 素 ,并 且返 回长 度 alert(box); //查 看数 组 box.pop(); //移 除数 组末 尾元 素 ,并 返回 移除 的元 素 alert(box); //查 看元 素 队 列方 法 栈 方法 是后 进先 出 ,而 列队 方法 就是 先进 先出 。列 队在 数组 的末 端添 加元 素 ,从 数组 的 前 端移 除元 素。 通过 push()向 数组 末端 添加 一个 元素 ,然 后通 过 shift()方 法从 数组 前端 移除 一 个元 素。 var box = ['李 炎恢 ', 28, '计 算机 编程 '];//字 面量 声明 alert(box.push('盐城'));//数 组末 尾添 加一 个元 素 ,并 且返 回长 度 alert(box); //查 看数 组 alert(box.shift()); //移 除数 组开 头元 素 ,并 返回 移除 的元 素 alert(box); //查 看数 组 ECMAScript 还 为数 组提 供了 一个 unshift()方 法, 它和 shift()方 法的 功能 完全 相反 。 unshift()方 法为 数组 的前 端添 加一 个元 素。 var box = ['李 炎恢 ', 28, '计 算机 编程 '];//字 面量 声明 alert(box.unshift('盐城','江苏'));//数 组开 头添 加两 个元 素 alert(box); //查 看数 组 alert(box.pop()); //移 除数 组末 尾元 素 ,并 返回 移除 的元 素 alert(box); //查 看数 组 PS:IE 浏 览器 对 unshift()方 法总 是返 回 undefined 而 不是 数组 的新 长度 。 重 排序 方法 数 组中 已经 存在 两个 可以 直接 用来 排序 的方 法: reverse()和sort()。 reverse() 逆 向排 序 var box = [1,2,3,4,5]; //数组 alert(box.reverse()); //逆 向排 序方 法, 返回 排序 后的 数组 alert(box); //源 数组 也被 逆向 排序 了, 说明 是引 用 sort() 从 小到 大排 序 var box = [4,1,7,3,9,2]; //数组 alert(box.sort()); //从 小到 大排 序, 返回 排序 后的 数组 alert(box); //源 数组 也被 从小 到大 排序 了 sort 方 法的 默认 排序 在数 字排 序上 有些 问题 ,因 为数 字排 序和 数字 字符 串排 序的 算法 是 一 样的 。我 们必 须修 改这 一特 征, 修改 的方 式, 就是 给 sort(参数)方 法传 递一 个函 数参 数。 这 点可 以参 考手 册说 明。 function compare(value1, value2) {//数 字排 序的 函数 参数 if (value1 < value2) {//小 于, 返回 负数 return -1; } else if (value1 > value2) {//大 于, 返回 正数 return 1; } else {//其 他, 返回 0 return 0; } var box = [0,1,5,10,15]; //验 证数 字字 符串 ,和 数字 的区 别 alert(box.sort(compare)); //传参 PS:如 果要 反向 操作 ,即 从大 到小 排序 ,正 负颠 倒即 可 。当然,如 果要 逆序 用 reverse() 更 加方 便。 操 作方 法 ECMAScript 为 操作 已经 包含 在数 组中 的元 素提 供了 很多 方法 。concat()方 法可 以基 于当 前 数组 创建 一个 新数 组 。slice()方 法可 以基 于当 前数 组获 取指 定区 域元 素并 创建 一个 新数 组 。 splice()主 要用 途是 向数 组的 中部 插入 元素 。 var box = ['李 炎恢 ', 28, '盐城'];//当 前数 组 var box2 = box.concat('计 算机 编程 ');//创 建新 数组 ,并 添加 新元 素 alert(box2); //输 出新 数组 alert(box); //当 前数 组没 有任 何变 化 var box = ['李 炎恢 ', 28, '盐城'];//当 前数 组 var box2 = box.slice(1); //box.slice(1,3),2-4 之 间的 元素 alert(box2); //28, 盐城 alert(box); //当 前数 组 splice 中 的删 除功 能: var box = ['李 炎恢 ', 28, '盐城'];//当 前数 组 var box2 = box.splice(0,2); //截 取前 两个 元素 alert(box2); //返 回截 取的 元素 alert(box); //当 前数 组被 截取 的元 素被 删除 splice 中 的插 入功 能: var box = ['李 炎恢 ', 28, '盐城'];//当 前数 组 var box2 = box.splice(1,0,'计 算机 编程 ','江苏');//没 有截 取, 但插 入了 两条 alert(box2); //在第2个 位置 插入 两条 alert(box); //输出 splice 中 的替 换功 能: var box = ['李 炎恢 ', 28, '盐城'];//当 前数 组 var box2 = box.splice(1,1,100); //截 取了 第 2条 ,替 换成 100 alert(box2); //输 出截 取的 28 alert(box); //输 出数 组 感谢收看本次教程! 本 课程 是由 北风 网 (ibeifeng.com)(ibeifeng.com)(ibeifeng.com)(ibeifeng.com) 瓢城Web Web Web Web 俱 乐部 (yc60.com)(yc60.com)(yc60.com)(yc60.com)联合提 供: 本 次主 讲老 师: 李 炎恢 我 的博 客: hi.baidu.com/hi.baidu.com/hi.baidu.com/hi.baidu.com/李 炎恢 //// 我 的邮 件 :yc60.com@gmail.comyc60.com@gmail.comyc60.com@gmail.comyc60.com@gmail.com
还剩6页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 3 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

java-man

贡献于2013-11-12

下载需要 3 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf