前端-js数组-属性和方法02_数组属性怎么取-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53787454/article/details/124868588

文章目录

前言
一、数组方法序章

前言

前端js数组的属性方法大全，个人学习整理，有不足欢迎指点增改(≧∇≦)/，记得关注、点赞、收藏哦！(≧∇≦)/
这里附上代码，备注少，建议编辑器打开，运行看结果哟，skr

一、数组方法序章

接上回js数组属性方法之后

十一、slice()方法-返回数组中截取的指定元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //slice() 方法可从已有的数组中  返回选定的元素。  不修改原来的数组
        //如果想删除数组中的一段元素，应该使用方法 Array.splice()。
        //语法： arrayObject.slice(start,end)
        //start：必须  如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素
        //end：选填，不填就是截取到最后  如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
        //返回值： 一个新的数组，包含从[start，end（不包含））的 arrayObject 中的元素。
        var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"

        document.write(arr + "<br/>")
        document.write( "<br/>"+arr.slice(1) + "<br/>")
        let arr_1=arr.slice(1)
        document.write( "<br/>"+arr_1+ "<br/>")
        document.write( "<br/>"+arr + "<br/>")

        var arr2 = new Array(6)
        arr2[0] = "George"
        arr2[1] = "John"
        arr2[2] = "Thomas"
        arr2[3] = "James"
        arr2[4] = "Adrew"
        arr2[5] = "Martin"

        document.write( "<br/>"+arr2 + "<br/>")
        document.write( "<br/>"+arr2.slice(2, 4) + "<br/>")
        document.write( "<br/>"+arr2 + "<br/>")


    </script>
</body>

</html>

十二、splice()方法-增删改数组元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //splice() 方法向/从数组中添加/删除/改变项目，然后返回被删除的项目。
        //会改变原来数组
        //语法：  arrayObject.splice(index,howmany,item1,.....,itemX)
        //index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
        //howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
        //item1：可选。向数组添加的新项目。
        //返回值：  新数组
        var arr = new Array(6)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"
        arr[3] = "James"
        arr[4] = "Adrew"
        arr[5] = "Martin"

        document.write(arr + "<br />")
        //增加元素
        arr.splice(2, 0, '啦啦啦','哟哟哟')
        document.write(arr + "<br />")
        //删除数组元素
        arr.splice(0, 2)
        document.write(arr + "<br />")
        //修改数组元素
        arr.splice(0, 2,'但不知道','我是谁')
        document.write(arr + "<br />")

    </script>
</body>

</html>

十三、toSource()方法-表示源代码（少用）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //toSource() 方法表示对象的源代码。
        //该原始值由 Array 对象派生的所有对象继承。
        //toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
        //只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。

        function employee(name, job, born) {
            this.name = name;
            this.job = job;
            this.born = born;
        }

        var bill = new employee("Bill Gates", "Engineer", 1985);

        document.write(bill.toSource());

    </script>
</body>

</html>

十四、reverse() 方法-反转数组顺序

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //reverse() 方法用于颠倒数组中元素的顺序。
        //语法：  arrayObject.reverse()
        //该方法会改变原来的数组，而不会创建新的数组。
        var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"

        document.write(arr + "<br />")
        document.write(arr.reverse())

    </script>
</body>

</html>

十五、toString()方法-数组转换为字符串

<script>
        //toString() 方法可把数组转换为字符串，并返回结果。
        //语法： arrayObject.toString()
        //arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。
        //数组中的元素之间用逗号分隔。
        var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"

        document.write(arr.toString())

    </script>

十六、isArray()方法-判断是不是一个数组

<script>
        //isArray()判断对象是否为数组。它的用法是直接用Array类来调取的，参数是要检测的对象，返回值是布尔值。
        var a = [1, 2];
        let c={
            name:'李某某'
        }
        var b = Array.isArray(a); //返回true
        var d = Array.isArray(c); //返回false
        console.log(b);
        console.log(d);
    </script>

十七、forEach()迭代方法-遍历数组（常用）

<script>
        //forEach() 方法，为每个数组元素调用一次函数（回调函数）。
        let like = ['李某某', '吴彦祖', '彭于晏', '华晨宇', '邓紫棋'];
        like.forEach((v, i, arr) => {
            console.log(v, i, arr);
        });
    </script>

十八、map()迭代方法-遍历（超级常用）

<script>
        //map() 方法，对每个元素执行函数以创建新的数组。
        let like=['李某某','吴彦祖','彭于晏','华晨宇','邓紫棋'];
        let likes=like.map((v,i,arr) => {//返回是一个数组需要一个变量来接
            console.log(v , i , arr);
           return [v , i , arr];
        });
        // console.log(like.map()); 没有返回值，需要一个变量来接
        console.log(likes);
    </script>

十九、filter()迭代-返回满足条件的所有元素（常用）

<script>
        //filter() 方法，检测元素，并返回符合条件所有元素的数组。
        var a = [45, 3,50];
        var b = a.filter(callFunction);
        function callFunction(value, index, array) {
            return value > 10;
        }
        console.log(b);; //输出[45, 50]一个数组
    </script>

二十、every()迭代-判断是否所有满足返回布尔

<script>
        //every() 方法，检测数组元素的每个元素是否都符合条件，返回值是布尔值。
        var a = [45, 3, 50];
        var b = a.every(callFunction);
        var c = a.every(lll);
        function callFunction(value, index, array) {
            return value > 10;
        }
        function lll(value, index, array) {
            return value > 0;
        }
        console.log(b); //输出false  布尔值
        console.log(c); //输出true  布尔值
    </script>

二十一、some()迭代-是否有满足条件的返回布尔

<script>
        //some() 方法，检测数组元素中是否有元素符合指定条件，返回值是布尔值。
        var a = [45, 3, 50];
        var b = a.some(callFunction);
        var c = a.some(lll);
        function callFunction(value, index, array) {
            return value > 10;
        }
        function lll(value, index, array) {
            return value > 0;
        }
        console.log(b); //输出true  布尔值
        console.log(c); //输出true  布尔值
    </script>

二十二、find()返回第一个满足条件的

<script>
        //find() 方法，返回符合条件的第一个元素的值。
        var a = [3, 45, 50];
        var b = a.find(callFunction);
        var c = a.find(lll);
        function callFunction(value, index, array) {
            return value > 10;
        }
        function lll(value, index, array) {
            return value > 0;
        };
        console.log(b); //输出45
        console.log(c); //输出3
    </script>