12月17日_JavaScript基础（数组、数组常用方法和常见事件） - 作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 12月17日_JavaScript基础（数组、数组常用方法和常见事件）

博主信息

博文 38

粉丝 1

访问量 36727

专题推荐

更多>

一、JavaScript 数组

1. 创建数组

    var arr = [1, 2, 3, 4, 5];
    var arr2 = ['join', 'tom', 'saiy'];
    console.log(arr, arr2);

2. 访问数组元素

    var arr = ['hello', 'world', 'tom'];
    console.log(arr[0]);
    console.log(arr[2]);
    console.log(arr[3]);  // 访问下标超出，则为未定义 undefined

3. 改变数组元素

    var array = ['a','b','c','d'];
    console.log(array);
    array[1] = 'bb';
    console.log(array);

4. 添加数组元素

    var arr = ['a','b','c'];
    arr[3] = 'd';
    arr[arr.length] = 'e';
    console.log(arr);

注意：添加数组时如果索引值超出数组最大索引，则会出现填空元素，数组长度为此时最大索引加1，如果添加元素时索引不为整数，JavaScript 会把数组重定义为标准对象

    var arr = [1,2,3,4];
    arr[7] = 7;
    arr['a'] = 'aa';
    console.log(arr);
    console.log(arr.length);
    console.log(typeof arr);

二、JavaScript 数组方法

1. `push()`

该方法（在数组结尾处）向数组添加一个新的元素
该方法返回新数组的长度

    var arr = ['a','b','c'];
    var l = arr.push('d');
    console.log(arr);
    console.log(l);

    var arr1 = ['apple','orange','banana'];
    var arr2 = ['tomato','strawberry','cabbage'];
    for (var i=0;i<arr2.length;i++){
        arr1.push(arr2[i]);
    }
    console.log(arr1);

2. `pop()`

该方法从数组中删除最后一个元素
该方法返回“被弹出”的值

    var arr = ['apple', 'orange', 'banana', 'tomato', 'strawberry', 'cabbage'];
    var t = arr.pop();
    console.log(t);
    console.log(arr);

3. `unshift()`

该方法（在开头）向数组添加新元素
该方法返回新数组的长度

    var arrays = ['zhangsan', 'lisi', 'wangwu'];
    var num = arrays.unshift('xiaoming');
    console.log(arrays);
    console.log(num);

4. `shift()`

该方法会删除首个数组元素
该方法返回被“位移出”的字符串

    var arr = [1,2,3,4,5];
    var t = arr.shift();
    console.log(t);
    console.log(arr);

5. `splice()`

该方法可以用于删除元素
第一个参数定义要删除元素的开始索引位置
第二个参数定义应该删除多少个元素

    var arr = ['a','b','c','d','e'];
    arr.splice(1,2);
    console.log(arr);

6. `indexOf()`

该方法用于查找元素在数组中的位置
第一个参数表示要查找的元素
第二个参数表示开始查找的位置索引
如果查找到元素则返回找到该元素第一次出现的索引，如果未找到则返回 -1

    var arr = ['a', 'b', 'c', 'd', 'b', 'e', 'f'];
    console.log(arr.indexOf('a'));
    console.log(arr.indexOf('a',2));
    console.log(arr.indexOf('b',1));
    console.log(arr.indexOf('e',3));

7. 从数组中间加元素

    function add(arr, num, str) {
        var arr2 = [];
        for (var i = 0; i < arr.length; i++) {
            if (i == num) {
                arr2.push(str);
            }
            arr2.push(arr[i]);
        }
        return arr2;
    }
    arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(add(arr, 2, 'hello'));

三、JavaScript常用事件

1. `onclick` 事件

onclick 事件会在元素被点击时发生
onclick 属性可以使用与所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

<body>
<button onclick="fun()">点击</button>
<script type="text/javascript">
    function fun() {
        alert("hello world");
    }
</script>
</body>

2. `onmouseover` 事件和 `onmouseleave` 事件

onmouseover 事件会在鼠标指针移动到指定的元素上时发生
onmouseleave 事件在鼠标移出元素时触发

<body>
<div id="mydiv" onmouseover="come()" onmouseleave="goto()">这是一段文字</div>
<script type="text/javascript">
    function come(){
        document.getElementById('mydiv').style.color = 'green';
    }
    function goto() {
        document.getElementById('mydiv').style.color = 'black';
    }
</script>
</body>

3. `onblur` 事件

<body>
    <p>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" onblur="is_email_null()" placeholder="请输入邮箱">
        <span id="email_tip" style="color: red"></span>
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" name="pwd" id="pwd" onblur="is_pwd_null()" placeholder="请输入密码">
        <span id="pwd_tip" style="color: red"></span>
    </p>
    <p>
        <button onclick="is_null()">登录</button>
    </p>
<script type="text/javascript">
    function is_email_null() {
        var email = document.getElementById("email").value;
        if (email == ''){
            document.getElementById('email_tip').innerHTML = "邮箱不能为空";
        }else{
            document.getElementById('email_tip').innerHTML = '';
        }
    }
    function is_pwd_null() {
        var pwd = document.getElementById("pwd").value;
        if (pwd == ''){
            document.getElementById('pwd_tip').innerHTML = "密码不能为空";
        }else{
            document.getElementById('pwd_tip').innerHTML = '';
        }
    }
    function is_null() {
        is_email_null();
        is_pwd_null();
        if (document.getElementById("email").value != '' && document.getElementById("pwd").value!=""){
            alert("可以登录");
        }
    }
</script>
</body>

4. `onchange` 事件

onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。

<body>
<div>
    <select id="province">
        <option value="sd">山东省</option>
        <option value="hn">河南省</option>
        <option value="hb">河北省</option>
    </select>
    <select id="city">
        <option value="jn">济南市</option>
        <option value="qd">青岛市</option>
        <option value="dy">东营市</option>
    </select>
</div>
<script type="text/javascript">
    var province = document.getElementById("province");
    province.onchange = function () {
        var options = province.getElementsByTagName("option");
        for (var i = 0; i < options.length; i++) {
            var option = options[i];
            if (option.selected) {
                var value = option.value;
                switch (value) {
                    case 'sd':
                        var city = document.getElementById("city");
                        city.innerHTML = "<option value=\"jn\">济南市</option><option value=\"qd\">青岛市</option><option value=\"dy\">东营市</option>";
                        break;
                    case 'hn':
                        var city = document.getElementById("city");
                        city.innerHTML = "<option value=\"jn\">郑州市</option><option value=\"qd\">洛阳市</option><option value=\"dy\">周口市</option>";
                        break;
                    case 'hb':
                        var city = document.getElementById("city");
                        city.innerHTML = "<option value=\"jn\">石家庄市</option><option value=\"qd\">邯郸市</option><option value=\"dy\">保定市</option>";
                        break;
                }
            }
        }
    }
</script>
</body>