JavaScript基本知识点(中)

一、数组的分类

按照维数可分为一维数组、二维数组、三维数组...

1.1二维数组创建

<script>
    var stuInfo = [
        ['张三','男',18],
        ['李四','女',18]
    ]
</script>

1.2二维数组元素访问

语法：数组名称[外层数组下标][内层数组下标]

<script>
    //只获取李四
    stuInfo[1][0]
</script>

1.3二维数组遍历

<script>
    //遍历的外层数组
    for(var i=0;i<stuInfo.length;i++){
        //console.log(stuInfo[i]);
        //遍历内层数组
        for(var j=0;j<stuInfo[i].length;j++ ){
            document.write(stuInfo[i][j]);
        }
        //表示内层数组遍历结束,输出换行
        document.write('<br>')
    }
</script>

---

二、对象

万物皆对象

类是具有相同或相似属性和功能(方法)的这些事物，统称为一类

php中的对象：实例化(new)

javascript中的对象：自定义对象、内置对象、浏览器对象

2.1 字面量创建对象

对象里边只有属性和方法，属性和方法是以键值对的形式存在，键和值之间用冒号: 隔开

对象(object)中的字面量 指的是 花括号 {}

var 对象的名称 = {

        //属性 可以理解为变量名

        属性名:属性值,

        //方法 可以理解为函数

        方法名:function(){}

}

var person = {
    gongHao:'HS001',
    name:'王平',
    money:1500,
    skill:function(){
        console.log('working ....');
    }
}

对象属性的调用

语法： 对象名.属性名

<script>
    //在浏览器上边输出: 王平的工号是HS001,工资是1500
    document.write(person.name+'的工号是'+person.gongHao+',工资是'+person.money)
</script>

对象属性值的修改

语法：对象名.属性名 = 要修改的值

<script>
    //将name属性的值修改为 刘美
    person.name='刘美'
</script>

对象中方法的调用

语法：对象.方法名称()

<script>
    //方法调用
    person.skill()
</script>

2.2 利用new Object创建对象

语法： new Object()

<script>
    var andy = new Object();
    andy.name = 'pink';
    andy.age = 18;
    andy.sex = '男';
    andy.sayHi = function(){
        alert('大家好啊~');
    }
</script>

2.3 利用构造函数创建对象

构造函数:是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

<script>
    function Person(name, age, sex) {
        this.name = name; // this.name 这里的name是对象的属性名称，等号后边的name 是要赋的值
        this.age = age;
        this.sex = sex;
        this.sayHi = function() {
        alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' +this.sex);
        }
    }
    var bigbai = new Person('大白', 100, '男');
    var smallbai = new Person('小白', 21, '男');
    console.log(bigbai.name);
</script>

---

三、内置对象

3.1 Math对象

Math.PI // 圆周率

Math.floor() // 向下取整

Math.ceil() // 向上取整

Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3

Math.abs() // 绝对值

Math.max() // 求最大值

Math.min() // 最小值

Math.random() // 随机数

随堂练习:输出1-10范围内的随机数

<script>
    Math.ceil(Math.random()*10)
</script>

3.2 Date对象

Date对象和Math对象不同，Date对象需要通过new 关键字进行创建

语法： var 对象名称 = new Date()

方法名	作用	备注
getFullYear()	获取当前年份	4位数年份
getMonth()	获取当前月份	0-11表示1-12月
getDate()	获取当前日期
getDay()	获取星期几	周日0 至周六6
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒钟
getTime()	获取时间戳	自1970年1月1日起至今的毫秒数

3.3 数组对象

var arr = []

数组名.方法()

数组对象方法

方法名	作用	说明
isArray()	判断对象是否为数组
push()	数组末尾添加一个或多个元素，修改原数组	返回新数组长度
pop()	删除数组最后一个元素，无参数，修改原数组	返回删除的元素值
shift()	删除数组的第一个元素，无参数，修改原数组	返回删除后数组的长度
unshift()	向数组开头添加一个或更多元素，修改原数组	返回新数组长度
indexOf()	数组中查找给定元素的第一个索引	存在返回索引号，不存在返回-1
lastIndexOf()	数组中查找给定元素的最后一个索引	存在返回索引号，不存在返回-1
toString()	把数组转成字符串，逗号分隔每一项	返回一个字符串
oin('分隔符')	用于把数组中的所有元素转换为一个字符串	返回一个字符串
concat()	连接两个或多个数组 不影响原数组	返回一个字符串
slice()	数组截取slice(begin,end)	返回被截取的新数组
splice	数组删除splice(第几个开始,要删除个数)	返回被删除项目的新数组，影响原数组

案例：筛选数组**

有一个包含工资的数组[1 500, 1200, 2000, 2100, 1800]要求把数组中工资超过2000的删除，剩余的放 到新数组里面

<script>
    var arr = [1500, 1200, 2000, 2100, 1800];
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < 2000) {
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);
</script>

3.4 字符串对象

方法名称	作用	备注
indexOf('要查找的字符', 开始位置)	查找某字符在原字符串中首次出现的位置	返回指定内容的位置 索引,如果找不到返 回-1
lastIndexOf	查找最后一次出现的位置	找到返回位置索引， 找不到返回-1
concat(str1,str2,str3,...)	连接两个或多个字符串，等同于+	返回拼接后的字符串
substr(start,length)	字符串截取,从start位置开始,length取的个数	返回截取后字符串
slice(start,end)	从start位置开始，截取到end位置，end取不到	返回截取的字符串
substring(start,end)	从start位置开始，截取到end位置，end 取不到,基本和slice相同,但不接受负值
replace()
split()
toUpperCase()	转为大写	返回转后的字符串
toLowerCase()	转为小写	返回转后的字符串

---

四、事件

事件的作用：为html的元素添加动作(行为)

4.1 鼠标事件

鼠标单击事件 onclick

鼠标双击事件 ondbclick

鼠标滑过事件 onmouseover

鼠标移出事件 onmouseout

鼠标穿过事件

4.2 表单事件

获得焦点(聚焦)事件 onfocus

失去焦点事件 onblur

内容改变事件 onchange

4.3 键盘事件

键盘按下事件 onkeydown

键盘弹起事件 onkeyup

键盘按压事件 onkeypress

4.4 其他事件

页面加载事件 onload

页面卸载事件 onbeforeunload