JavaScript 中的对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
JavaScript 允许自定义对象。
(一)数组
数组对象的作用是:使用单独的变量名来存储一系列的值。
创建数组创建数组,为其赋值,然后输出这些值。
For...In 声明使用 for...in 声明来循环输出数组中的元素。
合并两个数组 - concat()如何使用 concat() 方法来合并两个数组。
用数组的元素组成字符串 - join()如何使用 join() 方法将数组的所有元素组成一个字符串。
文字数组 - sort()如何使用 sort() 方法从字面上对数组进行排序。
数字数组 - sort()如何使用 sort() 方法从数值上对数组进行排序。
1、数组的基本概念
数组 是在内存空间中连续存储的一组有序数据的集合。 元素在数组中的顺序,称为下标。可以使用下标访问数组的每个元素。 2、如何声明一个数组? ① 使用自变量声明:var arr=[] 在JS中同一数组可以存储各种数据类型。 ② 使用new关键字声明 、;var arr=new Array(参数); 参数可以是: a. 参数省略表示创建一个空数组 b. 参数直接放一个整数,表示声明一个数组的长度为指定长度的数组 但是length可以随时可变,可增加。 c. 参数为逗号分隔的多个数值,表示数组的多个值。 new array() ==[1,2,3] 3、数组中元素的读写/增删? 1.读写;通过下标访问元素。下标从0开始 arr[1]="we2e212123123" 2.增删;i. 使用delete关键字,删除数组的某一个值,删除之后数组的长度不变 对应 位置变为undefined。 例:delete arr[1]; ii. 使用arr.pop()删除数组中的最后一个值。相当于 arr.length -= 1 ; iii. 使用arr.shift()删除数组的第一个值。 f . 使用arr.unshift(值) 在数组的开头新增一个值; ff. 使用arr.push(值) 在数组的最后一个位置新增一个值; fff. 使用arr[数值] 直接访问数组没有达到的下标,可以动态追加; 例 arr[100]="1" 中间如果有空余下标将存入undefined; 4、数组中的其他方法(重要) 1 .join("符号")将数组用指定分隔符链接为字符串,当参数为空时,默认用逗号分隔; 2. cincat():【原数组不会被改变】将数组与两个或多个数组的值,连接为新数组; concat()连接时,如果有二维数组,则至多能拆一层[] [1,2].concat([3,4],[5,6]) ->[1,2,3,4,5,6] [1,2].concat([3,4,[5,6]]) ->[1,2,3,4,[5,6]] 3. .pop()删除数组中的最后一个值。相当于 arr.length -= 1 ; 返回被删除的值 .push(值) 在数组的最后一个位置新增一个值; 返回新数组长度 .shift()删除数组的第一个值。 .unshift(值) 在数组的开头新增一个值; !!!上述方法会改变原数组的值 4. reverse()原数组被改变,将数组反转倒叙输出。 5. slice(begin,end) 原数组不会被改变, 截取数组中的某一部分,并返回新数组, 》>>传入一个参数,表示开始区间,默认将截取到数组最后; 》》 传人两个参数,表示开始和结束的下标(包含begin不含end) ; 》》 两个参数可以为负数,表示从右边开始数,最后一个值为-1; !!! 6. sort():【原数组被改变】将数组进行升序排列。 i. 默认情况下,会按每个元素首字母ASCII码值进行排列 [3,1,5,12] -> [1,12,3,5] ii.可以传人一个比较函数,手动指定排序的函数算法; 函数将默认接收两个值a,b 如果函数返回值>0,则证明a>b. 7. indexOf(value,index):返回数组中第一个value所在的下标,如果没有找到 返回-1; lastIndex (value,index):返回数组中最后一个value所在的下标,如果没有找到 返回-1; >>>如果没有指定index,则表示全数组查找value; >>>如果指定了index,则表示从index开始,向后查找value。 8. forEach() 【IE8之前不支持】专门用于循环遍历数组,接收一个回调函数,回调函数接收两个参数, 第一个为数组每一个值,第二个为数组下标; num.forEach(function(item,index){ }) 9. map() 对数组的每一个值进行一一映射 ,使用方法与foreach相同。 但是map有返回值,表示将原数组的每一个值操作后 ,返回一个新数组; var num1=num.map(function(item,index){ return item-1 }) 5、二维数组与稀疏数组(了解) 1. 二维数组:数组中 值,依然是一个数组形式。 eg: arr=[[1,2,3],[4,5]] 读取二维数组 arr[i][j] 行、列 2.稀疏数组:数组中的索引是不连续的。(length要比数组中实际的元素个数大) 6、基本数据类型和引用数据类型 1. 基本数据类型赋值时是将原变量中的值赋给另一个变量,修改其中一个,相互不影响。 2. 引用数据类型 赋值时是将原变量在内存中 的地址赋值给另一个变量,赋值完成后, 两个变量中存储的是同一个内存地址,访问的是同一个数据,修改其中一个另一个也会变化。 3. 数值型,字符串,布尔型等变量属于 基本数据类型 数组,对象 属于引用数据类型。
对象
自定义对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
创建 JavaScript 对象实例
一旦您有了对象构造器,就可以创建新的对象实例,就像这样:
var myFather=new person("Bill","Gates",56,"blue");var myMother=new person("Steve","Jobs",48,"green");
把属性添加到 JavaScript 对象
您可以通过为对象赋值,向已有对象添加新属性:
假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:
person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";x=person.firstname;
在以上代码执行后,x 的值将是:
Bill
把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法:
function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;this.changeName=changeName;function changeName(name){this.lastname=name;}}
changeName() 函数 name 的值赋给 person 的 lastname 属性。
JavaScript 事件参考手册
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。
FF: Firefox, N: Netscape, IE: Internet Explorer
属性 | 当以下情况发生时,出现此事件 | FF | N | IE |
---|---|---|---|---|
onabort | 图像加载被中断 | 1 | 3 | 4 |
onblur | 元素失去焦点 | 1 | 2 | 3 |
onchange | 用户改变域的内容 | 1 | 2 | 3 |
onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
onfocus | 元素获得焦点 | 1 | 2 | 3 |
onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
onmousemove | 鼠标被移动 | 1 | 6 | 3 |
onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
onreset | 重置按钮被点击 | 1 | 3 | 4 |
onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
onselect | 文本被选定 | 1 | 2 | 3 |
onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
onunload | 用户退出页面 | 1 | 2 | 3 |