js数组的常用函数slice和splice（1月16号作业） - 作业

Home > List of blog posts > js数组的常用函数slice和splice（1月16号作业）

Blogger Information

Blog 15

fans 0

comment 1

visits 15003

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> js数组的常用函数slice和splice</title>

</head>

<body>
    <h1>数组演示</h1>
    <ul id="show">

    </ul>
    <label for="bian">分割数组前两个成为一个数组：</label>
    <button id="bian" onclick="bian()">slice(0,2)</button><br />
    <label for="bian2">把数组前两个元素删除：</label>
    <button id="bian2" onclick="bian2()">splice(0,2)</button><br/>
    <label for="bian3">在数组第二个位置加两个元素：</label>
    <button id="bian3" onclick="bian3()">splice(1,0,'玮柏','大宽面')</button>

</body>
<script>
    var arr = ['jony j', 'gai', '黄旭', 'hotdog'];
    var show = document.getElementById('show');
    arr.forEach(function (v, k) { //此处的k v和php的反过来

        var li = document.createElement("li");
        li.innerHTML = v;
        show.appendChild(li);
    })

    function bian() {
        while (show.hasChildNodes()) { //删除所有子节点

            show.removeChild(show.firstChild);

        }
        // 1、slice函数 用于从数组中截取新的数组 传入两个参数 start和end 其中start参数是必须的，end参数可以不给 不给的时候默认从start位置到最后一个元素 传入end参数则从start到end 如果end是负数 则是截取start位置到倒数第几个 此函数包含起点不包含终点
        var arr2 = arr.slice(0, 2);
        arr2.forEach(function (v, k) { //此处的k v和php的反过来

            var li = document.createElement("li");
            li.innerHTML = v;
            show.appendChild(li);

        });
    }

    function bian2() {
        while (show.hasChildNodes()) { //删除所有子节点

            show.removeChild(show.firstChild);

        }
        // 2、splice函数 是用于在原来的数组上增删的函数（会改变数组本身而不是传入一个新的数组） 传入三个参数 第一个参数index必须传入 代表从何处进行增删 第二个参数代表删除多少元素，如果是0就不删除 第三个参数可选且可以传多个 是需要插入的元素
        arr.splice(0, 2);
        arr.forEach(function (v, k) { //此处的k v和php的反过来

            var li = document.createElement("li");
            li.innerHTML = v;
            show.appendChild(li);

        });


    }

    function bian3() {
        while (show.hasChildNodes()) { //删除所有子节点

            show.removeChild(show.firstChild);

        }

        arr.splice(1,0,'玮柏','大宽面');
        arr.forEach(function (v, k) { //此处的k v和php的反过来

            var li = document.createElement("li");
            li.innerHTML = v;
            show.appendChild(li);

        });

    }
</script>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

jquery内容选择器

2019-04-05 19:14:37

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例